diff --git a/docs/01a85c17.5007ae08.js b/docs/01a85c17.0bb633f0.js similarity index 86% rename from docs/01a85c17.5007ae08.js rename to docs/01a85c17.0bb633f0.js index 5b926d8f4b..67d0de7f1c 100644 --- a/docs/01a85c17.5007ae08.js +++ b/docs/01a85c17.0bb633f0.js @@ -1 +1 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[4],{56:function(e,a,t){"use strict";t.r(a);var n=t(0),c=t.n(n),l=t(295),r=t(293);a.default=function(e){const{tags:a}=e,t={};Object.keys(a).forEach((e=>{const a=function(e){return e[0].toUpperCase()}(e);t[a]=t[a]||[],t[a].push(e)}));const n=Object.entries(t).sort((([e],[a])=>e===a?0:e>a?1:-1)).map((([e,t])=>c.a.createElement("div",{key:e},c.a.createElement("h3",null,e),t.map((e=>c.a.createElement(r.a,{className:"padding-right--md",href:a[e].permalink,key:e},a[e].name," (",a[e].count,")"))),c.a.createElement("hr",null)))).filter((e=>null!=e));return c.a.createElement(l.a,{title:"Tags",description:"Blog Tags"},c.a.createElement("div",{className:"container margin-vert--lg"},c.a.createElement("div",{className:"row"},c.a.createElement("main",{className:"col col--8 col--offset-2"},c.a.createElement("h1",null,"Tags"),c.a.createElement("div",{className:"margin-vert--lg"},n)))))}}}]); \ No newline at end of file +(window.webpackJsonp=window.webpackJsonp||[]).push([[4],{56:function(e,a,t){"use strict";t.r(a);var n=t(0),c=t.n(n),l=t(297),r=t(295);a.default=function(e){const{tags:a}=e,t={};Object.keys(a).forEach((e=>{const a=function(e){return e[0].toUpperCase()}(e);t[a]=t[a]||[],t[a].push(e)}));const n=Object.entries(t).sort((([e],[a])=>e===a?0:e>a?1:-1)).map((([e,t])=>c.a.createElement("div",{key:e},c.a.createElement("h3",null,e),t.map((e=>c.a.createElement(r.a,{className:"padding-right--md",href:a[e].permalink,key:e},a[e].name," (",a[e].count,")"))),c.a.createElement("hr",null)))).filter((e=>null!=e));return c.a.createElement(l.a,{title:"Tags",description:"Blog Tags"},c.a.createElement("div",{className:"container margin-vert--lg"},c.a.createElement("div",{className:"row"},c.a.createElement("main",{className:"col col--8 col--offset-2"},c.a.createElement("h1",null,"Tags"),c.a.createElement("div",{className:"margin-vert--lg"},n)))))}}}]); \ No newline at end of file diff --git a/docs/08f25880.4ddb9f20.js b/docs/08f25880.4ddb9f20.js new file mode 100644 index 0000000000..bf4e733ee9 --- /dev/null +++ b/docs/08f25880.4ddb9f20.js @@ -0,0 +1 @@ +(window.webpackJsonp=window.webpackJsonp||[]).push([[5],{292:function(e,t,n){"use strict";n.d(t,"a",(function(){return s})),n.d(t,"b",(function(){return m}));var a=n(0),r=n.n(a);function o(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function c(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);t&&(a=a.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,a)}return n}function i(e){for(var t=1;t=0||(r[n]=e[n]);return r}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(a=0;a=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(r[n]=e[n])}return r}var p=r.a.createContext({}),b=function(e){var t=r.a.useContext(p),n=t;return e&&(n="function"==typeof e?e(t):i(i({},t),e)),n},s=function(e){var t=b(e.components);return r.a.createElement(p.Provider,{value:t},e.children)},u={inlineCode:"code",wrapper:function(e){var t=e.children;return r.a.createElement(r.a.Fragment,{},t)}},d=r.a.forwardRef((function(e,t){var n=e.components,a=e.mdxType,o=e.originalType,c=e.parentName,p=l(e,["components","mdxType","originalType","parentName"]),s=b(n),d=a,m=s["".concat(c,".").concat(d)]||s[d]||u[d]||o;return n?r.a.createElement(m,i(i({ref:t},p),{},{components:n})):r.a.createElement(m,i({ref:t},p))}));function m(e,t){var n=arguments,a=t&&t.mdxType;if("string"==typeof e||a){var o=n.length,c=new Array(o);c[0]=d;var i={};for(var l in t)hasOwnProperty.call(t,l)&&(i[l]=t[l]);i.originalType=e,i.mdxType="string"==typeof e?e:a,c[1]=i;for(var p=2;p str:\n time.sleep(seconds) # Blocks!\n return f'Done!'\n")),Object(o.b)("p",null,"To call the above function from an app, don't do this:"),Object(o.b)("pre",null,Object(o.b)("code",Object(a.a)({parentName:"pre"},{className:"language-python",metastring:"{4}","{4}":!0}),"@app('/demo')\nasync def serve(q: Q):\n # ...\n message = blocking_function(42)\n # ...\n")),Object(o.b)("p",null,"Instead, do this:"),Object(o.b)("pre",null,Object(o.b)("code",Object(a.a)({parentName:"pre"},{className:"language-python",metastring:"{4}","{4}":!0}),"@app('/demo')\nasync def serve(q: Q):\n # ...\n message = await q.run(blocking_function, 42)\n # ...\n")),Object(o.b)("p",null,Object(o.b)("inlineCode",{parentName:"p"},"q.run()")," runs the blocking function in the background, in-process."),Object(o.b)("p",null,"Depending on your use case, you might want to use a separate process pool or thread pool from Python's ",Object(o.b)("a",Object(a.a)({parentName:"p"},{href:"https://docs.python.org/3/library/multiprocessing.html"}),"multiprocessing")," library, like this:"),Object(o.b)("pre",null,Object(o.b)("code",Object(a.a)({parentName:"pre"},{className:"language-python",metastring:"{1,6-7}","{1,6-7}":!0}),"import concurrent.futures\n\n@app('/demo')\nasync def serve(q: Q):\n # ...\n with concurrent.futures.ThreadPoolExecutor() as pool:\n message = await q.exec(pool, blocking_function, 42)\n # ...\n")),Object(o.b)("p",null,Object(o.b)("inlineCode",{parentName:"p"},"q.exec()")," accepts a custom process pool or thread pool to run the blocking function."),Object(o.b)("h2",{id:"asgi-compatibility"},"ASGI compatibility"),Object(o.b)("p",null,"Wave apps are now ",Object(o.b)("a",Object(a.a)({parentName:"p"},{href:"https://asgi.readthedocs.io/en/latest/"}),"ASGI"),"-compatible, based on ",Object(o.b)("a",Object(a.a)({parentName:"p"},{href:"https://www.uvicorn.org"}),"Uvicorn")," / ",Object(o.b)("a",Object(a.a)({parentName:"p"},{href:"https://www.starlette.io/"}),"Starlette"),", a ",Object(o.b)("a",Object(a.a)({parentName:"p"},{href:"https://www.techempower.com/benchmarks/#section=data-r17&hw=ph&test=fortune&l=zijzen-1"}),"high-performance")," Python server."),Object(o.b)("p",null,"You can run Wave apps behind any ASGI server, like ",Object(o.b)("a",Object(a.a)({parentName:"p"},{href:"https://www.uvicorn.org"}),"uvicorn"),", ",Object(o.b)("a",Object(a.a)({parentName:"p"},{href:"https://gunicorn.org/"}),"gunicorn"),", ",Object(o.b)("a",Object(a.a)({parentName:"p"},{href:"https://github.com/django/daphne/"}),"daphne"),", ",Object(o.b)("a",Object(a.a)({parentName:"p"},{href:"https://pgjones.gitlab.io/hypercorn/"}),"hypercorn"),", etc."),Object(o.b)("p",null,"To run your app using an ASGI server like uvicorn, append ",Object(o.b)("inlineCode",{parentName:"p"},":main")," to the ",Object(o.b)("inlineCode",{parentName:"p"},"app")," argument:"),Object(o.b)("pre",null,Object(o.b)("code",Object(a.a)({parentName:"pre"},{className:"language-shell"}),"(venv) $ uvicorn foo:main\n")),Object(o.b)("h2",{id:"download"},"Download"),Object(o.b)("p",null,"Get the release ",Object(o.b)("a",Object(a.a)({parentName:"p"},{href:"https://github.com/h2oai/wave/releases/latest"}),"here"),". Check out the release notes for more details."),Object(o.b)("p",null,"We look forward to continuing our collaboration with the community and hearing your feedback as we further improve and expand the H2O Wave platform."),Object(o.b)("p",null,"We\u2019d like to thank the entire Wave team and the community for all of the contributions to this work!"))}b.isMDXComponent=!0}}]); \ No newline at end of file diff --git a/docs/0923c366.d31cd624.js b/docs/0923c366.97f55dcc.js similarity index 84% rename from docs/0923c366.d31cd624.js rename to docs/0923c366.97f55dcc.js index aca68dd588..15833968da 100644 --- a/docs/0923c366.d31cd624.js +++ b/docs/0923c366.97f55dcc.js @@ -1 +1 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[5],{290:function(e,o,t){"use strict";t.d(o,"a",(function(){return l})),t.d(o,"b",(function(){return w}));var n=t(0),a=t.n(n);function r(e,o,t){return o in e?Object.defineProperty(e,o,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[o]=t,e}function i(e,o){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);o&&(n=n.filter((function(o){return Object.getOwnPropertyDescriptor(e,o).enumerable}))),t.push.apply(t,n)}return t}function s(e){for(var o=1;o=0||(a[t]=e[t]);return a}(e,o);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(a[t]=e[t])}return a}var p=a.a.createContext({}),u=function(e){var o=a.a.useContext(p),t=o;return e&&(t="function"==typeof e?e(o):s(s({},o),e)),t},l=function(e){var o=u(e.components);return a.a.createElement(p.Provider,{value:o},e.children)},g={inlineCode:"code",wrapper:function(e){var o=e.children;return a.a.createElement(a.a.Fragment,{},o)}},m=a.a.forwardRef((function(e,o){var t=e.components,n=e.mdxType,r=e.originalType,i=e.parentName,p=c(e,["components","mdxType","originalType","parentName"]),l=u(t),m=n,w=l["".concat(i,".").concat(m)]||l[m]||g[m]||r;return t?a.a.createElement(w,s(s({ref:o},p),{},{components:t})):a.a.createElement(w,s({ref:o},p))}));function w(e,o){var t=arguments,n=o&&o.mdxType;if("string"==typeof e||n){var r=t.length,i=new Array(r);i[0]=m;var s={};for(var c in o)hasOwnProperty.call(o,c)&&(s[c]=o[c]);s.originalType=e,s.mdxType="string"==typeof e?e:n,i[1]=s;for(var p=2;p=0||(a[t]=e[t]);return a}(e,o);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(a[t]=e[t])}return a}var p=a.a.createContext({}),u=function(e){var o=a.a.useContext(p),t=o;return e&&(t="function"==typeof e?e(o):s(s({},o),e)),t},l=function(e){var o=u(e.components);return a.a.createElement(p.Provider,{value:o},e.children)},g={inlineCode:"code",wrapper:function(e){var o=e.children;return a.a.createElement(a.a.Fragment,{},o)}},m=a.a.forwardRef((function(e,o){var t=e.components,n=e.mdxType,r=e.originalType,i=e.parentName,p=c(e,["components","mdxType","originalType","parentName"]),l=u(t),m=n,w=l["".concat(i,".").concat(m)]||l[m]||g[m]||r;return t?a.a.createElement(w,s(s({ref:o},p),{},{components:t})):a.a.createElement(w,s({ref:o},p))}));function w(e,o){var t=arguments,n=o&&o.mdxType;if("string"==typeof e||n){var r=t.length,i=new Array(r);i[0]=m;var s={};for(var c in o)hasOwnProperty.call(o,c)&&(s[c]=o[c]);s.originalType=e,s.mdxType="string"==typeof e?e:n,i[1]=s;for(var p=2;p=0||(r[a]=n[a]);return r}(n,e);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(n);for(t=0;t=0||Object.prototype.propertyIsEnumerable.call(n,a)&&(r[a]=n[a])}return r}var p=r.a.createContext({}),u=function(n){var e=r.a.useContext(p),a=e;return n&&(a="function"==typeof n?n(e):o(o({},e),n)),a},s=function(n){var e=u(n.components);return r.a.createElement(p.Provider,{value:e},n.children)},d={inlineCode:"code",wrapper:function(n){var e=n.children;return r.a.createElement(r.a.Fragment,{},e)}},f=r.a.forwardRef((function(n,e){var a=n.components,t=n.mdxType,i=n.originalType,c=n.parentName,p=l(n,["components","mdxType","originalType","parentName"]),s=u(a),f=t,_=s["".concat(c,".").concat(f)]||s[f]||d[f]||i;return a?r.a.createElement(_,o(o({ref:e},p),{},{components:a})):r.a.createElement(_,o({ref:e},p))}));function _(n,e){var a=arguments,t=e&&e.mdxType;if("string"==typeof n||t){var i=a.length,c=new Array(i);c[0]=f;var o={};for(var l in e)hasOwnProperty.call(e,l)&&(o[l]=e[l]);o.originalType=n,o.mdxType="string"==typeof n?n:t,c[1]=o;for(var p=2;p 0:\n time.sleep(update_freq)\n\n for f, c in simples:\n val, pc = f.next()\n c.value = f'${val:.2f}',\n\n for f, c in simples_colored:\n cat, val, pc = f.next()\n c.data.qux = val\n c.data.quux = pc / 100\n c.plot_data[-1] = [cat, val]\n\n for f, c in lines:\n cat, val, pc = f.next()\n c.data.qux = val\n c.data.quux = pc / 100\n c.plot_data[-1] = [cat, val]\n\n for f, c in bars:\n cat, val, pc = f.next()\n c.data.qux = val\n c.data.quux = pc / 100\n c.plot_data[-1] = [cat, val]\n\n for f, c in large_lines:\n cat, val, pc = f.next()\n c.data.qux = val\n c.data.quux = pc / 100\n c.plot_data[-1] = [cat, val]\n\n for f, c in large_pcs:\n val, pc = f.next()\n c.data.foo = val\n c.data.bar = pc\n c.progress = pc\n\n for f, c in small_pcs:\n val, pc = f.next()\n c.data.foo = val\n c.data.bar = pc\n c.progress = pc\n\n for f, c in small_pbs:\n val, pc = f.next()\n c.data.foo = val\n c.data.bar = pc\n c.progress = pc\n\n for f, c in large_cards:\n val, pc = f.next()\n c.data.qux = val\n c.data.quux = pc\n\n for f, c in large_pbs:\n val, pc = f.next()\n c.data.foo = val\n c.data.bar = pc\n c.progress = pc\n\n page.save()\n\n\ncreate_dashboard(update_freq=0.25)\n")))}u.isMDXComponent=!0}}]); \ No newline at end of file +(window.webpackJsonp=window.webpackJsonp||[]).push([[7],{292:function(n,e,a){"use strict";a.d(e,"a",(function(){return s})),a.d(e,"b",(function(){return _}));var t=a(0),r=a.n(t);function i(n,e,a){return e in n?Object.defineProperty(n,e,{value:a,enumerable:!0,configurable:!0,writable:!0}):n[e]=a,n}function c(n,e){var a=Object.keys(n);if(Object.getOwnPropertySymbols){var t=Object.getOwnPropertySymbols(n);e&&(t=t.filter((function(e){return Object.getOwnPropertyDescriptor(n,e).enumerable}))),a.push.apply(a,t)}return a}function o(n){for(var e=1;e=0||(r[a]=n[a]);return r}(n,e);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(n);for(t=0;t=0||Object.prototype.propertyIsEnumerable.call(n,a)&&(r[a]=n[a])}return r}var p=r.a.createContext({}),u=function(n){var e=r.a.useContext(p),a=e;return n&&(a="function"==typeof n?n(e):o(o({},e),n)),a},s=function(n){var e=u(n.components);return r.a.createElement(p.Provider,{value:e},n.children)},d={inlineCode:"code",wrapper:function(n){var e=n.children;return r.a.createElement(r.a.Fragment,{},e)}},f=r.a.forwardRef((function(n,e){var a=n.components,t=n.mdxType,i=n.originalType,c=n.parentName,p=l(n,["components","mdxType","originalType","parentName"]),s=u(a),f=t,_=s["".concat(c,".").concat(f)]||s[f]||d[f]||i;return a?r.a.createElement(_,o(o({ref:e},p),{},{components:a})):r.a.createElement(_,o({ref:e},p))}));function _(n,e){var a=arguments,t=e&&e.mdxType;if("string"==typeof n||t){var i=a.length,c=new Array(i);c[0]=f;var o={};for(var l in e)hasOwnProperty.call(e,l)&&(o[l]=e[l]);o.originalType=n,o.mdxType="string"==typeof n?n:t,c[1]=o;for(var p=2;p 0:\n time.sleep(update_freq)\n\n for f, c in simples:\n val, pc = f.next()\n c.value = f'${val:.2f}',\n\n for f, c in simples_colored:\n cat, val, pc = f.next()\n c.data.qux = val\n c.data.quux = pc / 100\n c.plot_data[-1] = [cat, val]\n\n for f, c in lines:\n cat, val, pc = f.next()\n c.data.qux = val\n c.data.quux = pc / 100\n c.plot_data[-1] = [cat, val]\n\n for f, c in bars:\n cat, val, pc = f.next()\n c.data.qux = val\n c.data.quux = pc / 100\n c.plot_data[-1] = [cat, val]\n\n for f, c in large_lines:\n cat, val, pc = f.next()\n c.data.qux = val\n c.data.quux = pc / 100\n c.plot_data[-1] = [cat, val]\n\n for f, c in large_pcs:\n val, pc = f.next()\n c.data.foo = val\n c.data.bar = pc\n c.progress = pc\n\n for f, c in small_pcs:\n val, pc = f.next()\n c.data.foo = val\n c.data.bar = pc\n c.progress = pc\n\n for f, c in small_pbs:\n val, pc = f.next()\n c.data.foo = val\n c.data.bar = pc\n c.progress = pc\n\n for f, c in large_cards:\n val, pc = f.next()\n c.data.qux = val\n c.data.quux = pc\n\n for f, c in large_pbs:\n val, pc = f.next()\n c.data.foo = val\n c.data.bar = pc\n c.progress = pc\n\n page.save()\n\n\ncreate_dashboard(update_freq=0.25)\n")))}u.isMDXComponent=!0}}]); \ No newline at end of file diff --git a/docs/0a6c0f5b.192be162.js b/docs/0a6c0f5b.da8efe17.js similarity index 81% rename from docs/0a6c0f5b.192be162.js rename to docs/0a6c0f5b.da8efe17.js index 58ba07e7b3..3249d9e687 100644 --- a/docs/0a6c0f5b.192be162.js +++ b/docs/0a6c0f5b.da8efe17.js @@ -1 +1 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[7],{290:function(e,t,a){"use strict";a.d(t,"a",(function(){return b})),a.d(t,"b",(function(){return m}));var n=a(0),r=a.n(n);function l(e,t,a){return t in e?Object.defineProperty(e,t,{value:a,enumerable:!0,configurable:!0,writable:!0}):e[t]=a,e}function i(e,t){var a=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),a.push.apply(a,n)}return a}function o(e){for(var t=1;t=0||(r[a]=e[a]);return r}(e,t);if(Object.getOwnPropertySymbols){var l=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,a)&&(r[a]=e[a])}return r}var s=r.a.createContext({}),p=function(e){var t=r.a.useContext(s),a=t;return e&&(a="function"==typeof e?e(t):o(o({},t),e)),a},b=function(e){var t=p(e.components);return r.a.createElement(s.Provider,{value:t},e.children)},u={inlineCode:"code",wrapper:function(e){var t=e.children;return r.a.createElement(r.a.Fragment,{},t)}},d=r.a.forwardRef((function(e,t){var a=e.components,n=e.mdxType,l=e.originalType,i=e.parentName,s=c(e,["components","mdxType","originalType","parentName"]),b=p(a),d=n,m=b["".concat(i,".").concat(d)]||b[d]||u[d]||l;return a?r.a.createElement(m,o(o({ref:t},s),{},{components:a})):r.a.createElement(m,o({ref:t},s))}));function m(e,t){var a=arguments,n=t&&t.mdxType;if("string"==typeof e||n){var l=a.length,i=new Array(l);i[0]=d;var o={};for(var c in t)hasOwnProperty.call(t,c)&&(o[c]=t[c]);o.originalType=e,o.mdxType="string"==typeof e?e:n,i[1]=o;for(var s=2;s=0||(r[a]=e[a]);return r}(e,t);if(Object.getOwnPropertySymbols){var l=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,a)&&(r[a]=e[a])}return r}var s=r.a.createContext({}),p=function(e){var t=r.a.useContext(s),a=t;return e&&(a="function"==typeof e?e(t):o(o({},t),e)),a},b=function(e){var t=p(e.components);return r.a.createElement(s.Provider,{value:t},e.children)},u={inlineCode:"code",wrapper:function(e){var t=e.children;return r.a.createElement(r.a.Fragment,{},t)}},d=r.a.forwardRef((function(e,t){var a=e.components,n=e.mdxType,l=e.originalType,i=e.parentName,s=c(e,["components","mdxType","originalType","parentName"]),b=p(a),d=n,m=b["".concat(i,".").concat(d)]||b[d]||u[d]||l;return a?r.a.createElement(m,o(o({ref:t},s),{},{components:a})):r.a.createElement(m,o({ref:t},s))}));function m(e,t){var a=arguments,n=t&&t.mdxType;if("string"==typeof e||n){var l=a.length,i=new Array(l);i[0]=d;var o={};for(var c in t)hasOwnProperty.call(t,c)&&(o[c]=t[c]);o.originalType=e,o.mdxType="string"==typeof e?e:n,i[1]=o;for(var s=2;s=0||(a[r]=e[r]);return a}(e,n);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(t=0;t=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(a[r]=e[r])}return a}var c=a.a.createContext({}),p=function(e){var n=a.a.useContext(c),r=n;return e&&(r="function"==typeof e?e(n):s(s({},n),e)),r},u=function(e){var n=p(e.components);return a.a.createElement(c.Provider,{value:n},e.children)},m={inlineCode:"code",wrapper:function(e){var n=e.children;return a.a.createElement(a.a.Fragment,{},n)}},d=a.a.forwardRef((function(e,n){var r=e.components,t=e.mdxType,o=e.originalType,i=e.parentName,c=l(e,["components","mdxType","originalType","parentName"]),u=p(r),d=t,f=u["".concat(i,".").concat(d)]||u[d]||m[d]||o;return r?a.a.createElement(f,s(s({ref:n},c),{},{components:r})):a.a.createElement(f,s({ref:n},c))}));function f(e,n){var r=arguments,t=n&&n.mdxType;if("string"==typeof e||t){var o=r.length,i=new Array(o);i[0]=d;var s={};for(var l in n)hasOwnProperty.call(n,l)&&(s[l]=n[l]);s.originalType=e,s.mdxType="string"==typeof e?e:t,i[1]=s;for(var c=2;c=0||(a[r]=e[r]);return a}(e,n);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(t=0;t=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(a[r]=e[r])}return a}var c=a.a.createContext({}),p=function(e){var n=a.a.useContext(c),r=n;return e&&(r="function"==typeof e?e(n):s(s({},n),e)),r},u=function(e){var n=p(e.components);return a.a.createElement(c.Provider,{value:n},e.children)},m={inlineCode:"code",wrapper:function(e){var n=e.children;return a.a.createElement(a.a.Fragment,{},n)}},d=a.a.forwardRef((function(e,n){var r=e.components,t=e.mdxType,o=e.originalType,i=e.parentName,c=l(e,["components","mdxType","originalType","parentName"]),u=p(r),d=t,f=u["".concat(i,".").concat(d)]||u[d]||m[d]||o;return r?a.a.createElement(f,s(s({ref:n},c),{},{components:r})):a.a.createElement(f,s({ref:n},c))}));function f(e,n){var r=arguments,t=n&&n.mdxType;if("string"==typeof e||t){var o=r.length,i=new Array(o);i[0]=d;var s={};for(var l in n)hasOwnProperty.call(n,l)&&(s[l]=n[l]);s.originalType=e,s.mdxType="string"==typeof e?e:t,i[1]=s;for(var c=2;c=0||(r[a]=e[a]);return r}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,a)&&(r[a]=e[a])}return r}var b=r.a.createContext({}),p=function(e){var t=r.a.useContext(b),a=t;return e&&(a="function"==typeof e?e(t):c(c({},t),e)),a},s=function(e){var t=p(e.components);return r.a.createElement(b.Provider,{value:t},e.children)},u={inlineCode:"code",wrapper:function(e){var t=e.children;return r.a.createElement(r.a.Fragment,{},t)}},d=r.a.forwardRef((function(e,t){var a=e.components,n=e.mdxType,o=e.originalType,i=e.parentName,b=l(e,["components","mdxType","originalType","parentName"]),s=p(a),d=n,m=s["".concat(i,".").concat(d)]||s[d]||u[d]||o;return a?r.a.createElement(m,c(c({ref:t},b),{},{components:a})):r.a.createElement(m,c({ref:t},b))}));function m(e,t){var a=arguments,n=t&&t.mdxType;if("string"==typeof e||n){var o=a.length,i=new Array(o);i[0]=d;var c={};for(var l in t)hasOwnProperty.call(t,l)&&(c[l]=t[l]);c.originalType=e,c.mdxType="string"==typeof e?e:n,i[1]=c;for(var b=2;b=0||(r[a]=e[a]);return r}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,a)&&(r[a]=e[a])}return r}var b=r.a.createContext({}),p=function(e){var t=r.a.useContext(b),a=t;return e&&(a="function"==typeof e?e(t):c(c({},t),e)),a},s=function(e){var t=p(e.components);return r.a.createElement(b.Provider,{value:t},e.children)},u={inlineCode:"code",wrapper:function(e){var t=e.children;return r.a.createElement(r.a.Fragment,{},t)}},d=r.a.forwardRef((function(e,t){var a=e.components,n=e.mdxType,o=e.originalType,i=e.parentName,b=l(e,["components","mdxType","originalType","parentName"]),s=p(a),d=n,m=s["".concat(i,".").concat(d)]||s[d]||u[d]||o;return a?r.a.createElement(m,c(c({ref:t},b),{},{components:a})):r.a.createElement(m,c({ref:t},b))}));function m(e,t){var a=arguments,n=t&&t.mdxType;if("string"==typeof e||n){var o=a.length,i=new Array(o);i[0]=d;var c={};for(var l in t)hasOwnProperty.call(t,l)&&(c[l]=t[l]);c.originalType=e,c.mdxType="string"==typeof e?e:n,i[1]=c;for(var b=2;b{}});var s=n(294),f=function(t,e){var n={};for(var r in t)Object.prototype.hasOwnProperty.call(t,r)&&e.indexOf(r)<0&&(n[r]=t[r]);if(null!=t&&"function"==typeof Object.getOwnPropertySymbols){var o=0;for(r=Object.getOwnPropertySymbols(t);ot.startsWith("/"))(O=w)?b(O):O:void 0;var O;const A=Object(r.useRef)(!1),C=n?i.e:i.c,E=u.a.canUseIntersectionObserver;let S;Object(r.useEffect)((()=>(!E&&m&&window.docusaurus.prefetch(T),()=>{E&&S&&S.disconnect()})),[T,E,m]);const j=null!==(e=null==T?void 0:T.startsWith("#"))&&void 0!==e&&e,P=!T||!m||j;return T&&m&&!j&&!h&&g.collectLink(T),P?o.a.createElement("a",Object.assign({href:T},!m&&{target:"_blank",rel:"noopener noreferrer"},y)):o.a.createElement(C,Object.assign({},y,{onMouseEnter:()=>{A.current||(window.docusaurus.preload(T),A.current=!0)},innerRef:t=>{var e,n;E&&t&&m&&(e=t,n=()=>{window.docusaurus.prefetch(T)},S=new window.IntersectionObserver((t=>{t.forEach((t=>{e===t.target&&(t.isIntersecting||t.intersectionRatio>0)&&(S.unobserve(e),S.disconnect(),n())}))})),S.observe(e))},to:T||""},n&&{activeClassName:d}))}},294:function(t,e,n){"use strict";n.d(e,"b",(function(){return i})),n.d(e,"a",(function(){return a}));var r=n(291),o=n(297);function i(){const{siteConfig:{baseUrl:t="/",url:e}={}}=Object(r.a)();return{withBaseUrl:(n,r)=>function(t,e,n,{forcePrependBaseUrl:r=!1,absolute:i=!1}={}){if(!n)return n;if(n.startsWith("#"))return n;if(Object(o.b)(n))return n;if(r)return e+n;const a=n.startsWith(e)?n:e+n.replace(/^\//,"");return i?t+a:a}(e,t,n,r)}}function a(t,e={}){const{withBaseUrl:n}=i();return n(t,e)}},296:function(t,e,n){"use strict";var r=n(0),o=n.n(r),i=n(480);e.a=function(t){return o.a.createElement(i.a,Object.assign({},t))}},297:function(t,e,n){"use strict";function r(t){return!0===/^(\w*:|\/\/)/.test(t)}function o(t){return void 0!==t&&!r(t)}n.d(e,"b",(function(){return r})),n.d(e,"a",(function(){return o}))},299:function(t,e,n){"use strict";n.r(e);var r=n(13);n.d(e,"MemoryRouter",(function(){return r.d})),n.d(e,"Prompt",(function(){return r.f})),n.d(e,"Redirect",(function(){return r.g})),n.d(e,"Route",(function(){return r.h})),n.d(e,"Router",(function(){return r.i})),n.d(e,"StaticRouter",(function(){return r.j})),n.d(e,"Switch",(function(){return r.k})),n.d(e,"generatePath",(function(){return r.l})),n.d(e,"matchPath",(function(){return r.m})),n.d(e,"useHistory",(function(){return r.n})),n.d(e,"useLocation",(function(){return r.o})),n.d(e,"useParams",(function(){return r.p})),n.d(e,"useRouteMatch",(function(){return r.q})),n.d(e,"withRouter",(function(){return r.r})),n.d(e,"BrowserRouter",(function(){return r.a})),n.d(e,"HashRouter",(function(){return r.b})),n.d(e,"Link",(function(){return r.c})),n.d(e,"NavLink",(function(){return r.e}))},300:function(t,e,n){try{t.exports=n(489)}catch(r){t.exports={}}},480:function(t,e,n){"use strict";(function(t){n.d(e,"a",(function(){return bt}));var r,o,i,a,u=n(7),c=n.n(u),s=n(481),f=n.n(s),l=n(482),p=n.n(l),d=n(0),h=n.n(d),y=n(20),b=n.n(y),g="bodyAttributes",v="htmlAttributes",m="titleAttributes",w={BASE:"base",BODY:"body",HEAD:"head",HTML:"html",LINK:"link",META:"meta",NOSCRIPT:"noscript",SCRIPT:"script",STYLE:"style",TITLE:"title"},T=(Object.keys(w).map((function(t){return w[t]})),"charset"),O="cssText",A="href",C="http-equiv",E="innerHTML",S="itemprop",j="name",P="property",L="rel",k="src",x="target",I={accesskey:"accessKey",charset:"charSet",class:"className",contenteditable:"contentEditable",contextmenu:"contextMenu","http-equiv":"httpEquiv",itemprop:"itemProp",tabindex:"tabIndex"},D="defaultTitle",R="defer",M="encodeSpecialCharacters",N="onChangeClientState",V="titleTemplate",_=Object.keys(I).reduce((function(t,e){return t[I[e]]=e,t}),{}),B=[w.NOSCRIPT,w.SCRIPT,w.STYLE],H="data-react-helmet",U="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t},q=function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")},Y=function(){function t(t,e){for(var n=0;n=0||Object.prototype.hasOwnProperty.call(t,r)&&(n[r]=t[r]);return n},z=function(t,e){if(!t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!e||"object"!=typeof e&&"function"!=typeof e?t:e},K=function(t){var e=!(arguments.length>1&&void 0!==arguments[1])||arguments[1];return!1===e?String(t):String(t).replace(/&/g,"&").replace(//g,">").replace(/"/g,""").replace(/'/g,"'")},$=function(t){var e=Z(t,w.TITLE),n=Z(t,V);if(n&&e)return n.replace(/%s/g,(function(){return Array.isArray(e)?e.join(""):e}));var r=Z(t,D);return e||r||void 0},J=function(t){return Z(t,N)||function(){}},G=function(t,e){return e.filter((function(e){return void 0!==e[t]})).map((function(e){return e[t]})).reduce((function(t,e){return F({},t,e)}),{})},Q=function(t,e){return e.filter((function(t){return void 0!==t[w.BASE]})).map((function(t){return t[w.BASE]})).reverse().reduce((function(e,n){if(!e.length)for(var r=Object.keys(n),o=0;o=0;n--){var r=t[n];if(r.hasOwnProperty(e))return r[e]}return null},tt=(r=Date.now(),function(t){var e=Date.now();e-r>16?(r=e,t(e)):setTimeout((function(){tt(t)}),0)}),et=function(t){return clearTimeout(t)},nt="undefined"!=typeof window?window.requestAnimationFrame&&window.requestAnimationFrame.bind(window)||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||tt:t.requestAnimationFrame||tt,rt="undefined"!=typeof window?window.cancelAnimationFrame||window.webkitCancelAnimationFrame||window.mozCancelAnimationFrame||et:t.cancelAnimationFrame||et,ot=function(t){return console&&"function"==typeof console.warn&&console.warn(t)},it=null,at=function(t,e){var n=t.baseTag,r=t.bodyAttributes,o=t.htmlAttributes,i=t.linkTags,a=t.metaTags,u=t.noscriptTags,c=t.onChangeClientState,s=t.scriptTags,f=t.styleTags,l=t.title,p=t.titleAttributes;st(w.BODY,r),st(w.HTML,o),ct(l,p);var d={baseTag:ft(w.BASE,n),linkTags:ft(w.LINK,i),metaTags:ft(w.META,a),noscriptTags:ft(w.NOSCRIPT,u),scriptTags:ft(w.SCRIPT,s),styleTags:ft(w.STYLE,f)},h={},y={};Object.keys(d).forEach((function(t){var e=d[t],n=e.newTags,r=e.oldTags;n.length&&(h[t]=n),r.length&&(y[t]=d[t].oldTags)})),e&&e(),c(t,h,y)},ut=function(t){return Array.isArray(t)?t.join(""):t},ct=function(t,e){void 0!==t&&document.title!==t&&(document.title=ut(t)),st(w.TITLE,e)},st=function(t,e){var n=document.getElementsByTagName(t)[0];if(n){for(var r=n.getAttribute(H),o=r?r.split(","):[],i=[].concat(o),a=Object.keys(e),u=0;u=0;l--)n.removeAttribute(i[l]);o.length===i.length?n.removeAttribute(H):n.getAttribute(H)!==a.join(",")&&n.setAttribute(H,a.join(","))}},ft=function(t,e){var n=document.head||document.querySelector(w.HEAD),r=n.querySelectorAll(t+"["+"data-react-helmet]"),o=Array.prototype.slice.call(r),i=[],a=void 0;return e&&e.length&&e.forEach((function(e){var n=document.createElement(t);for(var r in e)if(e.hasOwnProperty(r))if(r===E)n.innerHTML=e.innerHTML;else if(r===O)n.styleSheet?n.styleSheet.cssText=e.cssText:n.appendChild(document.createTextNode(e.cssText));else{var u=void 0===e[r]?"":e[r];n.setAttribute(r,u)}n.setAttribute(H,"true"),o.some((function(t,e){return a=e,n.isEqualNode(t)}))?o.splice(a,1):i.push(n)})),o.forEach((function(t){return t.parentNode.removeChild(t)})),i.forEach((function(t){return n.appendChild(t)})),{oldTags:o,newTags:i}},lt=function(t){return Object.keys(t).reduce((function(e,n){var r=void 0!==t[n]?n+'="'+t[n]+'"':""+n;return e?e+" "+r:r}),"")},pt=function(t){var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};return Object.keys(t).reduce((function(e,n){return e[I[n]||n]=t[n],e}),e)},dt=function(t,e,n){switch(t){case w.TITLE:return{toComponent:function(){return t=e.title,n=e.titleAttributes,(r={key:t})[H]=!0,o=pt(n,r),[h.a.createElement(w.TITLE,o,t)];var t,n,r,o},toString:function(){return function(t,e,n,r){var o=lt(n),i=ut(e);return o?"<"+t+' data-react-helmet="true" '+o+">"+K(i,r)+"":"<"+t+' data-react-helmet="true">'+K(i,r)+""}(t,e.title,e.titleAttributes,n)}};case g:case v:return{toComponent:function(){return pt(e)},toString:function(){return lt(e)}};default:return{toComponent:function(){return function(t,e){return e.map((function(e,n){var r,o=((r={key:n})[H]=!0,r);return Object.keys(e).forEach((function(t){var n=I[t]||t;if(n===E||n===O){var r=e.innerHTML||e.cssText;o.dangerouslySetInnerHTML={__html:r}}else o[n]=e[t]})),h.a.createElement(t,o)}))}(t,e)},toString:function(){return function(t,e,n){return e.reduce((function(e,r){var o=Object.keys(r).filter((function(t){return!(t===E||t===O)})).reduce((function(t,e){var o=void 0===r[e]?e:e+'="'+K(r[e],n)+'"';return t?t+" "+o:o}),""),i=r.innerHTML||r.cssText||"",a=-1===B.indexOf(t);return e+"<"+t+' data-react-helmet="true" '+o+(a?"/>":">"+i+"")}),"")}(t,e,n)}}}},ht=function(t){var e=t.baseTag,n=t.bodyAttributes,r=t.encode,o=t.htmlAttributes,i=t.linkTags,a=t.metaTags,u=t.noscriptTags,c=t.scriptTags,s=t.styleTags,f=t.title,l=void 0===f?"":f,p=t.titleAttributes;return{base:dt(w.BASE,e,r),bodyAttributes:dt(g,n,r),htmlAttributes:dt(v,o,r),link:dt(w.LINK,i,r),meta:dt(w.META,a,r),noscript:dt(w.NOSCRIPT,u,r),script:dt(w.SCRIPT,c,r),style:dt(w.STYLE,s,r),title:dt(w.TITLE,{title:l,titleAttributes:p},r)}},yt=f()((function(t){return{baseTag:Q([A,x],t),bodyAttributes:G(g,t),defer:Z(t,R),encode:Z(t,M),htmlAttributes:G(v,t),linkTags:X(w.LINK,[L,A],t),metaTags:X(w.META,[j,T,C,P,S],t),noscriptTags:X(w.NOSCRIPT,[E],t),onChangeClientState:J(t),scriptTags:X(w.SCRIPT,[k,E],t),styleTags:X(w.STYLE,[O],t),title:$(t),titleAttributes:G(m,t)}}),(function(t){it&&rt(it),t.defer?it=nt((function(){at(t,(function(){it=null}))})):(at(t),it=null)}),ht)((function(){return null})),bt=(o=yt,a=i=function(t){function e(){return q(this,e),z(this,t.apply(this,arguments))}return function(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function, not "+typeof e);t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,enumerable:!1,writable:!0,configurable:!0}}),e&&(Object.setPrototypeOf?Object.setPrototypeOf(t,e):t.__proto__=e)}(e,t),e.prototype.shouldComponentUpdate=function(t){return!p()(this.props,t)},e.prototype.mapNestedChildrenToProps=function(t,e){if(!e)return null;switch(t.type){case w.SCRIPT:case w.NOSCRIPT:return{innerHTML:e};case w.STYLE:return{cssText:e}}throw new Error("<"+t.type+" /> elements are self-closing and can not contain children. Refer to our API for more information.")},e.prototype.flattenArrayTypeChildren=function(t){var e,n=t.child,r=t.arrayTypeChildren,o=t.newChildProps,i=t.nestedChildren;return F({},r,((e={})[n.type]=[].concat(r[n.type]||[],[F({},o,this.mapNestedChildrenToProps(n,i))]),e))},e.prototype.mapObjectTypeChildren=function(t){var e,n,r=t.child,o=t.newProps,i=t.newChildProps,a=t.nestedChildren;switch(r.type){case w.TITLE:return F({},o,((e={})[r.type]=a,e.titleAttributes=F({},i),e));case w.BODY:return F({},o,{bodyAttributes:F({},i)});case w.HTML:return F({},o,{htmlAttributes:F({},i)})}return F({},o,((n={})[r.type]=F({},i),n))},e.prototype.mapArrayTypeChildrenToProps=function(t,e){var n=F({},e);return Object.keys(t).forEach((function(e){var r;n=F({},n,((r={})[e]=t[e],r))})),n},e.prototype.warnOnInvalidChildren=function(t,e){return!0},e.prototype.mapChildrenToProps=function(t,e){var n=this,r={};return h.a.Children.forEach(t,(function(t){if(t&&t.props){var o=t.props,i=o.children,a=function(t){var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};return Object.keys(t).reduce((function(e,n){return e[_[n]||n]=t[n],e}),e)}(W(o,["children"]));switch(n.warnOnInvalidChildren(t,i),t.type){case w.LINK:case w.META:case w.NOSCRIPT:case w.SCRIPT:case w.STYLE:r=n.flattenArrayTypeChildren({child:t,arrayTypeChildren:r,newChildProps:a,nestedChildren:i});break;default:e=n.mapObjectTypeChildren({child:t,newProps:e,newChildProps:a,nestedChildren:i})}}})),e=this.mapArrayTypeChildrenToProps(r,e)},e.prototype.render=function(){var t=this.props,e=t.children,n=W(t,["children"]),r=F({},n);return e&&(r=this.mapChildrenToProps(e,r)),h.a.createElement(o,r)},Y(e,null,[{key:"canUseDOM",set:function(t){o.canUseDOM=t}}]),e}(h.a.Component),i.propTypes={base:c.a.object,bodyAttributes:c.a.object,children:c.a.oneOfType([c.a.arrayOf(c.a.node),c.a.node]),defaultTitle:c.a.string,defer:c.a.bool,encodeSpecialCharacters:c.a.bool,htmlAttributes:c.a.object,link:c.a.arrayOf(c.a.object),meta:c.a.arrayOf(c.a.object),noscript:c.a.arrayOf(c.a.object),onChangeClientState:c.a.func,script:c.a.arrayOf(c.a.object),style:c.a.arrayOf(c.a.object),title:c.a.string,titleAttributes:c.a.object,titleTemplate:c.a.string},i.defaultProps={defer:!0,encodeSpecialCharacters:!0},i.peek=o.peek,i.rewind=function(){var t=o.rewind();return t||(t=ht({baseTag:[],bodyAttributes:{},encodeSpecialCharacters:!0,htmlAttributes:{},linkTags:[],metaTags:[],noscriptTags:[],scriptTags:[],styleTags:[],title:"",titleAttributes:{}})),t},a);bt.renderStatic=bt.rewind}).call(this,n(28))},481:function(t,e,n){"use strict";var r,o=n(0),i=(r=o)&&"object"==typeof r&&"default"in r?r.default:r;function a(t,e,n){return e in t?Object.defineProperty(t,e,{value:n,enumerable:!0,configurable:!0,writable:!0}):t[e]=n,t}var u=!("undefined"==typeof window||!window.document||!window.document.createElement);t.exports=function(t,e,n){if("function"!=typeof t)throw new Error("Expected reducePropsToState to be a function.");if("function"!=typeof e)throw new Error("Expected handleStateChangeOnClient to be a function.");if(void 0!==n&&"function"!=typeof n)throw new Error("Expected mapStateOnServer to either be undefined or a function.");return function(r){if("function"!=typeof r)throw new Error("Expected WrappedComponent to be a React component.");var c,s=[];function f(){c=t(s.map((function(t){return t.props}))),l.canUseDOM?e(c):n&&(c=n(c))}var l=function(t){var e,n;function o(){return t.apply(this,arguments)||this}n=t,(e=o).prototype=Object.create(n.prototype),e.prototype.constructor=e,e.__proto__=n,o.peek=function(){return c},o.rewind=function(){if(o.canUseDOM)throw new Error("You may only call rewind() on the server. Call peek() to read the current state.");var t=c;return c=void 0,s=[],t};var a=o.prototype;return a.UNSAFE_componentWillMount=function(){s.push(this),f()},a.componentDidUpdate=function(){f()},a.componentWillUnmount=function(){var t=s.indexOf(this);s.splice(t,1),f()},a.render=function(){return i.createElement(r,this.props)},o}(o.PureComponent);return a(l,"displayName","SideEffect("+function(t){return t.displayName||t.name||"Component"}(r)+")"),a(l,"canUseDOM",u),l}}},482:function(t,e){var n="undefined"!=typeof Element,r="function"==typeof Map,o="function"==typeof Set,i="function"==typeof ArrayBuffer&&!!ArrayBuffer.isView;function a(t,e){if(t===e)return!0;if(t&&e&&"object"==typeof t&&"object"==typeof e){if(t.constructor!==e.constructor)return!1;var u,c,s,f;if(Array.isArray(t)){if((u=t.length)!=e.length)return!1;for(c=u;0!=c--;)if(!a(t[c],e[c]))return!1;return!0}if(r&&t instanceof Map&&e instanceof Map){if(t.size!==e.size)return!1;for(f=t.entries();!(c=f.next()).done;)if(!e.has(c.value[0]))return!1;for(f=t.entries();!(c=f.next()).done;)if(!a(c.value[1],e.get(c.value[0])))return!1;return!0}if(o&&t instanceof Set&&e instanceof Set){if(t.size!==e.size)return!1;for(f=t.entries();!(c=f.next()).done;)if(!e.has(c.value[0]))return!1;return!0}if(i&&ArrayBuffer.isView(t)&&ArrayBuffer.isView(e)){if((u=t.length)!=e.length)return!1;for(c=u;0!=c--;)if(t[c]!==e[c])return!1;return!0}if(t.constructor===RegExp)return t.source===e.source&&t.flags===e.flags;if(t.valueOf!==Object.prototype.valueOf)return t.valueOf()===e.valueOf();if(t.toString!==Object.prototype.toString)return t.toString()===e.toString();if((u=(s=Object.keys(t)).length)!==Object.keys(e).length)return!1;for(c=u;0!=c--;)if(!Object.prototype.hasOwnProperty.call(e,s[c]))return!1;if(n&&t instanceof Element)return!1;for(c=u;0!=c--;)if(("_owner"!==s[c]&&"__v"!==s[c]&&"__o"!==s[c]||!t.$$typeof)&&!a(t[s[c]],e[s[c]]))return!1;return!0}return t!=t&&e!=e}t.exports=function(t,e){try{return a(t,e)}catch(n){if((n.message||"").match(/stack|recursion/i))return console.warn("react-fast-compare cannot handle circular refs"),!1;throw n}}},489:function(t,e,n){"use strict";Object.defineProperty(e,"__esModule",{value:!0}),e.useDocVersionSuggestions=e.useActiveDocContext=e.useActiveVersion=e.useLatestVersion=e.useVersions=e.useActivePlugin=void 0;const r=n(299),o=n(490),i=n(491),a=t=>o.usePluginData("docusaurus-plugin-content-docs",t);e.useActivePlugin=(t={})=>{const e=o.useAllPluginInstancesData("docusaurus-plugin-content-docs"),{pathname:n}=r.useLocation();return i.getActivePlugin(e,n,t)},e.useVersions=t=>a(t).versions,e.useLatestVersion=t=>{const e=a(t);return i.getLatestVersion(e)},e.useActiveVersion=t=>{const e=a(t),{pathname:n}=r.useLocation();return i.getActiveVersion(e,n)},e.useActiveDocContext=t=>{const e=a(t),{pathname:n}=r.useLocation();return i.getActiveDocContext(e,n)},e.useDocVersionSuggestions=t=>{const e=a(t),{pathname:n}=r.useLocation();return i.getDocVersionSuggestions(e,n)}},490:function(t,e,n){"use strict";n.r(e),n.d(e,"default",(function(){return o})),n.d(e,"useAllPluginInstancesData",(function(){return i})),n.d(e,"usePluginData",(function(){return a}));var r=n(291);function o(){const{globalData:t}=Object(r.a)();if(!t)throw new Error("Docusaurus global data not found");return t}function i(t){const e=o()[t];if(!e)throw new Error("Docusaurus plugin global data not found for pluginName="+t);return e}function a(t,e="default"){const n=i(t)[e];if(!n)throw new Error(`Docusaurus plugin global data not found for pluginName=${t} and pluginId=${e}`);return n}},491:function(t,e,n){"use strict";Object.defineProperty(e,"__esModule",{value:!0}),e.getDocVersionSuggestions=e.getActiveDocContext=e.getActiveVersion=e.getLatestVersion=e.getActivePlugin=void 0;const r=n(299);e.getActivePlugin=function(t,e,n={}){const o=Object.entries(t).find((([t,n])=>!!r.matchPath(e,{path:n.path,exact:!1,strict:!1}))),i=o?{pluginId:o[0],pluginData:o[1]}:void 0;if(!i&&n.failfast)throw new Error(`Can't find active docs plugin for pathname=${e}, while it was expected to be found. Maybe you tried to use a docs feature that can only be used on a docs-related page? Existing docs plugin paths are: ${Object.values(t).map((t=>t.path)).join(", ")}`);return i},e.getLatestVersion=t=>t.versions.find((t=>t.isLast)),e.getActiveVersion=(t,n)=>{const o=e.getLatestVersion(t);return[...t.versions.filter((t=>t!==o)),o].find((t=>!!r.matchPath(n,{path:t.path,exact:!1,strict:!1})))},e.getActiveDocContext=(t,n)=>{const o=e.getActiveVersion(t,n),i=null==o?void 0:o.docs.find((t=>!!r.matchPath(n,{path:t.path,exact:!0,strict:!1})));return{activeVersion:o,activeDoc:i,alternateDocVersions:i?function(e){const n={};return t.versions.forEach((t=>{t.docs.forEach((r=>{r.id===e&&(n[t.name]=r)}))})),n}(i.id):{}}},e.getDocVersionSuggestions=(t,n)=>{const r=e.getLatestVersion(t),o=e.getActiveDocContext(t,n),i=o.activeVersion!==r;return{latestDocSuggestion:i?null==o?void 0:o.alternateDocVersions[r.name]:void 0,latestVersionSuggestion:i?r:void 0}}}}]); \ No newline at end of file +(window.webpackJsonp=window.webpackJsonp||[]).push([[1],{293:function(t,e,n){"use strict";var r=n(0),o=n(23);e.a=function(){const t=Object(r.useContext)(o.a);if(null===t)throw new Error("Docusaurus context not provided");return t}},294:function(t,e,n){"use strict";function r(t){var e,n,o="";if("string"==typeof t||"number"==typeof t)o+=t;else if("object"==typeof t)if(Array.isArray(t))for(e=0;e{}});var s=n(296),f=function(t,e){var n={};for(var r in t)Object.prototype.hasOwnProperty.call(t,r)&&e.indexOf(r)<0&&(n[r]=t[r]);if(null!=t&&"function"==typeof Object.getOwnPropertySymbols){var o=0;for(r=Object.getOwnPropertySymbols(t);ot.startsWith("/"))(O=w)?b(O):O:void 0;var O;const A=Object(r.useRef)(!1),C=n?i.e:i.c,E=u.a.canUseIntersectionObserver;let S;Object(r.useEffect)((()=>(!E&&m&&window.docusaurus.prefetch(T),()=>{E&&S&&S.disconnect()})),[T,E,m]);const j=null!==(e=null==T?void 0:T.startsWith("#"))&&void 0!==e&&e,P=!T||!m||j;return T&&m&&!j&&!h&&g.collectLink(T),P?o.a.createElement("a",Object.assign({href:T},!m&&{target:"_blank",rel:"noopener noreferrer"},y)):o.a.createElement(C,Object.assign({},y,{onMouseEnter:()=>{A.current||(window.docusaurus.preload(T),A.current=!0)},innerRef:t=>{var e,n;E&&t&&m&&(e=t,n=()=>{window.docusaurus.prefetch(T)},S=new window.IntersectionObserver((t=>{t.forEach((t=>{e===t.target&&(t.isIntersecting||t.intersectionRatio>0)&&(S.unobserve(e),S.disconnect(),n())}))})),S.observe(e))},to:T||""},n&&{activeClassName:d}))}},296:function(t,e,n){"use strict";n.d(e,"b",(function(){return i})),n.d(e,"a",(function(){return a}));var r=n(293),o=n(299);function i(){const{siteConfig:{baseUrl:t="/",url:e}={}}=Object(r.a)();return{withBaseUrl:(n,r)=>function(t,e,n,{forcePrependBaseUrl:r=!1,absolute:i=!1}={}){if(!n)return n;if(n.startsWith("#"))return n;if(Object(o.b)(n))return n;if(r)return e+n;const a=n.startsWith(e)?n:e+n.replace(/^\//,"");return i?t+a:a}(e,t,n,r)}}function a(t,e={}){const{withBaseUrl:n}=i();return n(t,e)}},298:function(t,e,n){"use strict";var r=n(0),o=n.n(r),i=n(486);e.a=function(t){return o.a.createElement(i.a,Object.assign({},t))}},299:function(t,e,n){"use strict";function r(t){return!0===/^(\w*:|\/\/)/.test(t)}function o(t){return void 0!==t&&!r(t)}n.d(e,"b",(function(){return r})),n.d(e,"a",(function(){return o}))},301:function(t,e,n){"use strict";n.r(e);var r=n(13);n.d(e,"MemoryRouter",(function(){return r.d})),n.d(e,"Prompt",(function(){return r.f})),n.d(e,"Redirect",(function(){return r.g})),n.d(e,"Route",(function(){return r.h})),n.d(e,"Router",(function(){return r.i})),n.d(e,"StaticRouter",(function(){return r.j})),n.d(e,"Switch",(function(){return r.k})),n.d(e,"generatePath",(function(){return r.l})),n.d(e,"matchPath",(function(){return r.m})),n.d(e,"useHistory",(function(){return r.n})),n.d(e,"useLocation",(function(){return r.o})),n.d(e,"useParams",(function(){return r.p})),n.d(e,"useRouteMatch",(function(){return r.q})),n.d(e,"withRouter",(function(){return r.r})),n.d(e,"BrowserRouter",(function(){return r.a})),n.d(e,"HashRouter",(function(){return r.b})),n.d(e,"Link",(function(){return r.c})),n.d(e,"NavLink",(function(){return r.e}))},302:function(t,e,n){try{t.exports=n(495)}catch(r){t.exports={}}},486:function(t,e,n){"use strict";(function(t){n.d(e,"a",(function(){return bt}));var r,o,i,a,u=n(7),c=n.n(u),s=n(487),f=n.n(s),l=n(488),p=n.n(l),d=n(0),h=n.n(d),y=n(20),b=n.n(y),g="bodyAttributes",v="htmlAttributes",m="titleAttributes",w={BASE:"base",BODY:"body",HEAD:"head",HTML:"html",LINK:"link",META:"meta",NOSCRIPT:"noscript",SCRIPT:"script",STYLE:"style",TITLE:"title"},T=(Object.keys(w).map((function(t){return w[t]})),"charset"),O="cssText",A="href",C="http-equiv",E="innerHTML",S="itemprop",j="name",P="property",L="rel",k="src",x="target",I={accesskey:"accessKey",charset:"charSet",class:"className",contenteditable:"contentEditable",contextmenu:"contextMenu","http-equiv":"httpEquiv",itemprop:"itemProp",tabindex:"tabIndex"},D="defaultTitle",R="defer",M="encodeSpecialCharacters",N="onChangeClientState",V="titleTemplate",_=Object.keys(I).reduce((function(t,e){return t[I[e]]=e,t}),{}),B=[w.NOSCRIPT,w.SCRIPT,w.STYLE],H="data-react-helmet",U="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t},q=function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")},Y=function(){function t(t,e){for(var n=0;n=0||Object.prototype.hasOwnProperty.call(t,r)&&(n[r]=t[r]);return n},z=function(t,e){if(!t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!e||"object"!=typeof e&&"function"!=typeof e?t:e},K=function(t){var e=!(arguments.length>1&&void 0!==arguments[1])||arguments[1];return!1===e?String(t):String(t).replace(/&/g,"&").replace(//g,">").replace(/"/g,""").replace(/'/g,"'")},$=function(t){var e=Z(t,w.TITLE),n=Z(t,V);if(n&&e)return n.replace(/%s/g,(function(){return Array.isArray(e)?e.join(""):e}));var r=Z(t,D);return e||r||void 0},J=function(t){return Z(t,N)||function(){}},G=function(t,e){return e.filter((function(e){return void 0!==e[t]})).map((function(e){return e[t]})).reduce((function(t,e){return F({},t,e)}),{})},Q=function(t,e){return e.filter((function(t){return void 0!==t[w.BASE]})).map((function(t){return t[w.BASE]})).reverse().reduce((function(e,n){if(!e.length)for(var r=Object.keys(n),o=0;o=0;n--){var r=t[n];if(r.hasOwnProperty(e))return r[e]}return null},tt=(r=Date.now(),function(t){var e=Date.now();e-r>16?(r=e,t(e)):setTimeout((function(){tt(t)}),0)}),et=function(t){return clearTimeout(t)},nt="undefined"!=typeof window?window.requestAnimationFrame&&window.requestAnimationFrame.bind(window)||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||tt:t.requestAnimationFrame||tt,rt="undefined"!=typeof window?window.cancelAnimationFrame||window.webkitCancelAnimationFrame||window.mozCancelAnimationFrame||et:t.cancelAnimationFrame||et,ot=function(t){return console&&"function"==typeof console.warn&&console.warn(t)},it=null,at=function(t,e){var n=t.baseTag,r=t.bodyAttributes,o=t.htmlAttributes,i=t.linkTags,a=t.metaTags,u=t.noscriptTags,c=t.onChangeClientState,s=t.scriptTags,f=t.styleTags,l=t.title,p=t.titleAttributes;st(w.BODY,r),st(w.HTML,o),ct(l,p);var d={baseTag:ft(w.BASE,n),linkTags:ft(w.LINK,i),metaTags:ft(w.META,a),noscriptTags:ft(w.NOSCRIPT,u),scriptTags:ft(w.SCRIPT,s),styleTags:ft(w.STYLE,f)},h={},y={};Object.keys(d).forEach((function(t){var e=d[t],n=e.newTags,r=e.oldTags;n.length&&(h[t]=n),r.length&&(y[t]=d[t].oldTags)})),e&&e(),c(t,h,y)},ut=function(t){return Array.isArray(t)?t.join(""):t},ct=function(t,e){void 0!==t&&document.title!==t&&(document.title=ut(t)),st(w.TITLE,e)},st=function(t,e){var n=document.getElementsByTagName(t)[0];if(n){for(var r=n.getAttribute(H),o=r?r.split(","):[],i=[].concat(o),a=Object.keys(e),u=0;u=0;l--)n.removeAttribute(i[l]);o.length===i.length?n.removeAttribute(H):n.getAttribute(H)!==a.join(",")&&n.setAttribute(H,a.join(","))}},ft=function(t,e){var n=document.head||document.querySelector(w.HEAD),r=n.querySelectorAll(t+"["+"data-react-helmet]"),o=Array.prototype.slice.call(r),i=[],a=void 0;return e&&e.length&&e.forEach((function(e){var n=document.createElement(t);for(var r in e)if(e.hasOwnProperty(r))if(r===E)n.innerHTML=e.innerHTML;else if(r===O)n.styleSheet?n.styleSheet.cssText=e.cssText:n.appendChild(document.createTextNode(e.cssText));else{var u=void 0===e[r]?"":e[r];n.setAttribute(r,u)}n.setAttribute(H,"true"),o.some((function(t,e){return a=e,n.isEqualNode(t)}))?o.splice(a,1):i.push(n)})),o.forEach((function(t){return t.parentNode.removeChild(t)})),i.forEach((function(t){return n.appendChild(t)})),{oldTags:o,newTags:i}},lt=function(t){return Object.keys(t).reduce((function(e,n){var r=void 0!==t[n]?n+'="'+t[n]+'"':""+n;return e?e+" "+r:r}),"")},pt=function(t){var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};return Object.keys(t).reduce((function(e,n){return e[I[n]||n]=t[n],e}),e)},dt=function(t,e,n){switch(t){case w.TITLE:return{toComponent:function(){return t=e.title,n=e.titleAttributes,(r={key:t})[H]=!0,o=pt(n,r),[h.a.createElement(w.TITLE,o,t)];var t,n,r,o},toString:function(){return function(t,e,n,r){var o=lt(n),i=ut(e);return o?"<"+t+' data-react-helmet="true" '+o+">"+K(i,r)+"":"<"+t+' data-react-helmet="true">'+K(i,r)+""}(t,e.title,e.titleAttributes,n)}};case g:case v:return{toComponent:function(){return pt(e)},toString:function(){return lt(e)}};default:return{toComponent:function(){return function(t,e){return e.map((function(e,n){var r,o=((r={key:n})[H]=!0,r);return Object.keys(e).forEach((function(t){var n=I[t]||t;if(n===E||n===O){var r=e.innerHTML||e.cssText;o.dangerouslySetInnerHTML={__html:r}}else o[n]=e[t]})),h.a.createElement(t,o)}))}(t,e)},toString:function(){return function(t,e,n){return e.reduce((function(e,r){var o=Object.keys(r).filter((function(t){return!(t===E||t===O)})).reduce((function(t,e){var o=void 0===r[e]?e:e+'="'+K(r[e],n)+'"';return t?t+" "+o:o}),""),i=r.innerHTML||r.cssText||"",a=-1===B.indexOf(t);return e+"<"+t+' data-react-helmet="true" '+o+(a?"/>":">"+i+"")}),"")}(t,e,n)}}}},ht=function(t){var e=t.baseTag,n=t.bodyAttributes,r=t.encode,o=t.htmlAttributes,i=t.linkTags,a=t.metaTags,u=t.noscriptTags,c=t.scriptTags,s=t.styleTags,f=t.title,l=void 0===f?"":f,p=t.titleAttributes;return{base:dt(w.BASE,e,r),bodyAttributes:dt(g,n,r),htmlAttributes:dt(v,o,r),link:dt(w.LINK,i,r),meta:dt(w.META,a,r),noscript:dt(w.NOSCRIPT,u,r),script:dt(w.SCRIPT,c,r),style:dt(w.STYLE,s,r),title:dt(w.TITLE,{title:l,titleAttributes:p},r)}},yt=f()((function(t){return{baseTag:Q([A,x],t),bodyAttributes:G(g,t),defer:Z(t,R),encode:Z(t,M),htmlAttributes:G(v,t),linkTags:X(w.LINK,[L,A],t),metaTags:X(w.META,[j,T,C,P,S],t),noscriptTags:X(w.NOSCRIPT,[E],t),onChangeClientState:J(t),scriptTags:X(w.SCRIPT,[k,E],t),styleTags:X(w.STYLE,[O],t),title:$(t),titleAttributes:G(m,t)}}),(function(t){it&&rt(it),t.defer?it=nt((function(){at(t,(function(){it=null}))})):(at(t),it=null)}),ht)((function(){return null})),bt=(o=yt,a=i=function(t){function e(){return q(this,e),z(this,t.apply(this,arguments))}return function(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function, not "+typeof e);t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,enumerable:!1,writable:!0,configurable:!0}}),e&&(Object.setPrototypeOf?Object.setPrototypeOf(t,e):t.__proto__=e)}(e,t),e.prototype.shouldComponentUpdate=function(t){return!p()(this.props,t)},e.prototype.mapNestedChildrenToProps=function(t,e){if(!e)return null;switch(t.type){case w.SCRIPT:case w.NOSCRIPT:return{innerHTML:e};case w.STYLE:return{cssText:e}}throw new Error("<"+t.type+" /> elements are self-closing and can not contain children. Refer to our API for more information.")},e.prototype.flattenArrayTypeChildren=function(t){var e,n=t.child,r=t.arrayTypeChildren,o=t.newChildProps,i=t.nestedChildren;return F({},r,((e={})[n.type]=[].concat(r[n.type]||[],[F({},o,this.mapNestedChildrenToProps(n,i))]),e))},e.prototype.mapObjectTypeChildren=function(t){var e,n,r=t.child,o=t.newProps,i=t.newChildProps,a=t.nestedChildren;switch(r.type){case w.TITLE:return F({},o,((e={})[r.type]=a,e.titleAttributes=F({},i),e));case w.BODY:return F({},o,{bodyAttributes:F({},i)});case w.HTML:return F({},o,{htmlAttributes:F({},i)})}return F({},o,((n={})[r.type]=F({},i),n))},e.prototype.mapArrayTypeChildrenToProps=function(t,e){var n=F({},e);return Object.keys(t).forEach((function(e){var r;n=F({},n,((r={})[e]=t[e],r))})),n},e.prototype.warnOnInvalidChildren=function(t,e){return!0},e.prototype.mapChildrenToProps=function(t,e){var n=this,r={};return h.a.Children.forEach(t,(function(t){if(t&&t.props){var o=t.props,i=o.children,a=function(t){var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};return Object.keys(t).reduce((function(e,n){return e[_[n]||n]=t[n],e}),e)}(W(o,["children"]));switch(n.warnOnInvalidChildren(t,i),t.type){case w.LINK:case w.META:case w.NOSCRIPT:case w.SCRIPT:case w.STYLE:r=n.flattenArrayTypeChildren({child:t,arrayTypeChildren:r,newChildProps:a,nestedChildren:i});break;default:e=n.mapObjectTypeChildren({child:t,newProps:e,newChildProps:a,nestedChildren:i})}}})),e=this.mapArrayTypeChildrenToProps(r,e)},e.prototype.render=function(){var t=this.props,e=t.children,n=W(t,["children"]),r=F({},n);return e&&(r=this.mapChildrenToProps(e,r)),h.a.createElement(o,r)},Y(e,null,[{key:"canUseDOM",set:function(t){o.canUseDOM=t}}]),e}(h.a.Component),i.propTypes={base:c.a.object,bodyAttributes:c.a.object,children:c.a.oneOfType([c.a.arrayOf(c.a.node),c.a.node]),defaultTitle:c.a.string,defer:c.a.bool,encodeSpecialCharacters:c.a.bool,htmlAttributes:c.a.object,link:c.a.arrayOf(c.a.object),meta:c.a.arrayOf(c.a.object),noscript:c.a.arrayOf(c.a.object),onChangeClientState:c.a.func,script:c.a.arrayOf(c.a.object),style:c.a.arrayOf(c.a.object),title:c.a.string,titleAttributes:c.a.object,titleTemplate:c.a.string},i.defaultProps={defer:!0,encodeSpecialCharacters:!0},i.peek=o.peek,i.rewind=function(){var t=o.rewind();return t||(t=ht({baseTag:[],bodyAttributes:{},encodeSpecialCharacters:!0,htmlAttributes:{},linkTags:[],metaTags:[],noscriptTags:[],scriptTags:[],styleTags:[],title:"",titleAttributes:{}})),t},a);bt.renderStatic=bt.rewind}).call(this,n(28))},487:function(t,e,n){"use strict";var r,o=n(0),i=(r=o)&&"object"==typeof r&&"default"in r?r.default:r;function a(t,e,n){return e in t?Object.defineProperty(t,e,{value:n,enumerable:!0,configurable:!0,writable:!0}):t[e]=n,t}var u=!("undefined"==typeof window||!window.document||!window.document.createElement);t.exports=function(t,e,n){if("function"!=typeof t)throw new Error("Expected reducePropsToState to be a function.");if("function"!=typeof e)throw new Error("Expected handleStateChangeOnClient to be a function.");if(void 0!==n&&"function"!=typeof n)throw new Error("Expected mapStateOnServer to either be undefined or a function.");return function(r){if("function"!=typeof r)throw new Error("Expected WrappedComponent to be a React component.");var c,s=[];function f(){c=t(s.map((function(t){return t.props}))),l.canUseDOM?e(c):n&&(c=n(c))}var l=function(t){var e,n;function o(){return t.apply(this,arguments)||this}n=t,(e=o).prototype=Object.create(n.prototype),e.prototype.constructor=e,e.__proto__=n,o.peek=function(){return c},o.rewind=function(){if(o.canUseDOM)throw new Error("You may only call rewind() on the server. Call peek() to read the current state.");var t=c;return c=void 0,s=[],t};var a=o.prototype;return a.UNSAFE_componentWillMount=function(){s.push(this),f()},a.componentDidUpdate=function(){f()},a.componentWillUnmount=function(){var t=s.indexOf(this);s.splice(t,1),f()},a.render=function(){return i.createElement(r,this.props)},o}(o.PureComponent);return a(l,"displayName","SideEffect("+function(t){return t.displayName||t.name||"Component"}(r)+")"),a(l,"canUseDOM",u),l}}},488:function(t,e){var n="undefined"!=typeof Element,r="function"==typeof Map,o="function"==typeof Set,i="function"==typeof ArrayBuffer&&!!ArrayBuffer.isView;function a(t,e){if(t===e)return!0;if(t&&e&&"object"==typeof t&&"object"==typeof e){if(t.constructor!==e.constructor)return!1;var u,c,s,f;if(Array.isArray(t)){if((u=t.length)!=e.length)return!1;for(c=u;0!=c--;)if(!a(t[c],e[c]))return!1;return!0}if(r&&t instanceof Map&&e instanceof Map){if(t.size!==e.size)return!1;for(f=t.entries();!(c=f.next()).done;)if(!e.has(c.value[0]))return!1;for(f=t.entries();!(c=f.next()).done;)if(!a(c.value[1],e.get(c.value[0])))return!1;return!0}if(o&&t instanceof Set&&e instanceof Set){if(t.size!==e.size)return!1;for(f=t.entries();!(c=f.next()).done;)if(!e.has(c.value[0]))return!1;return!0}if(i&&ArrayBuffer.isView(t)&&ArrayBuffer.isView(e)){if((u=t.length)!=e.length)return!1;for(c=u;0!=c--;)if(t[c]!==e[c])return!1;return!0}if(t.constructor===RegExp)return t.source===e.source&&t.flags===e.flags;if(t.valueOf!==Object.prototype.valueOf)return t.valueOf()===e.valueOf();if(t.toString!==Object.prototype.toString)return t.toString()===e.toString();if((u=(s=Object.keys(t)).length)!==Object.keys(e).length)return!1;for(c=u;0!=c--;)if(!Object.prototype.hasOwnProperty.call(e,s[c]))return!1;if(n&&t instanceof Element)return!1;for(c=u;0!=c--;)if(("_owner"!==s[c]&&"__v"!==s[c]&&"__o"!==s[c]||!t.$$typeof)&&!a(t[s[c]],e[s[c]]))return!1;return!0}return t!=t&&e!=e}t.exports=function(t,e){try{return a(t,e)}catch(n){if((n.message||"").match(/stack|recursion/i))return console.warn("react-fast-compare cannot handle circular refs"),!1;throw n}}},495:function(t,e,n){"use strict";Object.defineProperty(e,"__esModule",{value:!0}),e.useDocVersionSuggestions=e.useActiveDocContext=e.useActiveVersion=e.useLatestVersion=e.useVersions=e.useActivePlugin=void 0;const r=n(301),o=n(496),i=n(497),a=t=>o.usePluginData("docusaurus-plugin-content-docs",t);e.useActivePlugin=(t={})=>{const e=o.useAllPluginInstancesData("docusaurus-plugin-content-docs"),{pathname:n}=r.useLocation();return i.getActivePlugin(e,n,t)},e.useVersions=t=>a(t).versions,e.useLatestVersion=t=>{const e=a(t);return i.getLatestVersion(e)},e.useActiveVersion=t=>{const e=a(t),{pathname:n}=r.useLocation();return i.getActiveVersion(e,n)},e.useActiveDocContext=t=>{const e=a(t),{pathname:n}=r.useLocation();return i.getActiveDocContext(e,n)},e.useDocVersionSuggestions=t=>{const e=a(t),{pathname:n}=r.useLocation();return i.getDocVersionSuggestions(e,n)}},496:function(t,e,n){"use strict";n.r(e),n.d(e,"default",(function(){return o})),n.d(e,"useAllPluginInstancesData",(function(){return i})),n.d(e,"usePluginData",(function(){return a}));var r=n(293);function o(){const{globalData:t}=Object(r.a)();if(!t)throw new Error("Docusaurus global data not found");return t}function i(t){const e=o()[t];if(!e)throw new Error("Docusaurus plugin global data not found for pluginName="+t);return e}function a(t,e="default"){const n=i(t)[e];if(!n)throw new Error(`Docusaurus plugin global data not found for pluginName=${t} and pluginId=${e}`);return n}},497:function(t,e,n){"use strict";Object.defineProperty(e,"__esModule",{value:!0}),e.getDocVersionSuggestions=e.getActiveDocContext=e.getActiveVersion=e.getLatestVersion=e.getActivePlugin=void 0;const r=n(301);e.getActivePlugin=function(t,e,n={}){const o=Object.entries(t).find((([t,n])=>!!r.matchPath(e,{path:n.path,exact:!1,strict:!1}))),i=o?{pluginId:o[0],pluginData:o[1]}:void 0;if(!i&&n.failfast)throw new Error(`Can't find active docs plugin for pathname=${e}, while it was expected to be found. Maybe you tried to use a docs feature that can only be used on a docs-related page? Existing docs plugin paths are: ${Object.values(t).map((t=>t.path)).join(", ")}`);return i},e.getLatestVersion=t=>t.versions.find((t=>t.isLast)),e.getActiveVersion=(t,n)=>{const o=e.getLatestVersion(t);return[...t.versions.filter((t=>t!==o)),o].find((t=>!!r.matchPath(n,{path:t.path,exact:!1,strict:!1})))},e.getActiveDocContext=(t,n)=>{const o=e.getActiveVersion(t,n),i=null==o?void 0:o.docs.find((t=>!!r.matchPath(n,{path:t.path,exact:!0,strict:!1})));return{activeVersion:o,activeDoc:i,alternateDocVersions:i?function(e){const n={};return t.versions.forEach((t=>{t.docs.forEach((r=>{r.id===e&&(n[t.name]=r)}))})),n}(i.id):{}}},e.getDocVersionSuggestions=(t,n)=>{const r=e.getLatestVersion(t),o=e.getActiveDocContext(t,n),i=o.activeVersion!==r;return{latestDocSuggestion:i?null==o?void 0:o.alternateDocVersions[r.name]:void 0,latestVersionSuggestion:i?r:void 0}}}}]); \ No newline at end of file diff --git a/docs/10172759.aa8c1123.js b/docs/10172759.8473a602.js similarity index 97% rename from docs/10172759.aa8c1123.js rename to docs/10172759.8473a602.js index ac40c46b1b..8aaf2b8263 100644 --- a/docs/10172759.aa8c1123.js +++ b/docs/10172759.8473a602.js @@ -1 +1 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[11],{290:function(e,t,n){"use strict";n.d(t,"a",(function(){return s})),n.d(t,"b",(function(){return b}));var r=n(0),a=n.n(r);function o(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function i(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function p(e){for(var t=1;t=0||(a[n]=e[n]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(a[n]=e[n])}return a}var l=a.a.createContext({}),u=function(e){var t=a.a.useContext(l),n=t;return e&&(n="function"==typeof e?e(t):p(p({},t),e)),n},s=function(e){var t=u(e.components);return a.a.createElement(l.Provider,{value:t},e.children)},m={inlineCode:"code",wrapper:function(e){var t=e.children;return a.a.createElement(a.a.Fragment,{},t)}},f=a.a.forwardRef((function(e,t){var n=e.components,r=e.mdxType,o=e.originalType,i=e.parentName,l=c(e,["components","mdxType","originalType","parentName"]),s=u(n),f=r,b=s["".concat(i,".").concat(f)]||s[f]||m[f]||o;return n?a.a.createElement(b,p(p({ref:t},l),{},{components:n})):a.a.createElement(b,p({ref:t},l))}));function b(e,t){var n=arguments,r=t&&t.mdxType;if("string"==typeof e||r){var o=n.length,i=new Array(o);i[0]=f;var p={};for(var c in t)hasOwnProperty.call(t,c)&&(p[c]=t[c]);p.originalType=e,p.mdxType="string"==typeof e?e:r,i[1]=p;for(var l=2;l=0||(a[n]=e[n]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(a[n]=e[n])}return a}var l=a.a.createContext({}),u=function(e){var t=a.a.useContext(l),n=t;return e&&(n="function"==typeof e?e(t):p(p({},t),e)),n},s=function(e){var t=u(e.components);return a.a.createElement(l.Provider,{value:t},e.children)},m={inlineCode:"code",wrapper:function(e){var t=e.children;return a.a.createElement(a.a.Fragment,{},t)}},f=a.a.forwardRef((function(e,t){var n=e.components,r=e.mdxType,o=e.originalType,i=e.parentName,l=c(e,["components","mdxType","originalType","parentName"]),s=u(n),f=r,b=s["".concat(i,".").concat(f)]||s[f]||m[f]||o;return n?a.a.createElement(b,p(p({ref:t},l),{},{components:n})):a.a.createElement(b,p({ref:t},l))}));function b(e,t){var n=arguments,r=t&&t.mdxType;if("string"==typeof e||r){var o=n.length,i=new Array(o);i[0]=f;var p={};for(var c in t)hasOwnProperty.call(t,c)&&(p[c]=t[c]);p.originalType=e,p.mdxType="string"==typeof e?e:r,i[1]=p;for(var l=2;l=0||(o[r]=e[r]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(o[r]=e[r])}return o}var c=o.a.createContext({}),s=function(e){var t=o.a.useContext(c),r=t;return e&&(r="function"==typeof e?e(t):i(i({},t),e)),r},u=function(e){var t=s(e.components);return o.a.createElement(c.Provider,{value:t},e.children)},m={inlineCode:"code",wrapper:function(e){var t=e.children;return o.a.createElement(o.a.Fragment,{},t)}},f=o.a.forwardRef((function(e,t){var r=e.components,n=e.mdxType,a=e.originalType,l=e.parentName,c=p(e,["components","mdxType","originalType","parentName"]),u=s(r),f=n,b=u["".concat(l,".").concat(f)]||u[f]||m[f]||a;return r?o.a.createElement(b,i(i({ref:t},c),{},{components:r})):o.a.createElement(b,i({ref:t},c))}));function b(e,t){var r=arguments,n=t&&t.mdxType;if("string"==typeof e||n){var a=r.length,l=new Array(a);l[0]=f;var i={};for(var p in t)hasOwnProperty.call(t,p)&&(i[p]=t[p]);i.originalType=e,i.mdxType="string"==typeof e?e:n,l[1]=i;for(var c=2;c=0||(o[r]=e[r]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(o[r]=e[r])}return o}var c=o.a.createContext({}),s=function(e){var t=o.a.useContext(c),r=t;return e&&(r="function"==typeof e?e(t):i(i({},t),e)),r},u=function(e){var t=s(e.components);return o.a.createElement(c.Provider,{value:t},e.children)},m={inlineCode:"code",wrapper:function(e){var t=e.children;return o.a.createElement(o.a.Fragment,{},t)}},f=o.a.forwardRef((function(e,t){var r=e.components,n=e.mdxType,a=e.originalType,l=e.parentName,c=p(e,["components","mdxType","originalType","parentName"]),u=s(r),f=n,b=u["".concat(l,".").concat(f)]||u[f]||m[f]||a;return r?o.a.createElement(b,i(i({ref:t},c),{},{components:r})):o.a.createElement(b,i({ref:t},c))}));function b(e,t){var r=arguments,n=t&&t.mdxType;if("string"==typeof e||n){var a=r.length,l=new Array(a);l[0]=f;var i={};for(var p in t)hasOwnProperty.call(t,p)&&(i[p]=t[p]);i.originalType=e,i.mdxType="string"==typeof e?e:n,l[1]=i;for(var c=2;c=0||(r[n]=e[n]);return r}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(a=0;a=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(r[n]=e[n])}return r}var s=r.a.createContext({}),p=function(e){var t=r.a.useContext(s),n=t;return e&&(n="function"==typeof e?e(t):l(l({},t),e)),n},d=function(e){var t=p(e.components);return r.a.createElement(s.Provider,{value:t},e.children)},u={inlineCode:"code",wrapper:function(e){var t=e.children;return r.a.createElement(r.a.Fragment,{},t)}},m=r.a.forwardRef((function(e,t){var n=e.components,a=e.mdxType,i=e.originalType,o=e.parentName,s=c(e,["components","mdxType","originalType","parentName"]),d=p(n),m=a,v=d["".concat(o,".").concat(m)]||d[m]||u[m]||i;return n?r.a.createElement(v,l(l({ref:t},s),{},{components:n})):r.a.createElement(v,l({ref:t},s))}));function v(e,t){var n=arguments,a=t&&t.mdxType;if("string"==typeof e||a){var i=n.length,o=new Array(i);o[0]=m;var l={};for(var c in t)hasOwnProperty.call(t,c)&&(l[c]=t[c]);l.originalType=e,l.mdxType="string"==typeof e?e:a,o[1]=l;for(var s=2;s=0||(r[n]=e[n]);return r}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(a=0;a=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(r[n]=e[n])}return r}var s=r.a.createContext({}),p=function(e){var t=r.a.useContext(s),n=t;return e&&(n="function"==typeof e?e(t):l(l({},t),e)),n},d=function(e){var t=p(e.components);return r.a.createElement(s.Provider,{value:t},e.children)},u={inlineCode:"code",wrapper:function(e){var t=e.children;return r.a.createElement(r.a.Fragment,{},t)}},m=r.a.forwardRef((function(e,t){var n=e.components,a=e.mdxType,i=e.originalType,o=e.parentName,s=c(e,["components","mdxType","originalType","parentName"]),d=p(n),m=a,v=d["".concat(o,".").concat(m)]||d[m]||u[m]||i;return n?r.a.createElement(v,l(l({ref:t},s),{},{components:n})):r.a.createElement(v,l({ref:t},s))}));function v(e,t){var n=arguments,a=t&&t.mdxType;if("string"==typeof e||a){var i=n.length,o=new Array(i);o[0]=m;var l={};for(var c in t)hasOwnProperty.call(t,c)&&(l[c]=t[c]);l.originalType=e,l.mdxType="string"==typeof e?e:a,o[1]=l;for(var s=2;s=0||(a[r]=e[r]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(a[r]=e[r])}return a}var l=a.a.createContext({}),s=function(e){var t=a.a.useContext(l),r=t;return e&&(r="function"==typeof e?e(t):c(c({},t),e)),r},u=function(e){var t=s(e.components);return a.a.createElement(l.Provider,{value:t},e.children)},m={inlineCode:"code",wrapper:function(e){var t=e.children;return a.a.createElement(a.a.Fragment,{},t)}},d=a.a.forwardRef((function(e,t){var r=e.components,n=e.mdxType,o=e.originalType,i=e.parentName,l=p(e,["components","mdxType","originalType","parentName"]),u=s(r),d=n,f=u["".concat(i,".").concat(d)]||u[d]||m[d]||o;return r?a.a.createElement(f,c(c({ref:t},l),{},{components:r})):a.a.createElement(f,c({ref:t},l))}));function f(e,t){var r=arguments,n=t&&t.mdxType;if("string"==typeof e||n){var o=r.length,i=new Array(o);i[0]=d;var c={};for(var p in t)hasOwnProperty.call(t,p)&&(c[p]=t[p]);c.originalType=e,c.mdxType="string"==typeof e?e:n,i[1]=c;for(var l=2;l=0||(a[r]=e[r]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(a[r]=e[r])}return a}var l=a.a.createContext({}),s=function(e){var t=a.a.useContext(l),r=t;return e&&(r="function"==typeof e?e(t):c(c({},t),e)),r},u=function(e){var t=s(e.components);return a.a.createElement(l.Provider,{value:t},e.children)},m={inlineCode:"code",wrapper:function(e){var t=e.children;return a.a.createElement(a.a.Fragment,{},t)}},d=a.a.forwardRef((function(e,t){var r=e.components,n=e.mdxType,o=e.originalType,i=e.parentName,l=p(e,["components","mdxType","originalType","parentName"]),u=s(r),d=n,f=u["".concat(i,".").concat(d)]||u[d]||m[d]||o;return r?a.a.createElement(f,c(c({ref:t},l),{},{components:r})):a.a.createElement(f,c({ref:t},l))}));function f(e,t){var r=arguments,n=t&&t.mdxType;if("string"==typeof e||n){var o=r.length,i=new Array(o);i[0]=d;var c={};for(var p in t)hasOwnProperty.call(t,p)&&(c[p]=t[p]);c.originalType=e,c.mdxType="string"==typeof e?e:n,i[1]=c;for(var l=2;l=0||(a[n]=e[n]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(a[n]=e[n])}return a}var p=a.a.createContext({}),u=function(e){var t=a.a.useContext(p),n=t;return e&&(n="function"==typeof e?e(t):c(c({},t),e)),n},s=function(e){var t=u(e.components);return a.a.createElement(p.Provider,{value:t},e.children)},m={inlineCode:"code",wrapper:function(e){var t=e.children;return a.a.createElement(a.a.Fragment,{},t)}},d=a.a.forwardRef((function(e,t){var n=e.components,r=e.mdxType,o=e.originalType,i=e.parentName,p=l(e,["components","mdxType","originalType","parentName"]),s=u(n),d=r,f=s["".concat(i,".").concat(d)]||s[d]||m[d]||o;return n?a.a.createElement(f,c(c({ref:t},p),{},{components:n})):a.a.createElement(f,c({ref:t},p))}));function f(e,t){var n=arguments,r=t&&t.mdxType;if("string"==typeof e||r){var o=n.length,i=new Array(o);i[0]=d;var c={};for(var l in t)hasOwnProperty.call(t,l)&&(c[l]=t[l]);c.originalType=e,c.mdxType="string"==typeof e?e:r,i[1]=c;for(var p=2;p=0||(a[n]=e[n]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(a[n]=e[n])}return a}var p=a.a.createContext({}),u=function(e){var t=a.a.useContext(p),n=t;return e&&(n="function"==typeof e?e(t):c(c({},t),e)),n},s=function(e){var t=u(e.components);return a.a.createElement(p.Provider,{value:t},e.children)},m={inlineCode:"code",wrapper:function(e){var t=e.children;return a.a.createElement(a.a.Fragment,{},t)}},d=a.a.forwardRef((function(e,t){var n=e.components,r=e.mdxType,o=e.originalType,i=e.parentName,p=l(e,["components","mdxType","originalType","parentName"]),s=u(n),d=r,f=s["".concat(i,".").concat(d)]||s[d]||m[d]||o;return n?a.a.createElement(f,c(c({ref:t},p),{},{components:n})):a.a.createElement(f,c({ref:t},p))}));function f(e,t){var n=arguments,r=t&&t.mdxType;if("string"==typeof e||r){var o=n.length,i=new Array(o);i[0]=d;var c={};for(var l in t)hasOwnProperty.call(t,l)&&(c[l]=t[l]);c.originalType=e,c.mdxType="string"==typeof e?e:r,i[1]=c;for(var p=2;p=0||(a[t]=e[t]);return a}(e,n);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(a[t]=e[t])}return a}var c=a.a.createContext({}),u=function(e){var n=a.a.useContext(c),t=n;return e&&(t="function"==typeof e?e(n):i(i({},n),e)),t},p=function(e){var n=u(e.components);return a.a.createElement(c.Provider,{value:n},e.children)},b={inlineCode:"code",wrapper:function(e){var n=e.children;return a.a.createElement(a.a.Fragment,{},n)}},f=a.a.forwardRef((function(e,n){var t=e.components,r=e.mdxType,o=e.originalType,s=e.parentName,c=l(e,["components","mdxType","originalType","parentName"]),p=u(t),f=r,m=p["".concat(s,".").concat(f)]||p[f]||b[f]||o;return t?a.a.createElement(m,i(i({ref:n},c),{},{components:t})):a.a.createElement(m,i({ref:n},c))}));function m(e,n){var t=arguments,r=n&&n.mdxType;if("string"==typeof e||r){var o=t.length,s=new Array(o);s[0]=f;var i={};for(var l in n)hasOwnProperty.call(n,l)&&(i[l]=n[l]);i.originalType=e,i.mdxType="string"==typeof e?e:r,s[1]=i;for(var c=2;c 0.5 else 'BoxMultiplySolid'),\n notifications=('Off' if random.random() > 0.5 else 'On')) for i in range(100)\n]\n\n# Create columns for our issue table.\ncolumns = [\n ui.table_column(name='text', label='Issue', sortable=True, searchable=True, max_width='300'),\n ui.table_column(name='status', label='Status', filterable=True),\n ui.table_column(name='notifications', label='Notifications', filterable=True),\n ui.table_column(name='done', label='Done', cell_type=ui.icon_table_cell_type()),\n ui.table_column(name='views', label='Views', sortable=True),\n ui.table_column(name='progress', label='Progress', cell_type=ui.progress_table_cell_type()),\n]\n\n\nasync def serve(q: Q):\n q.page['form'] = ui.form_card(box='1 1 -1 11', items=[\n ui.table(\n name='issues',\n columns=columns,\n rows=[ui.table_row(\n name=issue.id,\n cells=[issue.text, issue.status, issue.notifications, issue.icon, str(issue.views), issue.progress]) for\n issue in issues],\n groupable=True,\n downloadable=True,\n resettable=True,\n height='800px'\n )\n ])\n await q.page.save()\n\n\nlisten('/demo', serve)\n")))}u.isMDXComponent=!0}}]); \ No newline at end of file +(window.webpackJsonp=window.webpackJsonp||[]).push([[18],{292:function(e,n,t){"use strict";t.d(n,"a",(function(){return p})),t.d(n,"b",(function(){return f}));var r=t(0),a=t.n(r);function o(e,n,t){return n in e?Object.defineProperty(e,n,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[n]=t,e}function s(e,n){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);n&&(r=r.filter((function(n){return Object.getOwnPropertyDescriptor(e,n).enumerable}))),t.push.apply(t,r)}return t}function i(e){for(var n=1;n=0||(a[t]=e[t]);return a}(e,n);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(a[t]=e[t])}return a}var c=a.a.createContext({}),u=function(e){var n=a.a.useContext(c),t=n;return e&&(t="function"==typeof e?e(n):i(i({},n),e)),t},p=function(e){var n=u(e.components);return a.a.createElement(c.Provider,{value:n},e.children)},b={inlineCode:"code",wrapper:function(e){var n=e.children;return a.a.createElement(a.a.Fragment,{},n)}},m=a.a.forwardRef((function(e,n){var t=e.components,r=e.mdxType,o=e.originalType,s=e.parentName,c=l(e,["components","mdxType","originalType","parentName"]),p=u(t),m=r,f=p["".concat(s,".").concat(m)]||p[m]||b[m]||o;return t?a.a.createElement(f,i(i({ref:n},c),{},{components:t})):a.a.createElement(f,i({ref:n},c))}));function f(e,n){var t=arguments,r=n&&n.mdxType;if("string"==typeof e||r){var o=t.length,s=new Array(o);s[0]=m;var i={};for(var l in n)hasOwnProperty.call(n,l)&&(i[l]=n[l]);i.originalType=e,i.mdxType="string"==typeof e?e:r,s[1]=i;for(var c=2;c 0.5 else 'BoxMultiplySolid'),\n notifications=('Off' if random.random() > 0.5 else 'On')) for i in range(100)\n]\n\n# Create columns for our issue table.\ncolumns = [\n ui.table_column(name='text', label='Issue', sortable=True, searchable=True, max_width='300'),\n ui.table_column(name='status', label='Status', filterable=True),\n ui.table_column(name='notifications', label='Notifications', filterable=True),\n ui.table_column(name='done', label='Done', cell_type=ui.icon_table_cell_type()),\n ui.table_column(name='views', label='Views', sortable=True),\n ui.table_column(name='progress', label='Progress', cell_type=ui.progress_table_cell_type()),\n]\n\n\n@app('/demo')\nasync def serve(q: Q):\n q.page['form'] = ui.form_card(box='1 1 -1 11', items=[\n ui.table(\n name='issues',\n columns=columns,\n rows=[ui.table_row(\n name=issue.id,\n cells=[issue.text, issue.status, issue.notifications, issue.icon, str(issue.views), issue.progress]) for\n issue in issues],\n groupable=True,\n downloadable=True,\n resettable=True,\n height='800px'\n )\n ])\n await q.page.save()\n")))}u.isMDXComponent=!0}}]); \ No newline at end of file diff --git a/docs/1375ade1.05444f9b.js b/docs/1375ade1.05444f9b.js new file mode 100644 index 0000000000..c043e2f8c0 --- /dev/null +++ b/docs/1375ade1.05444f9b.js @@ -0,0 +1 @@ +(window.webpackJsonp=window.webpackJsonp||[]).push([[19],{292:function(e,t,n){"use strict";n.d(t,"a",(function(){return b})),n.d(t,"b",(function(){return m}));var a=n(0),i=n.n(a);function r(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function o(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);t&&(a=a.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,a)}return n}function l(e){for(var t=1;t=0||(i[n]=e[n]);return i}(e,t);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);for(a=0;a=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(i[n]=e[n])}return i}var c=i.a.createContext({}),s=function(e){var t=i.a.useContext(c),n=t;return e&&(n="function"==typeof e?e(t):l(l({},t),e)),n},b=function(e){var t=s(e.components);return i.a.createElement(c.Provider,{value:t},e.children)},u={inlineCode:"code",wrapper:function(e){var t=e.children;return i.a.createElement(i.a.Fragment,{},t)}},d=i.a.forwardRef((function(e,t){var n=e.components,a=e.mdxType,r=e.originalType,o=e.parentName,c=p(e,["components","mdxType","originalType","parentName"]),b=s(n),d=a,m=b["".concat(o,".").concat(d)]||b[d]||u[d]||r;return n?i.a.createElement(m,l(l({ref:t},c),{},{components:n})):i.a.createElement(m,l({ref:t},c))}));function m(e,t){var n=arguments,a=t&&t.mdxType;if("string"==typeof e||a){var r=n.length,o=new Array(r);o[0]=d;var l={};for(var p in t)hasOwnProperty.call(t,p)&&(l[p]=t[p]);l.originalType=e,l.mdxType="string"==typeof e?e:a,o[1]=l;for(var c=2;c")," command can be used to launch a new instance of that app.\nThe ",Object(r.b)("inlineCode",{parentName:"p"},"-v")," flag can be used with ",Object(r.b)("inlineCode",{parentName:"p"},"app run")," to specify app instance visibility settings."),Object(r.b)("pre",null,Object(r.b)("code",Object(a.a)({parentName:"pre"},{className:"language-sh"}),"$ h2o app run bcd543210-1111-1111-1111-0123456789ab\nID 22222222-3333-4444-5555-666666666666\nURL https://22222222-3333-4444-5555-666666666666.wave.h2o.ai\n")),Object(r.b)("h3",{id:"publishing-an-app-for-others-to-see-and-launch"},"Publishing an app for others to see and launch"),Object(r.b)("p",null,"Just run ",Object(r.b)("inlineCode",{parentName:"p"},"h2o bundle import")," in your app git repository. This will automatically package your\ncurrent directory into a ",Object(r.b)("inlineCode",{parentName:"p"},".wave")," package and import it into the platform."),Object(r.b)("p",null,"If you set the visibility to ",Object(r.b)("inlineCode",{parentName:"p"},"ALL_USERS")," (via the ",Object(r.b)("inlineCode",{parentName:"p"},"-v")," flag), others will be able use ",Object(r.b)("inlineCode",{parentName:"p"},"h2o app run"),"\nor the UI to launch the app."),Object(r.b)("p",null,"Note: the name-version combination from your ",Object(r.b)("inlineCode",{parentName:"p"},"app.toml")," has to be unique and the platform will reject\nthe request if such combination already exists. Therefore, you need to update the version in ",Object(r.b)("inlineCode",{parentName:"p"},"app.toml"),"\nbefore each run."),Object(r.b)("pre",null,Object(r.b)("code",Object(a.a)({parentName:"pre"},{className:"language-sh"}),"$ h2o bundle import -v ALL_USERS\nID bcd543210-1111-1111-1111-0123456789ab\nTitle Peak\nVersion 0.1.2\nCategory Healthcare\nCreated At 2020-10-13 06:28:03.050226 +0000 UTC\nUpdated At 2020-10-13 06:28:03.050226 +0000 UTC\nOwner user1@h2o.ai\nVisibility ALL_USERS\nDescription Forecast of COVID-19 spread\nTags\n")),Object(r.b)("h3",{id:"running-an-app-under-development"},"Running an app under development"),Object(r.b)("p",null,"Just run ",Object(r.b)("inlineCode",{parentName:"p"},"h2o bundle deploy")," in your app git repository. This will automatically package your\ncurrent directory into a ",Object(r.b)("inlineCode",{parentName:"p"},".wave")," package, import it into the platform, and run it."),Object(r.b)("p",null,'In the output you will be able to find a URL where you can reach the instance, or visit\nthe "My Instances" in the UI.'),Object(r.b)("p",null,"Note: the CLI will auto-generate the version so that you can keep executing this without worrying about\nversion conflicts, just don't forget to clean up old instances/versions."),Object(r.b)("pre",null,Object(r.b)("code",Object(a.a)({parentName:"pre"},{className:"language-sh"}),"$ h2o bundle deploy\nID bcd543210-1111-1111-1111-0123456789ab\nTitle Peak\nVersion 0.1.2-20201013062803\nCategory Healthcare\nCreated At 2020-10-13 06:28:03.050226 +0000 UTC\nUpdated At 2020-10-13 06:28:03.050226 +0000 UTC\nOwner user1@h2o.ai\nVisibility PRIVATE\nDescription Forecast of COVID-19 spread\nTags\nID 22222222-3333-4444-5555-666666666666\nURL https://22222222-3333-4444-5555-666666666666.wave.h2o.ai\n")),Object(r.b)("h3",{id:"getting-the-logs-of-a-running-app-instance"},"Getting the logs of a running app instance"),Object(r.b)("p",null,"Just run ",Object(r.b)("inlineCode",{parentName:"p"},"h2o instance logs"),", use the flag ",Object(r.b)("inlineCode",{parentName:"p"},"-f")," (",Object(r.b)("inlineCode",{parentName:"p"},"--follow"),") to tail the log."),Object(r.b)("pre",null,Object(r.b)("code",Object(a.a)({parentName:"pre"},{className:"language-sh"}),'$ h2o instance logs c22222222-3333-4444-5555-666666666666\n...\n2020/10/27 16:16:34 #\n2020/10/27 16:16:34 # \u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510\n2020/10/27 16:16:34 # \u2502 \u250c \u250c \u250c\u2500\u2500\u2510 \u250c \u250c \u250c\u2500\u2500\u2510 \u2502 H2O Wave\n2020/10/27 16:16:34 # \u2502 \u2502 \u250c\u2500\u2500\u2518 \u2502\u2500\u2500\u2502 \u2502 \u2502 \u2514\u2510 \u2502 (version) (build)\n2020/10/27 16:16:34 # \u2502 \u2514\u2500\u2518 \u2518 \u2518 \u2514\u2500\u2500\u2518 \u2514\u2500\u2518 \u2502 \xa9 2020 H2O.ai, Inc.\n2020/10/27 16:16:34 # \u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518\n2020/10/27 16:16:34 #\n2020/10/27 16:16:34 # {"address":":55555","t":"listen","webroot":"/wave/www"}\n2020/10/27 16:16:34 # {"host":"ws://127.0.0.1:55556","route":"/","t":"relay"}\n...\n')),Object(r.b)("h3",{id:"running-the-app-in-cloud-like-environment-locally"},"Running the app in cloud-like environment locally"),Object(r.b)("p",null,"Just run ",Object(r.b)("inlineCode",{parentName:"p"},"h2o exec"),". This will bundle the app in a temporary ",Object(r.b)("inlineCode",{parentName:"p"},".wave")," and launch it locally\nusing our platform docker image."),Object(r.b)("p",null,"Note that this requires that you have docker installed and that you have access to the docker image."),Object(r.b)("p",null,"Then navigate to ",Object(r.b)("inlineCode",{parentName:"p"},"http://localhost:55555/"),"."),Object(r.b)("pre",null,Object(r.b)("code",Object(a.a)({parentName:"pre"},{className:"language-sh"}),'$ h2o exec\n{"level":"info","log_level":"debug","url":"file:///wave_bundle/q-peak.0.1.2.wave","app_root":"/app","venv_root":"/resources","server_path":"/wave/wave","py_module":"peak","tmp":"/tmp","startup_server":true,"version":"latest-20200929","time":"2020-10-13T06:42:21Z","message":"configuration"}\n{"level":"info","port":":55555","time":"2020-10-13T06:42:21Z","message":"starting launcher server"}\n{"level":"info","executable":"/wave/wave","time":"2020-10-13T06:42:21Z","message":"wave executable found"}\n...\n')),Object(r.b)("h3",{id:"updating-app-visibility"},"Updating App Visibility"),Object(r.b)("p",null,"The ",Object(r.b)("inlineCode",{parentName:"p"},"h2o app update -v ")," command can be used to modify an existing app's visibility."),Object(r.b)("p",null,"Authors who publish a new version of an app may want to de-list the old version. It is not possible\nto remove an app if there are instances running, as the data may still need to be available.\nThe preferred method to de-list previous versions is to modify the visibility setting to ",Object(r.b)("inlineCode",{parentName:"p"},"PRIVATE"),"."),Object(r.b)("h3",{id:"updating-instance-visibility"},"Updating Instance Visibility"),Object(r.b)("p",null,"The ",Object(r.b)("inlineCode",{parentName:"p"},"h2o instance update -v ")," command, much like the ",Object(r.b)("inlineCode",{parentName:"p"},"app")," version,\ncan be used to modify an existing running instance's visibility setting."),Object(r.b)("h3",{id:"managing-app-tags"},"Managing App Tags"),Object(r.b)("p",null,"Tags are means of visually annotating apps in the platform (similar to\n",Object(r.b)("a",Object(a.a)({parentName:"p"},{href:"https://docs.github.com/en/free-pro-team@latest/github/managing-your-work-on-github/about-labels"}),"GitHub issue labels"),")."),Object(r.b)("p",null,"The ",Object(r.b)("inlineCode",{parentName:"p"},"h2o tag [assign, get, list, remove, update]")," commands let users see and, when authorized,\nmanage available app tags.\nApp tag configuration includes of name/title, RGB color, description, and ACLs.\nTags can only be assigned/removed/updated by user having a role (as determined by the auth provider)\npresent in the tag's ",Object(r.b)("inlineCode",{parentName:"p"},"Admin Roles")," list (empty means any user)."),Object(r.b)("p",null,"Currently, tags can only be created and deleted by platform admins."),Object(r.b)("h2",{id:"how-to"},"How-To"),Object(r.b)("h3",{id:"updating-app-to-a-newer-version"},"Updating App To a Newer Version"),Object(r.b)("p",null,'The "Catalog" page shows apps with visibility ',Object(r.b)("inlineCode",{parentName:"p"},"ALL_USERS"),", so rolling out a new app version is done by:"),Object(r.b)("ol",null,Object(r.b)("li",{parentName:"ol"},Object(r.b)("a",Object(a.a)({parentName:"li"},{href:"#publishing-an-app-for-others-to-see-and-launch"}),"importing a new version")," of the app as ",Object(r.b)("inlineCode",{parentName:"li"},"PRIVATE")),Object(r.b)("li",{parentName:"ol"},"testing the new version"),Object(r.b)("li",{parentName:"ol"},Object(r.b)("a",Object(a.a)({parentName:"li"},{href:"#updating-app-visibility"}),"changing the visibility")," of the new version to ",Object(r.b)("inlineCode",{parentName:"li"},"ALL USERS")),Object(r.b)("li",{parentName:"ol"},"(optional) ",Object(r.b)("a",Object(a.a)({parentName:"li"},{href:"#updating-app-visibility"}),"changing the visibility")," of the old version to ",Object(r.b)("inlineCode",{parentName:"li"},"PRIVATE"))),Object(r.b)("p",null,"This is based on the ",Object(r.b)("a",Object(a.a)({parentName:"p"},{href:"basic-concepts#app"}),"Basic Concepts"),":"),Object(r.b)("blockquote",null,Object(r.b)("p",{parentName:"blockquote"},"Apps are mostly ",Object(r.b)("strong",{parentName:"p"},"immutable"),', meaning once uploaded, they cannot be changed (except for visibility).\nTo "update" an app, one has to upload a new version.')),Object(r.b)("p",null,"and:"),Object(r.b)("blockquote",null,Object(r.b)("p",{parentName:"blockquote"},"Internally, H2O AI Cloud treats every app name/version combination as a separate entity.\nThe UI then uses the app name to link several versions together; however each can have different\ntitle, description, owner, instances, etc.")),Object(r.b)("p",null,"An important corollary is that ",Object(r.b)("strong",{parentName:"p"},"instances of the old app version are not affected by the update"),"\n(as they are completely separate from the new app version). The update only prevents users from\nstarting new instances of the old version."),Object(r.b)("h3",{id:"utilizing-secrets"},"Utilizing Secrets"),Object(r.b)("p",null,"Developers can pass secrets registered with the platform to apps, exposed as environment variables\nusing the ",Object(r.b)("inlineCode",{parentName:"p"},"[[Env]]")," section within the ",Object(r.b)("inlineCode",{parentName:"p"},"app.toml")," or as files using the ",Object(r.b)("inlineCode",{parentName:"p"},"[[File]]")," section."),Object(r.b)("p",null,"This allows developers to link their apps with external dependencies (e.g., S3, Driverless AI)\nsecurely, while allowing easy overrides for local development or deployments outside the platform."),Object(r.b)("div",{className:"admonition admonition-note alert alert--secondary"},Object(r.b)("div",Object(a.a)({parentName:"div"},{className:"admonition-heading"}),Object(r.b)("h5",{parentName:"div"},Object(r.b)("span",Object(a.a)({parentName:"h5"},{className:"admonition-icon"}),Object(r.b)("svg",Object(a.a)({parentName:"span"},{xmlns:"http://www.w3.org/2000/svg",width:"14",height:"16",viewBox:"0 0 14 16"}),Object(r.b)("path",Object(a.a)({parentName:"svg"},{fillRule:"evenodd",d:"M6.3 5.69a.942.942 0 0 1-.28-.7c0-.28.09-.52.28-.7.19-.18.42-.28.7-.28.28 0 .52.09.7.28.18.19.28.42.28.7 0 .28-.09.52-.28.7a1 1 0 0 1-.7.3c-.28 0-.52-.11-.7-.3zM8 7.99c-.02-.25-.11-.48-.31-.69-.2-.19-.42-.3-.69-.31H6c-.27.02-.48.13-.69.31-.2.2-.3.44-.31.69h1v3c.02.27.11.5.31.69.2.2.42.31.69.31h1c.27 0 .48-.11.69-.31.2-.19.3-.42.31-.69H8V7.98v.01zM7 2.3c-3.14 0-5.7 2.54-5.7 5.68 0 3.14 2.56 5.7 5.7 5.7s5.7-2.55 5.7-5.7c0-3.15-2.56-5.69-5.7-5.69v.01zM7 .98c3.86 0 7 3.14 7 7s-3.14 7-7 7-7-3.12-7-7 3.14-7 7-7z"})))),"note")),Object(r.b)("div",Object(a.a)({parentName:"div"},{className:"admonition-content"}),Object(r.b)("p",{parentName:"div"},"There is currently not a self-service option for developers to add their own secrets,\nnor is there an API for listing the available secrets.\nSecrets are currently managed by Admins.\nContact your admins for the available secrets or for adding a new one."),Object(r.b)("p",{parentName:"div"},"We are actively working on improving this."))),Object(r.b)("h3",{id:"app-route"},"App Route"),Object(r.b)("p",null,"While it is not a strict requirement, since the platform deploys each app with its own Wave server,\nwe advise that apps use ",Object(r.b)("inlineCode",{parentName:"p"},"/")," as their main route:"),Object(r.b)("pre",null,Object(r.b)("code",Object(a.a)({parentName:"pre"},{className:"language-python"}),"@app('/')\nasync def serve(q: Q):\n pass\n")))}s.isMDXComponent=!0}}]); \ No newline at end of file diff --git a/docs/1375ade1.83f02eb6.js b/docs/1375ade1.83f02eb6.js deleted file mode 100644 index b6803b05d4..0000000000 --- a/docs/1375ade1.83f02eb6.js +++ /dev/null @@ -1 +0,0 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[18],{290:function(e,t,n){"use strict";n.d(t,"a",(function(){return s})),n.d(t,"b",(function(){return m}));var a=n(0),i=n.n(a);function r(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function o(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);t&&(a=a.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,a)}return n}function l(e){for(var t=1;t=0||(i[n]=e[n]);return i}(e,t);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);for(a=0;a=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(i[n]=e[n])}return i}var c=i.a.createContext({}),b=function(e){var t=i.a.useContext(c),n=t;return e&&(n="function"==typeof e?e(t):l(l({},t),e)),n},s=function(e){var t=b(e.components);return i.a.createElement(c.Provider,{value:t},e.children)},u={inlineCode:"code",wrapper:function(e){var t=e.children;return i.a.createElement(i.a.Fragment,{},t)}},d=i.a.forwardRef((function(e,t){var n=e.components,a=e.mdxType,r=e.originalType,o=e.parentName,c=p(e,["components","mdxType","originalType","parentName"]),s=b(n),d=a,m=s["".concat(o,".").concat(d)]||s[d]||u[d]||r;return n?i.a.createElement(m,l(l({ref:t},c),{},{components:n})):i.a.createElement(m,l({ref:t},c))}));function m(e,t){var n=arguments,a=t&&t.mdxType;if("string"==typeof e||a){var r=n.length,o=new Array(r);o[0]=d;var l={};for(var p in t)hasOwnProperty.call(t,p)&&(l[p]=t[p]);l.originalType=e,l.mdxType="string"==typeof e?e:a,o[1]=l;for(var c=2;c")," command can be used to launch a new instance of that app.\nThe ",Object(r.b)("inlineCode",{parentName:"p"},"-v")," flag can be used with ",Object(r.b)("inlineCode",{parentName:"p"},"app run")," to specify app instance visibility settings."),Object(r.b)("pre",null,Object(r.b)("code",Object(a.a)({parentName:"pre"},{className:"language-sh"}),"$ h2o app run bcd543210-1111-1111-1111-0123456789ab\nID 22222222-3333-4444-5555-666666666666\nURL https://22222222-3333-4444-5555-666666666666.wave.h2o.ai\n")),Object(r.b)("h3",{id:"publishing-an-app-for-others-to-see-and-launch"},"Publishing an app for others to see and launch"),Object(r.b)("p",null,"Just run ",Object(r.b)("inlineCode",{parentName:"p"},"h2o bundle import")," in your app git repository. This will automatically package your\ncurrent directory into a ",Object(r.b)("inlineCode",{parentName:"p"},".wave")," package and import it into the platform."),Object(r.b)("p",null,"If you set the visibility to ",Object(r.b)("inlineCode",{parentName:"p"},"ALL_USERS")," (via the ",Object(r.b)("inlineCode",{parentName:"p"},"-v")," flag), others will be able use ",Object(r.b)("inlineCode",{parentName:"p"},"h2o app run"),"\nor the UI to launch the app."),Object(r.b)("p",null,"Note: the name-version combination from your ",Object(r.b)("inlineCode",{parentName:"p"},"app.toml")," has to be unique and the platform will reject\nthe request if such combination already exists. Therefore, you need to update the version in ",Object(r.b)("inlineCode",{parentName:"p"},"app.toml"),"\nbefore each run."),Object(r.b)("pre",null,Object(r.b)("code",Object(a.a)({parentName:"pre"},{className:"language-sh"}),"$ h2o bundle import -v ALL_USERS\nID bcd543210-1111-1111-1111-0123456789ab\nTitle Peak\nVersion 0.1.2\nCategory Healthcare\nCreated At 2020-10-13 06:28:03.050226 +0000 UTC\nUpdated At 2020-10-13 06:28:03.050226 +0000 UTC\nOwner user1@h2o.ai\nVisibility ALL_USERS\nBundle Location ai.h2o.wave.peak.0.1.2.wave\nIcon Location ai.h2o.wave.peak.0.1.2/icon.jpg\nDescription Forecast of COVID-19 spread\n")),Object(r.b)("h3",{id:"running-an-app-under-development"},"Running an app under development"),Object(r.b)("p",null,"Just run ",Object(r.b)("inlineCode",{parentName:"p"},"h2o bundle deploy")," in your app git repository. This will automatically package your\ncurrent directory into a ",Object(r.b)("inlineCode",{parentName:"p"},".wave")," package, import it into the platform, and run it."),Object(r.b)("p",null,'In the output you will be able to find a URL where you can reach the instance, or visit\nthe "My Instances" in the UI.'),Object(r.b)("p",null,"Note: the CLI will auto-generate the version so that you can keep executing this without worrying about\nversion conflicts, just don't forget to clean up old instances/versions."),Object(r.b)("pre",null,Object(r.b)("code",Object(a.a)({parentName:"pre"},{className:"language-sh"}),"$ h2o bundle deploy\nID bcd543210-1111-1111-1111-0123456789ab\nTitle Peak\nVersion 0.1.2-20201013062803\nCategory Healthcare\nCreated At 2020-10-13 06:28:03.050226 +0000 UTC\nUpdated At 2020-10-13 06:28:03.050226 +0000 UTC\nOwner user1@h2o.ai\nVisibility PRIVATE\nBundle Location ai.h2o.wave.peak.0.1.2-20201013062803.wave\nIcon Location ai.h2o.wave.peak.0.1.2-20201013062803/icon.jpg\nDescription Forecast of COVID-19 spread\nID 22222222-3333-4444-5555-666666666666\nURL https://22222222-3333-4444-5555-666666666666.wave.h2o.ai\n")),Object(r.b)("h3",{id:"getting-the-logs-of-a-running-app-instance"},"Getting the logs of a running app instance"),Object(r.b)("p",null,"Just run ",Object(r.b)("inlineCode",{parentName:"p"},"h2o instance logs"),", use the flag ",Object(r.b)("inlineCode",{parentName:"p"},"-f")," (",Object(r.b)("inlineCode",{parentName:"p"},"--follow"),") to tail the log."),Object(r.b)("pre",null,Object(r.b)("code",Object(a.a)({parentName:"pre"},{className:"language-sh"}),'$ h2o instance logs c22222222-3333-4444-5555-666666666666\n...\n2020/10/15 12:04:40 #\n2020/10/15 12:04:40 # \u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510\n2020/10/15 12:04:40 # \u2502 \u252c \u252c\u250c\u2500\u2510\u252c \u252c\u250c\u2500\u2510 \u2502\n2020/10/15 12:04:40 # \u2502 \u2502\u2502\u2502\u251c\u2500\u2524\u2514\u2510\u250c\u2518\u251c\u2524 \u2502\n2020/10/15 12:04:40 # \u2502 \u2514\u2534\u2518\u2534 \u2534 \u2514\u2518 \u2514\u2500\u2518 \u2502\n2020/10/15 12:04:40 # \u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518\n2020/10/15 12:04:40 #\n2020/10/15 12:04:40 # {"address":":55555","t":"listen","webroot":"/wave/www"}\n2020/10/15 12:04:40 # {"host":"ws://127.0.0.1:55556","route":"/","t":"relay"}\n...\n')),Object(r.b)("h3",{id:"running-the-app-in-cloud-like-environment-locally"},"Running the app in cloud-like environment locally"),Object(r.b)("p",null,"Just run ",Object(r.b)("inlineCode",{parentName:"p"},"h2o exec"),". This will bundle the app in a temporary ",Object(r.b)("inlineCode",{parentName:"p"},".wave")," and launch it locally\nusing our platform docker image."),Object(r.b)("p",null,"Note that this requires that you have docker installed and that you have access to the docker image."),Object(r.b)("p",null,"Then navigate to ",Object(r.b)("inlineCode",{parentName:"p"},"http://localhost:55555/"),"."),Object(r.b)("pre",null,Object(r.b)("code",Object(a.a)({parentName:"pre"},{className:"language-sh"}),'$ h2o exec\n{"level":"info","log_level":"debug","url":"file:///wave_bundle/q-peak.0.1.2.wave","app_root":"/app","venv_root":"/resources","server_path":"/wave/wave","py_module":"peak","tmp":"/tmp","startup_server":true,"version":"latest-20200929","time":"2020-10-13T06:42:21Z","message":"configuration"}\n{"level":"info","port":":55555","time":"2020-10-13T06:42:21Z","message":"starting launcher server"}\n{"level":"info","executable":"/wave/wave","time":"2020-10-13T06:42:21Z","message":"wave executable found"}\n...\n')),Object(r.b)("h3",{id:"updating-app-visibility"},"Updating App Visibility"),Object(r.b)("p",null,"The ",Object(r.b)("inlineCode",{parentName:"p"},"h2o app update -v ")," command can be used to modify an existing app's visibility."),Object(r.b)("p",null,"Authors who publish a new version of an app may want to de-list the old version. It is not possible\nto remove an app if there are instances running, as the data may still need to be available.\nThe preferred method to de-list previous versions is to modify the visibility setting to ",Object(r.b)("inlineCode",{parentName:"p"},"PRIVATE"),"."),Object(r.b)("h3",{id:"updating-instance-visibility"},"Updating Instance Visibility"),Object(r.b)("p",null,"The ",Object(r.b)("inlineCode",{parentName:"p"},"h2o instance update -v ")," command, much like the ",Object(r.b)("inlineCode",{parentName:"p"},"app")," version,\ncan be used to modify an existing running instance's visibility setting."),Object(r.b)("h2",{id:"how-to"},"How-To"),Object(r.b)("h3",{id:"updating-app-to-a-newer-version"},"Updating App To a Newer Version"),Object(r.b)("p",null,'The "Catalog" page shows apps with visibility ',Object(r.b)("inlineCode",{parentName:"p"},"ALL_USERS"),", so rolling out a new app version is done by:"),Object(r.b)("ol",null,Object(r.b)("li",{parentName:"ol"},Object(r.b)("a",Object(a.a)({parentName:"li"},{href:"#publishing-an-app-for-others-to-see-and-launch"}),"importing a new version")," of the app as ",Object(r.b)("inlineCode",{parentName:"li"},"PRIVATE")),Object(r.b)("li",{parentName:"ol"},"testing the new version"),Object(r.b)("li",{parentName:"ol"},Object(r.b)("a",Object(a.a)({parentName:"li"},{href:"#updating-app-visibility"}),"changing the visibility")," of the new version to ",Object(r.b)("inlineCode",{parentName:"li"},"ALL USERS")),Object(r.b)("li",{parentName:"ol"},"(optional) ",Object(r.b)("a",Object(a.a)({parentName:"li"},{href:"#updating-app-visibility"}),"changing the visibility")," of the old version to ",Object(r.b)("inlineCode",{parentName:"li"},"PRIVATE"))),Object(r.b)("p",null,"This is based on the ",Object(r.b)("a",Object(a.a)({parentName:"p"},{href:"basic-concepts#app"}),"Basic Concepts"),":"),Object(r.b)("blockquote",null,Object(r.b)("p",{parentName:"blockquote"},"Apps are mostly ",Object(r.b)("strong",{parentName:"p"},"immutable"),', meaning once uploaded, they cannot be changed (except for visibility).\nTo "update" an app, one has to upload a new version.')),Object(r.b)("p",null,"and:"),Object(r.b)("blockquote",null,Object(r.b)("p",{parentName:"blockquote"},"Internally, H2O AI Cloud treats every app name/version combination as a separate entity.\nThe UI then uses the app name to link several versions together; however each can have different\ntitle, description, owner, instances, etc.")),Object(r.b)("p",null,"An important corollary is that ",Object(r.b)("strong",{parentName:"p"},"instances of the old app version are not affected by the update"),"\n(as they are completely separate from the new app version). The update only prevents users from\nstarting new instances of the old version."),Object(r.b)("h3",{id:"utilizing-secrets"},"Utilizing Secrets"),Object(r.b)("p",null,"Developers can pass secrets registered with the platform to apps, exposed as environment variables\nusing the ",Object(r.b)("inlineCode",{parentName:"p"},"[[Env]]")," section within the ",Object(r.b)("inlineCode",{parentName:"p"},"app.toml")," or as files using the ",Object(r.b)("inlineCode",{parentName:"p"},"[[File]]")," section."),Object(r.b)("p",null,"This allows developers to link their apps with external dependencies (e.g., S3, Driverless AI)\nsecurely, while allowing easy overrides for local development or deployments outside the platform."),Object(r.b)("div",{className:"admonition admonition-note alert alert--secondary"},Object(r.b)("div",Object(a.a)({parentName:"div"},{className:"admonition-heading"}),Object(r.b)("h5",{parentName:"div"},Object(r.b)("span",Object(a.a)({parentName:"h5"},{className:"admonition-icon"}),Object(r.b)("svg",Object(a.a)({parentName:"span"},{xmlns:"http://www.w3.org/2000/svg",width:"14",height:"16",viewBox:"0 0 14 16"}),Object(r.b)("path",Object(a.a)({parentName:"svg"},{fillRule:"evenodd",d:"M6.3 5.69a.942.942 0 0 1-.28-.7c0-.28.09-.52.28-.7.19-.18.42-.28.7-.28.28 0 .52.09.7.28.18.19.28.42.28.7 0 .28-.09.52-.28.7a1 1 0 0 1-.7.3c-.28 0-.52-.11-.7-.3zM8 7.99c-.02-.25-.11-.48-.31-.69-.2-.19-.42-.3-.69-.31H6c-.27.02-.48.13-.69.31-.2.2-.3.44-.31.69h1v3c.02.27.11.5.31.69.2.2.42.31.69.31h1c.27 0 .48-.11.69-.31.2-.19.3-.42.31-.69H8V7.98v.01zM7 2.3c-3.14 0-5.7 2.54-5.7 5.68 0 3.14 2.56 5.7 5.7 5.7s5.7-2.55 5.7-5.7c0-3.15-2.56-5.69-5.7-5.69v.01zM7 .98c3.86 0 7 3.14 7 7s-3.14 7-7 7-7-3.12-7-7 3.14-7 7-7z"})))),"note")),Object(r.b)("div",Object(a.a)({parentName:"div"},{className:"admonition-content"}),Object(r.b)("p",{parentName:"div"},"There is currently not a self-service option for developers to add their own secrets,\nnor is there an API for listing the available secrets.\nSecrets are currently managed by Admins.\nContact your admins for the available secrets or for adding a new one."),Object(r.b)("p",{parentName:"div"},"We are actively working on improving this."))),Object(r.b)("h3",{id:"app-route"},"App Route"),Object(r.b)("p",null,"While it is not a strict requirement, since the platform deploys each app with its own Wave server,\nwe advise that apps use ",Object(r.b)("inlineCode",{parentName:"p"},"/")," as their main route:"),Object(r.b)("pre",null,Object(r.b)("code",Object(a.a)({parentName:"pre"},{className:"language-python"}),"if __name__ == '__main__':\n listen('/', main_page)\n")))}b.isMDXComponent=!0}}]); \ No newline at end of file diff --git a/docs/1486e3bc.86163c5d.js b/docs/1486e3bc.a05fa83f.js similarity index 93% rename from docs/1486e3bc.86163c5d.js rename to docs/1486e3bc.a05fa83f.js index 1f26f1c661..5784f57ba6 100644 --- a/docs/1486e3bc.86163c5d.js +++ b/docs/1486e3bc.a05fa83f.js @@ -1 +1 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[19],{290:function(e,t,n){"use strict";n.d(t,"a",(function(){return u})),n.d(t,"b",(function(){return f}));var r=n(0),a=n.n(r);function o(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function i(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function p(e){for(var t=1;t=0||(a[n]=e[n]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(a[n]=e[n])}return a}var c=a.a.createContext({}),l=function(e){var t=a.a.useContext(c),n=t;return e&&(n="function"==typeof e?e(t):p(p({},t),e)),n},u=function(e){var t=l(e.components);return a.a.createElement(c.Provider,{value:t},e.children)},d={inlineCode:"code",wrapper:function(e){var t=e.children;return a.a.createElement(a.a.Fragment,{},t)}},m=a.a.forwardRef((function(e,t){var n=e.components,r=e.mdxType,o=e.originalType,i=e.parentName,c=s(e,["components","mdxType","originalType","parentName"]),u=l(n),m=r,f=u["".concat(i,".").concat(m)]||u[m]||d[m]||o;return n?a.a.createElement(f,p(p({ref:t},c),{},{components:n})):a.a.createElement(f,p({ref:t},c))}));function f(e,t){var n=arguments,r=t&&t.mdxType;if("string"==typeof e||r){var o=n.length,i=new Array(o);i[0]=m;var p={};for(var s in t)hasOwnProperty.call(t,s)&&(p[s]=t[s]);p.originalType=e,p.mdxType="string"==typeof e?e:r,i[1]=p;for(var c=2;c\n\n\n
-

Page Not Found

We could not find what you were looking for.

Please contact the owner of the site that linked you to the original URL and let them know their link is broken.

- - - +

Page Not Found

We could not find what you were looking for.

Please contact the owner of the site that linked you to the original URL and let them know their link is broken.

+ + + \ No newline at end of file diff --git a/docs/4104f38c.e138268c.js b/docs/4104f38c.fb19bd1a.js similarity index 93% rename from docs/4104f38c.e138268c.js rename to docs/4104f38c.fb19bd1a.js index 67f344830b..e4286869eb 100644 --- a/docs/4104f38c.e138268c.js +++ b/docs/4104f38c.fb19bd1a.js @@ -1 +1 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[64],{117:function(e,t,n){"use strict";n.r(t),n.d(t,"frontMatter",(function(){return i})),n.d(t,"metadata",(function(){return l})),n.d(t,"rightToc",(function(){return p})),n.d(t,"default",(function(){return s}));var r=n(2),a=n(6),o=(n(0),n(290)),i={title:"Plot / Vega-lite / Form"},l={unversionedId:"examples/plot-vegalite-form",id:"examples/plot-vegalite-form",isDocsHomePage:!1,title:"Plot / Vega-lite / Form",description:"Display a Vega-lite plot inside a form card",source:"@site/docs/examples/plot-vegalite-form.md",slug:"/examples/plot-vegalite-form",permalink:"/wave/docs/examples/plot-vegalite-form",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/examples/plot-vegalite-form.md",version:"current",sidebar:"someSidebar",previous:{title:"Plot / Vega-lite / Update",permalink:"/wave/docs/examples/plot-vegalite-update"},next:{title:"Plot / Altair",permalink:"/wave/docs/examples/plot-altair"}},p=[],c={rightToc:p};function s(e){var t=e.components,i=Object(a.a)(e,["components"]);return Object(o.b)("wrapper",Object(r.a)({},c,i,{components:t,mdxType:"MDXLayout"}),Object(o.b)("p",null,"Display a Vega-lite plot inside a form card"),Object(o.b)("div",{className:"cover",style:{backgroundImage:"url("+n(343).default+")"}}),Object(o.b)("pre",null,Object(o.b)("code",Object(r.a)({parentName:"pre"},{className:"language-py"}),'from h2o_wave import site, data, ui\nimport random\nimport time\n\npage = site[\'/demo\']\n\nspec = \'\'\'\n{\n "description": "A simple bar plot with embedded data.",\n "mark": "bar",\n "encoding": {\n "x": {"field": "a", "type": "ordinal"},\n "y": {"field": "b", "type": "quantitative"}\n }\n}\n\'\'\'\n\n\n# Get data rows for our plot.\n# Typically, this data would be read from some external data source.\ndef poll():\n return [\n ["A", rnd()], ["B", rnd()], ["C", rnd()],\n ["D", rnd()], ["E", rnd()], ["F", rnd()],\n ["G", rnd()], ["H", rnd()], ["I", rnd()]\n ]\n\n\n# Generate random datum between 1 and 100\ndef rnd(): return random.randint(1, 100)\n\n\npage[\'example\'] = ui.form_card(\n box=\'1 1 2 -1\',\n items=[\n ui.text_xl(\'Example 1\'),\n ui.vega_visualization(\n specification=spec,\n data=data(fields=["a", "b"], rows=poll(), pack=True),\n ),\n ui.text_xl(\'Example 2\'),\n ui.vega_visualization(\n specification=spec,\n data=data(fields=["a", "b"], rows=poll(), pack=True),\n ),\n ui.text_xl(\'Example 3\'),\n ui.vega_visualization(\n specification=spec,\n data=data(fields=["a", "b"], rows=poll(), pack=True),\n ),\n ],\n)\n\npage.save()\n')))}s.isMDXComponent=!0},290:function(e,t,n){"use strict";n.d(t,"a",(function(){return d})),n.d(t,"b",(function(){return f}));var r=n(0),a=n.n(r);function o(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function i(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function l(e){for(var t=1;t=0||(a[n]=e[n]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(a[n]=e[n])}return a}var c=a.a.createContext({}),s=function(e){var t=a.a.useContext(c),n=t;return e&&(n="function"==typeof e?e(t):l(l({},t),e)),n},d=function(e){var t=s(e.components);return a.a.createElement(c.Provider,{value:t},e.children)},u={inlineCode:"code",wrapper:function(e){var t=e.children;return a.a.createElement(a.a.Fragment,{},t)}},m=a.a.forwardRef((function(e,t){var n=e.components,r=e.mdxType,o=e.originalType,i=e.parentName,c=p(e,["components","mdxType","originalType","parentName"]),d=s(n),m=r,f=d["".concat(i,".").concat(m)]||d[m]||u[m]||o;return n?a.a.createElement(f,l(l({ref:t},c),{},{components:n})):a.a.createElement(f,l({ref:t},c))}));function f(e,t){var n=arguments,r=t&&t.mdxType;if("string"==typeof e||r){var o=n.length,i=new Array(o);i[0]=m;var l={};for(var p in t)hasOwnProperty.call(t,p)&&(l[p]=t[p]);l.originalType=e,l.mdxType="string"==typeof e?e:r,i[1]=l;for(var c=2;c=0||(a[n]=e[n]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(a[n]=e[n])}return a}var c=a.a.createContext({}),s=function(e){var t=a.a.useContext(c),n=t;return e&&(n="function"==typeof e?e(t):l(l({},t),e)),n},d=function(e){var t=s(e.components);return a.a.createElement(c.Provider,{value:t},e.children)},u={inlineCode:"code",wrapper:function(e){var t=e.children;return a.a.createElement(a.a.Fragment,{},t)}},m=a.a.forwardRef((function(e,t){var n=e.components,r=e.mdxType,o=e.originalType,i=e.parentName,c=p(e,["components","mdxType","originalType","parentName"]),d=s(n),m=r,f=d["".concat(i,".").concat(m)]||d[m]||u[m]||o;return n?a.a.createElement(f,l(l({ref:t},c),{},{components:n})):a.a.createElement(f,l({ref:t},c))}));function f(e,t){var n=arguments,r=t&&t.mdxType;if("string"==typeof e||r){var o=n.length,i=new Array(o);i[0]=m;var l={};for(var p in t)hasOwnProperty.call(t,p)&&(l[p]=t[p]);l.originalType=e,l.mdxType="string"==typeof e?e:r,i[1]=l;for(var c=2;c\n
  • Spam
    • \n
  • Ham
    • \n
  • Eggs
    • \n\n'''\n\npage['example'] = ui.form_card(\n box='1 1 2 2',\n items=[\n ui.markup(content=menu)\n ]\n)\npage.save()\n")))}s.isMDXComponent=!0},290:function(e,r,t){"use strict";t.d(r,"a",(function(){return m})),t.d(r,"b",(function(){return f}));var n=t(0),a=t.n(n);function o(e,r,t){return r in e?Object.defineProperty(e,r,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[r]=t,e}function u(e,r){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);r&&(n=n.filter((function(r){return Object.getOwnPropertyDescriptor(e,r).enumerable}))),t.push.apply(t,n)}return t}function i(e){for(var r=1;r=0||(a[t]=e[t]);return a}(e,r);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(a[t]=e[t])}return a}var p=a.a.createContext({}),s=function(e){var r=a.a.useContext(p),t=r;return e&&(t="function"==typeof e?e(r):i(i({},r),e)),t},m=function(e){var r=s(e.components);return a.a.createElement(p.Provider,{value:r},e.children)},c={inlineCode:"code",wrapper:function(e){var r=e.children;return a.a.createElement(a.a.Fragment,{},r)}},v=a.a.forwardRef((function(e,r){var t=e.components,n=e.mdxType,o=e.originalType,u=e.parentName,p=l(e,["components","mdxType","originalType","parentName"]),m=s(t),v=n,f=m["".concat(u,".").concat(v)]||m[v]||c[v]||o;return t?a.a.createElement(f,i(i({ref:r},p),{},{components:t})):a.a.createElement(f,i({ref:r},p))}));function f(e,r){var t=arguments,n=r&&r.mdxType;if("string"==typeof e||n){var o=t.length,u=new Array(o);u[0]=v;var i={};for(var l in r)hasOwnProperty.call(r,l)&&(i[l]=r[l]);i.originalType=e,i.mdxType="string"==typeof e?e:n,u[1]=i;for(var p=2;p\n
  • Spam
    • \n
  • Ham
    • \n
  • Eggs
    • \n\n'''\n\npage['example'] = ui.form_card(\n box='1 1 2 2',\n items=[\n ui.markup(content=menu)\n ]\n)\npage.save()\n")))}s.isMDXComponent=!0},292:function(e,r,t){"use strict";t.d(r,"a",(function(){return m})),t.d(r,"b",(function(){return f}));var n=t(0),a=t.n(n);function o(e,r,t){return r in e?Object.defineProperty(e,r,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[r]=t,e}function u(e,r){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);r&&(n=n.filter((function(r){return Object.getOwnPropertyDescriptor(e,r).enumerable}))),t.push.apply(t,n)}return t}function i(e){for(var r=1;r=0||(a[t]=e[t]);return a}(e,r);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(a[t]=e[t])}return a}var p=a.a.createContext({}),s=function(e){var r=a.a.useContext(p),t=r;return e&&(t="function"==typeof e?e(r):i(i({},r),e)),t},m=function(e){var r=s(e.components);return a.a.createElement(p.Provider,{value:r},e.children)},c={inlineCode:"code",wrapper:function(e){var r=e.children;return a.a.createElement(a.a.Fragment,{},r)}},v=a.a.forwardRef((function(e,r){var t=e.components,n=e.mdxType,o=e.originalType,u=e.parentName,p=l(e,["components","mdxType","originalType","parentName"]),m=s(t),v=n,f=m["".concat(u,".").concat(v)]||m[v]||c[v]||o;return t?a.a.createElement(f,i(i({ref:r},p),{},{components:t})):a.a.createElement(f,i({ref:r},p))}));function f(e,r){var t=arguments,n=r&&r.mdxType;if("string"==typeof e||n){var o=t.length,u=new Array(o);u[0]=v;var i={};for(var l in r)hasOwnProperty.call(r,l)&&(i[l]=r[l]);i.originalType=e,i.mdxType="string"==typeof e?e:n,u[1]=i;for(var p=2;p=0||(r[n]=e[n]);return r}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(a=0;a=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(r[n]=e[n])}return r}var s=r.a.createContext({}),u=function(e){var t=r.a.useContext(s),n=t;return e&&(n="function"==typeof e?e(t):c(c({},t),e)),n},d=function(e){var t=u(e.components);return r.a.createElement(s.Provider,{value:t},e.children)},p={inlineCode:"code",wrapper:function(e){var t=e.children;return r.a.createElement(r.a.Fragment,{},t)}},m=r.a.forwardRef((function(e,t){var n=e.components,a=e.mdxType,o=e.originalType,i=e.parentName,s=l(e,["components","mdxType","originalType","parentName"]),d=u(n),m=a,f=d["".concat(i,".").concat(m)]||d[m]||p[m]||o;return n?r.a.createElement(f,c(c({ref:t},s),{},{components:n})):r.a.createElement(f,c({ref:t},s))}));function f(e,t){var n=arguments,a=t&&t.mdxType;if("string"==typeof e||a){var o=n.length,i=new Array(o);i[0]=m;var c={};for(var l in t)hasOwnProperty.call(t,l)&&(c[l]=t[l]);c.originalType=e,c.mdxType="string"==typeof e?e:a,i[1]=c;for(var s=2;s=0||(r[n]=e[n]);return r}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(a=0;a=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(r[n]=e[n])}return r}var s=r.a.createContext({}),u=function(e){var t=r.a.useContext(s),n=t;return e&&(n="function"==typeof e?e(t):c(c({},t),e)),n},d=function(e){var t=u(e.components);return r.a.createElement(s.Provider,{value:t},e.children)},p={inlineCode:"code",wrapper:function(e){var t=e.children;return r.a.createElement(r.a.Fragment,{},t)}},m=r.a.forwardRef((function(e,t){var n=e.components,a=e.mdxType,o=e.originalType,i=e.parentName,s=l(e,["components","mdxType","originalType","parentName"]),d=u(n),m=a,f=d["".concat(i,".").concat(m)]||d[m]||p[m]||o;return n?r.a.createElement(f,c(c({ref:t},s),{},{components:n})):r.a.createElement(f,c({ref:t},s))}));function f(e,t){var n=arguments,a=t&&t.mdxType;if("string"==typeof e||a){var o=n.length,i=new Array(o);i[0]=m;var c={};for(var l in t)hasOwnProperty.call(t,l)&&(c[l]=t[l]);c.originalType=e,c.mdxType="string"==typeof e?e:a,i[1]=c;for(var s=2;s',id:"cypress",children:[]}]},{value:"Classes",id:"classes",children:[{value:'Cypress ',id:"cypress-1",children:[]}]}],p={rightToc:o};function l(e){var t=e.components,n=Object(s.a)(e,["components"]);return Object(a.b)("wrapper",Object(r.a)({},p,n,{components:t,mdxType:"MDXLayout"}),Object(a.b)("h2",{id:"functions"},"Functions"),Object(a.b)("div",{className:"api"},Object(a.b)("h3",{id:"cypress"},"cypress ",Object(a.b)("a",{name:"h2o_wave.test.cypress"})),Object(a.b)("div",{className:"api__body"},Object(a.b)("div",{className:"api__signature"},"def ",Object(a.b)("span",{class:"ident"},"cypress"),"(description:\xa0str)"),Object(a.b)("div",{className:"api__description"}))),Object(a.b)("h2",{id:"classes"},"Classes"),Object(a.b)("div",{className:"api"},Object(a.b)("h3",{id:"cypress-1"},"Cypress ",Object(a.b)("a",{name:"h2o_wave.test.Cypress"})),Object(a.b)("div",{className:"api__body"},Object(a.b)("div",{className:"api__signature"},"class ",Object(a.b)("span",{class:"ident"},"Cypress")),Object(a.b)("div",{className:"api__description"},Object(a.b)("p",null,"Represents a Cypress test translator.")),Object(a.b)("h4",{id:"methods"},"Methods"),Object(a.b)("div",{className:"api__body"},Object(a.b)("div",{className:"api"},Object(a.b)("h4",{id:"run"},"run ",Object(a.b)("a",{name:"h2o_wave.test.Cypress.run"})),Object(a.b)("div",{className:"api__body"},Object(a.b)("div",{className:"api__signature"},"def ",Object(a.b)("span",{class:"ident"},"run"),"(self, f)"),Object(a.b)("div",{className:"api__description"},Object(a.b)("p",null,"Includes all steps from the given test into the current test."),Object(a.b)("h5",{id:"args"},"Args"),Object(a.b)("dl",null,Object(a.b)("dt",null,Object(a.b)("code",null,"f")),Object(a.b)("dd",null,"A Python function containing Cypress test steps.")))))))))}l.isMDXComponent=!0},290:function(e,t,n){"use strict";n.d(t,"a",(function(){return b})),n.d(t,"b",(function(){return O}));var r=n(0),s=n.n(r);function a(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function c(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function i(e){for(var t=1;t=0||(s[n]=e[n]);return s}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(s[n]=e[n])}return s}var p=s.a.createContext({}),l=function(e){var t=s.a.useContext(p),n=t;return e&&(n="function"==typeof e?e(t):i(i({},t),e)),n},b=function(e){var t=l(e.components);return s.a.createElement(p.Provider,{value:t},e.children)},u={inlineCode:"code",wrapper:function(e){var t=e.children;return s.a.createElement(s.a.Fragment,{},t)}},d=s.a.forwardRef((function(e,t){var n=e.components,r=e.mdxType,a=e.originalType,c=e.parentName,p=o(e,["components","mdxType","originalType","parentName"]),b=l(n),d=r,O=b["".concat(c,".").concat(d)]||b[d]||u[d]||a;return n?s.a.createElement(O,i(i({ref:t},p),{},{components:n})):s.a.createElement(O,i({ref:t},p))}));function O(e,t){var n=arguments,r=t&&t.mdxType;if("string"==typeof e||r){var a=n.length,c=new Array(a);c[0]=d;var i={};for(var o in t)hasOwnProperty.call(t,o)&&(i[o]=t[o]);i.originalType=e,i.mdxType="string"==typeof e?e:r,c[1]=i;for(var p=2;p',id:"cypress",children:[]}]},{value:"Classes",id:"classes",children:[{value:'Cypress ',id:"cypress-1",children:[]}]}],p={rightToc:o};function l(e){var t=e.components,n=Object(s.a)(e,["components"]);return Object(a.b)("wrapper",Object(r.a)({},p,n,{components:t,mdxType:"MDXLayout"}),Object(a.b)("h2",{id:"functions"},"Functions"),Object(a.b)("div",{className:"api"},Object(a.b)("h3",{id:"cypress"},"cypress ",Object(a.b)("a",{name:"h2o_wave.test.cypress"})),Object(a.b)("div",{className:"api__body"},Object(a.b)("div",{className:"api__signature"},"def ",Object(a.b)("span",{class:"ident"},"cypress"),"(description:\xa0str)"),Object(a.b)("div",{className:"api__description"}))),Object(a.b)("h2",{id:"classes"},"Classes"),Object(a.b)("div",{className:"api"},Object(a.b)("h3",{id:"cypress-1"},"Cypress ",Object(a.b)("a",{name:"h2o_wave.test.Cypress"})),Object(a.b)("div",{className:"api__body"},Object(a.b)("div",{className:"api__signature"},"class ",Object(a.b)("span",{class:"ident"},"Cypress")),Object(a.b)("div",{className:"api__description"},Object(a.b)("p",null,"Represents a Cypress test translator.")),Object(a.b)("h4",{id:"methods"},"Methods"),Object(a.b)("div",{className:"api__body"},Object(a.b)("div",{className:"api"},Object(a.b)("h4",{id:"run"},"run ",Object(a.b)("a",{name:"h2o_wave.test.Cypress.run"})),Object(a.b)("div",{className:"api__body"},Object(a.b)("div",{className:"api__signature"},"def ",Object(a.b)("span",{class:"ident"},"run"),"(self, f)"),Object(a.b)("div",{className:"api__description"},Object(a.b)("p",null,"Includes all steps from the given test into the current test."),Object(a.b)("h5",{id:"args"},"Args"),Object(a.b)("dl",null,Object(a.b)("dt",null,Object(a.b)("code",null,"f")),Object(a.b)("dd",null,"A Python function containing Cypress test steps.")))))))))}l.isMDXComponent=!0},292:function(e,t,n){"use strict";n.d(t,"a",(function(){return b})),n.d(t,"b",(function(){return O}));var r=n(0),s=n.n(r);function a(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function c(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function i(e){for(var t=1;t=0||(s[n]=e[n]);return s}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(s[n]=e[n])}return s}var p=s.a.createContext({}),l=function(e){var t=s.a.useContext(p),n=t;return e&&(n="function"==typeof e?e(t):i(i({},t),e)),n},b=function(e){var t=l(e.components);return s.a.createElement(p.Provider,{value:t},e.children)},u={inlineCode:"code",wrapper:function(e){var t=e.children;return s.a.createElement(s.a.Fragment,{},t)}},d=s.a.forwardRef((function(e,t){var n=e.components,r=e.mdxType,a=e.originalType,c=e.parentName,p=o(e,["components","mdxType","originalType","parentName"]),b=l(n),d=r,O=b["".concat(c,".").concat(d)]||b[d]||u[d]||a;return n?s.a.createElement(O,i(i({ref:t},p),{},{components:n})):s.a.createElement(O,i({ref:t},p))}));function O(e,t){var n=arguments,r=t&&t.mdxType;if("string"==typeof e||r){var a=n.length,c=new Array(a);c[0]=d;var i={};for(var o in t)hasOwnProperty.call(t,o)&&(i[o]=t[o]);i.originalType=e,i.mdxType="string"==typeof e?e:r,c[1]=i;for(var p=2;p=0||(a[n]=e[n]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(a[n]=e[n])}return a}var c=a.a.createContext({}),p=function(e){var t=a.a.useContext(c),n=t;return e&&(n="function"==typeof e?e(t):i(i({},t),e)),n},d=function(e){var t=p(e.components);return a.a.createElement(c.Provider,{value:t},e.children)},l={inlineCode:"code",wrapper:function(e){var t=e.children;return a.a.createElement(a.a.Fragment,{},t)}},m=a.a.forwardRef((function(e,t){var n=e.components,r=e.mdxType,o=e.originalType,u=e.parentName,c=s(e,["components","mdxType","originalType","parentName"]),d=p(n),m=r,b=d["".concat(u,".").concat(m)]||d[m]||l[m]||o;return n?a.a.createElement(b,i(i({ref:t},c),{},{components:n})):a.a.createElement(b,i({ref:t},c))}));function b(e,t){var n=arguments,r=t&&t.mdxType;if("string"==typeof e||r){var o=n.length,u=new Array(o);u[0]=m;var i={};for(var s in t)hasOwnProperty.call(t,s)&&(i[s]=t[s]);i.originalType=e,i.mdxType="string"==typeof e?e:r,u[1]=i;for(var c=2;c=0||(a[n]=e[n]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(a[n]=e[n])}return a}var c=a.a.createContext({}),l=function(e){var t=a.a.useContext(c),n=t;return e&&(n="function"==typeof e?e(t):i(i({},t),e)),n},d=function(e){var t=l(e.components);return a.a.createElement(c.Provider,{value:t},e.children)},p={inlineCode:"code",wrapper:function(e){var t=e.children;return a.a.createElement(a.a.Fragment,{},t)}},m=a.a.forwardRef((function(e,t){var n=e.components,r=e.mdxType,o=e.originalType,u=e.parentName,c=s(e,["components","mdxType","originalType","parentName"]),d=l(n),m=r,b=d["".concat(u,".").concat(m)]||d[m]||p[m]||o;return n?a.a.createElement(b,i(i({ref:t},c),{},{components:n})):a.a.createElement(b,i({ref:t},c))}));function b(e,t){var n=arguments,r=t&&t.mdxType;if("string"==typeof e||r){var o=n.length,u=new Array(o);u[0]=m;var i={};for(var s in t)hasOwnProperty.call(t,s)&&(i[s]=t[s]);i.originalType=e,i.mdxType="string"==typeof e?e:r,u[1]=i;for(var c=2;c=0||(o[t]=e[t]);return o}(e,r);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(o[t]=e[t])}return o}var p=o.a.createContext({}),s=function(e){var r=o.a.useContext(p),t=r;return e&&(t="function"==typeof e?e(r):i(i({},r),e)),t},u=function(e){var r=s(e.components);return o.a.createElement(p.Provider,{value:r},e.children)},m={inlineCode:"code",wrapper:function(e){var r=e.children;return o.a.createElement(o.a.Fragment,{},r)}},f=o.a.forwardRef((function(e,r){var t=e.components,n=e.mdxType,a=e.originalType,c=e.parentName,p=l(e,["components","mdxType","originalType","parentName"]),u=s(t),f=n,d=u["".concat(c,".").concat(f)]||u[f]||m[f]||a;return t?o.a.createElement(d,i(i({ref:r},p),{},{components:t})):o.a.createElement(d,i({ref:r},p))}));function d(e,r){var t=arguments,n=r&&r.mdxType;if("string"==typeof e||n){var a=t.length,c=new Array(a);c[0]=f;var i={};for(var l in r)hasOwnProperty.call(r,l)&&(i[l]=r[l]);i.originalType=e,i.mdxType="string"==typeof e?e:n,c[1]=i;for(var p=2;p=0||(o[t]=e[t]);return o}(e,r);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(o[t]=e[t])}return o}var p=o.a.createContext({}),s=function(e){var r=o.a.useContext(p),t=r;return e&&(t="function"==typeof e?e(r):i(i({},r),e)),t},u=function(e){var r=s(e.components);return o.a.createElement(p.Provider,{value:r},e.children)},m={inlineCode:"code",wrapper:function(e){var r=e.children;return o.a.createElement(o.a.Fragment,{},r)}},f=o.a.forwardRef((function(e,r){var t=e.components,n=e.mdxType,a=e.originalType,c=e.parentName,p=l(e,["components","mdxType","originalType","parentName"]),u=s(t),f=n,d=u["".concat(c,".").concat(f)]||u[f]||m[f]||a;return t?o.a.createElement(d,i(i({ref:r},p),{},{components:t})):o.a.createElement(d,i({ref:r},p))}));function d(e,r){var t=arguments,n=r&&r.mdxType;if("string"==typeof e||n){var a=t.length,c=new Array(a);c[0]=f;var i={};for(var l in r)hasOwnProperty.call(r,l)&&(i[l]=r[l]);i.originalType=e,i.mdxType="string"==typeof e?e:n,c[1]=i;for(var p=2;p=0||(r[a]=e[a]);return r}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,a)&&(r[a]=e[a])}return r}var c=r.a.createContext({}),p=function(e){var t=r.a.useContext(c),a=t;return e&&(a="function"==typeof e?e(t):o(o({},t),e)),a},d=function(e){var t=p(e.components);return r.a.createElement(c.Provider,{value:t},e.children)},s={inlineCode:"code",wrapper:function(e){var t=e.children;return r.a.createElement(r.a.Fragment,{},t)}},u=r.a.forwardRef((function(e,t){var a=e.components,n=e.mdxType,i=e.originalType,l=e.parentName,c=b(e,["components","mdxType","originalType","parentName"]),d=p(a),u=n,O=d["".concat(l,".").concat(u)]||d[u]||s[u]||i;return a?r.a.createElement(O,o(o({ref:t},c),{},{components:a})):r.a.createElement(O,o({ref:t},c))}));function O(e,t){var a=arguments,n=t&&t.mdxType;if("string"==typeof e||n){var i=a.length,l=new Array(i);l[0]=u;var o={};for(var b in t)hasOwnProperty.call(t,b)&&(o[b]=t[b]);o.originalType=e,o.mdxType="string"==typeof e?e:n,l[1]=o;for(var c=2;c=0||(r[a]=e[a]);return r}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,a)&&(r[a]=e[a])}return r}var c=r.a.createContext({}),p=function(e){var t=r.a.useContext(c),a=t;return e&&(a="function"==typeof e?e(t):o(o({},t),e)),a},d=function(e){var t=p(e.components);return r.a.createElement(c.Provider,{value:t},e.children)},s={inlineCode:"code",wrapper:function(e){var t=e.children;return r.a.createElement(r.a.Fragment,{},t)}},u=r.a.forwardRef((function(e,t){var a=e.components,n=e.mdxType,i=e.originalType,l=e.parentName,c=b(e,["components","mdxType","originalType","parentName"]),d=p(a),u=n,O=d["".concat(l,".").concat(u)]||d[u]||s[u]||i;return a?r.a.createElement(O,o(o({ref:t},c),{},{components:a})):r.a.createElement(O,o({ref:t},c))}));function O(e,t){var a=arguments,n=t&&t.mdxType;if("string"==typeof e||n){var i=a.length,l=new Array(i);l[0]=u;var o={};for(var b in t)hasOwnProperty.call(t,b)&&(o[b]=t[b]);o.originalType=e,o.mdxType="string"==typeof e?e:n,l[1]=o;for(var c=2;c=0||(a[r]=e[r]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(a[r]=e[r])}return a}var p=a.a.createContext({}),u=function(e){var t=a.a.useContext(p),r=t;return e&&(r="function"==typeof e?e(t):s(s({},t),e)),r},m=function(e){var t=u(e.components);return a.a.createElement(p.Provider,{value:t},e.children)},d={inlineCode:"code",wrapper:function(e){var t=e.children;return a.a.createElement(a.a.Fragment,{},t)}},l=a.a.forwardRef((function(e,t){var r=e.components,n=e.mdxType,o=e.originalType,c=e.parentName,p=i(e,["components","mdxType","originalType","parentName"]),m=u(r),l=n,b=m["".concat(c,".").concat(l)]||m[l]||d[l]||o;return r?a.a.createElement(b,s(s({ref:t},p),{},{components:r})):a.a.createElement(b,s({ref:t},p))}));function b(e,t){var r=arguments,n=t&&t.mdxType;if("string"==typeof e||n){var o=r.length,c=new Array(o);c[0]=l;var s={};for(var i in t)hasOwnProperty.call(t,i)&&(s[i]=t[i]);s.originalType=e,s.mdxType="string"==typeof e?e:n,c[1]=s;for(var p=2;p=0||(a[r]=e[r]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(a[r]=e[r])}return a}var p=a.a.createContext({}),u=function(e){var t=a.a.useContext(p),r=t;return e&&(r="function"==typeof e?e(t):s(s({},t),e)),r},m=function(e){var t=u(e.components);return a.a.createElement(p.Provider,{value:t},e.children)},d={inlineCode:"code",wrapper:function(e){var t=e.children;return a.a.createElement(a.a.Fragment,{},t)}},l=a.a.forwardRef((function(e,t){var r=e.components,n=e.mdxType,o=e.originalType,c=e.parentName,p=i(e,["components","mdxType","originalType","parentName"]),m=u(r),l=n,b=m["".concat(c,".").concat(l)]||m[l]||d[l]||o;return r?a.a.createElement(b,s(s({ref:t},p),{},{components:r})):a.a.createElement(b,s({ref:t},p))}));function b(e,t){var r=arguments,n=t&&t.mdxType;if("string"==typeof e||n){var o=r.length,c=new Array(o);c[0]=l;var s={};for(var i in t)hasOwnProperty.call(t,i)&&(s[i]=t[i]);s.originalType=e,s.mdxType="string"==typeof e?e:n,c[1]=s;for(var p=2;p=0||(r[a]=e[a]);return r}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,a)&&(r[a]=e[a])}return r}var l=r.a.createContext({}),s=function(e){var t=r.a.useContext(l),a=t;return e&&(a="function"==typeof e?e(t):c(c({},t),e)),a},b=function(e){var t=s(e.components);return r.a.createElement(l.Provider,{value:t},e.children)},u={inlineCode:"code",wrapper:function(e){var t=e.children;return r.a.createElement(r.a.Fragment,{},t)}},d=r.a.forwardRef((function(e,t){var a=e.components,n=e.mdxType,o=e.originalType,i=e.parentName,l=p(e,["components","mdxType","originalType","parentName"]),b=s(a),d=n,m=b["".concat(i,".").concat(d)]||b[d]||u[d]||o;return a?r.a.createElement(m,c(c({ref:t},l),{},{components:a})):r.a.createElement(m,c({ref:t},l))}));function m(e,t){var a=arguments,n=t&&t.mdxType;if("string"==typeof e||n){var o=a.length,i=new Array(o);i[0]=d;var c={};for(var p in t)hasOwnProperty.call(t,p)&&(c[p]=t[p]);c.originalType=e,c.mdxType="string"==typeof e?e:n,i[1]=c;for(var l=2;l=0||(r[n]=e[n]);return r}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(a=0;a=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(r[n]=e[n])}return r}var s=r.a.createContext({}),l=function(e){var t=r.a.useContext(s),n=t;return e&&(n="function"==typeof e?e(t):c(c({},t),e)),n},b=function(e){var t=l(e.components);return r.a.createElement(s.Provider,{value:t},e.children)},u={inlineCode:"code",wrapper:function(e){var t=e.children;return r.a.createElement(r.a.Fragment,{},t)}},d=r.a.forwardRef((function(e,t){var n=e.components,a=e.mdxType,o=e.originalType,i=e.parentName,s=p(e,["components","mdxType","originalType","parentName"]),b=l(n),d=a,m=b["".concat(i,".").concat(d)]||b[d]||u[d]||o;return n?r.a.createElement(m,c(c({ref:t},s),{},{components:n})):r.a.createElement(m,c({ref:t},s))}));function m(e,t){var n=arguments,a=t&&t.mdxType;if("string"==typeof e||a){var o=n.length,i=new Array(o);i[0]=d;var c={};for(var p in t)hasOwnProperty.call(t,p)&&(c[p]=t[p]);c.originalType=e,c.mdxType="string"==typeof e?e:a,i[1]=c;for(var s=2;s 0:\n form = q.page['example']\n form.items = items\n else:\n q.page['example'] = ui.form_card(box='1 1 12 10', items=items)\n\n await q.page.save()\n\n\nlisten('/demo', serve)\n")))}l.isMDXComponent=!0},290:function(e,t,n){"use strict";n.d(t,"a",(function(){return p})),n.d(t,"b",(function(){return b}));var r=n(0),a=n.n(r);function c(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function o(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function i(e){for(var t=1;t=0||(a[n]=e[n]);return a}(e,t);if(Object.getOwnPropertySymbols){var c=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(a[n]=e[n])}return a}var s=a.a.createContext({}),l=function(e){var t=a.a.useContext(s),n=t;return e&&(n="function"==typeof e?e(t):i(i({},t),e)),n},p=function(e){var t=l(e.components);return a.a.createElement(s.Provider,{value:t},e.children)},m={inlineCode:"code",wrapper:function(e){var t=e.children;return a.a.createElement(a.a.Fragment,{},t)}},d=a.a.forwardRef((function(e,t){var n=e.components,r=e.mdxType,c=e.originalType,o=e.parentName,s=u(e,["components","mdxType","originalType","parentName"]),p=l(n),d=r,b=p["".concat(o,".").concat(d)]||p[d]||m[d]||c;return n?a.a.createElement(b,i(i({ref:t},s),{},{components:n})):a.a.createElement(b,i({ref:t},s))}));function b(e,t){var n=arguments,r=t&&t.mdxType;if("string"==typeof e||r){var c=n.length,o=new Array(c);o[0]=d;var i={};for(var u in t)hasOwnProperty.call(t,u)&&(i[u]=t[u]);i.originalType=e,i.mdxType="string"==typeof e?e:r,o[1]=i;for(var s=2;s=0||(a[n]=e[n]);return a}(e,t);if(Object.getOwnPropertySymbols){var c=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(a[n]=e[n])}return a}var l=a.a.createContext({}),s=function(e){var t=a.a.useContext(l),n=t;return e&&(n="function"==typeof e?e(t):i(i({},t),e)),n},p=function(e){var t=s(e.components);return a.a.createElement(l.Provider,{value:t},e.children)},d={inlineCode:"code",wrapper:function(e){var t=e.children;return a.a.createElement(a.a.Fragment,{},t)}},m=a.a.forwardRef((function(e,t){var n=e.components,r=e.mdxType,c=e.originalType,o=e.parentName,l=u(e,["components","mdxType","originalType","parentName"]),p=s(n),m=r,b=p["".concat(o,".").concat(m)]||p[m]||d[m]||c;return n?a.a.createElement(b,i(i({ref:t},l),{},{components:n})):a.a.createElement(b,i({ref:t},l))}));function b(e,t){var n=arguments,r=t&&t.mdxType;if("string"==typeof e||r){var c=n.length,o=new Array(c);o[0]=m;var i={};for(var u in t)hasOwnProperty.call(t,u)&&(i[u]=t[u]);i.originalType=e,i.mdxType="string"==typeof e?e:r,o[1]=i;for(var l=2;l=0||(a[r]=e[r]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(a[r]=e[r])}return a}var l=a.a.createContext({}),u=function(e){var t=a.a.useContext(l),r=t;return e&&(r="function"==typeof e?e(t):c(c({},t),e)),r},s=function(e){var t=u(e.components);return a.a.createElement(l.Provider,{value:t},e.children)},f={inlineCode:"code",wrapper:function(e){var t=e.children;return a.a.createElement(a.a.Fragment,{},t)}},m=a.a.forwardRef((function(e,t){var r=e.components,n=e.mdxType,o=e.originalType,i=e.parentName,l=p(e,["components","mdxType","originalType","parentName"]),s=u(r),m=n,d=s["".concat(i,".").concat(m)]||s[m]||f[m]||o;return r?a.a.createElement(d,c(c({ref:t},l),{},{components:r})):a.a.createElement(d,c({ref:t},l))}));function d(e,t){var r=arguments,n=t&&t.mdxType;if("string"==typeof e||n){var o=r.length,i=new Array(o);i[0]=m;var c={};for(var p in t)hasOwnProperty.call(t,p)&&(c[p]=t[p]);c.originalType=e,c.mdxType="string"==typeof e?e:n,i[1]=c;for(var l=2;l=0||(a[r]=e[r]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(a[r]=e[r])}return a}var l=a.a.createContext({}),u=function(e){var t=a.a.useContext(l),r=t;return e&&(r="function"==typeof e?e(t):c(c({},t),e)),r},s=function(e){var t=u(e.components);return a.a.createElement(l.Provider,{value:t},e.children)},f={inlineCode:"code",wrapper:function(e){var t=e.children;return a.a.createElement(a.a.Fragment,{},t)}},m=a.a.forwardRef((function(e,t){var r=e.components,n=e.mdxType,o=e.originalType,i=e.parentName,l=p(e,["components","mdxType","originalType","parentName"]),s=u(r),m=n,d=s["".concat(i,".").concat(m)]||s[m]||f[m]||o;return r?a.a.createElement(d,c(c({ref:t},l),{},{components:r})):a.a.createElement(d,c({ref:t},l))}));function d(e,t){var r=arguments,n=t&&t.mdxType;if("string"==typeof e||n){var o=r.length,i=new Array(o);i[0]=m;var c={};for(var p in t)hasOwnProperty.call(t,p)&&(c[p]=t[p]);c.originalType=e,c.mdxType="string"==typeof e?e:n,i[1]=c;for(var l=2;l=0||(o[n]=e[n]);return o}(e,r);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(t=0;t=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var u=o.a.createContext({}),l=function(e){var r=o.a.useContext(u),n=r;return e&&(n="function"==typeof e?e(r):c(c({},r),e)),n},p=function(e){var r=l(e.components);return o.a.createElement(u.Provider,{value:r},e.children)},b={inlineCode:"code",wrapper:function(e){var r=e.children;return o.a.createElement(o.a.Fragment,{},r)}},A=o.a.forwardRef((function(e,r){var n=e.components,t=e.mdxType,a=e.originalType,i=e.parentName,u=s(e,["components","mdxType","originalType","parentName"]),p=l(n),A=t,m=p["".concat(i,".").concat(A)]||p[A]||b[A]||a;return n?o.a.createElement(m,c(c({ref:r},u),{},{components:n})):o.a.createElement(m,c({ref:r},u))}));function m(e,r){var n=arguments,t=r&&r.mdxType;if("string"==typeof e||t){var a=n.length,i=new Array(a);i[0]=A;var c={};for(var s in r)hasOwnProperty.call(r,s)&&(c[s]=r[s]);c.originalType=e,c.mdxType="string"==typeof e?e:t,i[1]=c;for(var u=2;u=0||(o[n]=e[n]);return o}(e,r);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(t=0;t=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var u=o.a.createContext({}),l=function(e){var r=o.a.useContext(u),n=r;return e&&(n="function"==typeof e?e(r):c(c({},r),e)),n},p=function(e){var r=l(e.components);return o.a.createElement(u.Provider,{value:r},e.children)},b={inlineCode:"code",wrapper:function(e){var r=e.children;return o.a.createElement(o.a.Fragment,{},r)}},A=o.a.forwardRef((function(e,r){var n=e.components,t=e.mdxType,a=e.originalType,i=e.parentName,u=s(e,["components","mdxType","originalType","parentName"]),p=l(n),A=t,m=p["".concat(i,".").concat(A)]||p[A]||b[A]||a;return n?o.a.createElement(m,c(c({ref:r},u),{},{components:n})):o.a.createElement(m,c({ref:r},u))}));function m(e,r){var n=arguments,t=r&&r.mdxType;if("string"==typeof e||t){var a=n.length,i=new Array(a);i[0]=A;var c={};for(var s in r)hasOwnProperty.call(r,s)&&(c[s]=r[s]);c.originalType=e,c.mdxType="string"==typeof e?e:t,i[1]=c;for(var u=2;u=0||(a[n]=e[n]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(a[n]=e[n])}return a}var s=a.a.createContext({}),l=function(e){var t=a.a.useContext(s),n=t;return e&&(n="function"==typeof e?e(t):i(i({},t),e)),n},u=function(e){var t=l(e.components);return a.a.createElement(s.Provider,{value:t},e.children)},f={inlineCode:"code",wrapper:function(e){var t=e.children;return a.a.createElement(a.a.Fragment,{},t)}},d=a.a.forwardRef((function(e,t){var n=e.components,r=e.mdxType,o=e.originalType,p=e.parentName,s=c(e,["components","mdxType","originalType","parentName"]),u=l(n),d=r,m=u["".concat(p,".").concat(d)]||u[d]||f[d]||o;return n?a.a.createElement(m,i(i({ref:t},s),{},{components:n})):a.a.createElement(m,i({ref:t},s))}));function m(e,t){var n=arguments,r=t&&t.mdxType;if("string"==typeof e||r){var o=n.length,p=new Array(o);p[0]=d;var i={};for(var c in t)hasOwnProperty.call(t,c)&&(i[c]=t[c]);i.originalType=e,i.mdxType="string"==typeof e?e:r,p[1]=i;for(var s=2;s=0||(a[n]=e[n]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(a[n]=e[n])}return a}var s=a.a.createContext({}),l=function(e){var t=a.a.useContext(s),n=t;return e&&(n="function"==typeof e?e(t):i(i({},t),e)),n},u=function(e){var t=l(e.components);return a.a.createElement(s.Provider,{value:t},e.children)},f={inlineCode:"code",wrapper:function(e){var t=e.children;return a.a.createElement(a.a.Fragment,{},t)}},d=a.a.forwardRef((function(e,t){var n=e.components,r=e.mdxType,o=e.originalType,p=e.parentName,s=c(e,["components","mdxType","originalType","parentName"]),u=l(n),d=r,m=u["".concat(p,".").concat(d)]||u[d]||f[d]||o;return n?a.a.createElement(m,i(i({ref:t},s),{},{components:n})):a.a.createElement(m,i({ref:t},s))}));function m(e,t){var n=arguments,r=t&&t.mdxType;if("string"==typeof e||r){var o=n.length,p=new Array(o);p[0]=d;var i={};for(var c in t)hasOwnProperty.call(t,c)&&(i[c]=t[c]);i.originalType=e,i.mdxType="string"==typeof e?e:r,p[1]=i;for(var s=2;s=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(i=0;i=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var c=o.a.createContext({}),l=function(e){var t=o.a.useContext(c),n=t;return e&&(n="function"==typeof e?e(t):s(s({},t),e)),n},p=function(e){var t=l(e.components);return o.a.createElement(c.Provider,{value:t},e.children)},d={inlineCode:"code",wrapper:function(e){var t=e.children;return o.a.createElement(o.a.Fragment,{},t)}},b=o.a.forwardRef((function(e,t){var n=e.components,i=e.mdxType,a=e.originalType,r=e.parentName,c=u(e,["components","mdxType","originalType","parentName"]),p=l(n),b=i,h=p["".concat(r,".").concat(b)]||p[b]||d[b]||a;return n?o.a.createElement(h,s(s({ref:t},c),{},{components:n})):o.a.createElement(h,s({ref:t},c))}));function h(e,t){var n=arguments,i=t&&t.mdxType;if("string"==typeof e||i){var a=n.length,r=new Array(a);r[0]=b;var s={};for(var u in t)hasOwnProperty.call(t,u)&&(s[u]=t[u]);s.originalType=e,s.mdxType="string"==typeof e?e:i,r[1]=s;for(var c=2;c=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(i=0;i=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var c=o.a.createContext({}),l=function(e){var t=o.a.useContext(c),n=t;return e&&(n="function"==typeof e?e(t):s(s({},t),e)),n},p=function(e){var t=l(e.components);return o.a.createElement(c.Provider,{value:t},e.children)},d={inlineCode:"code",wrapper:function(e){var t=e.children;return o.a.createElement(o.a.Fragment,{},t)}},b=o.a.forwardRef((function(e,t){var n=e.components,i=e.mdxType,a=e.originalType,r=e.parentName,c=u(e,["components","mdxType","originalType","parentName"]),p=l(n),b=i,h=p["".concat(r,".").concat(b)]||p[b]||d[b]||a;return n?o.a.createElement(h,s(s({ref:t},c),{},{components:n})):o.a.createElement(h,s({ref:t},c))}));function h(e,t){var n=arguments,i=t&&t.mdxType;if("string"==typeof e||i){var a=n.length,r=new Array(a);r[0]=b;var s={};for(var u in t)hasOwnProperty.call(t,u)&&(s[u]=t[u]);s.originalType=e,s.mdxType="string"==typeof e?e:i,r[1]=s;for(var c=2;c=0||(a[n]=e[n]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(a[n]=e[n])}return a}var c=a.a.createContext({}),s=function(e){var t=a.a.useContext(c),n=t;return e&&(n="function"==typeof e?e(t):l(l({},t),e)),n},u=function(e){var t=s(e.components);return a.a.createElement(c.Provider,{value:t},e.children)},m={inlineCode:"code",wrapper:function(e){var t=e.children;return a.a.createElement(a.a.Fragment,{},t)}},d=a.a.forwardRef((function(e,t){var n=e.components,r=e.mdxType,o=e.originalType,i=e.parentName,c=p(e,["components","mdxType","originalType","parentName"]),u=s(n),d=r,f=u["".concat(i,".").concat(d)]||u[d]||m[d]||o;return n?a.a.createElement(f,l(l({ref:t},c),{},{components:n})):a.a.createElement(f,l({ref:t},c))}));function f(e,t){var n=arguments,r=t&&t.mdxType;if("string"==typeof e||r){var o=n.length,i=new Array(o);i[0]=d;var l={};for(var p in t)hasOwnProperty.call(t,p)&&(l[p]=t[p]);l.originalType=e,l.mdxType="string"==typeof e?e:r,i[1]=l;for(var c=2;c=0||(a[n]=e[n]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(a[n]=e[n])}return a}var c=a.a.createContext({}),s=function(e){var t=a.a.useContext(c),n=t;return e&&(n="function"==typeof e?e(t):l(l({},t),e)),n},u=function(e){var t=s(e.components);return a.a.createElement(c.Provider,{value:t},e.children)},m={inlineCode:"code",wrapper:function(e){var t=e.children;return a.a.createElement(a.a.Fragment,{},t)}},d=a.a.forwardRef((function(e,t){var n=e.components,r=e.mdxType,o=e.originalType,i=e.parentName,c=p(e,["components","mdxType","originalType","parentName"]),u=s(n),d=r,f=u["".concat(i,".").concat(d)]||u[d]||m[d]||o;return n?a.a.createElement(f,l(l({ref:t},c),{},{components:n})):a.a.createElement(f,l({ref:t},c))}));function f(e,t){var n=arguments,r=t&&t.mdxType;if("string"==typeof e||r){var o=n.length,i=new Array(o);i[0]=d;var l={};for(var p in t)hasOwnProperty.call(t,p)&&(l[p]=t[p]);l.originalType=e,l.mdxType="string"==typeof e?e:r,i[1]=l;for(var c=2;c=0||(n[t]=e[t]);return n}(e,r);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(a=0;a=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(n[t]=e[t])}return n}var u=n.a.createContext({}),l=function(e){var r=n.a.useContext(u),t=r;return e&&(t="function"==typeof e?e(r):c(c({},r),e)),t},d=function(e){var r=l(e.components);return n.a.createElement(u.Provider,{value:r},e.children)},m={inlineCode:"code",wrapper:function(e){var r=e.children;return n.a.createElement(n.a.Fragment,{},r)}},s=n.a.forwardRef((function(e,r){var t=e.components,a=e.mdxType,o=e.originalType,i=e.parentName,u=p(e,["components","mdxType","originalType","parentName"]),d=l(t),s=a,f=d["".concat(i,".").concat(s)]||d[s]||m[s]||o;return t?n.a.createElement(f,c(c({ref:r},u),{},{components:t})):n.a.createElement(f,c({ref:r},u))}));function f(e,r){var t=arguments,a=r&&r.mdxType;if("string"==typeof e||a){var o=t.length,i=new Array(o);i[0]=s;var c={};for(var p in r)hasOwnProperty.call(r,p)&&(c[p]=r[p]);c.originalType=e,c.mdxType="string"==typeof e?e:a,i[1]=c;for(var u=2;u=0||(n[t]=e[t]);return n}(e,r);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(a=0;a=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(n[t]=e[t])}return n}var u=n.a.createContext({}),l=function(e){var r=n.a.useContext(u),t=r;return e&&(t="function"==typeof e?e(r):c(c({},r),e)),t},d=function(e){var r=l(e.components);return n.a.createElement(u.Provider,{value:r},e.children)},m={inlineCode:"code",wrapper:function(e){var r=e.children;return n.a.createElement(n.a.Fragment,{},r)}},s=n.a.forwardRef((function(e,r){var t=e.components,a=e.mdxType,o=e.originalType,i=e.parentName,u=p(e,["components","mdxType","originalType","parentName"]),d=l(t),s=a,f=d["".concat(i,".").concat(s)]||d[s]||m[s]||o;return t?n.a.createElement(f,c(c({ref:r},u),{},{components:t})):n.a.createElement(f,c({ref:r},u))}));function f(e,r){var t=arguments,a=r&&r.mdxType;if("string"==typeof e||a){var o=t.length,i=new Array(o);i[0]=s;var c={};for(var p in r)hasOwnProperty.call(r,p)&&(c[p]=r[p]);c.originalType=e,c.mdxType="string"==typeof e?e:a,i[1]=c;for(var u=2;u=0||(n[t]=e[t]);return n}(e,a);if(Object.getOwnPropertySymbols){var c=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(n[t]=e[t])}return n}var l=n.a.createContext({}),o=function(e){var a=n.a.useContext(l),t=a;return e&&(t="function"==typeof e?e(a):b(b({},a),e)),t},s=function(e){var a=o(e.components);return n.a.createElement(l.Provider,{value:a},e.children)},p={inlineCode:"code",wrapper:function(e){var a=e.children;return n.a.createElement(n.a.Fragment,{},a)}},u=n.a.forwardRef((function(e,a){var t=e.components,r=e.mdxType,c=e.originalType,i=e.parentName,l=d(e,["components","mdxType","originalType","parentName"]),s=o(t),u=r,m=s["".concat(i,".").concat(u)]||s[u]||p[u]||c;return t?n.a.createElement(m,b(b({ref:a},l),{},{components:t})):n.a.createElement(m,b({ref:a},l))}));function m(e,a){var t=arguments,r=a&&a.mdxType;if("string"==typeof e||r){var c=t.length,i=new Array(c);i[0]=u;var b={};for(var d in a)hasOwnProperty.call(a,d)&&(b[d]=a[d]);b.originalType=e,b.mdxType="string"==typeof e?e:r,i[1]=b;for(var l=2;l=0||(n[t]=e[t]);return n}(e,a);if(Object.getOwnPropertySymbols){var c=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(n[t]=e[t])}return n}var l=n.a.createContext({}),o=function(e){var a=n.a.useContext(l),t=a;return e&&(t="function"==typeof e?e(a):b(b({},a),e)),t},s=function(e){var a=o(e.components);return n.a.createElement(l.Provider,{value:a},e.children)},p={inlineCode:"code",wrapper:function(e){var a=e.children;return n.a.createElement(n.a.Fragment,{},a)}},u=n.a.forwardRef((function(e,a){var t=e.components,r=e.mdxType,c=e.originalType,i=e.parentName,l=d(e,["components","mdxType","originalType","parentName"]),s=o(t),u=r,m=s["".concat(i,".").concat(u)]||s[u]||p[u]||c;return t?n.a.createElement(m,b(b({ref:a},l),{},{components:t})):n.a.createElement(m,b({ref:a},l))}));function m(e,a){var t=arguments,r=a&&a.mdxType;if("string"==typeof e||r){var c=t.length,i=new Array(c);i[0]=u;var b={};for(var d in a)hasOwnProperty.call(a,d)&&(b[d]=a[d]);b.originalType=e,b.mdxType="string"==typeof e?e:r,i[1]=b;for(var l=2;l The quick brown fox jumped over the lazy dog.\n\nUnordered list:\n\n- The quick brown fox jumped over the lazy dog.\n- The quick brown fox jumped over the lazy dog.\n- The quick brown fox jumped over the lazy dog.\n\nOrdered list:\n\n1. The quick brown fox jumped over the lazy dog.\n1. The quick brown fox jumped over the lazy dog.\n1. The quick brown fox jumped over the lazy dog.\n\nImage:\n\n![Monty Python](https://upload.wikimedia.org/wikipedia/en/c/cb/Flyingcircus_2.jpg)\n\nLinks:\n\nHere's a [link to an image](https://upload.wikimedia.org/wikipedia/en/c/cb/Flyingcircus_2.jpg).\n\nTable:\n\n| Column 1 | Column 2 | Column 3 |\n| -------- | -------- | -------- |\n| Item 1 | Item 2 | Item 3 |\n| Item 1 | Item 2 | Item 3 |\n| Item 1 | Item 2 | Item 3 |\n'''\n\npage['example'] = ui.form_card(\n box='1 1 4 -1',\n items=[ui.text(sample_markdown)]\n)\npage.save()\n")))}l.isMDXComponent=!0},290:function(e,t,n){"use strict";n.d(t,"a",(function(){return m})),n.d(t,"b",(function(){return f}));var r=n(0),o=n.n(r);function a(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function i(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function c(e){for(var t=1;t=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var u=o.a.createContext({}),l=function(e){var t=o.a.useContext(u),n=t;return e&&(n="function"==typeof e?e(t):c(c({},t),e)),n},m=function(e){var t=l(e.components);return o.a.createElement(u.Provider,{value:t},e.children)},s={inlineCode:"code",wrapper:function(e){var t=e.children;return o.a.createElement(o.a.Fragment,{},t)}},d=o.a.forwardRef((function(e,t){var n=e.components,r=e.mdxType,a=e.originalType,i=e.parentName,u=p(e,["components","mdxType","originalType","parentName"]),m=l(n),d=r,f=m["".concat(i,".").concat(d)]||m[d]||s[d]||a;return n?o.a.createElement(f,c(c({ref:t},u),{},{components:n})):o.a.createElement(f,c({ref:t},u))}));function f(e,t){var n=arguments,r=t&&t.mdxType;if("string"==typeof e||r){var a=n.length,i=new Array(a);i[0]=d;var c={};for(var p in t)hasOwnProperty.call(t,p)&&(c[p]=t[p]);c.originalType=e,c.mdxType="string"==typeof e?e:r,i[1]=c;for(var u=2;u The quick brown fox jumped over the lazy dog.\n\nUnordered list:\n\n- The quick brown fox jumped over the lazy dog.\n- The quick brown fox jumped over the lazy dog.\n- The quick brown fox jumped over the lazy dog.\n\nOrdered list:\n\n1. The quick brown fox jumped over the lazy dog.\n1. The quick brown fox jumped over the lazy dog.\n1. The quick brown fox jumped over the lazy dog.\n\nImage:\n\n![Monty Python](https://upload.wikimedia.org/wikipedia/en/c/cb/Flyingcircus_2.jpg)\n\nLinks:\n\nHere's a [link to an image](https://upload.wikimedia.org/wikipedia/en/c/cb/Flyingcircus_2.jpg).\n\nTable:\n\n| Column 1 | Column 2 | Column 3 |\n| -------- | -------- | -------- |\n| Item 1 | Item 2 | Item 3 |\n| Item 1 | Item 2 | Item 3 |\n| Item 1 | Item 2 | Item 3 |\n'''\n\npage['example'] = ui.form_card(\n box='1 1 4 -1',\n items=[ui.text(sample_markdown)]\n)\npage.save()\n")))}l.isMDXComponent=!0},292:function(e,t,n){"use strict";n.d(t,"a",(function(){return m})),n.d(t,"b",(function(){return f}));var r=n(0),o=n.n(r);function a(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function i(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function c(e){for(var t=1;t=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var u=o.a.createContext({}),l=function(e){var t=o.a.useContext(u),n=t;return e&&(n="function"==typeof e?e(t):c(c({},t),e)),n},m=function(e){var t=l(e.components);return o.a.createElement(u.Provider,{value:t},e.children)},s={inlineCode:"code",wrapper:function(e){var t=e.children;return o.a.createElement(o.a.Fragment,{},t)}},d=o.a.forwardRef((function(e,t){var n=e.components,r=e.mdxType,a=e.originalType,i=e.parentName,u=p(e,["components","mdxType","originalType","parentName"]),m=l(n),d=r,f=m["".concat(i,".").concat(d)]||m[d]||s[d]||a;return n?o.a.createElement(f,c(c({ref:t},u),{},{components:n})):o.a.createElement(f,c({ref:t},u))}));function f(e,t){var n=arguments,r=t&&t.mdxType;if("string"==typeof e||r){var a=n.length,i=new Array(a);i[0]=d;var c={};for(var p in t)hasOwnProperty.call(t,p)&&(c[p]=t[p]);c.originalType=e,c.mdxType="string"==typeof e?e:r,i[1]=c;for(var u=2;u=0||(r[n]=e[n]);return r}(e,a);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(t=0;t=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(r[n]=e[n])}return r}var l=r.a.createContext({}),d=function(e){var a=r.a.useContext(l),n=a;return e&&(n="function"==typeof e?e(a):u(u({},a),e)),n},p=function(e){var a=d(e.components);return r.a.createElement(l.Provider,{value:a},e.children)},s={inlineCode:"code",wrapper:function(e){var a=e.children;return r.a.createElement(r.a.Fragment,{},a)}},f=r.a.forwardRef((function(e,a){var n=e.components,t=e.mdxType,o=e.originalType,i=e.parentName,l=c(e,["components","mdxType","originalType","parentName"]),p=d(n),f=t,m=p["".concat(i,".").concat(f)]||p[f]||s[f]||o;return n?r.a.createElement(m,u(u({ref:a},l),{},{components:n})):r.a.createElement(m,u({ref:a},l))}));function m(e,a){var n=arguments,t=a&&a.mdxType;if("string"==typeof e||t){var o=n.length,i=new Array(o);i[0]=f;var u={};for(var c in a)hasOwnProperty.call(a,c)&&(u[c]=a[c]);u.originalType=e,u.mdxType="string"==typeof e?e:t,i[1]=u;for(var l=2;l=0||(r[n]=e[n]);return r}(e,a);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(t=0;t=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(r[n]=e[n])}return r}var l=r.a.createContext({}),d=function(e){var a=r.a.useContext(l),n=a;return e&&(n="function"==typeof e?e(a):u(u({},a),e)),n},p=function(e){var a=d(e.components);return r.a.createElement(l.Provider,{value:a},e.children)},s={inlineCode:"code",wrapper:function(e){var a=e.children;return r.a.createElement(r.a.Fragment,{},a)}},f=r.a.forwardRef((function(e,a){var n=e.components,t=e.mdxType,o=e.originalType,i=e.parentName,l=c(e,["components","mdxType","originalType","parentName"]),p=d(n),f=t,m=p["".concat(i,".").concat(f)]||p[f]||s[f]||o;return n?r.a.createElement(m,u(u({ref:a},l),{},{components:n})):r.a.createElement(m,u({ref:a},l))}));function m(e,a){var n=arguments,t=a&&a.mdxType;if("string"==typeof e||t){var o=n.length,i=new Array(o);i[0]=f;var u={};for(var c in a)hasOwnProperty.call(a,c)&&(u[c]=a[c]);u.originalType=e,u.mdxType="string"==typeof e?e:t,i[1]=u;for(var l=2;l=0||(n[a]=e[a]);return n}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,a)&&(n[a]=e[a])}return n}var p=n.a.createContext({}),l=function(e){var t=n.a.useContext(p),a=t;return e&&(a="function"==typeof e?e(t):c(c({},t),e)),a},b=function(e){var t=l(e.components);return n.a.createElement(p.Provider,{value:t},e.children)},u={inlineCode:"code",wrapper:function(e){var t=e.children;return n.a.createElement(n.a.Fragment,{},t)}},d=n.a.forwardRef((function(e,t){var a=e.components,r=e.mdxType,o=e.originalType,i=e.parentName,p=s(e,["components","mdxType","originalType","parentName"]),b=l(a),d=r,h=b["".concat(i,".").concat(d)]||b[d]||u[d]||o;return a?n.a.createElement(h,c(c({ref:t},p),{},{components:a})):n.a.createElement(h,c({ref:t},p))}));function h(e,t){var a=arguments,r=t&&t.mdxType;if("string"==typeof e||r){var o=a.length,i=new Array(o);i[0]=d;var c={};for(var s in t)hasOwnProperty.call(t,s)&&(c[s]=t[s]);c.originalType=e,c.mdxType="string"==typeof e?e:r,i[1]=c;for(var p=2;p=0||(n[a]=e[a]);return n}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,a)&&(n[a]=e[a])}return n}var p=n.a.createContext({}),l=function(e){var t=n.a.useContext(p),a=t;return e&&(a="function"==typeof e?e(t):c(c({},t),e)),a},b=function(e){var t=l(e.components);return n.a.createElement(p.Provider,{value:t},e.children)},u={inlineCode:"code",wrapper:function(e){var t=e.children;return n.a.createElement(n.a.Fragment,{},t)}},d=n.a.forwardRef((function(e,t){var a=e.components,r=e.mdxType,o=e.originalType,i=e.parentName,p=s(e,["components","mdxType","originalType","parentName"]),b=l(a),d=r,h=b["".concat(i,".").concat(d)]||b[d]||u[d]||o;return a?n.a.createElement(h,c(c({ref:t},p),{},{components:a})):n.a.createElement(h,c({ref:t},p))}));function h(e,t){var a=arguments,r=t&&t.mdxType;if("string"==typeof e||r){var o=a.length,i=new Array(o);i[0]=d;var c={};for(var s in t)hasOwnProperty.call(t,s)&&(c[s]=t[s]);c.originalType=e,c.mdxType="string"==typeof e?e:r,i[1]=c;for(var p=2;p=0||(a[r]=e[r]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(a[r]=e[r])}return a}var l=a.a.createContext({}),u=function(e){var t=a.a.useContext(l),r=t;return e&&(r="function"==typeof e?e(t):p(p({},t),e)),r},s=function(e){var t=u(e.components);return a.a.createElement(l.Provider,{value:t},e.children)},m={inlineCode:"code",wrapper:function(e){var t=e.children;return a.a.createElement(a.a.Fragment,{},t)}},d=a.a.forwardRef((function(e,t){var r=e.components,n=e.mdxType,o=e.originalType,i=e.parentName,l=c(e,["components","mdxType","originalType","parentName"]),s=u(r),d=n,f=s["".concat(i,".").concat(d)]||s[d]||m[d]||o;return r?a.a.createElement(f,p(p({ref:t},l),{},{components:r})):a.a.createElement(f,p({ref:t},l))}));function f(e,t){var r=arguments,n=t&&t.mdxType;if("string"==typeof e||n){var o=r.length,i=new Array(o);i[0]=d;var p={};for(var c in t)hasOwnProperty.call(t,c)&&(p[c]=t[c]);p.originalType=e,p.mdxType="string"==typeof e?e:n,i[1]=p;for(var l=2;l=0||(a[r]=e[r]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(a[r]=e[r])}return a}var l=a.a.createContext({}),u=function(e){var t=a.a.useContext(l),r=t;return e&&(r="function"==typeof e?e(t):p(p({},t),e)),r},s=function(e){var t=u(e.components);return a.a.createElement(l.Provider,{value:t},e.children)},m={inlineCode:"code",wrapper:function(e){var t=e.children;return a.a.createElement(a.a.Fragment,{},t)}},d=a.a.forwardRef((function(e,t){var r=e.components,n=e.mdxType,o=e.originalType,i=e.parentName,l=c(e,["components","mdxType","originalType","parentName"]),s=u(r),d=n,f=s["".concat(i,".").concat(d)]||s[d]||m[d]||o;return r?a.a.createElement(f,p(p({ref:t},l),{},{components:r})):a.a.createElement(f,p({ref:t},l))}));function f(e,t){var r=arguments,n=t&&t.mdxType;if("string"==typeof e||n){var o=r.length,i=new Array(o);i[0]=d;var p={};for(var c in t)hasOwnProperty.call(t,c)&&(p[c]=t[c]);p.originalType=e,p.mdxType="string"==typeof e?e:n,i[1]=p;for(var l=2;l=0||(i[n]=e[n]);return i}(e,s);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(t=0;t=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(i[n]=e[n])}return i}var l=i.a.createContext({}),c=function(e){var s=i.a.useContext(l),n=s;return e&&(n="function"==typeof e?e(s):u(u({},s),e)),n},p=function(e){var s=c(e.components);return i.a.createElement(l.Provider,{value:s},e.children)},m={inlineCode:"code",wrapper:function(e){var s=e.children;return i.a.createElement(i.a.Fragment,{},s)}},f=i.a.forwardRef((function(e,s){var n=e.components,t=e.mdxType,a=e.originalType,r=e.parentName,l=o(e,["components","mdxType","originalType","parentName"]),p=c(n),f=t,d=p["".concat(r,".").concat(f)]||p[f]||m[f]||a;return n?i.a.createElement(d,u(u({ref:s},l),{},{components:n})):i.a.createElement(d,u({ref:s},l))}));function d(e,s){var n=arguments,t=s&&s.mdxType;if("string"==typeof e||t){var a=n.length,r=new Array(a);r[0]=f;var u={};for(var o in s)hasOwnProperty.call(s,o)&&(u[o]=s[o]);u.originalType=e,u.mdxType="string"==typeof e?e:t,r[1]=u;for(var l=2;l=0||(i[n]=e[n]);return i}(e,s);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(t=0;t=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(i[n]=e[n])}return i}var l=i.a.createContext({}),c=function(e){var s=i.a.useContext(l),n=s;return e&&(n="function"==typeof e?e(s):u(u({},s),e)),n},p=function(e){var s=c(e.components);return i.a.createElement(l.Provider,{value:s},e.children)},m={inlineCode:"code",wrapper:function(e){var s=e.children;return i.a.createElement(i.a.Fragment,{},s)}},f=i.a.forwardRef((function(e,s){var n=e.components,t=e.mdxType,a=e.originalType,r=e.parentName,l=o(e,["components","mdxType","originalType","parentName"]),p=c(n),f=t,d=p["".concat(r,".").concat(f)]||p[f]||m[f]||a;return n?i.a.createElement(d,u(u({ref:s},l),{},{components:n})):i.a.createElement(d,u({ref:s},l))}));function d(e,s){var n=arguments,t=s&&s.mdxType;if("string"==typeof e||t){var a=n.length,r=new Array(a);r[0]=f;var u={};for(var o in s)hasOwnProperty.call(s,o)&&(u[o]=s[o]);u.originalType=e,u.mdxType="string"==typeof e?e:t,r[1]=u;for(var l=2;l=0||(a[n]=e[n]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(a[n]=e[n])}return a}var c=a.a.createContext({}),p=function(e){var t=a.a.useContext(c),n=t;return e&&(n="function"==typeof e?e(t):i(i({},t),e)),n},u=function(e){var t=p(e.components);return a.a.createElement(c.Provider,{value:t},e.children)},d={inlineCode:"code",wrapper:function(e){var t=e.children;return a.a.createElement(a.a.Fragment,{},t)}},m=a.a.forwardRef((function(e,t){var n=e.components,r=e.mdxType,o=e.originalType,l=e.parentName,c=s(e,["components","mdxType","originalType","parentName"]),u=p(n),m=r,b=u["".concat(l,".").concat(m)]||u[m]||d[m]||o;return n?a.a.createElement(b,i(i({ref:t},c),{},{components:n})):a.a.createElement(b,i({ref:t},c))}));function b(e,t){var n=arguments,r=t&&t.mdxType;if("string"==typeof e||r){var o=n.length,l=new Array(o);l[0]=m;var i={};for(var s in t)hasOwnProperty.call(t,s)&&(i[s]=t[s]);i.originalType=e,i.mdxType="string"==typeof e?e:r,l[1]=i;for(var c=2;c=0||(a[n]=e[n]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(a[n]=e[n])}return a}var c=a.a.createContext({}),p=function(e){var t=a.a.useContext(c),n=t;return e&&(n="function"==typeof e?e(t):i(i({},t),e)),n},u=function(e){var t=p(e.components);return a.a.createElement(c.Provider,{value:t},e.children)},d={inlineCode:"code",wrapper:function(e){var t=e.children;return a.a.createElement(a.a.Fragment,{},t)}},m=a.a.forwardRef((function(e,t){var n=e.components,r=e.mdxType,o=e.originalType,l=e.parentName,c=s(e,["components","mdxType","originalType","parentName"]),u=p(n),m=r,b=u["".concat(l,".").concat(m)]||u[m]||d[m]||o;return n?a.a.createElement(b,i(i({ref:t},c),{},{components:n})):a.a.createElement(b,i({ref:t},c))}));function b(e,t){var n=arguments,r=t&&t.mdxType;if("string"==typeof e||r){var o=n.length,l=new Array(o);l[0]=m;var i={};for(var s in t)hasOwnProperty.call(t,s)&&(i[s]=t[s]);i.originalType=e,i.mdxType="string"==typeof e?e:r,l[1]=i;for(var c=2;c=0||(r[n]=e[n]);return r}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(a=0;a=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(r[n]=e[n])}return r}var b=r.a.createContext({}),l=function(e){var t=r.a.useContext(b),n=t;return e&&(n="function"==typeof e?e(t):c(c({},t),e)),n},p=function(e){var t=l(e.components);return r.a.createElement(b.Provider,{value:t},e.children)},s={inlineCode:"code",wrapper:function(e){var t=e.children;return r.a.createElement(r.a.Fragment,{},t)}},d=r.a.forwardRef((function(e,t){var n=e.components,a=e.mdxType,i=e.originalType,o=e.parentName,b=u(e,["components","mdxType","originalType","parentName"]),p=l(n),d=a,f=p["".concat(o,".").concat(d)]||p[d]||s[d]||i;return n?r.a.createElement(f,c(c({ref:t},b),{},{components:n})):r.a.createElement(f,c({ref:t},b))}));function f(e,t){var n=arguments,a=t&&t.mdxType;if("string"==typeof e||a){var i=n.length,o=new Array(i);o[0]=d;var c={};for(var u in t)hasOwnProperty.call(t,u)&&(c[u]=t[u]);c.originalType=e,c.mdxType="string"==typeof e?e:a,o[1]=c;for(var b=2;b=0||(r[n]=e[n]);return r}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(a=0;a=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(r[n]=e[n])}return r}var l=r.a.createContext({}),b=function(e){var t=r.a.useContext(l),n=t;return e&&(n="function"==typeof e?e(t):c(c({},t),e)),n},s=function(e){var t=b(e.components);return r.a.createElement(l.Provider,{value:t},e.children)},p={inlineCode:"code",wrapper:function(e){var t=e.children;return r.a.createElement(r.a.Fragment,{},t)}},d=r.a.forwardRef((function(e,t){var n=e.components,a=e.mdxType,i=e.originalType,o=e.parentName,l=u(e,["components","mdxType","originalType","parentName"]),s=b(n),d=a,f=s["".concat(o,".").concat(d)]||s[d]||p[d]||i;return n?r.a.createElement(f,c(c({ref:t},l),{},{components:n})):r.a.createElement(f,c({ref:t},l))}));function f(e,t){var n=arguments,a=t&&t.mdxType;if("string"==typeof e||a){var i=n.length,o=new Array(i);o[0]=d;var c={};for(var u in t)hasOwnProperty.call(t,u)&&(c[u]=t[u]);c.originalType=e,c.mdxType="string"==typeof e?e:a,o[1]=c;for(var l=2;l=0||(r[n]=e[n]);return r}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(a=0;a=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(r[n]=e[n])}return r}var c=r.a.createContext({}),l=function(e){var t=r.a.useContext(c),n=t;return e&&(n="function"==typeof e?e(t):s(s({},t),e)),n},b=function(e){var t=l(e.components);return r.a.createElement(c.Provider,{value:t},e.children)},u={inlineCode:"code",wrapper:function(e){var t=e.children;return r.a.createElement(r.a.Fragment,{},t)}},d=r.a.forwardRef((function(e,t){var n=e.components,a=e.mdxType,o=e.originalType,i=e.parentName,c=p(e,["components","mdxType","originalType","parentName"]),b=l(n),d=a,m=b["".concat(i,".").concat(d)]||b[d]||u[d]||o;return n?r.a.createElement(m,s(s({ref:t},c),{},{components:n})):r.a.createElement(m,s({ref:t},c))}));function m(e,t){var n=arguments,a=t&&t.mdxType;if("string"==typeof e||a){var o=n.length,i=new Array(o);i[0]=d;var s={};for(var p in t)hasOwnProperty.call(t,p)&&(s[p]=t[p]);s.originalType=e,s.mdxType="string"==typeof e?e:a,i[1]=s;for(var c=2;c=0||(r[n]=e[n]);return r}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(a=0;a=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(r[n]=e[n])}return r}var c=r.a.createContext({}),l=function(e){var t=r.a.useContext(c),n=t;return e&&(n="function"==typeof e?e(t):p(p({},t),e)),n},b=function(e){var t=l(e.components);return r.a.createElement(c.Provider,{value:t},e.children)},u={inlineCode:"code",wrapper:function(e){var t=e.children;return r.a.createElement(r.a.Fragment,{},t)}},d=r.a.forwardRef((function(e,t){var n=e.components,a=e.mdxType,o=e.originalType,i=e.parentName,c=s(e,["components","mdxType","originalType","parentName"]),b=l(n),d=a,m=b["".concat(i,".").concat(d)]||b[d]||u[d]||o;return n?r.a.createElement(m,p(p({ref:t},c),{},{components:n})):r.a.createElement(m,p({ref:t},c))}));function m(e,t){var n=arguments,a=t&&t.mdxType;if("string"==typeof e||a){var o=n.length,i=new Array(o);i[0]=d;var p={};for(var s in t)hasOwnProperty.call(t,s)&&(p[s]=t[s]);p.originalType=e,p.mdxType="string"==typeof e?e:a,i[1]=p;for(var c=2;c=0||(n[a]=e[a]);return n}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,a)&&(n[a]=e[a])}return n}var p=n.a.createContext({}),c=function(e){var t=n.a.useContext(p),a=t;return e&&(a="function"==typeof e?e(t):l(l({},t),e)),a},m=function(e){var t=c(e.components);return n.a.createElement(p.Provider,{value:t},e.children)},u={inlineCode:"code",wrapper:function(e){var t=e.children;return n.a.createElement(n.a.Fragment,{},t)}},d=n.a.forwardRef((function(e,t){var a=e.components,r=e.mdxType,o=e.originalType,i=e.parentName,p=s(e,["components","mdxType","originalType","parentName"]),m=c(a),d=r,f=m["".concat(i,".").concat(d)]||m[d]||u[d]||o;return a?n.a.createElement(f,l(l({ref:t},p),{},{components:a})):n.a.createElement(f,l({ref:t},p))}));function f(e,t){var a=arguments,r=t&&t.mdxType;if("string"==typeof e||r){var o=a.length,i=new Array(o);i[0]=d;var l={};for(var s in t)hasOwnProperty.call(t,s)&&(l[s]=t[s]);l.originalType=e,l.mdxType="string"==typeof e?e:r,i[1]=l;for(var p=2;p=0||(n[a]=e[a]);return n}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,a)&&(n[a]=e[a])}return n}var p=n.a.createContext({}),c=function(e){var t=n.a.useContext(p),a=t;return e&&(a="function"==typeof e?e(t):l(l({},t),e)),a},m=function(e){var t=c(e.components);return n.a.createElement(p.Provider,{value:t},e.children)},u={inlineCode:"code",wrapper:function(e){var t=e.children;return n.a.createElement(n.a.Fragment,{},t)}},d=n.a.forwardRef((function(e,t){var a=e.components,r=e.mdxType,o=e.originalType,i=e.parentName,p=s(e,["components","mdxType","originalType","parentName"]),m=c(a),d=r,f=m["".concat(i,".").concat(d)]||m[d]||u[d]||o;return a?n.a.createElement(f,l(l({ref:t},p),{},{components:a})):n.a.createElement(f,l({ref:t},p))}));function f(e,t){var a=arguments,r=t&&t.mdxType;if("string"==typeof e||r){var o=a.length,i=new Array(o);i[0]=d;var l={};for(var s in t)hasOwnProperty.call(t,s)&&(l[s]=t[s]);l.originalType=e,l.mdxType="string"==typeof e?e:r,i[1]=l;for(var p=2;p=0||(a[n]=e[n]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(a[n]=e[n])}return a}var b=a.a.createContext({}),s=function(e){var t=a.a.useContext(b),n=t;return e&&(n="function"==typeof e?e(t):i(i({},t),e)),n},d=function(e){var t=s(e.components);return a.a.createElement(b.Provider,{value:t},e.children)},u={inlineCode:"code",wrapper:function(e){var t=e.children;return a.a.createElement(a.a.Fragment,{},t)}},p=a.a.forwardRef((function(e,t){var n=e.components,r=e.mdxType,o=e.originalType,c=e.parentName,b=l(e,["components","mdxType","originalType","parentName"]),d=s(n),p=r,O=d["".concat(c,".").concat(p)]||d[p]||u[p]||o;return n?a.a.createElement(O,i(i({ref:t},b),{},{components:n})):a.a.createElement(O,i({ref:t},b))}));function O(e,t){var n=arguments,r=t&&t.mdxType;if("string"==typeof e||r){var o=n.length,c=new Array(o);c[0]=p;var i={};for(var l in t)hasOwnProperty.call(t,l)&&(i[l]=t[l]);i.originalType=e,i.mdxType="string"==typeof e?e:r,c[1]=i;for(var b=2;b=0||(a[n]=e[n]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(a[n]=e[n])}return a}var b=a.a.createContext({}),s=function(e){var t=a.a.useContext(b),n=t;return e&&(n="function"==typeof e?e(t):i(i({},t),e)),n},d=function(e){var t=s(e.components);return a.a.createElement(b.Provider,{value:t},e.children)},u={inlineCode:"code",wrapper:function(e){var t=e.children;return a.a.createElement(a.a.Fragment,{},t)}},p=a.a.forwardRef((function(e,t){var n=e.components,r=e.mdxType,o=e.originalType,c=e.parentName,b=l(e,["components","mdxType","originalType","parentName"]),d=s(n),p=r,O=d["".concat(c,".").concat(p)]||d[p]||u[p]||o;return n?a.a.createElement(O,i(i({ref:t},b),{},{components:n})):a.a.createElement(O,i({ref:t},b))}));function O(e,t){var n=arguments,r=t&&t.mdxType;if("string"==typeof e||r){var o=n.length,c=new Array(o);c[0]=p;var i={};for(var l in t)hasOwnProperty.call(t,l)&&(i[l]=t[l]);i.originalType=e,i.mdxType="string"==typeof e?e:r,c[1]=i;for(var b=2;b 0.5 else 'BoxMultiplySolid'),\n notifications=('Off' if random.random() > 0.5 else 'On')) for i in range(100)\n]\n\n# Create columns for our issue table.\ncolumns = [\n ui.table_column(name='text', label='Issue'),\n ui.table_column(name='status', label='Status', filterable=True),\n ui.table_column(name='notifications', label='Notifications', filterable=True),\n ui.table_column(name='done', label='Done', cell_type=ui.icon_table_cell_type()),\n ui.table_column(name='views', label='Views'),\n ui.table_column(name='progress', label='Progress', cell_type=ui.progress_table_cell_type()),\n]\n\n\n@app('/demo')\nasync def serve(q: Q):\n q.page['form'] = ui.form_card(box='1 1 -1 11', items=[\n ui.table(\n name='issues',\n columns=columns,\n rows=[ui.table_row(\n name=issue.id,\n cells=[issue.text, issue.status, issue.notifications, issue.icon, str(issue.views), issue.progress]) for\n issue in issues]\n )\n ])\n await q.page.save()\n")))}u.isMDXComponent=!0},292:function(e,n,t){"use strict";t.d(n,"a",(function(){return f})),t.d(n,"b",(function(){return b}));var r=t(0),a=t.n(r);function i(e,n,t){return n in e?Object.defineProperty(e,n,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[n]=t,e}function s(e,n){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);n&&(r=r.filter((function(n){return Object.getOwnPropertyDescriptor(e,n).enumerable}))),t.push.apply(t,r)}return t}function o(e){for(var n=1;n=0||(a[t]=e[t]);return a}(e,n);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(a[t]=e[t])}return a}var c=a.a.createContext({}),u=function(e){var n=a.a.useContext(c),t=n;return e&&(t="function"==typeof e?e(n):o(o({},n),e)),t},f=function(e){var n=u(e.components);return a.a.createElement(c.Provider,{value:n},e.children)},p={inlineCode:"code",wrapper:function(e){var n=e.children;return a.a.createElement(a.a.Fragment,{},n)}},m=a.a.forwardRef((function(e,n){var t=e.components,r=e.mdxType,i=e.originalType,s=e.parentName,c=l(e,["components","mdxType","originalType","parentName"]),f=u(t),m=r,b=f["".concat(s,".").concat(m)]||f[m]||p[m]||i;return t?a.a.createElement(b,o(o({ref:n},c),{},{components:t})):a.a.createElement(b,o({ref:n},c))}));function b(e,n){var t=arguments,r=n&&n.mdxType;if("string"==typeof e||r){var i=t.length,s=new Array(i);s[0]=m;var o={};for(var l in n)hasOwnProperty.call(n,l)&&(o[l]=n[l]);o.originalType=e,o.mdxType="string"==typeof e?e:r,s[1]=o;for(var c=2;c 0.5 else 'BoxMultiplySolid'),\n notifications=('Off' if random.random() > 0.5 else 'On')) for i in range(100)\n]\n\n# Create columns for our issue table.\ncolumns = [\n ui.table_column(name='text', label='Issue'),\n ui.table_column(name='status', label='Status', filterable=True),\n ui.table_column(name='notifications', label='Notifications', filterable=True),\n ui.table_column(name='done', label='Done', cell_type=ui.icon_table_cell_type()),\n ui.table_column(name='views', label='Views'),\n ui.table_column(name='progress', label='Progress', cell_type=ui.progress_table_cell_type()),\n]\n\n\nasync def serve(q: Q):\n q.page['form'] = ui.form_card(box='1 1 -1 11', items=[\n ui.table(\n name='issues',\n columns=columns,\n rows=[ui.table_row(\n name=issue.id,\n cells=[issue.text, issue.status, issue.notifications, issue.icon, str(issue.views), issue.progress]) for\n issue in issues]\n )\n ])\n await q.page.save()\n\n\nlisten('/demo', serve)\n")))}u.isMDXComponent=!0},290:function(e,n,t){"use strict";t.d(n,"a",(function(){return f})),t.d(n,"b",(function(){return b}));var r=t(0),a=t.n(r);function i(e,n,t){return n in e?Object.defineProperty(e,n,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[n]=t,e}function s(e,n){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);n&&(r=r.filter((function(n){return Object.getOwnPropertyDescriptor(e,n).enumerable}))),t.push.apply(t,r)}return t}function o(e){for(var n=1;n=0||(a[t]=e[t]);return a}(e,n);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(a[t]=e[t])}return a}var c=a.a.createContext({}),u=function(e){var n=a.a.useContext(c),t=n;return e&&(t="function"==typeof e?e(n):o(o({},n),e)),t},f=function(e){var n=u(e.components);return a.a.createElement(c.Provider,{value:n},e.children)},p={inlineCode:"code",wrapper:function(e){var n=e.children;return a.a.createElement(a.a.Fragment,{},n)}},m=a.a.forwardRef((function(e,n){var t=e.components,r=e.mdxType,i=e.originalType,s=e.parentName,c=l(e,["components","mdxType","originalType","parentName"]),f=u(t),m=r,b=f["".concat(s,".").concat(m)]||f[m]||p[m]||i;return t?a.a.createElement(b,o(o({ref:n},c),{},{components:t})):a.a.createElement(b,o({ref:n},c))}));function b(e,n){var t=arguments,r=n&&n.mdxType;if("string"==typeof e||r){var i=t.length,s=new Array(i);s[0]=m;var o={};for(var l in n)hasOwnProperty.call(n,l)&&(o[l]=n[l]);o.originalType=e,o.mdxType="string"==typeof e?e:r,s[1]=o;for(var c=2;c\n")),Object(b.b)("p",null,"The drawing commands in the above example work like this:"),Object(b.b)("ol",null,Object(b.b)("li",{parentName:"ol"},Object(b.b)("inlineCode",{parentName:"li"},"m 25 25"),": Move 25px left, 25px down"),Object(b.b)("li",{parentName:"ol"},Object(b.b)("inlineCode",{parentName:"li"},"h 50"),": Draw a line 50px right"),Object(b.b)("li",{parentName:"ol"},Object(b.b)("inlineCode",{parentName:"li"},"v 50"),": Draw a line 50px down"),Object(b.b)("li",{parentName:"ol"},Object(b.b)("inlineCode",{parentName:"li"},"h -50"),": Draw a line 50px left"),Object(b.b)("li",{parentName:"ol"},Object(b.b)("inlineCode",{parentName:"li"},"z"),": Close the path (going back to where we started)")),Object(b.b)("p",null,"The little drawing syntax above is part of the SVG specification, not something unique to Wave."),Object(b.b)("p",null,"Authoring ",Object(b.b)("inlineCode",{parentName:"p"},"path()")," drawing commands by hand is tedious, so Wave provides two utilities to make it easier: ",Object(b.b)("inlineCode",{parentName:"p"},"p()")," and ",Object(b.b)("inlineCode",{parentName:"p"},"turtle()"),"."),Object(b.b)("h2",{id:"drawing-with-paths"},"Drawing with paths"),Object(b.b)("p",null,Object(b.b)("inlineCode",{parentName:"p"},"p()")," creates a path generator with convenience methods to draw step by step. For example, the following two lines are equivalent:"),Object(b.b)("pre",null,Object(b.b)("code",Object(n.a)({parentName:"pre"},{className:"language-py"}),"red_square = g.path(d='m 25 25 h 50 v 50 h -50 z', fill='red')\nred_square = g.p().m(25, 25).h(50).v(50).h(-50).z().path(fill='red')\n")),Object(b.b)("h3",{id:"commands"},"Commands"),Object(b.b)("table",null,Object(b.b)("thead",{parentName:"table"},Object(b.b)("tr",{parentName:"thead"},Object(b.b)("th",Object(n.a)({parentName:"tr"},{align:null}),"Method"),Object(b.b)("th",Object(n.a)({parentName:"tr"},{align:null}),"Use"))),Object(b.b)("tbody",{parentName:"table"},Object(b.b)("tr",{parentName:"tbody"},Object(b.b)("td",Object(n.a)({parentName:"tr"},{align:null}),Object(b.b)("inlineCode",{parentName:"td"},"M()")),Object(b.b)("td",Object(n.a)({parentName:"tr"},{align:null}),"Move, absolute")),Object(b.b)("tr",{parentName:"tbody"},Object(b.b)("td",Object(n.a)({parentName:"tr"},{align:null}),Object(b.b)("inlineCode",{parentName:"td"},"H()")),Object(b.b)("td",Object(n.a)({parentName:"tr"},{align:null}),"Horizontal line, absolute")),Object(b.b)("tr",{parentName:"tbody"},Object(b.b)("td",Object(n.a)({parentName:"tr"},{align:null}),Object(b.b)("inlineCode",{parentName:"td"},"V()")),Object(b.b)("td",Object(n.a)({parentName:"tr"},{align:null}),"Vertical line, absolute")),Object(b.b)("tr",{parentName:"tbody"},Object(b.b)("td",Object(n.a)({parentName:"tr"},{align:null}),Object(b.b)("inlineCode",{parentName:"td"},"L()")),Object(b.b)("td",Object(n.a)({parentName:"tr"},{align:null}),"Line, absolute")),Object(b.b)("tr",{parentName:"tbody"},Object(b.b)("td",Object(n.a)({parentName:"tr"},{align:null}),Object(b.b)("inlineCode",{parentName:"td"},"A()")),Object(b.b)("td",Object(n.a)({parentName:"tr"},{align:null}),"Elliptical arc, absolute")),Object(b.b)("tr",{parentName:"tbody"},Object(b.b)("td",Object(n.a)({parentName:"tr"},{align:null}),Object(b.b)("inlineCode",{parentName:"td"},"C()")),Object(b.b)("td",Object(n.a)({parentName:"tr"},{align:null}),"Cubic B\xe9zier curve, absolute")),Object(b.b)("tr",{parentName:"tbody"},Object(b.b)("td",Object(n.a)({parentName:"tr"},{align:null}),Object(b.b)("inlineCode",{parentName:"td"},"S()")),Object(b.b)("td",Object(n.a)({parentName:"tr"},{align:null}),"Cubic B\xe9zier curve, smooth, absolute")),Object(b.b)("tr",{parentName:"tbody"},Object(b.b)("td",Object(n.a)({parentName:"tr"},{align:null}),Object(b.b)("inlineCode",{parentName:"td"},"Q()")),Object(b.b)("td",Object(n.a)({parentName:"tr"},{align:null}),"Quadratic B\xe9zier curve, absolute")),Object(b.b)("tr",{parentName:"tbody"},Object(b.b)("td",Object(n.a)({parentName:"tr"},{align:null}),Object(b.b)("inlineCode",{parentName:"td"},"T()")),Object(b.b)("td",Object(n.a)({parentName:"tr"},{align:null}),"Quadratic B\xe9zier curve, smooth, absolute")),Object(b.b)("tr",{parentName:"tbody"},Object(b.b)("td",Object(n.a)({parentName:"tr"},{align:null}),Object(b.b)("inlineCode",{parentName:"td"},"Z()")),Object(b.b)("td",Object(n.a)({parentName:"tr"},{align:null}),"Close path")),Object(b.b)("tr",{parentName:"tbody"},Object(b.b)("td",Object(n.a)({parentName:"tr"},{align:null}),Object(b.b)("inlineCode",{parentName:"td"},"m()")),Object(b.b)("td",Object(n.a)({parentName:"tr"},{align:null}),"Move, relative")),Object(b.b)("tr",{parentName:"tbody"},Object(b.b)("td",Object(n.a)({parentName:"tr"},{align:null}),Object(b.b)("inlineCode",{parentName:"td"},"h()")),Object(b.b)("td",Object(n.a)({parentName:"tr"},{align:null}),"Horizontal line, relative")),Object(b.b)("tr",{parentName:"tbody"},Object(b.b)("td",Object(n.a)({parentName:"tr"},{align:null}),Object(b.b)("inlineCode",{parentName:"td"},"v()")),Object(b.b)("td",Object(n.a)({parentName:"tr"},{align:null}),"Vertical line, relative")),Object(b.b)("tr",{parentName:"tbody"},Object(b.b)("td",Object(n.a)({parentName:"tr"},{align:null}),Object(b.b)("inlineCode",{parentName:"td"},"l()")),Object(b.b)("td",Object(n.a)({parentName:"tr"},{align:null}),"Line, relative")),Object(b.b)("tr",{parentName:"tbody"},Object(b.b)("td",Object(n.a)({parentName:"tr"},{align:null}),Object(b.b)("inlineCode",{parentName:"td"},"a()")),Object(b.b)("td",Object(n.a)({parentName:"tr"},{align:null}),"Elliptical arc, relative")),Object(b.b)("tr",{parentName:"tbody"},Object(b.b)("td",Object(n.a)({parentName:"tr"},{align:null}),Object(b.b)("inlineCode",{parentName:"td"},"c()")),Object(b.b)("td",Object(n.a)({parentName:"tr"},{align:null}),"Cubic B\xe9zier curve, relative")),Object(b.b)("tr",{parentName:"tbody"},Object(b.b)("td",Object(n.a)({parentName:"tr"},{align:null}),Object(b.b)("inlineCode",{parentName:"td"},"s()")),Object(b.b)("td",Object(n.a)({parentName:"tr"},{align:null}),"Cubic B\xe9zier curve, smooth, relative")),Object(b.b)("tr",{parentName:"tbody"},Object(b.b)("td",Object(n.a)({parentName:"tr"},{align:null}),Object(b.b)("inlineCode",{parentName:"td"},"q()")),Object(b.b)("td",Object(n.a)({parentName:"tr"},{align:null}),"Quadratic B\xe9zier curve, relative")),Object(b.b)("tr",{parentName:"tbody"},Object(b.b)("td",Object(n.a)({parentName:"tr"},{align:null}),Object(b.b)("inlineCode",{parentName:"td"},"t()")),Object(b.b)("td",Object(n.a)({parentName:"tr"},{align:null}),"Quadratic B\xe9zier curve, smooth, relative")),Object(b.b)("tr",{parentName:"tbody"},Object(b.b)("td",Object(n.a)({parentName:"tr"},{align:null}),Object(b.b)("inlineCode",{parentName:"td"},"z()")),Object(b.b)("td",Object(n.a)({parentName:"tr"},{align:null}),"Close path")),Object(b.b)("tr",{parentName:"tbody"},Object(b.b)("td",Object(n.a)({parentName:"tr"},{align:null}),Object(b.b)("inlineCode",{parentName:"td"},"d()")),Object(b.b)("td",Object(n.a)({parentName:"tr"},{align:null}),"Serialize this path's commands into SVG path data.")),Object(b.b)("tr",{parentName:"tbody"},Object(b.b)("td",Object(n.a)({parentName:"tr"},{align:null}),Object(b.b)("inlineCode",{parentName:"td"},"path()")),Object(b.b)("td",Object(n.a)({parentName:"tr"},{align:null}),"Create a SVG path element")))),Object(b.b)("div",{className:"admonition admonition-info alert alert--info"},Object(b.b)("div",Object(n.a)({parentName:"div"},{className:"admonition-heading"}),Object(b.b)("h5",{parentName:"div"},Object(b.b)("span",Object(n.a)({parentName:"h5"},{className:"admonition-icon"}),Object(b.b)("svg",Object(n.a)({parentName:"span"},{xmlns:"http://www.w3.org/2000/svg",width:"14",height:"16",viewBox:"0 0 14 16"}),Object(b.b)("path",Object(n.a)({parentName:"svg"},{fillRule:"evenodd",d:"M7 2.3c3.14 0 5.7 2.56 5.7 5.7s-2.56 5.7-5.7 5.7A5.71 5.71 0 0 1 1.3 8c0-3.14 2.56-5.7 5.7-5.7zM7 1C3.14 1 0 4.14 0 8s3.14 7 7 7 7-3.14 7-7-3.14-7-7-7zm1 3H6v5h2V4zm0 6H6v2h2v-2z"})))),"info")),Object(b.b)("div",Object(n.a)({parentName:"div"},{className:"admonition-content"}),Object(b.b)("p",{parentName:"div"},"The upper-cased commands use absolute coordinates. The lower-cased commands use relative coordinates. For example, ",Object(b.b)("inlineCode",{parentName:"p"},"L(4,2)"),' means "draw a line to (4,2)", but ',Object(b.b)("inlineCode",{parentName:"p"},"l(4,2)"),' means "draw a line 4px right, 2px down from the current position".'))),Object(b.b)("h2",{id:"drawing-with-a-turtle"},"Drawing with a turtle"),Object(b.b)("p",null,Object(b.b)("inlineCode",{parentName:"p"},"turtle()")," creates a path generator (similar to ",Object(b.b)("inlineCode",{parentName:"p"},"p()"),"), but using ",Object(b.b)("a",Object(n.a)({parentName:"p"},{href:"https://docs.python.org/3/library/turtle.html"}),"Turtle Geometry"),"."),Object(b.b)("h3",{id:"commands-1"},"Commands"),Object(b.b)("table",null,Object(b.b)("thead",{parentName:"table"},Object(b.b)("tr",{parentName:"thead"},Object(b.b)("th",Object(n.a)({parentName:"tr"},{align:null}),"Method"),Object(b.b)("th",Object(n.a)({parentName:"tr"},{align:null}),"Use"))),Object(b.b)("tbody",{parentName:"table"},Object(b.b)("tr",{parentName:"tbody"},Object(b.b)("td",Object(n.a)({parentName:"tr"},{align:null}),Object(b.b)("inlineCode",{parentName:"td"},"pd()")),Object(b.b)("td",Object(n.a)({parentName:"tr"},{align:null}),"Pen down")),Object(b.b)("tr",{parentName:"tbody"},Object(b.b)("td",Object(n.a)({parentName:"tr"},{align:null}),Object(b.b)("inlineCode",{parentName:"td"},"pu()")),Object(b.b)("td",Object(n.a)({parentName:"tr"},{align:null}),"Pen up")),Object(b.b)("tr",{parentName:"tbody"},Object(b.b)("td",Object(n.a)({parentName:"tr"},{align:null}),Object(b.b)("inlineCode",{parentName:"td"},"p()")),Object(b.b)("td",Object(n.a)({parentName:"tr"},{align:null}),"Set the turtle's position")),Object(b.b)("tr",{parentName:"tbody"},Object(b.b)("td",Object(n.a)({parentName:"tr"},{align:null}),Object(b.b)("inlineCode",{parentName:"td"},"a()")),Object(b.b)("td",Object(n.a)({parentName:"tr"},{align:null}),"Set the turtle's orientation")),Object(b.b)("tr",{parentName:"tbody"},Object(b.b)("td",Object(n.a)({parentName:"tr"},{align:null}),Object(b.b)("inlineCode",{parentName:"td"},"f()")),Object(b.b)("td",Object(n.a)({parentName:"tr"},{align:null}),"Move forward")),Object(b.b)("tr",{parentName:"tbody"},Object(b.b)("td",Object(n.a)({parentName:"tr"},{align:null}),Object(b.b)("inlineCode",{parentName:"td"},"b()")),Object(b.b)("td",Object(n.a)({parentName:"tr"},{align:null}),"Move backward")),Object(b.b)("tr",{parentName:"tbody"},Object(b.b)("td",Object(n.a)({parentName:"tr"},{align:null}),Object(b.b)("inlineCode",{parentName:"td"},"l()")),Object(b.b)("td",Object(n.a)({parentName:"tr"},{align:null}),"Turn left")),Object(b.b)("tr",{parentName:"tbody"},Object(b.b)("td",Object(n.a)({parentName:"tr"},{align:null}),Object(b.b)("inlineCode",{parentName:"td"},"r()")),Object(b.b)("td",Object(n.a)({parentName:"tr"},{align:null}),"Turn right")),Object(b.b)("tr",{parentName:"tbody"},Object(b.b)("td",Object(n.a)({parentName:"tr"},{align:null}),Object(b.b)("inlineCode",{parentName:"td"},"d()")),Object(b.b)("td",Object(n.a)({parentName:"tr"},{align:null}),"Serialize this turtle's movements into SVG path data")),Object(b.b)("tr",{parentName:"tbody"},Object(b.b)("td",Object(n.a)({parentName:"tr"},{align:null}),Object(b.b)("inlineCode",{parentName:"td"},"path()")),Object(b.b)("td",Object(n.a)({parentName:"tr"},{align:null}),"Create a SVG path element")))),Object(b.b)("h3",{id:"example"},"Example"),Object(b.b)("p",null,"Here is an example from ",Object(b.b)("a",Object(n.a)({parentName:"p"},{href:"https://docs.python.org/3/library/turtle.html"}),"Python's turtle module"),": "),Object(b.b)("p",null,Object(b.b)("img",Object(n.a)({parentName:"p"},{src:"https://docs.python.org/3/_images/turtle-star.png",alt:"star"}))),Object(b.b)("p",null,"Here is the above example recreated in Wave:"),Object(b.b)("pre",null,Object(b.b)("code",Object(n.a)({parentName:"pre"},{className:"language-py"}),"from turtle import *\ncolor('red', 'yellow')\nbegin_fill()\nwhile True:\n forward(200)\n left(170)\n if abs(pos()) < 1:\n break\nend_fill()\ndone()\n")),Object(b.b)("pre",null,Object(b.b)("code",Object(n.a)({parentName:"pre"},{className:"language-py",metastring:"{3-6}","{3-6}":!0}),"from h2o_wave import site, ui, graphics as g\n\nt = g.turtle().f(100).r(90).pd()\nfor _ in range(36):\n t.f(200).l(170)\nspirograph = t.pu(1).path(stroke='red', fill='yellow')\n\npage = site['/demo']\npage['example'] = ui.graphics_card(\n box='1 1 2 3', view_box='0 0 220 220', width='100%', height='100%',\n scene=g.scene(foo=spirograph),\n)\n\npage.save()\n")),Object(b.b)("div",{className:"admonition admonition-info alert alert--info"},Object(b.b)("div",Object(n.a)({parentName:"div"},{className:"admonition-heading"}),Object(b.b)("h5",{parentName:"div"},Object(b.b)("span",Object(n.a)({parentName:"h5"},{className:"admonition-icon"}),Object(b.b)("svg",Object(n.a)({parentName:"span"},{xmlns:"http://www.w3.org/2000/svg",width:"14",height:"16",viewBox:"0 0 14 16"}),Object(b.b)("path",Object(n.a)({parentName:"svg"},{fillRule:"evenodd",d:"M7 2.3c3.14 0 5.7 2.56 5.7 5.7s-2.56 5.7-5.7 5.7A5.71 5.71 0 0 1 1.3 8c0-3.14 2.56-5.7 5.7-5.7zM7 1C3.14 1 0 4.14 0 8s3.14 7 7 7 7-3.14 7-7-3.14-7-7-7zm1 3H6v5h2V4zm0 6H6v2h2v-2z"})))),"info")),Object(b.b)("div",Object(n.a)({parentName:"div"},{className:"admonition-content"}),Object(b.b)("p",{parentName:"div"},"Turtle graphics is not just kid stuff: See ",Object(b.b)("a",Object(n.a)({parentName:"p"},{href:"https://mitpress.mit.edu/books/turtle-geometry"}),"Turtle Geometry")," by Harold Abelson and Andrea diSessa."))))}d.isMDXComponent=!0},290:function(e,t,a){"use strict";a.d(t,"a",(function(){return o})),a.d(t,"b",(function(){return m}));var n=a(0),r=a.n(n);function b(e,t,a){return t in e?Object.defineProperty(e,t,{value:a,enumerable:!0,configurable:!0,writable:!0}):e[t]=a,e}function l(e,t){var a=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),a.push.apply(a,n)}return a}function c(e){for(var t=1;t=0||(r[a]=e[a]);return r}(e,t);if(Object.getOwnPropertySymbols){var b=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,a)&&(r[a]=e[a])}return r}var p=r.a.createContext({}),d=function(e){var t=r.a.useContext(p),a=t;return e&&(a="function"==typeof e?e(t):c(c({},t),e)),a},o=function(e){var t=d(e.components);return r.a.createElement(p.Provider,{value:t},e.children)},O={inlineCode:"code",wrapper:function(e){var t=e.children;return r.a.createElement(r.a.Fragment,{},t)}},j=r.a.forwardRef((function(e,t){var a=e.components,n=e.mdxType,b=e.originalType,l=e.parentName,p=i(e,["components","mdxType","originalType","parentName"]),o=d(a),j=n,m=o["".concat(l,".").concat(j)]||o[j]||O[j]||b;return a?r.a.createElement(m,c(c({ref:t},p),{},{components:a})):r.a.createElement(m,c({ref:t},p))}));function m(e,t){var a=arguments,n=t&&t.mdxType;if("string"==typeof e||n){var b=a.length,l=new Array(b);l[0]=j;var c={};for(var i in t)hasOwnProperty.call(t,i)&&(c[i]=t[i]);c.originalType=e,c.mdxType="string"==typeof e?e:n,l[1]=c;for(var p=2;p\n")),Object(b.b)("p",null,"The drawing commands in the above example work like this:"),Object(b.b)("ol",null,Object(b.b)("li",{parentName:"ol"},Object(b.b)("inlineCode",{parentName:"li"},"m 25 25"),": Move 25px left, 25px down"),Object(b.b)("li",{parentName:"ol"},Object(b.b)("inlineCode",{parentName:"li"},"h 50"),": Draw a line 50px right"),Object(b.b)("li",{parentName:"ol"},Object(b.b)("inlineCode",{parentName:"li"},"v 50"),": Draw a line 50px down"),Object(b.b)("li",{parentName:"ol"},Object(b.b)("inlineCode",{parentName:"li"},"h -50"),": Draw a line 50px left"),Object(b.b)("li",{parentName:"ol"},Object(b.b)("inlineCode",{parentName:"li"},"z"),": Close the path (going back to where we started)")),Object(b.b)("p",null,"The little drawing syntax above is part of the SVG specification, not something unique to Wave."),Object(b.b)("p",null,"Authoring ",Object(b.b)("inlineCode",{parentName:"p"},"path()")," drawing commands by hand is tedious, so Wave provides two utilities to make it easier: ",Object(b.b)("inlineCode",{parentName:"p"},"p()")," and ",Object(b.b)("inlineCode",{parentName:"p"},"turtle()"),"."),Object(b.b)("h2",{id:"drawing-with-paths"},"Drawing with paths"),Object(b.b)("p",null,Object(b.b)("inlineCode",{parentName:"p"},"p()")," creates a path generator with convenience methods to draw step by step. For example, the following two lines are equivalent:"),Object(b.b)("pre",null,Object(b.b)("code",Object(n.a)({parentName:"pre"},{className:"language-py"}),"red_square = g.path(d='m 25 25 h 50 v 50 h -50 z', fill='red')\nred_square = g.p().m(25, 25).h(50).v(50).h(-50).z().path(fill='red')\n")),Object(b.b)("h3",{id:"commands"},"Commands"),Object(b.b)("table",null,Object(b.b)("thead",{parentName:"table"},Object(b.b)("tr",{parentName:"thead"},Object(b.b)("th",Object(n.a)({parentName:"tr"},{align:null}),"Method"),Object(b.b)("th",Object(n.a)({parentName:"tr"},{align:null}),"Use"))),Object(b.b)("tbody",{parentName:"table"},Object(b.b)("tr",{parentName:"tbody"},Object(b.b)("td",Object(n.a)({parentName:"tr"},{align:null}),Object(b.b)("inlineCode",{parentName:"td"},"M()")),Object(b.b)("td",Object(n.a)({parentName:"tr"},{align:null}),"Move, absolute")),Object(b.b)("tr",{parentName:"tbody"},Object(b.b)("td",Object(n.a)({parentName:"tr"},{align:null}),Object(b.b)("inlineCode",{parentName:"td"},"H()")),Object(b.b)("td",Object(n.a)({parentName:"tr"},{align:null}),"Horizontal line, absolute")),Object(b.b)("tr",{parentName:"tbody"},Object(b.b)("td",Object(n.a)({parentName:"tr"},{align:null}),Object(b.b)("inlineCode",{parentName:"td"},"V()")),Object(b.b)("td",Object(n.a)({parentName:"tr"},{align:null}),"Vertical line, absolute")),Object(b.b)("tr",{parentName:"tbody"},Object(b.b)("td",Object(n.a)({parentName:"tr"},{align:null}),Object(b.b)("inlineCode",{parentName:"td"},"L()")),Object(b.b)("td",Object(n.a)({parentName:"tr"},{align:null}),"Line, absolute")),Object(b.b)("tr",{parentName:"tbody"},Object(b.b)("td",Object(n.a)({parentName:"tr"},{align:null}),Object(b.b)("inlineCode",{parentName:"td"},"A()")),Object(b.b)("td",Object(n.a)({parentName:"tr"},{align:null}),"Elliptical arc, absolute")),Object(b.b)("tr",{parentName:"tbody"},Object(b.b)("td",Object(n.a)({parentName:"tr"},{align:null}),Object(b.b)("inlineCode",{parentName:"td"},"C()")),Object(b.b)("td",Object(n.a)({parentName:"tr"},{align:null}),"Cubic B\xe9zier curve, absolute")),Object(b.b)("tr",{parentName:"tbody"},Object(b.b)("td",Object(n.a)({parentName:"tr"},{align:null}),Object(b.b)("inlineCode",{parentName:"td"},"S()")),Object(b.b)("td",Object(n.a)({parentName:"tr"},{align:null}),"Cubic B\xe9zier curve, smooth, absolute")),Object(b.b)("tr",{parentName:"tbody"},Object(b.b)("td",Object(n.a)({parentName:"tr"},{align:null}),Object(b.b)("inlineCode",{parentName:"td"},"Q()")),Object(b.b)("td",Object(n.a)({parentName:"tr"},{align:null}),"Quadratic B\xe9zier curve, absolute")),Object(b.b)("tr",{parentName:"tbody"},Object(b.b)("td",Object(n.a)({parentName:"tr"},{align:null}),Object(b.b)("inlineCode",{parentName:"td"},"T()")),Object(b.b)("td",Object(n.a)({parentName:"tr"},{align:null}),"Quadratic B\xe9zier curve, smooth, absolute")),Object(b.b)("tr",{parentName:"tbody"},Object(b.b)("td",Object(n.a)({parentName:"tr"},{align:null}),Object(b.b)("inlineCode",{parentName:"td"},"Z()")),Object(b.b)("td",Object(n.a)({parentName:"tr"},{align:null}),"Close path")),Object(b.b)("tr",{parentName:"tbody"},Object(b.b)("td",Object(n.a)({parentName:"tr"},{align:null}),Object(b.b)("inlineCode",{parentName:"td"},"m()")),Object(b.b)("td",Object(n.a)({parentName:"tr"},{align:null}),"Move, relative")),Object(b.b)("tr",{parentName:"tbody"},Object(b.b)("td",Object(n.a)({parentName:"tr"},{align:null}),Object(b.b)("inlineCode",{parentName:"td"},"h()")),Object(b.b)("td",Object(n.a)({parentName:"tr"},{align:null}),"Horizontal line, relative")),Object(b.b)("tr",{parentName:"tbody"},Object(b.b)("td",Object(n.a)({parentName:"tr"},{align:null}),Object(b.b)("inlineCode",{parentName:"td"},"v()")),Object(b.b)("td",Object(n.a)({parentName:"tr"},{align:null}),"Vertical line, relative")),Object(b.b)("tr",{parentName:"tbody"},Object(b.b)("td",Object(n.a)({parentName:"tr"},{align:null}),Object(b.b)("inlineCode",{parentName:"td"},"l()")),Object(b.b)("td",Object(n.a)({parentName:"tr"},{align:null}),"Line, relative")),Object(b.b)("tr",{parentName:"tbody"},Object(b.b)("td",Object(n.a)({parentName:"tr"},{align:null}),Object(b.b)("inlineCode",{parentName:"td"},"a()")),Object(b.b)("td",Object(n.a)({parentName:"tr"},{align:null}),"Elliptical arc, relative")),Object(b.b)("tr",{parentName:"tbody"},Object(b.b)("td",Object(n.a)({parentName:"tr"},{align:null}),Object(b.b)("inlineCode",{parentName:"td"},"c()")),Object(b.b)("td",Object(n.a)({parentName:"tr"},{align:null}),"Cubic B\xe9zier curve, relative")),Object(b.b)("tr",{parentName:"tbody"},Object(b.b)("td",Object(n.a)({parentName:"tr"},{align:null}),Object(b.b)("inlineCode",{parentName:"td"},"s()")),Object(b.b)("td",Object(n.a)({parentName:"tr"},{align:null}),"Cubic B\xe9zier curve, smooth, relative")),Object(b.b)("tr",{parentName:"tbody"},Object(b.b)("td",Object(n.a)({parentName:"tr"},{align:null}),Object(b.b)("inlineCode",{parentName:"td"},"q()")),Object(b.b)("td",Object(n.a)({parentName:"tr"},{align:null}),"Quadratic B\xe9zier curve, relative")),Object(b.b)("tr",{parentName:"tbody"},Object(b.b)("td",Object(n.a)({parentName:"tr"},{align:null}),Object(b.b)("inlineCode",{parentName:"td"},"t()")),Object(b.b)("td",Object(n.a)({parentName:"tr"},{align:null}),"Quadratic B\xe9zier curve, smooth, relative")),Object(b.b)("tr",{parentName:"tbody"},Object(b.b)("td",Object(n.a)({parentName:"tr"},{align:null}),Object(b.b)("inlineCode",{parentName:"td"},"z()")),Object(b.b)("td",Object(n.a)({parentName:"tr"},{align:null}),"Close path")),Object(b.b)("tr",{parentName:"tbody"},Object(b.b)("td",Object(n.a)({parentName:"tr"},{align:null}),Object(b.b)("inlineCode",{parentName:"td"},"d()")),Object(b.b)("td",Object(n.a)({parentName:"tr"},{align:null}),"Serialize this path's commands into SVG path data.")),Object(b.b)("tr",{parentName:"tbody"},Object(b.b)("td",Object(n.a)({parentName:"tr"},{align:null}),Object(b.b)("inlineCode",{parentName:"td"},"path()")),Object(b.b)("td",Object(n.a)({parentName:"tr"},{align:null}),"Create a SVG path element")))),Object(b.b)("div",{className:"admonition admonition-info alert alert--info"},Object(b.b)("div",Object(n.a)({parentName:"div"},{className:"admonition-heading"}),Object(b.b)("h5",{parentName:"div"},Object(b.b)("span",Object(n.a)({parentName:"h5"},{className:"admonition-icon"}),Object(b.b)("svg",Object(n.a)({parentName:"span"},{xmlns:"http://www.w3.org/2000/svg",width:"14",height:"16",viewBox:"0 0 14 16"}),Object(b.b)("path",Object(n.a)({parentName:"svg"},{fillRule:"evenodd",d:"M7 2.3c3.14 0 5.7 2.56 5.7 5.7s-2.56 5.7-5.7 5.7A5.71 5.71 0 0 1 1.3 8c0-3.14 2.56-5.7 5.7-5.7zM7 1C3.14 1 0 4.14 0 8s3.14 7 7 7 7-3.14 7-7-3.14-7-7-7zm1 3H6v5h2V4zm0 6H6v2h2v-2z"})))),"info")),Object(b.b)("div",Object(n.a)({parentName:"div"},{className:"admonition-content"}),Object(b.b)("p",{parentName:"div"},"The upper-cased commands use absolute coordinates. The lower-cased commands use relative coordinates. For example, ",Object(b.b)("inlineCode",{parentName:"p"},"L(4,2)"),' means "draw a line to (4,2)", but ',Object(b.b)("inlineCode",{parentName:"p"},"l(4,2)"),' means "draw a line 4px right, 2px down from the current position".'))),Object(b.b)("h2",{id:"drawing-with-a-turtle"},"Drawing with a turtle"),Object(b.b)("p",null,Object(b.b)("inlineCode",{parentName:"p"},"turtle()")," creates a path generator (similar to ",Object(b.b)("inlineCode",{parentName:"p"},"p()"),"), but using ",Object(b.b)("a",Object(n.a)({parentName:"p"},{href:"https://docs.python.org/3/library/turtle.html"}),"Turtle Geometry"),"."),Object(b.b)("h3",{id:"commands-1"},"Commands"),Object(b.b)("table",null,Object(b.b)("thead",{parentName:"table"},Object(b.b)("tr",{parentName:"thead"},Object(b.b)("th",Object(n.a)({parentName:"tr"},{align:null}),"Method"),Object(b.b)("th",Object(n.a)({parentName:"tr"},{align:null}),"Use"))),Object(b.b)("tbody",{parentName:"table"},Object(b.b)("tr",{parentName:"tbody"},Object(b.b)("td",Object(n.a)({parentName:"tr"},{align:null}),Object(b.b)("inlineCode",{parentName:"td"},"pd()")),Object(b.b)("td",Object(n.a)({parentName:"tr"},{align:null}),"Pen down")),Object(b.b)("tr",{parentName:"tbody"},Object(b.b)("td",Object(n.a)({parentName:"tr"},{align:null}),Object(b.b)("inlineCode",{parentName:"td"},"pu()")),Object(b.b)("td",Object(n.a)({parentName:"tr"},{align:null}),"Pen up")),Object(b.b)("tr",{parentName:"tbody"},Object(b.b)("td",Object(n.a)({parentName:"tr"},{align:null}),Object(b.b)("inlineCode",{parentName:"td"},"p()")),Object(b.b)("td",Object(n.a)({parentName:"tr"},{align:null}),"Set the turtle's position")),Object(b.b)("tr",{parentName:"tbody"},Object(b.b)("td",Object(n.a)({parentName:"tr"},{align:null}),Object(b.b)("inlineCode",{parentName:"td"},"a()")),Object(b.b)("td",Object(n.a)({parentName:"tr"},{align:null}),"Set the turtle's orientation")),Object(b.b)("tr",{parentName:"tbody"},Object(b.b)("td",Object(n.a)({parentName:"tr"},{align:null}),Object(b.b)("inlineCode",{parentName:"td"},"f()")),Object(b.b)("td",Object(n.a)({parentName:"tr"},{align:null}),"Move forward")),Object(b.b)("tr",{parentName:"tbody"},Object(b.b)("td",Object(n.a)({parentName:"tr"},{align:null}),Object(b.b)("inlineCode",{parentName:"td"},"b()")),Object(b.b)("td",Object(n.a)({parentName:"tr"},{align:null}),"Move backward")),Object(b.b)("tr",{parentName:"tbody"},Object(b.b)("td",Object(n.a)({parentName:"tr"},{align:null}),Object(b.b)("inlineCode",{parentName:"td"},"l()")),Object(b.b)("td",Object(n.a)({parentName:"tr"},{align:null}),"Turn left")),Object(b.b)("tr",{parentName:"tbody"},Object(b.b)("td",Object(n.a)({parentName:"tr"},{align:null}),Object(b.b)("inlineCode",{parentName:"td"},"r()")),Object(b.b)("td",Object(n.a)({parentName:"tr"},{align:null}),"Turn right")),Object(b.b)("tr",{parentName:"tbody"},Object(b.b)("td",Object(n.a)({parentName:"tr"},{align:null}),Object(b.b)("inlineCode",{parentName:"td"},"d()")),Object(b.b)("td",Object(n.a)({parentName:"tr"},{align:null}),"Serialize this turtle's movements into SVG path data")),Object(b.b)("tr",{parentName:"tbody"},Object(b.b)("td",Object(n.a)({parentName:"tr"},{align:null}),Object(b.b)("inlineCode",{parentName:"td"},"path()")),Object(b.b)("td",Object(n.a)({parentName:"tr"},{align:null}),"Create a SVG path element")))),Object(b.b)("h3",{id:"example"},"Example"),Object(b.b)("p",null,"Here is an example from ",Object(b.b)("a",Object(n.a)({parentName:"p"},{href:"https://docs.python.org/3/library/turtle.html"}),"Python's turtle module"),": "),Object(b.b)("p",null,Object(b.b)("img",Object(n.a)({parentName:"p"},{src:"https://docs.python.org/3/_images/turtle-star.png",alt:"star"}))),Object(b.b)("p",null,"Here is the above example recreated in Wave:"),Object(b.b)("pre",null,Object(b.b)("code",Object(n.a)({parentName:"pre"},{className:"language-py"}),"from turtle import *\ncolor('red', 'yellow')\nbegin_fill()\nwhile True:\n forward(200)\n left(170)\n if abs(pos()) < 1:\n break\nend_fill()\ndone()\n")),Object(b.b)("pre",null,Object(b.b)("code",Object(n.a)({parentName:"pre"},{className:"language-py",metastring:"{3-6}","{3-6}":!0}),"from h2o_wave import site, ui, graphics as g\n\nt = g.turtle().f(100).r(90).pd()\nfor _ in range(36):\n t.f(200).l(170)\nspirograph = t.pu(1).path(stroke='red', fill='yellow')\n\npage = site['/demo']\npage['example'] = ui.graphics_card(\n box='1 1 2 3', view_box='0 0 220 220', width='100%', height='100%',\n scene=g.scene(foo=spirograph),\n)\n\npage.save()\n")),Object(b.b)("div",{className:"admonition admonition-info alert alert--info"},Object(b.b)("div",Object(n.a)({parentName:"div"},{className:"admonition-heading"}),Object(b.b)("h5",{parentName:"div"},Object(b.b)("span",Object(n.a)({parentName:"h5"},{className:"admonition-icon"}),Object(b.b)("svg",Object(n.a)({parentName:"span"},{xmlns:"http://www.w3.org/2000/svg",width:"14",height:"16",viewBox:"0 0 14 16"}),Object(b.b)("path",Object(n.a)({parentName:"svg"},{fillRule:"evenodd",d:"M7 2.3c3.14 0 5.7 2.56 5.7 5.7s-2.56 5.7-5.7 5.7A5.71 5.71 0 0 1 1.3 8c0-3.14 2.56-5.7 5.7-5.7zM7 1C3.14 1 0 4.14 0 8s3.14 7 7 7 7-3.14 7-7-3.14-7-7-7zm1 3H6v5h2V4zm0 6H6v2h2v-2z"})))),"info")),Object(b.b)("div",Object(n.a)({parentName:"div"},{className:"admonition-content"}),Object(b.b)("p",{parentName:"div"},"Turtle graphics is not just kid stuff: See ",Object(b.b)("a",Object(n.a)({parentName:"p"},{href:"https://mitpress.mit.edu/books/turtle-geometry"}),"Turtle Geometry")," by Harold Abelson and Andrea diSessa."))))}d.isMDXComponent=!0},292:function(e,t,a){"use strict";a.d(t,"a",(function(){return o})),a.d(t,"b",(function(){return m}));var n=a(0),r=a.n(n);function b(e,t,a){return t in e?Object.defineProperty(e,t,{value:a,enumerable:!0,configurable:!0,writable:!0}):e[t]=a,e}function l(e,t){var a=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),a.push.apply(a,n)}return a}function c(e){for(var t=1;t=0||(r[a]=e[a]);return r}(e,t);if(Object.getOwnPropertySymbols){var b=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,a)&&(r[a]=e[a])}return r}var p=r.a.createContext({}),d=function(e){var t=r.a.useContext(p),a=t;return e&&(a="function"==typeof e?e(t):c(c({},t),e)),a},o=function(e){var t=d(e.components);return r.a.createElement(p.Provider,{value:t},e.children)},O={inlineCode:"code",wrapper:function(e){var t=e.children;return r.a.createElement(r.a.Fragment,{},t)}},j=r.a.forwardRef((function(e,t){var a=e.components,n=e.mdxType,b=e.originalType,l=e.parentName,p=i(e,["components","mdxType","originalType","parentName"]),o=d(a),j=n,m=o["".concat(l,".").concat(j)]||o[j]||O[j]||b;return a?r.a.createElement(m,c(c({ref:t},p),{},{components:a})):r.a.createElement(m,c({ref:t},p))}));function m(e,t){var a=arguments,n=t&&t.mdxType;if("string"==typeof e||n){var b=a.length,l=new Array(b);l[0]=j;var c={};for(var i in t)hasOwnProperty.call(t,i)&&(c[i]=t[i]);c.originalType=e,c.mdxType="string"==typeof e?e:n,l[1]=c;for(var p=2;p=0||(a[n]=e[n]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(a[n]=e[n])}return a}var s=a.a.createContext({}),b=function(e){var t=a.a.useContext(s),n=t;return e&&(n="function"==typeof e?e(t):l(l({},t),e)),n},p=function(e){var t=b(e.components);return a.a.createElement(s.Provider,{value:t},e.children)},u={inlineCode:"code",wrapper:function(e){var t=e.children;return a.a.createElement(a.a.Fragment,{},t)}},d=a.a.forwardRef((function(e,t){var n=e.components,r=e.mdxType,o=e.originalType,c=e.parentName,s=i(e,["components","mdxType","originalType","parentName"]),p=b(n),d=r,m=p["".concat(c,".").concat(d)]||p[d]||u[d]||o;return n?a.a.createElement(m,l(l({ref:t},s),{},{components:n})):a.a.createElement(m,l({ref:t},s))}));function m(e,t){var n=arguments,r=t&&t.mdxType;if("string"==typeof e||r){var o=n.length,c=new Array(o);c[0]=d;var l={};for(var i in t)hasOwnProperty.call(t,i)&&(l[i]=t[i]);l.originalType=e,l.mdxType="string"==typeof e?e:r,c[1]=l;for(var s=2;s=0||(r[n]=e[n]);return r}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(a=0;a=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(r[n]=e[n])}return r}var b=r.a.createContext({}),s=function(e){var t=r.a.useContext(b),n=t;return e&&(n="function"==typeof e?e(t):l(l({},t),e)),n},p=function(e){var t=s(e.components);return r.a.createElement(b.Provider,{value:t},e.children)},u={inlineCode:"code",wrapper:function(e){var t=e.children;return r.a.createElement(r.a.Fragment,{},t)}},d=r.a.forwardRef((function(e,t){var n=e.components,a=e.mdxType,o=e.originalType,c=e.parentName,b=i(e,["components","mdxType","originalType","parentName"]),p=s(n),d=a,m=p["".concat(c,".").concat(d)]||p[d]||u[d]||o;return n?r.a.createElement(m,l(l({ref:t},b),{},{components:n})):r.a.createElement(m,l({ref:t},b))}));function m(e,t){var n=arguments,a=t&&t.mdxType;if("string"==typeof e||a){var o=n.length,c=new Array(o);c[0]=d;var l={};for(var i in t)hasOwnProperty.call(t,i)&&(l[i]=t[i]);l.originalType=e,l.mdxType="string"==typeof e?e:a,c[1]=l;for(var b=2;b=0||(r[a]=e[a]);return r}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,a)&&(r[a]=e[a])}return r}var b=r.a.createContext({}),s=function(e){var t=r.a.useContext(b),a=t;return e&&(a="function"==typeof e?e(t):c(c({},t),e)),a},u=function(e){var t=s(e.components);return r.a.createElement(b.Provider,{value:t},e.children)},d={inlineCode:"code",wrapper:function(e){var t=e.children;return r.a.createElement(r.a.Fragment,{},t)}},p=r.a.forwardRef((function(e,t){var a=e.components,n=e.mdxType,i=e.originalType,o=e.parentName,b=l(e,["components","mdxType","originalType","parentName"]),u=s(a),p=n,f=u["".concat(o,".").concat(p)]||u[p]||d[p]||i;return a?r.a.createElement(f,c(c({ref:t},b),{},{components:a})):r.a.createElement(f,c({ref:t},b))}));function f(e,t){var a=arguments,n=t&&t.mdxType;if("string"==typeof e||n){var i=a.length,o=new Array(i);o[0]=p;var c={};for(var l in t)hasOwnProperty.call(t,l)&&(c[l]=t[l]);c.originalType=e,c.mdxType="string"==typeof e?e:n,o[1]=c;for(var b=2;b=0||(r[a]=e[a]);return r}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,a)&&(r[a]=e[a])}return r}var b=r.a.createContext({}),s=function(e){var t=r.a.useContext(b),a=t;return e&&(a="function"==typeof e?e(t):c(c({},t),e)),a},u=function(e){var t=s(e.components);return r.a.createElement(b.Provider,{value:t},e.children)},d={inlineCode:"code",wrapper:function(e){var t=e.children;return r.a.createElement(r.a.Fragment,{},t)}},p=r.a.forwardRef((function(e,t){var a=e.components,n=e.mdxType,i=e.originalType,o=e.parentName,b=l(e,["components","mdxType","originalType","parentName"]),u=s(a),p=n,f=u["".concat(o,".").concat(p)]||u[p]||d[p]||i;return a?r.a.createElement(f,c(c({ref:t},b),{},{components:a})):r.a.createElement(f,c({ref:t},b))}));function f(e,t){var a=arguments,n=t&&t.mdxType;if("string"==typeof e||n){var i=a.length,o=new Array(i);o[0]=p;var c={};for(var l in t)hasOwnProperty.call(t,l)&&(c[l]=t[l]);c.originalType=e,c.mdxType="string"==typeof e?e:n,o[1]=c;for(var b=2;b=0||(r[n]=e[n]);return r}(e,t);if(Object.getOwnPropertySymbols){var b=Object.getOwnPropertySymbols(e);for(a=0;a=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(r[n]=e[n])}return r}var o=r.a.createContext({}),d=function(e){var t=r.a.useContext(o),n=t;return e&&(n="function"==typeof e?e(t):c(c({},t),e)),n},p=function(e){var t=d(e.components);return r.a.createElement(o.Provider,{value:t},e.children)},m={inlineCode:"code",wrapper:function(e){var t=e.children;return r.a.createElement(r.a.Fragment,{},t)}},O=r.a.forwardRef((function(e,t){var n=e.components,a=e.mdxType,b=e.originalType,i=e.parentName,o=l(e,["components","mdxType","originalType","parentName"]),p=d(n),O=a,s=p["".concat(i,".").concat(O)]||p[O]||m[O]||b;return n?r.a.createElement(s,c(c({ref:t},o),{},{components:n})):r.a.createElement(s,c({ref:t},o))}));function s(e,t){var n=arguments,a=t&&t.mdxType;if("string"==typeof e||a){var b=n.length,i=new Array(b);i[0]=O;var c={};for(var l in t)hasOwnProperty.call(t,l)&&(c[l]=t[l]);c.originalType=e,c.mdxType="string"==typeof e?e:a,i[1]=c;for(var o=2;o=0||(r[n]=e[n]);return r}(e,t);if(Object.getOwnPropertySymbols){var b=Object.getOwnPropertySymbols(e);for(a=0;a=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(r[n]=e[n])}return r}var o=r.a.createContext({}),d=function(e){var t=r.a.useContext(o),n=t;return e&&(n="function"==typeof e?e(t):c(c({},t),e)),n},p=function(e){var t=d(e.components);return r.a.createElement(o.Provider,{value:t},e.children)},m={inlineCode:"code",wrapper:function(e){var t=e.children;return r.a.createElement(r.a.Fragment,{},t)}},O=r.a.forwardRef((function(e,t){var n=e.components,a=e.mdxType,b=e.originalType,i=e.parentName,o=l(e,["components","mdxType","originalType","parentName"]),p=d(n),O=a,s=p["".concat(i,".").concat(O)]||p[O]||m[O]||b;return n?r.a.createElement(s,c(c({ref:t},o),{},{components:n})):r.a.createElement(s,c({ref:t},o))}));function s(e,t){var n=arguments,a=t&&t.mdxType;if("string"==typeof e||a){var b=n.length,i=new Array(b);i[0]=O;var c={};for(var l in t)hasOwnProperty.call(t,l)&&(c[l]=t[l]);c.originalType=e,c.mdxType="string"==typeof e?e:a,i[1]=c;for(var o=2;o=0||(r[n]=e[n]);return r}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(a=0;a=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(r[n]=e[n])}return r}var s=r.a.createContext({}),p=function(e){var t=r.a.useContext(s),n=t;return e&&(n="function"==typeof e?e(t):c(c({},t),e)),n},A=function(e){var t=p(e.components);return r.a.createElement(s.Provider,{value:t},e.children)},u={inlineCode:"code",wrapper:function(e){var t=e.children;return r.a.createElement(r.a.Fragment,{},t)}},b=r.a.forwardRef((function(e,t){var n=e.components,a=e.mdxType,o=e.originalType,i=e.parentName,s=l(e,["components","mdxType","originalType","parentName"]),A=p(n),b=a,f=A["".concat(i,".").concat(b)]||A[b]||u[b]||o;return n?r.a.createElement(f,c(c({ref:t},s),{},{components:n})):r.a.createElement(f,c({ref:t},s))}));function f(e,t){var n=arguments,a=t&&t.mdxType;if("string"==typeof e||a){var o=n.length,i=new Array(o);i[0]=b;var c={};for(var l in t)hasOwnProperty.call(t,l)&&(c[l]=t[l]);c.originalType=e,c.mdxType="string"==typeof e?e:a,i[1]=c;for(var s=2;s=0||(r[n]=e[n]);return r}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(a=0;a=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(r[n]=e[n])}return r}var s=r.a.createContext({}),p=function(e){var t=r.a.useContext(s),n=t;return e&&(n="function"==typeof e?e(t):c(c({},t),e)),n},A=function(e){var t=p(e.components);return r.a.createElement(s.Provider,{value:t},e.children)},u={inlineCode:"code",wrapper:function(e){var t=e.children;return r.a.createElement(r.a.Fragment,{},t)}},b=r.a.forwardRef((function(e,t){var n=e.components,a=e.mdxType,o=e.originalType,i=e.parentName,s=l(e,["components","mdxType","originalType","parentName"]),A=p(n),b=a,f=A["".concat(i,".").concat(b)]||A[b]||u[b]||o;return n?r.a.createElement(f,c(c({ref:t},s),{},{components:n})):r.a.createElement(f,c({ref:t},s))}));function f(e,t){var n=arguments,a=t&&t.mdxType;if("string"==typeof e||a){var o=n.length,i=new Array(o);i[0]=b;var c={};for(var l in t)hasOwnProperty.call(t,l)&&(c[l]=t[l]);c.originalType=e,c.mdxType="string"==typeof e?e:a,i[1]=c;for(var s=2;s1?a+"s":a}(o,"post"),' tagged with "',s,'"'),l.a.createElement(m.a,{href:n},"View All Tags"),l.a.createElement("div",{className:"margin-vert--xl"},t.map((({content:e})=>l.a.createElement(c.a,{key:e.metadata.permalink,frontMatter:e.frontMatter,metadata:e.metadata,truncated:!0},l.a.createElement(e,null)))))))))}}}]); \ No newline at end of file +(window.webpackJsonp=window.webpackJsonp||[]).push([[102],{155:function(e,a,t){"use strict";t.r(a);var n=t(0),l=t.n(n),r=t(297),c=t(369),m=t(295);a.default=function(e){const{metadata:a,items:t}=e,{allTagsPath:n,name:s,count:o}=a;return l.a.createElement(r.a,{title:`Posts tagged "${s}"`,description:`Blog | Tagged "${s}"`},l.a.createElement("div",{className:"container margin-vert--lg"},l.a.createElement("div",{className:"row"},l.a.createElement("main",{className:"col col--8 col--offset-2"},l.a.createElement("h1",null,o," ",function(e,a){return e>1?a+"s":a}(o,"post"),' tagged with "',s,'"'),l.a.createElement(m.a,{href:n},"View All Tags"),l.a.createElement("div",{className:"margin-vert--xl"},t.map((({content:e})=>l.a.createElement(c.a,{key:e.metadata.permalink,frontMatter:e.frontMatter,metadata:e.metadata,truncated:!0},l.a.createElement(e,null)))))))))}}}]); \ No newline at end of file diff --git a/docs/692ea9bc.adf07d09.js b/docs/692ea9bc.12fddb0c.js similarity index 93% rename from docs/692ea9bc.adf07d09.js rename to docs/692ea9bc.12fddb0c.js index 18d45ac36c..40540aa4cc 100644 --- a/docs/692ea9bc.adf07d09.js +++ b/docs/692ea9bc.12fddb0c.js @@ -1 +1 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[101],{155:function(e,t,r){"use strict";r.r(t),r.d(t,"frontMatter",(function(){return i})),r.d(t,"metadata",(function(){return c})),r.d(t,"rightToc",(function(){return l})),r.d(t,"default",(function(){return p}));var a=r(2),n=r(6),o=(r(0),r(290)),i={title:"Stat / Bar / Large"},c={unversionedId:"examples/stat-large-bar",id:"examples/stat-large-bar",isDocsHomePage:!1,title:"Stat / Bar / Large",description:"Create a large captioned card displaying a primary value, an auxiliary value and a progress bar, with captions for each value.",source:"@site/docs/examples/stat-large-bar.md",slug:"/examples/stat-large-bar",permalink:"/wave/docs/examples/stat-large-bar",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/examples/stat-large-bar.md",version:"current",sidebar:"someSidebar",previous:{title:"Stat / Bar / Wide",permalink:"/wave/docs/examples/stat-wide-bar"},next:{title:"Stat / Series / Small / Area",permalink:"/wave/docs/examples/stat-small-series-area"}},l=[],s={rightToc:l};function p(e){var t=e.components,i=Object(n.a)(e,["components"]);return Object(o.b)("wrapper",Object(a.a)({},s,i,{components:t,mdxType:"MDXLayout"}),Object(o.b)("p",null,"Create a large captioned card displaying a primary value, an auxiliary value and a progress bar, with captions for each value."),Object(o.b)("div",{className:"cover",style:{backgroundImage:"url("+r(365).default+")"}}),Object(o.b)("pre",null,Object(o.b)("code",Object(a.a)({parentName:"pre"},{className:"language-py"}),"import time\n\nfrom faker import Faker\n\nfrom synth import FakePercent\nfrom h2o_wave import site, ui\n\npage = site['/demo']\n\nfake = Faker()\nf = FakePercent()\nval, pc = f.next()\nc = page.add(f'example', ui.large_bar_stat_card(\n box='1 1 2 2',\n title=fake.cryptocurrency_name(),\n value='=${{intl foo minimum_fraction_digits=2 maximum_fraction_digits=2}}',\n value_caption='This Month',\n aux_value='={{intl bar style=\"percent\" minimum_fraction_digits=2 maximum_fraction_digits=2}}',\n aux_value_caption='Previous Month',\n plot_color='$red',\n progress=pc,\n data=dict(foo=val, bar=pc),\n caption=' '.join(fake.sentences(2)),\n))\npage.save()\n\nwhile True:\n time.sleep(1)\n val, pc = f.next()\n c.data.foo = val\n c.data.bar = pc\n c.progress = pc\n page.save()\n")))}p.isMDXComponent=!0},290:function(e,t,r){"use strict";r.d(t,"a",(function(){return u})),r.d(t,"b",(function(){return d}));var a=r(0),n=r.n(a);function o(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function i(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);t&&(a=a.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),r.push.apply(r,a)}return r}function c(e){for(var t=1;t=0||(n[r]=e[r]);return n}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(a=0;a=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(n[r]=e[r])}return n}var s=n.a.createContext({}),p=function(e){var t=n.a.useContext(s),r=t;return e&&(r="function"==typeof e?e(t):c(c({},t),e)),r},u=function(e){var t=p(e.components);return n.a.createElement(s.Provider,{value:t},e.children)},m={inlineCode:"code",wrapper:function(e){var t=e.children;return n.a.createElement(n.a.Fragment,{},t)}},f=n.a.forwardRef((function(e,t){var r=e.components,a=e.mdxType,o=e.originalType,i=e.parentName,s=l(e,["components","mdxType","originalType","parentName"]),u=p(r),f=a,d=u["".concat(i,".").concat(f)]||u[f]||m[f]||o;return r?n.a.createElement(d,c(c({ref:t},s),{},{components:r})):n.a.createElement(d,c({ref:t},s))}));function d(e,t){var r=arguments,a=t&&t.mdxType;if("string"==typeof e||a){var o=r.length,i=new Array(o);i[0]=f;var c={};for(var l in t)hasOwnProperty.call(t,l)&&(c[l]=t[l]);c.originalType=e,c.mdxType="string"==typeof e?e:a,i[1]=c;for(var s=2;s=0||(n[r]=e[r]);return n}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(a=0;a=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(n[r]=e[r])}return n}var s=n.a.createContext({}),p=function(e){var t=n.a.useContext(s),r=t;return e&&(r="function"==typeof e?e(t):c(c({},t),e)),r},u=function(e){var t=p(e.components);return n.a.createElement(s.Provider,{value:t},e.children)},m={inlineCode:"code",wrapper:function(e){var t=e.children;return n.a.createElement(n.a.Fragment,{},t)}},f=n.a.forwardRef((function(e,t){var r=e.components,a=e.mdxType,o=e.originalType,i=e.parentName,s=l(e,["components","mdxType","originalType","parentName"]),u=p(r),f=a,d=u["".concat(i,".").concat(f)]||u[f]||m[f]||o;return r?n.a.createElement(d,c(c({ref:t},s),{},{components:r})):n.a.createElement(d,c({ref:t},s))}));function d(e,t){var r=arguments,a=t&&t.mdxType;if("string"==typeof e||a){var o=r.length,i=new Array(o);i[0]=f;var c={};for(var l in t)hasOwnProperty.call(t,l)&&(c[l]=t[l]);c.originalType=e,c.mdxType="string"==typeof e?e:a,i[1]=c;for(var s=2;s=0||(a[n]=e[n]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(a[n]=e[n])}return a}var p=a.a.createContext({}),s=function(e){var t=a.a.useContext(p),n=t;return e&&(n="function"==typeof e?e(t):l(l({},t),e)),n},u=function(e){var t=s(e.components);return a.a.createElement(p.Provider,{value:t},e.children)},m={inlineCode:"code",wrapper:function(e){var t=e.children;return a.a.createElement(a.a.Fragment,{},t)}},f=a.a.forwardRef((function(e,t){var n=e.components,r=e.mdxType,o=e.originalType,i=e.parentName,p=c(e,["components","mdxType","originalType","parentName"]),u=s(n),f=r,d=u["".concat(i,".").concat(f)]||u[f]||m[f]||o;return n?a.a.createElement(d,l(l({ref:t},p),{},{components:n})):a.a.createElement(d,l({ref:t},p))}));function d(e,t){var n=arguments,r=t&&t.mdxType;if("string"==typeof e||r){var o=n.length,i=new Array(o);i[0]=f;var l={};for(var c in t)hasOwnProperty.call(t,c)&&(l[c]=t[c]);l.originalType=e,l.mdxType="string"==typeof e?e:r,i[1]=l;for(var p=2;p=0||(a[n]=e[n]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(a[n]=e[n])}return a}var p=a.a.createContext({}),s=function(e){var t=a.a.useContext(p),n=t;return e&&(n="function"==typeof e?e(t):l(l({},t),e)),n},u=function(e){var t=s(e.components);return a.a.createElement(p.Provider,{value:t},e.children)},m={inlineCode:"code",wrapper:function(e){var t=e.children;return a.a.createElement(a.a.Fragment,{},t)}},f=a.a.forwardRef((function(e,t){var n=e.components,r=e.mdxType,o=e.originalType,i=e.parentName,p=c(e,["components","mdxType","originalType","parentName"]),u=s(n),f=r,d=u["".concat(i,".").concat(f)]||u[f]||m[f]||o;return n?a.a.createElement(d,l(l({ref:t},p),{},{components:n})):a.a.createElement(d,l({ref:t},p))}));function d(e,t){var n=arguments,r=t&&t.mdxType;if("string"==typeof e||r){var o=n.length,i=new Array(o);i[0]=f;var l={};for(var c in t)hasOwnProperty.call(t,c)&&(l[c]=t[c]);l.originalType=e,l.mdxType="string"==typeof e?e:r,i[1]=l;for(var p=2;p=0||(a[r]=e[r]);return a}(e,t);if(Object.getOwnPropertySymbols){var c=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(a[r]=e[r])}return a}var p=a.a.createContext({}),l=function(e){var t=a.a.useContext(p),r=t;return e&&(r="function"==typeof e?e(t):i(i({},t),e)),r},u=function(e){var t=l(e.components);return a.a.createElement(p.Provider,{value:t},e.children)},m={inlineCode:"code",wrapper:function(e){var t=e.children;return a.a.createElement(a.a.Fragment,{},t)}},d=a.a.forwardRef((function(e,t){var r=e.components,n=e.mdxType,c=e.originalType,o=e.parentName,p=s(e,["components","mdxType","originalType","parentName"]),u=l(r),d=n,f=u["".concat(o,".").concat(d)]||u[d]||m[d]||c;return r?a.a.createElement(f,i(i({ref:t},p),{},{components:r})):a.a.createElement(f,i({ref:t},p))}));function f(e,t){var r=arguments,n=t&&t.mdxType;if("string"==typeof e||n){var c=r.length,o=new Array(c);o[0]=d;var i={};for(var s in t)hasOwnProperty.call(t,s)&&(i[s]=t[s]);i.originalType=e,i.mdxType="string"==typeof e?e:n,o[1]=i;for(var p=2;p=0||(a[r]=e[r]);return a}(e,t);if(Object.getOwnPropertySymbols){var c=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(a[r]=e[r])}return a}var p=a.a.createContext({}),l=function(e){var t=a.a.useContext(p),r=t;return e&&(r="function"==typeof e?e(t):i(i({},t),e)),r},u=function(e){var t=l(e.components);return a.a.createElement(p.Provider,{value:t},e.children)},m={inlineCode:"code",wrapper:function(e){var t=e.children;return a.a.createElement(a.a.Fragment,{},t)}},d=a.a.forwardRef((function(e,t){var r=e.components,n=e.mdxType,c=e.originalType,o=e.parentName,p=s(e,["components","mdxType","originalType","parentName"]),u=l(r),d=n,f=u["".concat(o,".").concat(d)]||u[d]||m[d]||c;return r?a.a.createElement(f,i(i({ref:t},p),{},{components:r})):a.a.createElement(f,i({ref:t},p))}));function f(e,t){var r=arguments,n=t&&t.mdxType;if("string"==typeof e||n){var c=r.length,o=new Array(c);o[0]=d;var i={};for(var s in t)hasOwnProperty.call(t,s)&&(i[s]=t[s]);i.originalType=e,i.mdxType="string"==typeof e?e:n,o[1]=i;for(var p=2;p\n
  • Spam
    • \n
  • Ham
    • \n
  • Eggs
    • \n\n'''\n\npage['example'] = ui.markup_card(\n box='1 1 2 2',\n title='Menu',\n content=menu,\n)\npage.save()\n")))}p.isMDXComponent=!0},290:function(e,n,t){"use strict";t.d(n,"a",(function(){return d})),t.d(n,"b",(function(){return E}));var r=t(0),i=t.n(r);function a(e,n,t){return n in e?Object.defineProperty(e,n,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[n]=t,e}function s(e,n){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);n&&(r=r.filter((function(n){return Object.getOwnPropertyDescriptor(e,n).enumerable}))),t.push.apply(t,r)}return t}function o(e){for(var n=1;n=0||(i[t]=e[t]);return i}(e,n);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(i[t]=e[t])}return i}var l=i.a.createContext({}),p=function(e){var n=i.a.useContext(l),t=n;return e&&(t="function"==typeof e?e(n):o(o({},n),e)),t},d=function(e){var n=p(e.components);return i.a.createElement(l.Provider,{value:n},e.children)},u={inlineCode:"code",wrapper:function(e){var n=e.children;return i.a.createElement(i.a.Fragment,{},n)}},m=i.a.forwardRef((function(e,n){var t=e.components,r=e.mdxType,a=e.originalType,s=e.parentName,l=c(e,["components","mdxType","originalType","parentName"]),d=p(t),m=r,E=d["".concat(s,".").concat(m)]||d[m]||u[m]||a;return t?i.a.createElement(E,o(o({ref:n},l),{},{components:t})):i.a.createElement(E,o({ref:n},l))}));function E(e,n){var t=arguments,r=n&&n.mdxType;if("string"==typeof e||r){var a=t.length,s=new Array(a);s[0]=m;var o={};for(var c in n)hasOwnProperty.call(n,c)&&(o[c]=n[c]);o.originalType=e,o.mdxType="string"==typeof e?e:r,s[1]=o;for(var l=2;l\n
  • Spam
    • \n
  • Ham
    • \n
  • Eggs
    • \n\n'''\n\npage['example'] = ui.markup_card(\n box='1 1 2 2',\n title='Menu',\n content=menu,\n)\npage.save()\n")))}p.isMDXComponent=!0},292:function(e,n,t){"use strict";t.d(n,"a",(function(){return d})),t.d(n,"b",(function(){return E}));var r=t(0),i=t.n(r);function a(e,n,t){return n in e?Object.defineProperty(e,n,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[n]=t,e}function s(e,n){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);n&&(r=r.filter((function(n){return Object.getOwnPropertyDescriptor(e,n).enumerable}))),t.push.apply(t,r)}return t}function o(e){for(var n=1;n=0||(i[t]=e[t]);return i}(e,n);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(i[t]=e[t])}return i}var l=i.a.createContext({}),p=function(e){var n=i.a.useContext(l),t=n;return e&&(t="function"==typeof e?e(n):o(o({},n),e)),t},d=function(e){var n=p(e.components);return i.a.createElement(l.Provider,{value:n},e.children)},u={inlineCode:"code",wrapper:function(e){var n=e.children;return i.a.createElement(i.a.Fragment,{},n)}},m=i.a.forwardRef((function(e,n){var t=e.components,r=e.mdxType,a=e.originalType,s=e.parentName,l=c(e,["components","mdxType","originalType","parentName"]),d=p(t),m=r,E=d["".concat(s,".").concat(m)]||d[m]||u[m]||a;return t?i.a.createElement(E,o(o({ref:n},l),{},{components:t})):i.a.createElement(E,o({ref:n},l))}));function E(e,n){var t=arguments,r=n&&n.mdxType;if("string"==typeof e||r){var a=t.length,s=new Array(a);s[0]=m;var o={};for(var c in n)hasOwnProperty.call(n,c)&&(o[c]=n[c]);o.originalType=e,o.mdxType="string"==typeof e?e:r,s[1]=o;for(var l=2;l 0.5 else 'BoxMultiplySolid'),\n notifications=('Off' if random.random() > 0.5 else 'On')) for i in range(100)\n]\n\n# Create columns for our issue table.\ncolumns = [\n ui.table_column(name='text', label='Issue'),\n ui.table_column(name='status', label='Status'),\n ui.table_column(name='notifications', label='Notifications'),\n ui.table_column(name='done', label='Done', cell_type=ui.icon_table_cell_type()),\n ui.table_column(name='views', label='Views'),\n ui.table_column(name='progress', label='Progress', cell_type=ui.progress_table_cell_type()),\n]\n\n\nasync def serve(q: Q):\n q.page['form'] = ui.form_card(box='1 1 -1 11', items=[\n ui.table(\n name='issues',\n columns=columns,\n rows=[ui.table_row(\n name=issue.id,\n cells=[issue.text, issue.status, issue.notifications, issue.icon, str(issue.views), issue.progress]) for\n issue in issues],\n groupable=True,\n )])\n await q.page.save()\n\n\nlisten('/demo', serve)\n")))}c.isMDXComponent=!0},290:function(e,n,t){"use strict";t.d(n,"a",(function(){return p})),t.d(n,"b",(function(){return f}));var r=t(0),a=t.n(r);function o(e,n,t){return n in e?Object.defineProperty(e,n,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[n]=t,e}function s(e,n){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);n&&(r=r.filter((function(n){return Object.getOwnPropertyDescriptor(e,n).enumerable}))),t.push.apply(t,r)}return t}function i(e){for(var n=1;n=0||(a[t]=e[t]);return a}(e,n);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(a[t]=e[t])}return a}var u=a.a.createContext({}),c=function(e){var n=a.a.useContext(u),t=n;return e&&(t="function"==typeof e?e(n):i(i({},n),e)),t},p=function(e){var n=c(e.components);return a.a.createElement(u.Provider,{value:n},e.children)},b={inlineCode:"code",wrapper:function(e){var n=e.children;return a.a.createElement(a.a.Fragment,{},n)}},m=a.a.forwardRef((function(e,n){var t=e.components,r=e.mdxType,o=e.originalType,s=e.parentName,u=l(e,["components","mdxType","originalType","parentName"]),p=c(t),m=r,f=p["".concat(s,".").concat(m)]||p[m]||b[m]||o;return t?a.a.createElement(f,i(i({ref:n},u),{},{components:t})):a.a.createElement(f,i({ref:n},u))}));function f(e,n){var t=arguments,r=n&&n.mdxType;if("string"==typeof e||r){var o=t.length,s=new Array(o);s[0]=m;var i={};for(var l in n)hasOwnProperty.call(n,l)&&(i[l]=n[l]);i.originalType=e,i.mdxType="string"==typeof e?e:r,s[1]=i;for(var u=2;u 0.5 else 'BoxMultiplySolid'),\n notifications=('Off' if random.random() > 0.5 else 'On')) for i in range(100)\n]\n\n# Create columns for our issue table.\ncolumns = [\n ui.table_column(name='text', label='Issue'),\n ui.table_column(name='status', label='Status'),\n ui.table_column(name='notifications', label='Notifications'),\n ui.table_column(name='done', label='Done', cell_type=ui.icon_table_cell_type()),\n ui.table_column(name='views', label='Views'),\n ui.table_column(name='progress', label='Progress', cell_type=ui.progress_table_cell_type()),\n]\n\n\n@app('/demo')\nasync def serve(q: Q):\n q.page['form'] = ui.form_card(box='1 1 -1 11', items=[\n ui.table(\n name='issues',\n columns=columns,\n rows=[ui.table_row(\n name=issue.id,\n cells=[issue.text, issue.status, issue.notifications, issue.icon, str(issue.views), issue.progress]) for\n issue in issues],\n groupable=True,\n )])\n await q.page.save()\n")))}c.isMDXComponent=!0},292:function(e,n,t){"use strict";t.d(n,"a",(function(){return p})),t.d(n,"b",(function(){return f}));var r=t(0),a=t.n(r);function o(e,n,t){return n in e?Object.defineProperty(e,n,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[n]=t,e}function s(e,n){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);n&&(r=r.filter((function(n){return Object.getOwnPropertyDescriptor(e,n).enumerable}))),t.push.apply(t,r)}return t}function i(e){for(var n=1;n=0||(a[t]=e[t]);return a}(e,n);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(a[t]=e[t])}return a}var u=a.a.createContext({}),c=function(e){var n=a.a.useContext(u),t=n;return e&&(t="function"==typeof e?e(n):i(i({},n),e)),t},p=function(e){var n=c(e.components);return a.a.createElement(u.Provider,{value:n},e.children)},b={inlineCode:"code",wrapper:function(e){var n=e.children;return a.a.createElement(a.a.Fragment,{},n)}},m=a.a.forwardRef((function(e,n){var t=e.components,r=e.mdxType,o=e.originalType,s=e.parentName,u=l(e,["components","mdxType","originalType","parentName"]),p=c(t),m=r,f=p["".concat(s,".").concat(m)]||p[m]||b[m]||o;return t?a.a.createElement(f,i(i({ref:n},u),{},{components:t})):a.a.createElement(f,i({ref:n},u))}));function f(e,n){var t=arguments,r=n&&n.mdxType;if("string"==typeof e||r){var o=t.length,s=new Array(o);s[0]=m;var i={};for(var l in n)hasOwnProperty.call(n,l)&&(i[l]=n[l]);i.originalType=e,i.mdxType="string"==typeof e?e:r,s[1]=i;for(var u=2;u -v "),'\nor via the "My Apps"/"My Instances" page.'),Object(r.b)("p",null,"Admin access is exempt from all the authorization rules (i.e., admins have full access to all apps/instances)."),Object(r.b)("p",null,"See ",Object(r.b)("a",Object(a.a)({parentName:"p"},{href:"developer-guide#cli"}),"Developer Guide")," for details on manaigng app instance."))}s.isMDXComponent=!0},290:function(e,t,n){"use strict";n.d(t,"a",(function(){return b})),n.d(t,"b",(function(){return m}));var a=n(0),i=n.n(a);function r(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function c(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);t&&(a=a.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,a)}return n}function o(e){for(var t=1;t=0||(i[n]=e[n]);return i}(e,t);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);for(a=0;a=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(i[n]=e[n])}return i}var p=i.a.createContext({}),s=function(e){var t=i.a.useContext(p),n=t;return e&&(n="function"==typeof e?e(t):o(o({},t),e)),n},b=function(e){var t=s(e.components);return i.a.createElement(p.Provider,{value:t},e.children)},u={inlineCode:"code",wrapper:function(e){var t=e.children;return i.a.createElement(i.a.Fragment,{},t)}},d=i.a.forwardRef((function(e,t){var n=e.components,a=e.mdxType,r=e.originalType,c=e.parentName,p=l(e,["components","mdxType","originalType","parentName"]),b=s(n),d=a,m=b["".concat(c,".").concat(d)]||b[d]||u[d]||r;return n?i.a.createElement(m,o(o({ref:t},p),{},{components:n})):i.a.createElement(m,o({ref:t},p))}));function m(e,t){var n=arguments,a=t&&t.mdxType;if("string"==typeof e||a){var r=n.length,c=new Array(r);c[0]=d;var o={};for(var l in t)hasOwnProperty.call(t,l)&&(o[l]=t[l]);o.originalType=e,o.mdxType="string"==typeof e?e:a,c[1]=o;for(var p=2;p -v "),'\nor via the "My Apps"/"My Instances" page.'),Object(r.b)("p",null,"Admin access is exempt from all the authorization rules (i.e., admins have full access to all apps/instances)."),Object(r.b)("p",null,"See ",Object(r.b)("a",Object(a.a)({parentName:"p"},{href:"developer-guide#cli"}),"Developer Guide")," for details on manaigng app instance."))}s.isMDXComponent=!0},292:function(e,t,n){"use strict";n.d(t,"a",(function(){return b})),n.d(t,"b",(function(){return m}));var a=n(0),i=n.n(a);function r(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function c(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);t&&(a=a.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,a)}return n}function o(e){for(var t=1;t=0||(i[n]=e[n]);return i}(e,t);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);for(a=0;a=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(i[n]=e[n])}return i}var p=i.a.createContext({}),s=function(e){var t=i.a.useContext(p),n=t;return e&&(n="function"==typeof e?e(t):o(o({},t),e)),n},b=function(e){var t=s(e.components);return i.a.createElement(p.Provider,{value:t},e.children)},u={inlineCode:"code",wrapper:function(e){var t=e.children;return i.a.createElement(i.a.Fragment,{},t)}},d=i.a.forwardRef((function(e,t){var n=e.components,a=e.mdxType,r=e.originalType,c=e.parentName,p=l(e,["components","mdxType","originalType","parentName"]),b=s(n),d=a,m=b["".concat(c,".").concat(d)]||b[d]||u[d]||r;return n?i.a.createElement(m,o(o({ref:t},p),{},{components:n})):i.a.createElement(m,o({ref:t},p))}));function m(e,t){var n=arguments,a=t&&t.mdxType;if("string"==typeof e||a){var r=n.length,c=new Array(r);c[0]=d;var o={};for(var l in t)hasOwnProperty.call(t,l)&&(o[l]=t[l]);o.originalType=e,o.mdxType="string"==typeof e?e:a,c[1]=o;for(var p=2;p=0||(a[r]=e[r]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(a[r]=e[r])}return a}var l=a.a.createContext({}),s=function(e){var t=a.a.useContext(l),r=t;return e&&(r="function"==typeof e?e(t):c(c({},t),e)),r},u=function(e){var t=s(e.components);return a.a.createElement(l.Provider,{value:t},e.children)},m={inlineCode:"code",wrapper:function(e){var t=e.children;return a.a.createElement(a.a.Fragment,{},t)}},f=a.a.forwardRef((function(e,t){var r=e.components,n=e.mdxType,o=e.originalType,i=e.parentName,l=p(e,["components","mdxType","originalType","parentName"]),u=s(r),f=n,d=u["".concat(i,".").concat(f)]||u[f]||m[f]||o;return r?a.a.createElement(d,c(c({ref:t},l),{},{components:r})):a.a.createElement(d,c({ref:t},l))}));function d(e,t){var r=arguments,n=t&&t.mdxType;if("string"==typeof e||n){var o=r.length,i=new Array(o);i[0]=f;var c={};for(var p in t)hasOwnProperty.call(t,p)&&(c[p]=t[p]);c.originalType=e,c.mdxType="string"==typeof e?e:n,i[1]=c;for(var l=2;l=0||(a[r]=e[r]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(a[r]=e[r])}return a}var l=a.a.createContext({}),s=function(e){var t=a.a.useContext(l),r=t;return e&&(r="function"==typeof e?e(t):c(c({},t),e)),r},u=function(e){var t=s(e.components);return a.a.createElement(l.Provider,{value:t},e.children)},m={inlineCode:"code",wrapper:function(e){var t=e.children;return a.a.createElement(a.a.Fragment,{},t)}},f=a.a.forwardRef((function(e,t){var r=e.components,n=e.mdxType,o=e.originalType,i=e.parentName,l=p(e,["components","mdxType","originalType","parentName"]),u=s(r),f=n,d=u["".concat(i,".").concat(f)]||u[f]||m[f]||o;return r?a.a.createElement(d,c(c({ref:t},l),{},{components:r})):a.a.createElement(d,c({ref:t},l))}));function d(e,t){var r=arguments,n=t&&t.mdxType;if("string"==typeof e||n){var o=r.length,i=new Array(o);i[0]=f;var c={};for(var p in t)hasOwnProperty.call(t,p)&&(c[p]=t[p]);c.originalType=e,c.mdxType="string"==typeof e?e:n,i[1]=c;for(var l=2;l=0||(a[r]=e[r]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(a[r]=e[r])}return a}var l=a.a.createContext({}),s=function(e){var t=a.a.useContext(l),r=t;return e&&(r="function"==typeof e?e(t):p(p({},t),e)),r},u=function(e){var t=s(e.components);return a.a.createElement(l.Provider,{value:t},e.children)},m={inlineCode:"code",wrapper:function(e){var t=e.children;return a.a.createElement(a.a.Fragment,{},t)}},f=a.a.forwardRef((function(e,t){var r=e.components,n=e.mdxType,o=e.originalType,c=e.parentName,l=i(e,["components","mdxType","originalType","parentName"]),u=s(r),f=n,d=u["".concat(c,".").concat(f)]||u[f]||m[f]||o;return r?a.a.createElement(d,p(p({ref:t},l),{},{components:r})):a.a.createElement(d,p({ref:t},l))}));function d(e,t){var r=arguments,n=t&&t.mdxType;if("string"==typeof e||n){var o=r.length,c=new Array(o);c[0]=f;var p={};for(var i in t)hasOwnProperty.call(t,i)&&(p[i]=t[i]);p.originalType=e,p.mdxType="string"==typeof e?e:n,c[1]=p;for(var l=2;l=0||(a[r]=e[r]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(a[r]=e[r])}return a}var l=a.a.createContext({}),s=function(e){var t=a.a.useContext(l),r=t;return e&&(r="function"==typeof e?e(t):p(p({},t),e)),r},u=function(e){var t=s(e.components);return a.a.createElement(l.Provider,{value:t},e.children)},m={inlineCode:"code",wrapper:function(e){var t=e.children;return a.a.createElement(a.a.Fragment,{},t)}},f=a.a.forwardRef((function(e,t){var r=e.components,n=e.mdxType,o=e.originalType,c=e.parentName,l=i(e,["components","mdxType","originalType","parentName"]),u=s(r),f=n,d=u["".concat(c,".").concat(f)]||u[f]||m[f]||o;return r?a.a.createElement(d,p(p({ref:t},l),{},{components:r})):a.a.createElement(d,p({ref:t},l))}));function d(e,t){var r=arguments,n=t&&t.mdxType;if("string"==typeof e||n){var o=r.length,c=new Array(o);c[0]=f;var p={};for(var i in t)hasOwnProperty.call(t,i)&&(p[i]=t[i]);p.originalType=e,p.mdxType="string"==typeof e?e:n,c[1]=p;for(var l=2;l=0||(a[t]=e[t]);return a}(e,r);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(a[t]=e[t])}return a}var m=a.a.createContext({}),s=function(e){var r=a.a.useContext(m),t=r;return e&&(t="function"==typeof e?e(r):i(i({},r),e)),t},l=function(e){var r=s(e.components);return a.a.createElement(m.Provider,{value:r},e.children)},u={inlineCode:"code",wrapper:function(e){var r=e.children;return a.a.createElement(a.a.Fragment,{},r)}},f=a.a.forwardRef((function(e,r){var t=e.components,n=e.mdxType,o=e.originalType,c=e.parentName,m=p(e,["components","mdxType","originalType","parentName"]),l=s(t),f=n,d=l["".concat(c,".").concat(f)]||l[f]||u[f]||o;return t?a.a.createElement(d,i(i({ref:r},m),{},{components:t})):a.a.createElement(d,i({ref:r},m))}));function d(e,r){var t=arguments,n=r&&r.mdxType;if("string"==typeof e||n){var o=t.length,c=new Array(o);c[0]=f;var i={};for(var p in r)hasOwnProperty.call(r,p)&&(i[p]=r[p]);i.originalType=e,i.mdxType="string"==typeof e?e:n,c[1]=i;for(var m=2;m=0||(a[t]=e[t]);return a}(e,r);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(a[t]=e[t])}return a}var m=a.a.createContext({}),s=function(e){var r=a.a.useContext(m),t=r;return e&&(t="function"==typeof e?e(r):i(i({},r),e)),t},l=function(e){var r=s(e.components);return a.a.createElement(m.Provider,{value:r},e.children)},u={inlineCode:"code",wrapper:function(e){var r=e.children;return a.a.createElement(a.a.Fragment,{},r)}},f=a.a.forwardRef((function(e,r){var t=e.components,n=e.mdxType,o=e.originalType,c=e.parentName,m=p(e,["components","mdxType","originalType","parentName"]),l=s(t),f=n,d=l["".concat(c,".").concat(f)]||l[f]||u[f]||o;return t?a.a.createElement(d,i(i({ref:r},m),{},{components:t})):a.a.createElement(d,i({ref:r},m))}));function d(e,r){var t=arguments,n=r&&r.mdxType;if("string"==typeof e||n){var o=t.length,c=new Array(o);c[0]=f;var i={};for(var p in r)hasOwnProperty.call(r,p)&&(i[p]=r[p]);i.originalType=e,i.mdxType="string"==typeof e?e:n,c[1]=i;for(var m=2;m=0||(a[r]=e[r]);return a}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(a[r]=e[r])}return a}var p=a.a.createContext({}),s=function(e){var t=a.a.useContext(p),r=t;return e&&(r="function"==typeof e?e(t):c(c({},t),e)),r},u=function(e){var t=s(e.components);return a.a.createElement(p.Provider,{value:t},e.children)},f={inlineCode:"code",wrapper:function(e){var t=e.children;return a.a.createElement(a.a.Fragment,{},t)}},m=a.a.forwardRef((function(e,t){var r=e.components,n=e.mdxType,i=e.originalType,o=e.parentName,p=l(e,["components","mdxType","originalType","parentName"]),u=s(r),m=n,d=u["".concat(o,".").concat(m)]||u[m]||f[m]||i;return r?a.a.createElement(d,c(c({ref:t},p),{},{components:r})):a.a.createElement(d,c({ref:t},p))}));function d(e,t){var r=arguments,n=t&&t.mdxType;if("string"==typeof e||n){var i=r.length,o=new Array(i);o[0]=m;var c={};for(var l in t)hasOwnProperty.call(t,l)&&(c[l]=t[l]);c.originalType=e,c.mdxType="string"==typeof e?e:n,o[1]=c;for(var p=2;p=0||(a[r]=e[r]);return a}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(a[r]=e[r])}return a}var p=a.a.createContext({}),s=function(e){var t=a.a.useContext(p),r=t;return e&&(r="function"==typeof e?e(t):c(c({},t),e)),r},u=function(e){var t=s(e.components);return a.a.createElement(p.Provider,{value:t},e.children)},f={inlineCode:"code",wrapper:function(e){var t=e.children;return a.a.createElement(a.a.Fragment,{},t)}},m=a.a.forwardRef((function(e,t){var r=e.components,n=e.mdxType,i=e.originalType,o=e.parentName,p=l(e,["components","mdxType","originalType","parentName"]),u=s(r),m=n,d=u["".concat(o,".").concat(m)]||u[m]||f[m]||i;return r?a.a.createElement(d,c(c({ref:t},p),{},{components:r})):a.a.createElement(d,c({ref:t},p))}));function d(e,t){var r=arguments,n=t&&t.mdxType;if("string"==typeof e||n){var i=r.length,o=new Array(i);o[0]=m;var c={};for(var l in t)hasOwnProperty.call(t,l)&&(c[l]=t[l]);c.originalType=e,c.mdxType="string"==typeof e?e:n,o[1]=c;for(var p=2;p=0||(a[r]=e[r]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(a[r]=e[r])}return a}var b=a.a.createContext({}),u=function(e){var t=a.a.useContext(b),r=t;return e&&(r="function"==typeof e?e(t):x(x({},t),e)),r},s=function(e){var t=u(e.components);return a.a.createElement(b.Provider,{value:t},e.children)},c={inlineCode:"code",wrapper:function(e){var t=e.children;return a.a.createElement(a.a.Fragment,{},t)}},p=a.a.forwardRef((function(e,t){var r=e.components,n=e.mdxType,o=e.originalType,i=e.parentName,b=l(e,["components","mdxType","originalType","parentName"]),s=u(r),p=n,d=s["".concat(i,".").concat(p)]||s[p]||c[p]||o;return r?a.a.createElement(d,x(x({ref:t},b),{},{components:r})):a.a.createElement(d,x({ref:t},b))}));function d(e,t){var r=arguments,n=t&&t.mdxType;if("string"==typeof e||n){var o=r.length,i=new Array(o);i[0]=p;var x={};for(var l in t)hasOwnProperty.call(t,l)&&(x[l]=t[l]);x.originalType=e,x.mdxType="string"==typeof e?e:n,i[1]=x;for(var b=2;b=0||(a[r]=e[r]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(a[r]=e[r])}return a}var b=a.a.createContext({}),u=function(e){var t=a.a.useContext(b),r=t;return e&&(r="function"==typeof e?e(t):x(x({},t),e)),r},s=function(e){var t=u(e.components);return a.a.createElement(b.Provider,{value:t},e.children)},c={inlineCode:"code",wrapper:function(e){var t=e.children;return a.a.createElement(a.a.Fragment,{},t)}},p=a.a.forwardRef((function(e,t){var r=e.components,n=e.mdxType,o=e.originalType,i=e.parentName,b=l(e,["components","mdxType","originalType","parentName"]),s=u(r),p=n,d=s["".concat(i,".").concat(p)]||s[p]||c[p]||o;return r?a.a.createElement(d,x(x({ref:t},b),{},{components:r})):a.a.createElement(d,x({ref:t},b))}));function d(e,t){var r=arguments,n=t&&t.mdxType;if("string"==typeof e||n){var o=r.length,i=new Array(o);i[0]=p;var x={};for(var l in t)hasOwnProperty.call(t,l)&&(x[l]=t[l]);x.originalType=e,x.mdxType="string"==typeof e?e:n,i[1]=x;for(var b=2;b=0||(r[t]=e[t]);return r}(e,n);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(a=0;a=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(r[t]=e[t])}return r}var s=r.a.createContext({}),m=function(e){var n=r.a.useContext(s),t=n;return e&&(t="function"==typeof e?e(n):c(c({},n),e)),t},p=function(e){var n=m(e.components);return r.a.createElement(s.Provider,{value:n},e.children)},d={inlineCode:"code",wrapper:function(e){var n=e.children;return r.a.createElement(r.a.Fragment,{},n)}},u=r.a.forwardRef((function(e,n){var t=e.components,a=e.mdxType,o=e.originalType,i=e.parentName,s=l(e,["components","mdxType","originalType","parentName"]),p=m(t),u=a,f=p["".concat(i,".").concat(u)]||p[u]||d[u]||o;return t?r.a.createElement(f,c(c({ref:n},s),{},{components:t})):r.a.createElement(f,c({ref:n},s))}));function f(e,n){var t=arguments,a=n&&n.mdxType;if("string"==typeof e||a){var o=t.length,i=new Array(o);i[0]=u;var c={};for(var l in n)hasOwnProperty.call(n,l)&&(c[l]=n[l]);c.originalType=e,c.mdxType="string"==typeof e?e:a,i[1]=c;for(var s=2;s=0||(r[t]=e[t]);return r}(e,n);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(a=0;a=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(r[t]=e[t])}return r}var s=r.a.createContext({}),m=function(e){var n=r.a.useContext(s),t=n;return e&&(t="function"==typeof e?e(n):c(c({},n),e)),t},p=function(e){var n=m(e.components);return r.a.createElement(s.Provider,{value:n},e.children)},d={inlineCode:"code",wrapper:function(e){var n=e.children;return r.a.createElement(r.a.Fragment,{},n)}},u=r.a.forwardRef((function(e,n){var t=e.components,a=e.mdxType,o=e.originalType,i=e.parentName,s=l(e,["components","mdxType","originalType","parentName"]),p=m(t),u=a,f=p["".concat(i,".").concat(u)]||p[u]||d[u]||o;return t?r.a.createElement(f,c(c({ref:n},s),{},{components:t})):r.a.createElement(f,c({ref:n},s))}));function f(e,n){var t=arguments,a=n&&n.mdxType;if("string"==typeof e||a){var o=t.length,i=new Array(o);i[0]=u;var c={};for(var l in n)hasOwnProperty.call(n,l)&&(c[l]=n[l]);c.originalType=e,c.mdxType="string"==typeof e?e:a,i[1]=c;for(var s=2;s=0||(a[n]=e[n]);return a}(e,t);if(Object.getOwnPropertySymbols){var c=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(a[n]=e[n])}return a}var l=a.a.createContext({}),s=function(e){var t=a.a.useContext(l),n=t;return e&&(n="function"==typeof e?e(t):o(o({},t),e)),n},m=function(e){var t=s(e.components);return a.a.createElement(l.Provider,{value:t},e.children)},u={inlineCode:"code",wrapper:function(e){var t=e.children;return a.a.createElement(a.a.Fragment,{},t)}},d=a.a.forwardRef((function(e,t){var n=e.components,r=e.mdxType,c=e.originalType,i=e.parentName,l=p(e,["components","mdxType","originalType","parentName"]),m=s(n),d=r,f=m["".concat(i,".").concat(d)]||m[d]||u[d]||c;return n?a.a.createElement(f,o(o({ref:t},l),{},{components:n})):a.a.createElement(f,o({ref:t},l))}));function f(e,t){var n=arguments,r=t&&t.mdxType;if("string"==typeof e||r){var c=n.length,i=new Array(c);i[0]=d;var o={};for(var p in t)hasOwnProperty.call(t,p)&&(o[p]=t[p]);o.originalType=e,o.mdxType="string"==typeof e?e:r,i[1]=o;for(var l=2;l=0||(a[n]=e[n]);return a}(e,t);if(Object.getOwnPropertySymbols){var c=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(a[n]=e[n])}return a}var l=a.a.createContext({}),s=function(e){var t=a.a.useContext(l),n=t;return e&&(n="function"==typeof e?e(t):o(o({},t),e)),n},m=function(e){var t=s(e.components);return a.a.createElement(l.Provider,{value:t},e.children)},u={inlineCode:"code",wrapper:function(e){var t=e.children;return a.a.createElement(a.a.Fragment,{},t)}},d=a.a.forwardRef((function(e,t){var n=e.components,r=e.mdxType,c=e.originalType,i=e.parentName,l=p(e,["components","mdxType","originalType","parentName"]),m=s(n),d=r,f=m["".concat(i,".").concat(d)]||m[d]||u[d]||c;return n?a.a.createElement(f,o(o({ref:t},l),{},{components:n})):a.a.createElement(f,o({ref:t},l))}));function f(e,t){var n=arguments,r=t&&t.mdxType;if("string"==typeof e||r){var c=n.length,i=new Array(c);i[0]=d;var o={};for(var p in t)hasOwnProperty.call(t,p)&&(o[p]=t[p]);o.originalType=e,o.mdxType="string"==typeof e?e:r,i[1]=o;for(var l=2;l=0||(a[r]=e[r]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(a[r]=e[r])}return a}var c=a.a.createContext({}),u=function(e){var t=a.a.useContext(c),r=t;return e&&(r="function"==typeof e?e(t):p(p({},t),e)),r},s=function(e){var t=u(e.components);return a.a.createElement(c.Provider,{value:t},e.children)},m={inlineCode:"code",wrapper:function(e){var t=e.children;return a.a.createElement(a.a.Fragment,{},t)}},d=a.a.forwardRef((function(e,t){var r=e.components,n=e.mdxType,o=e.originalType,i=e.parentName,c=l(e,["components","mdxType","originalType","parentName"]),s=u(r),d=n,f=s["".concat(i,".").concat(d)]||s[d]||m[d]||o;return r?a.a.createElement(f,p(p({ref:t},c),{},{components:r})):a.a.createElement(f,p({ref:t},c))}));function f(e,t){var r=arguments,n=t&&t.mdxType;if("string"==typeof e||n){var o=r.length,i=new Array(o);i[0]=d;var p={};for(var l in t)hasOwnProperty.call(t,l)&&(p[l]=t[l]);p.originalType=e,p.mdxType="string"==typeof e?e:n,i[1]=p;for(var c=2;c=0||(a[r]=e[r]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(a[r]=e[r])}return a}var c=a.a.createContext({}),u=function(e){var t=a.a.useContext(c),r=t;return e&&(r="function"==typeof e?e(t):p(p({},t),e)),r},s=function(e){var t=u(e.components);return a.a.createElement(c.Provider,{value:t},e.children)},m={inlineCode:"code",wrapper:function(e){var t=e.children;return a.a.createElement(a.a.Fragment,{},t)}},d=a.a.forwardRef((function(e,t){var r=e.components,n=e.mdxType,o=e.originalType,i=e.parentName,c=l(e,["components","mdxType","originalType","parentName"]),s=u(r),d=n,f=s["".concat(i,".").concat(d)]||s[d]||m[d]||o;return r?a.a.createElement(f,p(p({ref:t},c),{},{components:r})):a.a.createElement(f,p({ref:t},c))}));function f(e,t){var r=arguments,n=t&&t.mdxType;if("string"==typeof e||n){var o=r.length,i=new Array(o);i[0]=d;var p={};for(var l in t)hasOwnProperty.call(t,l)&&(p[l]=t[l]);p.originalType=e,p.mdxType="string"==typeof e?e:n,i[1]=p;for(var c=2;c=0||(a[t]=e[t]);return a}(e,r);if(Object.getOwnPropertySymbols){var p=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(a[t]=e[t])}return a}var c=a.a.createContext({}),l=function(e){var r=a.a.useContext(c),t=r;return e&&(t="function"==typeof e?e(r):i(i({},r),e)),t},s=function(e){var r=l(e.components);return a.a.createElement(c.Provider,{value:r},e.children)},g={inlineCode:"code",wrapper:function(e){var r=e.children;return a.a.createElement(a.a.Fragment,{},r)}},S=a.a.forwardRef((function(e,r){var t=e.components,n=e.mdxType,p=e.originalType,A=e.parentName,c=o(e,["components","mdxType","originalType","parentName"]),s=l(t),S=n,u=s["".concat(A,".").concat(S)]||s[S]||g[S]||p;return t?a.a.createElement(u,i(i({ref:r},c),{},{components:t})):a.a.createElement(u,i({ref:r},c))}));function u(e,r){var t=arguments,n=r&&r.mdxType;if("string"==typeof e||n){var p=t.length,A=new Array(p);A[0]=S;var i={};for(var o in r)hasOwnProperty.call(r,o)&&(i[o]=r[o]);i.originalType=e,i.mdxType="string"==typeof e?e:n,A[1]=i;for(var c=2;c=0||(a[t]=e[t]);return a}(e,r);if(Object.getOwnPropertySymbols){var p=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(a[t]=e[t])}return a}var c=a.a.createContext({}),l=function(e){var r=a.a.useContext(c),t=r;return e&&(t="function"==typeof e?e(r):i(i({},r),e)),t},s=function(e){var r=l(e.components);return a.a.createElement(c.Provider,{value:r},e.children)},g={inlineCode:"code",wrapper:function(e){var r=e.children;return a.a.createElement(a.a.Fragment,{},r)}},S=a.a.forwardRef((function(e,r){var t=e.components,n=e.mdxType,p=e.originalType,A=e.parentName,c=o(e,["components","mdxType","originalType","parentName"]),s=l(t),S=n,u=s["".concat(A,".").concat(S)]||s[S]||g[S]||p;return t?a.a.createElement(u,i(i({ref:r},c),{},{components:t})):a.a.createElement(u,i({ref:r},c))}));function u(e,r){var t=arguments,n=r&&r.mdxType;if("string"==typeof e||n){var p=t.length,A=new Array(p);A[0]=S;var i={};for(var o in r)hasOwnProperty.call(r,o)&&(i[o]=r[o]);i.originalType=e,i.mdxType="string"==typeof e?e:n,A[1]=i;for(var c=2;c',id:"arc",children:[]},{value:'circle     ',id:"circle",children:[]},{value:'draw ',id:"draw",children:[]},{value:'ellipse ',id:"ellipse",children:[]},{value:'image ',id:"image",children:[]},{value:'line ',id:"line",children:[]},{value:'p ',id:"p",children:[]},{value:'path ',id:"path",children:[]},{value:'polygon ',id:"polygon",children:[]},{value:'polyline ',id:"polyline",children:[]},{value:'rect ',id:"rect",children:[]},{value:'reset ',id:"reset",children:[]},{value:'scene ',id:"scene",children:[]},{value:'spline ',id:"spline",children:[]},{value:'stage ',id:"stage",children:[]},{value:'text ',id:"text",children:[]},{value:'turtle ',id:"turtle",children:[]},{value:'type_of ',id:"type_of",children:[]}]},{value:"Classes",id:"classes",children:[{value:'Path ',id:"path-1",children:[]},{value:'Turtle ',id:"turtle-1",children:[]}]}],r={rightToc:s};function o(e){var t=e.components,a=Object(b.a)(e,["components"]);return Object(l.b)("wrapper",Object(c.a)({},r,a,{components:t,mdxType:"MDXLayout"}),Object(l.b)("h2",{id:"functions"},"Functions"),Object(l.b)("div",{className:"api"},Object(l.b)("h3",{id:"arc"},"arc ",Object(l.b)("a",{name:"h2o_wave.graphics.arc"})),Object(l.b)("div",{className:"api__body"},Object(l.b)("div",{className:"api__signature"},"def ",Object(l.b)("span",{class:"ident"},"arc"),"(r1:\xa0float, r2:\xa0float, a1:\xa0float, a2:\xa0float, **kwargs) \u2011>\xa0",Object(l.b)("a",{title:"h2o_wave.core.Expando",href:"core#h2o_wave.core.Expando"},"Expando")),Object(l.b)("div",{className:"api__description"},Object(l.b)("p",null,"Draw circular or annular sector, as in a pie or donut chart, centered at (0, 0)."),Object(l.b)("h5",{id:"args"},"Args"),Object(l.b)("dl",null,Object(l.b)("dt",null,Object(l.b)("code",null,"r1")),Object(l.b)("dd",null,"inner radius."),Object(l.b)("dt",null,Object(l.b)("code",null,"r2")),Object(l.b)("dd",null,"outer radius."),Object(l.b)("dt",null,Object(l.b)("code",null,"a1")),Object(l.b)("dd",null,"start angle, in degrees."),Object(l.b)("dt",null,Object(l.b)("code",null,"a2")),Object(l.b)("dd",null,"end angle, in degrees."),Object(l.b)("dt",null,Object(l.b)("code",null,"kwargs")),Object(l.b)("dd",null,"Attributes to use for the initial render. SVG attributes, snake-cased.")),Object(l.b)("h5",{id:"returns"},"Returns"),Object(l.b)("p",null,"Data for the graphical element.")))),Object(l.b)("div",{className:"api"},Object(l.b)("h3",{id:"circle"},"circle ",Object(l.b)("a",{name:"h2o_wave.graphics.circle"})),Object(l.b)("div",{className:"api__body"},Object(l.b)("div",{className:"api__signature"},"def ",Object(l.b)("span",{class:"ident"},"circle"),"(**kwargs) \u2011>\xa0",Object(l.b)("a",{title:"h2o_wave.core.Expando",href:"core#h2o_wave.core.Expando"},"Expando")),Object(l.b)("div",{className:"api__description"},Object(l.b)("p",null,"Draw a circle. See ",Object(l.b)("a",{href:"https://developer.mozilla.org/en-US/docs/Web/SVG/Element/circle"},"https://developer.mozilla.org/en-US/docs/Web/SVG/Element/circle")),Object(l.b)("h5",{id:"args"},"Args"),Object(l.b)("dl",null,Object(l.b)("dt",null,Object(l.b)("code",null,"kwargs")),Object(l.b)("dd",null,"Attributes to use for the initial render. SVG attributes, snake-cased.")),Object(l.b)("h5",{id:"returns"},"Returns"),Object(l.b)("p",null,"Data for the graphical element.")))),Object(l.b)("div",{className:"api"},Object(l.b)("h3",{id:"draw"},"draw ",Object(l.b)("a",{name:"h2o_wave.graphics.draw"})),Object(l.b)("div",{className:"api__body"},Object(l.b)("div",{className:"api__signature"},"def ",Object(l.b)("span",{class:"ident"},"draw"),"(element:\xa0",Object(l.b)("a",{title:"h2o_wave.core.Ref",href:"core#h2o_wave.core.Ref"},"Ref"),", **kwargs) \u2011>\xa0",Object(l.b)("a",{title:"h2o_wave.core.Ref",href:"core#h2o_wave.core.Ref"},"Ref")),Object(l.b)("div",{className:"api__description"},Object(l.b)("p",null,"Schedule a redraw of the specified graphical element using the provided attributes."),Object(l.b)("h5",{id:"args"},"Args"),Object(l.b)("dl",null,Object(l.b)("dt",null,Object(l.b)("code",null,"element")),Object(l.b)("dd",null,"A reference to a graphical element."),Object(l.b)("dt",null,Object(l.b)("code",null,"kwargs")),Object(l.b)("dd",null,"Attributes to use while performing a redraw.")),Object(l.b)("h5",{id:"returns"},"Returns"),Object(l.b)("p",null,"The element reference, without change.")))),Object(l.b)("div",{className:"api"},Object(l.b)("h3",{id:"ellipse"},"ellipse ",Object(l.b)("a",{name:"h2o_wave.graphics.ellipse"})),Object(l.b)("div",{className:"api__body"},Object(l.b)("div",{className:"api__signature"},"def ",Object(l.b)("span",{class:"ident"},"ellipse"),"(**kwargs) \u2011>\xa0",Object(l.b)("a",{title:"h2o_wave.core.Expando",href:"core#h2o_wave.core.Expando"},"Expando")),Object(l.b)("div",{className:"api__description"},Object(l.b)("p",null,"Draw an ellipse. See ",Object(l.b)("a",{href:"https://developer.mozilla.org/en-US/docs/Web/SVG/Element/ellipse"},"https://developer.mozilla.org/en-US/docs/Web/SVG/Element/ellipse")),Object(l.b)("h5",{id:"args"},"Args"),Object(l.b)("dl",null,Object(l.b)("dt",null,Object(l.b)("code",null,"kwargs")),Object(l.b)("dd",null,"Attributes to use for the initial render. SVG attributes, snake-cased.")),Object(l.b)("h5",{id:"returns"},"Returns"),Object(l.b)("p",null,"Data for the graphical element.")))),Object(l.b)("div",{className:"api"},Object(l.b)("h3",{id:"image"},"image ",Object(l.b)("a",{name:"h2o_wave.graphics.image"})),Object(l.b)("div",{className:"api__body"},Object(l.b)("div",{className:"api__signature"},"def ",Object(l.b)("span",{class:"ident"},"image"),"(**kwargs) \u2011>\xa0",Object(l.b)("a",{title:"h2o_wave.core.Expando",href:"core#h2o_wave.core.Expando"},"Expando")),Object(l.b)("div",{className:"api__description"},Object(l.b)("p",null,"Draw an image. See ",Object(l.b)("a",{href:"https://developer.mozilla.org/en-US/docs/Web/SVG/Element/image"},"https://developer.mozilla.org/en-US/docs/Web/SVG/Element/image")),Object(l.b)("h5",{id:"args"},"Args"),Object(l.b)("dl",null,Object(l.b)("dt",null,Object(l.b)("code",null,"kwargs")),Object(l.b)("dd",null,"Attributes to use for the initial render. SVG attributes, snake-cased.")),Object(l.b)("h5",{id:"returns"},"Returns"),Object(l.b)("p",null,"Data for the graphical element.")))),Object(l.b)("div",{className:"api"},Object(l.b)("h3",{id:"line"},"line ",Object(l.b)("a",{name:"h2o_wave.graphics.line"})),Object(l.b)("div",{className:"api__body"},Object(l.b)("div",{className:"api__signature"},"def ",Object(l.b)("span",{class:"ident"},"line"),"(**kwargs) \u2011>\xa0",Object(l.b)("a",{title:"h2o_wave.core.Expando",href:"core#h2o_wave.core.Expando"},"Expando")),Object(l.b)("div",{className:"api__description"},Object(l.b)("p",null,"Draw a line. See ",Object(l.b)("a",{href:"https://developer.mozilla.org/en-US/docs/Web/SVG/Element/line"},"https://developer.mozilla.org/en-US/docs/Web/SVG/Element/line")),Object(l.b)("h5",{id:"args"},"Args"),Object(l.b)("dl",null,Object(l.b)("dt",null,Object(l.b)("code",null,"kwargs")),Object(l.b)("dd",null,"Attributes to use for the initial render. SVG attributes, snake-cased.")),Object(l.b)("h5",{id:"returns"},"Returns"),Object(l.b)("p",null,"Data for the graphical element.")))),Object(l.b)("div",{className:"api"},Object(l.b)("h3",{id:"p"},"p ",Object(l.b)("a",{name:"h2o_wave.graphics.p"})),Object(l.b)("div",{className:"api__body"},Object(l.b)("div",{className:"api__signature"},"def ",Object(l.b)("span",{class:"ident"},"p"),"() \u2011>\xa0",Object(l.b)("a",{title:"h2o_wave.graphics.Path",href:"#h2o_wave.graphics.Path"},"Path")),Object(l.b)("div",{className:"api__description"},Object(l.b)("p",null,"Create a new ",Object(l.b)("code",null,Object(l.b)("a",{title:"h2o_wave.graphics.Path",href:"#h2o_wave.graphics.Path"},"Path")),"."),Object(l.b)("h5",{id:"returns"},"Returns"),Object(l.b)("p",null,"A new ",Object(l.b)("code",null,Object(l.b)("a",{title:"h2o_wave.graphics.Path",href:"#h2o_wave.graphics.Path"},"Path")),".")))),Object(l.b)("div",{className:"api"},Object(l.b)("h3",{id:"path"},"path ",Object(l.b)("a",{name:"h2o_wave.graphics.path"})),Object(l.b)("div",{className:"api__body"},Object(l.b)("div",{className:"api__signature"},"def ",Object(l.b)("span",{class:"ident"},"path"),"(**kwargs) \u2011>\xa0",Object(l.b)("a",{title:"h2o_wave.core.Expando",href:"core#h2o_wave.core.Expando"},"Expando")),Object(l.b)("div",{className:"api__description"},Object(l.b)("p",null,"Draw a path. See ",Object(l.b)("a",{href:"https://developer.mozilla.org/en-US/docs/Web/SVG/Element/path"},"https://developer.mozilla.org/en-US/docs/Web/SVG/Element/path")),Object(l.b)("h5",{id:"args"},"Args"),Object(l.b)("dl",null,Object(l.b)("dt",null,Object(l.b)("code",null,"kwargs")),Object(l.b)("dd",null,"Attributes to use for the initial render. SVG attributes, snake-cased.")),Object(l.b)("h5",{id:"returns"},"Returns"),Object(l.b)("p",null,"Data for the graphical element.")))),Object(l.b)("div",{className:"api"},Object(l.b)("h3",{id:"polygon"},"polygon ",Object(l.b)("a",{name:"h2o_wave.graphics.polygon"})),Object(l.b)("div",{className:"api__body"},Object(l.b)("div",{className:"api__signature"},"def ",Object(l.b)("span",{class:"ident"},"polygon"),"(**kwargs) \u2011>\xa0",Object(l.b)("a",{title:"h2o_wave.core.Expando",href:"core#h2o_wave.core.Expando"},"Expando")),Object(l.b)("div",{className:"api__description"},Object(l.b)("p",null,"Draw a polygon. See ",Object(l.b)("a",{href:"https://developer.mozilla.org/en-US/docs/Web/SVG/Element/polygon"},"https://developer.mozilla.org/en-US/docs/Web/SVG/Element/polygon")),Object(l.b)("h5",{id:"args"},"Args"),Object(l.b)("dl",null,Object(l.b)("dt",null,Object(l.b)("code",null,"kwargs")),Object(l.b)("dd",null,"Attributes to use for the initial render. SVG attributes, snake-cased.")),Object(l.b)("h5",{id:"returns"},"Returns"),Object(l.b)("p",null,"Data for the graphical element.")))),Object(l.b)("div",{className:"api"},Object(l.b)("h3",{id:"polyline"},"polyline ",Object(l.b)("a",{name:"h2o_wave.graphics.polyline"})),Object(l.b)("div",{className:"api__body"},Object(l.b)("div",{className:"api__signature"},"def ",Object(l.b)("span",{class:"ident"},"polyline"),"(**kwargs) \u2011>\xa0",Object(l.b)("a",{title:"h2o_wave.core.Expando",href:"core#h2o_wave.core.Expando"},"Expando")),Object(l.b)("div",{className:"api__description"},Object(l.b)("p",null,"Draw a polyline. See ",Object(l.b)("a",{href:"https://developer.mozilla.org/en-US/docs/Web/SVG/Element/polyline"},"https://developer.mozilla.org/en-US/docs/Web/SVG/Element/polyline")),Object(l.b)("h5",{id:"args"},"Args"),Object(l.b)("dl",null,Object(l.b)("dt",null,Object(l.b)("code",null,"kwargs")),Object(l.b)("dd",null,"Attributes to use for the initial render. SVG attributes, snake-cased.")),Object(l.b)("h5",{id:"returns"},"Returns"),Object(l.b)("p",null,"Data for the graphical element.")))),Object(l.b)("div",{className:"api"},Object(l.b)("h3",{id:"rect"},"rect ",Object(l.b)("a",{name:"h2o_wave.graphics.rect"})),Object(l.b)("div",{className:"api__body"},Object(l.b)("div",{className:"api__signature"},"def ",Object(l.b)("span",{class:"ident"},"rect"),"(**kwargs) \u2011>\xa0",Object(l.b)("a",{title:"h2o_wave.core.Expando",href:"core#h2o_wave.core.Expando"},"Expando")),Object(l.b)("div",{className:"api__description"},Object(l.b)("p",null,"Draw a rectangle. See ",Object(l.b)("a",{href:"https://developer.mozilla.org/en-US/docs/Web/SVG/Element/rect"},"https://developer.mozilla.org/en-US/docs/Web/SVG/Element/rect")),Object(l.b)("h5",{id:"args"},"Args"),Object(l.b)("dl",null,Object(l.b)("dt",null,Object(l.b)("code",null,"kwargs")),Object(l.b)("dd",null,"Attributes to use for the initial render. SVG attributes, snake-cased.")),Object(l.b)("h5",{id:"returns"},"Returns"),Object(l.b)("p",null,"Data for the graphical element.")))),Object(l.b)("div",{className:"api"},Object(l.b)("h3",{id:"reset"},"reset ",Object(l.b)("a",{name:"h2o_wave.graphics.reset"})),Object(l.b)("div",{className:"api__body"},Object(l.b)("div",{className:"api__signature"},"def ",Object(l.b)("span",{class:"ident"},"reset"),"(element:\xa0",Object(l.b)("a",{title:"h2o_wave.core.Ref",href:"core#h2o_wave.core.Ref"},"Ref"),") \u2011>\xa0",Object(l.b)("a",{title:"h2o_wave.core.Ref",href:"core#h2o_wave.core.Ref"},"Ref")),Object(l.b)("div",{className:"api__description"},Object(l.b)("p",null,"Schedule a redraw of the specified graphical element using its original attributes. Calling this function clears any changes performed using the ",Object(l.b)("code",null,Object(l.b)("a",{title:"h2o_wave.graphics.draw",href:"#h2o_wave.graphics.draw"},"draw()"))," function."),Object(l.b)("h5",{id:"args"},"Args"),Object(l.b)("dl",null,Object(l.b)("dt",null,Object(l.b)("code",null,"element")),Object(l.b)("dd",null,"A reference to a graphical element.")),Object(l.b)("h5",{id:"returns"},"Returns"),Object(l.b)("p",null,"The element reference, without change.")))),Object(l.b)("div",{className:"api"},Object(l.b)("h3",{id:"scene"},"scene ",Object(l.b)("a",{name:"h2o_wave.graphics.scene"})),Object(l.b)("div",{className:"api__body"},Object(l.b)("div",{className:"api__signature"},"def ",Object(l.b)("span",{class:"ident"},"scene"),"(**kwargs) \u2011>\xa0",Object(l.b)("a",{title:"h2o_wave.core.Data",href:"core#h2o_wave.core.Data"},"Data")),Object(l.b)("div",{className:"api__description"},Object(l.b)("p",null,"Create a scene. A scene holds graphic elements whose attributes need to be changed dynamically (causing a re-render). The return value must be assigned to the ",Object(l.b)("code",null,Object(l.b)("a",{title:"h2o_wave.graphics.scene",href:"#h2o_wave.graphics.scene"},"scene()"))," property of a ",Object(l.b)("code",null,Object(l.b)("a",{title:"h2o_wave.types.GraphicsCard",href:"types#h2o_wave.types.GraphicsCard"},"GraphicsCard")),"."),Object(l.b)("h5",{id:"args"},"Args"),Object(l.b)("dl",null,Object(l.b)("dt",null,Object(l.b)("code",null,"kwargs")),Object(l.b)("dd",null,"Graphical elements to render as part of the scene.")),Object(l.b)("h5",{id:"returns"},"Returns"),Object(l.b)("p",null,"A ",Object(l.b)("code",null,Object(l.b)("a",{title:"h2o_wave.core.Data",href:"core#h2o_wave.core.Data"},"Data"))," instance.")))),Object(l.b)("div",{className:"api"},Object(l.b)("h3",{id:"spline"},"spline ",Object(l.b)("a",{name:"h2o_wave.graphics.spline"})),Object(l.b)("div",{className:"api__body"},Object(l.b)("div",{className:"api__signature"},"def ",Object(l.b)("span",{class:"ident"},"spline"),"(x:\xa0Union[List[Union[float,\xa0NoneType]],\xa0NoneType]\xa0=\xa0None, y:\xa0Union[List[Union[float,\xa0NoneType]],\xa0NoneType]\xa0=\xa0None, x0:\xa0Union[List[Union[float,\xa0NoneType]],\xa0NoneType]\xa0=\xa0None, y0:\xa0Union[List[Union[float,\xa0NoneType]],\xa0NoneType]\xa0=\xa0None, curve:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, radial:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, **kwargs) \u2011>\xa0",Object(l.b)("a",{title:"h2o_wave.core.Expando",href:"core#h2o_wave.core.Expando"},"Expando")),Object(l.b)("div",{className:"api__description"},Object(l.b)("p",null,"Draw a spline."),Object(l.b)("p",null,"If x, y are specified, draws a regular spline."),Object(l.b)("p",null,"If x, y, y0 are specified, draws a horizontal area spline. Sets baseline to zero if y0 is an empty list."),Object(l.b)("p",null,"If x, x0, y are specified, draws a vertical area spline. Sets baseline to zero if x0 is an empty list"),Object(l.b)("p",null,"Missing information is rendered as gaps in the spline."),Object(l.b)("h5",{id:"args"},"Args"),Object(l.b)("dl",null,Object(l.b)("dt",null,Object(l.b)("code",null,"x")),Object(l.b)("dd",null,"x-coordinates."),Object(l.b)("dt",null,Object(l.b)("code",null,"y")),Object(l.b)("dd",null,"y-coordinates."),Object(l.b)("dt",null,Object(l.b)("code",null,"x0")),Object(l.b)("dd",null,"base x-coordinates."),Object(l.b)("dt",null,Object(l.b)("code",null,"y0")),Object(l.b)("dd",null,"base y-coordinates."),Object(l.b)("dt",null,Object(l.b)("code",null,"curve")),Object(l.b)("dd",null,"Interpolation. One of basis, basis-closed, basis-open, cardinal, cardinal-closed, cardinal-open, smooth, smooth-closed, smooth-open, linear, linear-closed, monotone-x, monotone-y, natural, step, step-after, step-before. Defaults to linear."),Object(l.b)("dt",null,Object(l.b)("code",null,"radial")),Object(l.b)("dd",null,"Whether (x, y) should be treated as (angle,radius) or (x0, x, y0, y) should be treated as (start-angle, end-angle, inner-radius, outer-radius)."),Object(l.b)("dt",null,Object(l.b)("code",null,"kwargs")),Object(l.b)("dd",null,"Attributes to use for the initial render. SVG attributes, snake-cased.")),Object(l.b)("h5",{id:"returns"},"Returns"),Object(l.b)("p",null,"Data for the graphical element.")))),Object(l.b)("div",{className:"api"},Object(l.b)("h3",{id:"stage"},"stage ",Object(l.b)("a",{name:"h2o_wave.graphics.stage"})),Object(l.b)("div",{className:"api__body"},Object(l.b)("div",{className:"api__signature"},"def ",Object(l.b)("span",{class:"ident"},"stage"),"(**kwargs) \u2011>\xa0str"),Object(l.b)("div",{className:"api__description"},Object(l.b)("p",null,"Create a stage. A stage holds static graphics elements that are rendered as part of the background (behind the scene). The return value must be assigned to the ",Object(l.b)("code",null,Object(l.b)("a",{title:"h2o_wave.graphics.stage",href:"#h2o_wave.graphics.stage"},"stage()"))," property of a ",Object(l.b)("code",null,Object(l.b)("a",{title:"h2o_wave.types.GraphicsCard",href:"types#h2o_wave.types.GraphicsCard"},"GraphicsCard")),"."),Object(l.b)("h5",{id:"args"},"Args"),Object(l.b)("dl",null,Object(l.b)("dt",null,Object(l.b)("code",null,"kwargs")),Object(l.b)("dd",null,"Graphical elements to render as part of the stage.")),Object(l.b)("h5",{id:"returns"},"Returns"),Object(l.b)("p",null,"Packed data.")))),Object(l.b)("div",{className:"api"},Object(l.b)("h3",{id:"text"},"text ",Object(l.b)("a",{name:"h2o_wave.graphics.text"})),Object(l.b)("div",{className:"api__body"},Object(l.b)("div",{className:"api__signature"},"def ",Object(l.b)("span",{class:"ident"},"text"),"(text:\xa0str, **kwargs) \u2011>\xa0",Object(l.b)("a",{title:"h2o_wave.core.Expando",href:"core#h2o_wave.core.Expando"},"Expando")),Object(l.b)("div",{className:"api__description"},Object(l.b)("p",null,"Draw text. See ",Object(l.b)("a",{href:"https://developer.mozilla.org/en-US/docs/Web/SVG/Element/text"},"https://developer.mozilla.org/en-US/docs/Web/SVG/Element/text")),Object(l.b)("h5",{id:"args"},"Args"),Object(l.b)("dl",null,Object(l.b)("dt",null,Object(l.b)("code",null,"text")),Object(l.b)("dd",null,"The text content."),Object(l.b)("dt",null,Object(l.b)("code",null,"kwargs")),Object(l.b)("dd",null,"Attributes to use for the initial render. SVG attributes, snake-cased.")),Object(l.b)("h5",{id:"returns"},"Returns"),Object(l.b)("p",null,"Data for the graphical element.")))),Object(l.b)("div",{className:"api"},Object(l.b)("h3",{id:"turtle"},"turtle ",Object(l.b)("a",{name:"h2o_wave.graphics.turtle"})),Object(l.b)("div",{className:"api__body"},Object(l.b)("div",{className:"api__signature"},"def ",Object(l.b)("span",{class:"ident"},"turtle"),"(x=0.0, y=0.0, degrees=0.0) \u2011>\xa0",Object(l.b)("a",{title:"h2o_wave.graphics.Turtle",href:"#h2o_wave.graphics.Turtle"},"Turtle")),Object(l.b)("div",{className:"api__description"},Object(l.b)("p",null,"Create a new ",Object(l.b)("code",null,Object(l.b)("a",{title:"h2o_wave.graphics.Turtle",href:"#h2o_wave.graphics.Turtle"},"Turtle")),"."),Object(l.b)("h5",{id:"args"},"Args"),Object(l.b)("dl",null,Object(l.b)("dt",null,Object(l.b)("code",null,"x")),Object(l.b)("dd",null,"initial position x"),Object(l.b)("dt",null,Object(l.b)("code",null,"y")),Object(l.b)("dd",null,"initial position y"),Object(l.b)("dt",null,Object(l.b)("code",null,"degrees")),Object(l.b)("dd",null,"initial angle in degrees")),Object(l.b)("h5",{id:"returns"},"Returns"),Object(l.b)("p",null,"A new ",Object(l.b)("code",null,Object(l.b)("a",{title:"h2o_wave.graphics.Turtle",href:"#h2o_wave.graphics.Turtle"},"Turtle")),".")))),Object(l.b)("div",{className:"api"},Object(l.b)("h3",{id:"type_of"},"type_of ",Object(l.b)("a",{name:"h2o_wave.graphics.type_of"})),Object(l.b)("div",{className:"api__body"},Object(l.b)("div",{className:"api__signature"},"def ",Object(l.b)("span",{class:"ident"},"type_of"),"(element:\xa0",Object(l.b)("a",{title:"h2o_wave.core.Expando",href:"core#h2o_wave.core.Expando"},"Expando"),") \u2011>\xa0Union[str,\xa0NoneType]"),Object(l.b)("div",{className:"api__description"},Object(l.b)("p",null,"Get the type of the graphical element."),Object(l.b)("h5",{id:"args"},"Args"),Object(l.b)("dl",null,Object(l.b)("dt",null,Object(l.b)("code",null,"element")),Object(l.b)("dd",null,"A graphical element.")),Object(l.b)("h5",{id:"returns"},"Returns"),Object(l.b)("p",null,"A string indicating the type of the element, e.g. 'circle', 'line', etc.")))),Object(l.b)("h2",{id:"classes"},"Classes"),Object(l.b)("div",{className:"api"},Object(l.b)("h3",{id:"path-1"},"Path ",Object(l.b)("a",{name:"h2o_wave.graphics.Path"})),Object(l.b)("div",{className:"api__body"},Object(l.b)("div",{className:"api__signature"},"class ",Object(l.b)("span",{class:"ident"},"Path")),Object(l.b)("div",{className:"api__description"},Object(l.b)("p",null,"A convenience class for drawing SVG paths.")),Object(l.b)("h4",{id:"methods"},"Methods"),Object(l.b)("div",{className:"api__body"},Object(l.b)("div",{className:"api"},Object(l.b)("h4",{id:"a"},"A ",Object(l.b)("a",{name:"h2o_wave.graphics.Path.A"})),Object(l.b)("div",{className:"api__body"},Object(l.b)("div",{className:"api__signature"},"def ",Object(l.b)("span",{class:"ident"},"A"),"(self, rx:\xa0float, ry:\xa0float, x_axis_rotation:\xa0float, large_arc:\xa0bool, sweep:\xa0bool, x:\xa0float, y:\xa0float) \u2011>\xa0",Object(l.b)("a",{title:"h2o_wave.graphics.Path",href:"#h2o_wave.graphics.Path"},"Path")),Object(l.b)("div",{className:"api__description"},Object(l.b)("p",null,"Draws an elliptical arc from the current point to (x, y). The size and orientation of the ellipse are defined by two radii (rx, ry) and an ",Object(l.b)("code",null,"x_axis_rotation"),", which indicates how the ellipse as a whole is rotated, in degrees, relative to the current coordinate system. The center (cx, cy) of the ellipse is calculated automatically to satisfy the constraints imposed by the other parameters. ",Object(l.b)("code",null,"large_arc")," and ",Object(l.b)("code",null,"sweep_flag"),"contribute to the automatic calculations and help determine how the arc is drawn. In absolute coordinates."),Object(l.b)("p",null,"See ",Object(l.b)("a",{href:"https://www.w3.org/TR/SVG/paths.html#PathDataEllipticalArcCommands"},"https://www.w3.org/TR/SVG/paths.html#PathDataEllipticalArcCommands")),Object(l.b)("h5",{id:"args"},"Args"),Object(l.b)("dl",null,Object(l.b)("dt",null,Object(l.b)("code",null,"rx")),Object(l.b)("dd",null,"x-radius"),Object(l.b)("dt",null,Object(l.b)("code",null,"ry")),Object(l.b)("dd",null,"y-radius"),Object(l.b)("dt",null,Object(l.b)("code",null,"x_axis_rotation")),Object(l.b)("dd",null,"Rotation in degrees."),Object(l.b)("dt",null,Object(l.b)("code",null,"large_arc")),Object(l.b)("dd",null,"Determines if the arc should be greater than or less than 180 degrees."),Object(l.b)("dt",null,Object(l.b)("code",null,"sweep")),Object(l.b)("dd",null,"Determines if the arc should begin moving at positive angles or negative ones."),Object(l.b)("dt",null,Object(l.b)("code",null,"x")),Object(l.b)("dd",null,"x-coordinate"),Object(l.b)("dt",null,Object(l.b)("code",null,"y")),Object(l.b)("dd",null,"y-coordinate")),Object(l.b)("h5",{id:"returns"},"Returns"),Object(l.b)("p",null,"The current ",Object(l.b)("code",null,Object(l.b)("a",{title:"h2o_wave.graphics.Path",href:"#h2o_wave.graphics.Path"},"Path"))," instance.")))),Object(l.b)("div",{className:"api"},Object(l.b)("h4",{id:"c"},"C ",Object(l.b)("a",{name:"h2o_wave.graphics.Path.C"})),Object(l.b)("div",{className:"api__body"},Object(l.b)("div",{className:"api__signature"},"def ",Object(l.b)("span",{class:"ident"},"C"),"(self, x1:\xa0float, y1:\xa0float, x2:\xa0float, y2:\xa0float, x:\xa0float, y:\xa0float) \u2011>\xa0",Object(l.b)("a",{title:"h2o_wave.graphics.Path",href:"#h2o_wave.graphics.Path"},"Path")),Object(l.b)("div",{className:"api__description"},Object(l.b)("p",null,"Draws a cubic B\xe9zier curve from the current point to (x,y) using (x1,y1) as the control point at the beginning of the curve and (x2,y2) as the control point at the end of the curve. In absolute coordinates."),Object(l.b)("p",null,"See ",Object(l.b)("a",{href:"https://www.w3.org/TR/SVG/paths.html#PathDataCubicBezierCommands"},"https://www.w3.org/TR/SVG/paths.html#PathDataCubicBezierCommands")),Object(l.b)("h5",{id:"args"},"Args"),Object(l.b)("dl",null,Object(l.b)("dt",null,Object(l.b)("code",null,"x1")),Object(l.b)("dd",null,"x-coordinate of first control point"),Object(l.b)("dt",null,Object(l.b)("code",null,"y1")),Object(l.b)("dd",null,"y-coordinate of first control point"),Object(l.b)("dt",null,Object(l.b)("code",null,"x2")),Object(l.b)("dd",null,"x-coordinate of second control point"),Object(l.b)("dt",null,Object(l.b)("code",null,"y2")),Object(l.b)("dd",null,"y-coordinate of second control point"),Object(l.b)("dt",null,Object(l.b)("code",null,"x")),Object(l.b)("dd",null,"x-coordinate"),Object(l.b)("dt",null,Object(l.b)("code",null,"y")),Object(l.b)("dd",null,"y-coordinate")),Object(l.b)("h5",{id:"returns"},"Returns"),Object(l.b)("p",null,"The current ",Object(l.b)("code",null,Object(l.b)("a",{title:"h2o_wave.graphics.Path",href:"#h2o_wave.graphics.Path"},"Path"))," instance.")))),Object(l.b)("div",{className:"api"},Object(l.b)("h4",{id:"h"},"H ",Object(l.b)("a",{name:"h2o_wave.graphics.Path.H"})),Object(l.b)("div",{className:"api__body"},Object(l.b)("div",{className:"api__signature"},"def ",Object(l.b)("span",{class:"ident"},"H"),"(self, x:\xa0float) \u2011>\xa0",Object(l.b)("a",{title:"h2o_wave.graphics.Path",href:"#h2o_wave.graphics.Path"},"Path")),Object(l.b)("div",{className:"api__description"},Object(l.b)("p",null,"Draws a horizontal line from the current point. In absolute coordinates."),Object(l.b)("p",null,"See ",Object(l.b)("a",{href:"https://www.w3.org/TR/SVG/paths.html#PathDataLinetoCommands"},"https://www.w3.org/TR/SVG/paths.html#PathDataLinetoCommands")),Object(l.b)("h5",{id:"args"},"Args"),Object(l.b)("dl",null,Object(l.b)("dt",null,Object(l.b)("code",null,"x")),Object(l.b)("dd",null,"x-coordinate")),Object(l.b)("h5",{id:"returns"},"Returns"),Object(l.b)("p",null,"The current ",Object(l.b)("code",null,Object(l.b)("a",{title:"h2o_wave.graphics.Path",href:"#h2o_wave.graphics.Path"},"Path"))," instance.")))),Object(l.b)("div",{className:"api"},Object(l.b)("h4",{id:"l"},"L ",Object(l.b)("a",{name:"h2o_wave.graphics.Path.L"})),Object(l.b)("div",{className:"api__body"},Object(l.b)("div",{className:"api__signature"},"def ",Object(l.b)("span",{class:"ident"},"L"),"(self, x:\xa0float, y:\xa0float) \u2011>\xa0",Object(l.b)("a",{title:"h2o_wave.graphics.Path",href:"#h2o_wave.graphics.Path"},"Path")),Object(l.b)("div",{className:"api__description"},Object(l.b)("p",null,"Draw a line from the current point to the given (x,y) coordinate which becomes the new current point. In absolute coordinates."),Object(l.b)("p",null,"See ",Object(l.b)("a",{href:"https://www.w3.org/TR/SVG/paths.html#PathDataLinetoCommands"},"https://www.w3.org/TR/SVG/paths.html#PathDataLinetoCommands")),Object(l.b)("h5",{id:"args"},"Args"),Object(l.b)("dl",null,Object(l.b)("dt",null,Object(l.b)("code",null,"x")),Object(l.b)("dd",null,"x-coordinate"),Object(l.b)("dt",null,Object(l.b)("code",null,"y")),Object(l.b)("dd",null,"y-coordinate")),Object(l.b)("h5",{id:"returns"},"Returns"),Object(l.b)("p",null,"The current ",Object(l.b)("code",null,Object(l.b)("a",{title:"h2o_wave.graphics.Path",href:"#h2o_wave.graphics.Path"},"Path"))," instance.")))),Object(l.b)("div",{className:"api"},Object(l.b)("h4",{id:"m"},"M ",Object(l.b)("a",{name:"h2o_wave.graphics.Path.M"})),Object(l.b)("div",{className:"api__body"},Object(l.b)("div",{className:"api__signature"},"def ",Object(l.b)("span",{class:"ident"},"M"),"(self, x:\xa0float, y:\xa0float) \u2011>\xa0",Object(l.b)("a",{title:"h2o_wave.graphics.Path",href:"#h2o_wave.graphics.Path"},"Path")),Object(l.b)("div",{className:"api__description"},Object(l.b)("p",null,"Start a new sub-path at the given (x,y) coordinates. In absolute coordinates."),Object(l.b)("p",null,"See ",Object(l.b)("a",{href:"https://www.w3.org/TR/SVG/paths.html#PathDataMovetoCommands"},"https://www.w3.org/TR/SVG/paths.html#PathDataMovetoCommands")),Object(l.b)("h5",{id:"args"},"Args"),Object(l.b)("dl",null,Object(l.b)("dt",null,Object(l.b)("code",null,"x")),Object(l.b)("dd",null,"x-coordinate"),Object(l.b)("dt",null,Object(l.b)("code",null,"y")),Object(l.b)("dd",null,"y-coordinate")),Object(l.b)("h5",{id:"returns"},"Returns"),Object(l.b)("p",null,"The current ",Object(l.b)("code",null,Object(l.b)("a",{title:"h2o_wave.graphics.Path",href:"#h2o_wave.graphics.Path"},"Path"))," instance.")))),Object(l.b)("div",{className:"api"},Object(l.b)("h4",{id:"q"},"Q ",Object(l.b)("a",{name:"h2o_wave.graphics.Path.Q"})),Object(l.b)("div",{className:"api__body"},Object(l.b)("div",{className:"api__signature"},"def ",Object(l.b)("span",{class:"ident"},"Q"),"(self, x1:\xa0float, y1:\xa0float, x:\xa0float, y:\xa0float) \u2011>\xa0",Object(l.b)("a",{title:"h2o_wave.graphics.Path",href:"#h2o_wave.graphics.Path"},"Path")),Object(l.b)("div",{className:"api__description"},Object(l.b)("p",null,"Draws a quadratic B\xe9zier curve from the current point to (x,y) using (x1,y1) as the control point. In absolute coordinates."),Object(l.b)("p",null,"See ",Object(l.b)("a",{href:"https://www.w3.org/TR/SVG/paths.html#PathDataQuadraticBezierCommands"},"https://www.w3.org/TR/SVG/paths.html#PathDataQuadraticBezierCommands")),Object(l.b)("h5",{id:"args"},"Args"),Object(l.b)("dl",null,Object(l.b)("dt",null,Object(l.b)("code",null,"x1")),Object(l.b)("dd",null,"x-coordinate of first control point"),Object(l.b)("dt",null,Object(l.b)("code",null,"y1")),Object(l.b)("dd",null,"y-coordinate of first control point"),Object(l.b)("dt",null,Object(l.b)("code",null,"x")),Object(l.b)("dd",null,"x-coordinate"),Object(l.b)("dt",null,Object(l.b)("code",null,"y")),Object(l.b)("dd",null,"y-coordinate")),Object(l.b)("h5",{id:"returns"},"Returns"),Object(l.b)("p",null,"The current ",Object(l.b)("code",null,Object(l.b)("a",{title:"h2o_wave.graphics.Path",href:"#h2o_wave.graphics.Path"},"Path"))," instance.")))),Object(l.b)("div",{className:"api"},Object(l.b)("h4",{id:"s"},"S ",Object(l.b)("a",{name:"h2o_wave.graphics.Path.S"})),Object(l.b)("div",{className:"api__body"},Object(l.b)("div",{className:"api__signature"},"def ",Object(l.b)("span",{class:"ident"},"S"),"(self, x2:\xa0float, y2:\xa0float, x:\xa0float, y:\xa0float) \u2011>\xa0",Object(l.b)("a",{title:"h2o_wave.graphics.Path",href:"#h2o_wave.graphics.Path"},"Path")),Object(l.b)("div",{className:"api__description"},Object(l.b)("p",null,"Draws a cubic B\xe9zier curve from the current point to (x,y). The first control point is assumed to be the reflection of the second control point on the previous command relative to the current point. (x2,y2) is the second control point (i.e., the control point at the end of the curve). In absolute coordinates."),Object(l.b)("p",null,"See ",Object(l.b)("a",{href:"https://www.w3.org/TR/SVG/paths.html#PathDataCubicBezierCommands"},"https://www.w3.org/TR/SVG/paths.html#PathDataCubicBezierCommands")),Object(l.b)("h5",{id:"args"},"Args"),Object(l.b)("dl",null,Object(l.b)("dt",null,Object(l.b)("code",null,"x2")),Object(l.b)("dd",null,"x-coordinate of second control point"),Object(l.b)("dt",null,Object(l.b)("code",null,"y2")),Object(l.b)("dd",null,"y-coordinate of second control point"),Object(l.b)("dt",null,Object(l.b)("code",null,"x")),Object(l.b)("dd",null,"x-coordinate"),Object(l.b)("dt",null,Object(l.b)("code",null,"y")),Object(l.b)("dd",null,"y-coordinate")),Object(l.b)("h5",{id:"returns"},"Returns"),Object(l.b)("p",null,"The current ",Object(l.b)("code",null,Object(l.b)("a",{title:"h2o_wave.graphics.Path",href:"#h2o_wave.graphics.Path"},"Path"))," instance.")))),Object(l.b)("div",{className:"api"},Object(l.b)("h4",{id:"t"},"T ",Object(l.b)("a",{name:"h2o_wave.graphics.Path.T"})),Object(l.b)("div",{className:"api__body"},Object(l.b)("div",{className:"api__signature"},"def ",Object(l.b)("span",{class:"ident"},"T"),"(self, x:\xa0float, y:\xa0float) \u2011>\xa0",Object(l.b)("a",{title:"h2o_wave.graphics.Path",href:"#h2o_wave.graphics.Path"},"Path")),Object(l.b)("div",{className:"api__description"},Object(l.b)("p",null,"Draws a quadratic B\xe9zier curve from the current point to (x,y). The control point is assumed to be the reflection of the control point on the previous command relative to the current point. In absolute coordinates."),Object(l.b)("p",null,"See ",Object(l.b)("a",{href:"https://www.w3.org/TR/SVG/paths.html#PathDataQuadraticBezierCommands"},"https://www.w3.org/TR/SVG/paths.html#PathDataQuadraticBezierCommands")),Object(l.b)("h5",{id:"args"},"Args"),Object(l.b)("dl",null,Object(l.b)("dt",null,Object(l.b)("code",null,"x")),Object(l.b)("dd",null,"x-coordinate"),Object(l.b)("dt",null,Object(l.b)("code",null,"y")),Object(l.b)("dd",null,"y-coordinate")),Object(l.b)("h5",{id:"returns"},"Returns"),Object(l.b)("p",null,"The current ",Object(l.b)("code",null,Object(l.b)("a",{title:"h2o_wave.graphics.Path",href:"#h2o_wave.graphics.Path"},"Path"))," instance.")))),Object(l.b)("div",{className:"api"},Object(l.b)("h4",{id:"v"},"V ",Object(l.b)("a",{name:"h2o_wave.graphics.Path.V"})),Object(l.b)("div",{className:"api__body"},Object(l.b)("div",{className:"api__signature"},"def ",Object(l.b)("span",{class:"ident"},"V"),"(self, y:\xa0float) \u2011>\xa0",Object(l.b)("a",{title:"h2o_wave.graphics.Path",href:"#h2o_wave.graphics.Path"},"Path")),Object(l.b)("div",{className:"api__description"},Object(l.b)("p",null,"Draws a vertical line from the current point. In absolute coordinates."),Object(l.b)("p",null,"See ",Object(l.b)("a",{href:"https://www.w3.org/TR/SVG/paths.html#PathDataLinetoCommands"},"https://www.w3.org/TR/SVG/paths.html#PathDataLinetoCommands")),Object(l.b)("h5",{id:"args"},"Args"),Object(l.b)("dl",null,Object(l.b)("dt",null,Object(l.b)("code",null,"y")),Object(l.b)("dd",null,"y-coordinate")),Object(l.b)("h5",{id:"returns"},"Returns"),Object(l.b)("p",null,"The current ",Object(l.b)("code",null,Object(l.b)("a",{title:"h2o_wave.graphics.Path",href:"#h2o_wave.graphics.Path"},"Path"))," instance.")))),Object(l.b)("div",{className:"api"},Object(l.b)("h4",{id:"z"},"Z ",Object(l.b)("a",{name:"h2o_wave.graphics.Path.Z"})),Object(l.b)("div",{className:"api__body"},Object(l.b)("div",{className:"api__signature"},"def ",Object(l.b)("span",{class:"ident"},"Z"),"(self) \u2011>\xa0",Object(l.b)("a",{title:"h2o_wave.graphics.Path",href:"#h2o_wave.graphics.Path"},"Path")),Object(l.b)("div",{className:"api__description"},Object(l.b)("p",null,"Close the current subpath by connecting it back to the current subpath's initial point."),Object(l.b)("p",null,"See ",Object(l.b)("a",{href:"https://www.w3.org/TR/SVG/paths.html#PathDataClosePathCommand"},"https://www.w3.org/TR/SVG/paths.html#PathDataClosePathCommand")),Object(l.b)("h5",{id:"returns"},"Returns"),Object(l.b)("p",null,"The current ",Object(l.b)("code",null,Object(l.b)("a",{title:"h2o_wave.graphics.Path",href:"#h2o_wave.graphics.Path"},"Path"))," instance.")))),Object(l.b)("div",{className:"api"},Object(l.b)("h4",{id:"a-1"},"a ",Object(l.b)("a",{name:"h2o_wave.graphics.Path.a"})),Object(l.b)("div",{className:"api__body"},Object(l.b)("div",{className:"api__signature"},"def ",Object(l.b)("span",{class:"ident"},"a"),"(self, rx:\xa0float, ry:\xa0float, x_axis_rotation:\xa0float, large_arc:\xa0bool, sweep:\xa0bool, x:\xa0float, y:\xa0float) \u2011>\xa0",Object(l.b)("a",{title:"h2o_wave.graphics.Path",href:"#h2o_wave.graphics.Path"},"Path")),Object(l.b)("div",{className:"api__description"},Object(l.b)("p",null,"Draws an elliptical arc from the current point to (x, y). The size and orientation of the ellipse are defined by two radii (rx, ry) and an ",Object(l.b)("code",null,"x_axis_rotation"),", which indicates how the ellipse as a whole is rotated, in degrees, relative to the current coordinate system. The center (cx, cy) of the ellipse is calculated automatically to satisfy the constraints imposed by the other parameters. ",Object(l.b)("code",null,"large_arc")," and ",Object(l.b)("code",null,"sweep_flag"),"contribute to the automatic calculations and help determine how the arc is drawn. In relative coordinates."),Object(l.b)("p",null,"See ",Object(l.b)("a",{href:"https://www.w3.org/TR/SVG/paths.html#PathDataEllipticalArcCommands"},"https://www.w3.org/TR/SVG/paths.html#PathDataEllipticalArcCommands")),Object(l.b)("h5",{id:"args"},"Args"),Object(l.b)("dl",null,Object(l.b)("dt",null,Object(l.b)("code",null,"rx")),Object(l.b)("dd",null,"x-radius"),Object(l.b)("dt",null,Object(l.b)("code",null,"ry")),Object(l.b)("dd",null,"y-radius"),Object(l.b)("dt",null,Object(l.b)("code",null,"x_axis_rotation")),Object(l.b)("dd",null,"Rotation in degrees."),Object(l.b)("dt",null,Object(l.b)("code",null,"large_arc")),Object(l.b)("dd",null,"Determines if the arc should be greater than or less than 180 degrees."),Object(l.b)("dt",null,Object(l.b)("code",null,"sweep")),Object(l.b)("dd",null,"Determines if the arc should begin moving at positive angles or negative ones."),Object(l.b)("dt",null,Object(l.b)("code",null,"x")),Object(l.b)("dd",null,"x-coordinate"),Object(l.b)("dt",null,Object(l.b)("code",null,"y")),Object(l.b)("dd",null,"y-coordinate")),Object(l.b)("h5",{id:"returns"},"Returns"),Object(l.b)("p",null,"The current ",Object(l.b)("code",null,Object(l.b)("a",{title:"h2o_wave.graphics.Path",href:"#h2o_wave.graphics.Path"},"Path"))," instance.")))),Object(l.b)("div",{className:"api"},Object(l.b)("h4",{id:"c-1"},"c ",Object(l.b)("a",{name:"h2o_wave.graphics.Path.c"})),Object(l.b)("div",{className:"api__body"},Object(l.b)("div",{className:"api__signature"},"def ",Object(l.b)("span",{class:"ident"},"c"),"(self, x1:\xa0float, y1:\xa0float, x2:\xa0float, y2:\xa0float, x:\xa0float, y:\xa0float) \u2011>\xa0",Object(l.b)("a",{title:"h2o_wave.graphics.Path",href:"#h2o_wave.graphics.Path"},"Path")),Object(l.b)("div",{className:"api__description"},Object(l.b)("p",null,"Draws a cubic B\xe9zier curve from the current point to (x,y) using (x1,y1) as the control point at the beginning of the curve and (x2,y2) as the control point at the end of the curve. In relative coordinates."),Object(l.b)("p",null,"See ",Object(l.b)("a",{href:"https://www.w3.org/TR/SVG/paths.html#PathDataCubicBezierCommands"},"https://www.w3.org/TR/SVG/paths.html#PathDataCubicBezierCommands")),Object(l.b)("h5",{id:"args"},"Args"),Object(l.b)("dl",null,Object(l.b)("dt",null,Object(l.b)("code",null,"x1")),Object(l.b)("dd",null,"x-coordinate of first control point"),Object(l.b)("dt",null,Object(l.b)("code",null,"y1")),Object(l.b)("dd",null,"y-coordinate of first control point"),Object(l.b)("dt",null,Object(l.b)("code",null,"x2")),Object(l.b)("dd",null,"x-coordinate of second control point"),Object(l.b)("dt",null,Object(l.b)("code",null,"y2")),Object(l.b)("dd",null,"y-coordinate of second control point"),Object(l.b)("dt",null,Object(l.b)("code",null,"x")),Object(l.b)("dd",null,"x-coordinate"),Object(l.b)("dt",null,Object(l.b)("code",null,"y")),Object(l.b)("dd",null,"y-coordinate")),Object(l.b)("h5",{id:"returns"},"Returns"),Object(l.b)("p",null,"The current ",Object(l.b)("code",null,Object(l.b)("a",{title:"h2o_wave.graphics.Path",href:"#h2o_wave.graphics.Path"},"Path"))," instance.")))),Object(l.b)("div",{className:"api"},Object(l.b)("h4",{id:"d"},"d ",Object(l.b)("a",{name:"h2o_wave.graphics.Path.d"})),Object(l.b)("div",{className:"api__body"},Object(l.b)("div",{className:"api__signature"},"def ",Object(l.b)("span",{class:"ident"},"d"),"(self) \u2011>\xa0str"),Object(l.b)("div",{className:"api__description"},Object(l.b)("p",null,"Serialize this path's commands into SVG path data."),Object(l.b)("h5",{id:"returns"},"Returns"),Object(l.b)("p",null,"The ",Object(l.b)("code",null,"d")," attribute for a SVG path.")))),Object(l.b)("div",{className:"api"},Object(l.b)("h4",{id:"h-1"},"h ",Object(l.b)("a",{name:"h2o_wave.graphics.Path.h"})),Object(l.b)("div",{className:"api__body"},Object(l.b)("div",{className:"api__signature"},"def ",Object(l.b)("span",{class:"ident"},"h"),"(self, x:\xa0float) \u2011>\xa0",Object(l.b)("a",{title:"h2o_wave.graphics.Path",href:"#h2o_wave.graphics.Path"},"Path")),Object(l.b)("div",{className:"api__description"},Object(l.b)("p",null,"Draws a horizontal line from the current point. In relative coordinates."),Object(l.b)("p",null,"See ",Object(l.b)("a",{href:"https://www.w3.org/TR/SVG/paths.html#PathDataLinetoCommands"},"https://www.w3.org/TR/SVG/paths.html#PathDataLinetoCommands")),Object(l.b)("h5",{id:"args"},"Args"),Object(l.b)("dl",null,Object(l.b)("dt",null,Object(l.b)("code",null,"x")),Object(l.b)("dd",null,"x-coordinate")),Object(l.b)("h5",{id:"returns"},"Returns"),Object(l.b)("p",null,"The current ",Object(l.b)("code",null,Object(l.b)("a",{title:"h2o_wave.graphics.Path",href:"#h2o_wave.graphics.Path"},"Path"))," instance.")))),Object(l.b)("div",{className:"api"},Object(l.b)("h4",{id:"l-1"},"l ",Object(l.b)("a",{name:"h2o_wave.graphics.Path.l"})),Object(l.b)("div",{className:"api__body"},Object(l.b)("div",{className:"api__signature"},"def ",Object(l.b)("span",{class:"ident"},"l"),"(self, x:\xa0float, y:\xa0float) \u2011>\xa0",Object(l.b)("a",{title:"h2o_wave.graphics.Path",href:"#h2o_wave.graphics.Path"},"Path")),Object(l.b)("div",{className:"api__description"},Object(l.b)("p",null,"Draw a line from the current point to the given (x,y) coordinate which becomes the new current point. In relative coordinates."),Object(l.b)("p",null,"See ",Object(l.b)("a",{href:"https://www.w3.org/TR/SVG/paths.html#PathDataLinetoCommands"},"https://www.w3.org/TR/SVG/paths.html#PathDataLinetoCommands")),Object(l.b)("h5",{id:"args"},"Args"),Object(l.b)("dl",null,Object(l.b)("dt",null,Object(l.b)("code",null,"x")),Object(l.b)("dd",null,"x-coordinate"),Object(l.b)("dt",null,Object(l.b)("code",null,"y")),Object(l.b)("dd",null,"y-coordinate")),Object(l.b)("h5",{id:"returns"},"Returns"),Object(l.b)("p",null,"The current ",Object(l.b)("code",null,Object(l.b)("a",{title:"h2o_wave.graphics.Path",href:"#h2o_wave.graphics.Path"},"Path"))," instance.")))),Object(l.b)("div",{className:"api"},Object(l.b)("h4",{id:"m-1"},"m ",Object(l.b)("a",{name:"h2o_wave.graphics.Path.m"})),Object(l.b)("div",{className:"api__body"},Object(l.b)("div",{className:"api__signature"},"def ",Object(l.b)("span",{class:"ident"},"m"),"(self, x:\xa0float, y:\xa0float) \u2011>\xa0",Object(l.b)("a",{title:"h2o_wave.graphics.Path",href:"#h2o_wave.graphics.Path"},"Path")),Object(l.b)("div",{className:"api__description"},Object(l.b)("p",null,"Start a new sub-path at the given (x,y) coordinates. In relative coordinates."),Object(l.b)("p",null,"See ",Object(l.b)("a",{href:"https://www.w3.org/TR/SVG/paths.html#PathDataMovetoCommands"},"https://www.w3.org/TR/SVG/paths.html#PathDataMovetoCommands")),Object(l.b)("h5",{id:"args"},"Args"),Object(l.b)("dl",null,Object(l.b)("dt",null,Object(l.b)("code",null,"x")),Object(l.b)("dd",null,"x-coordinate"),Object(l.b)("dt",null,Object(l.b)("code",null,"y")),Object(l.b)("dd",null,"y-coordinate")),Object(l.b)("h5",{id:"returns"},"Returns"),Object(l.b)("p",null,"The current ",Object(l.b)("code",null,Object(l.b)("a",{title:"h2o_wave.graphics.Path",href:"#h2o_wave.graphics.Path"},"Path"))," instance.")))),Object(l.b)("div",{className:"api"},Object(l.b)("h4",{id:"path-2"},"path ",Object(l.b)("a",{name:"h2o_wave.graphics.Path.path"})),Object(l.b)("div",{className:"api__body"},Object(l.b)("div",{className:"api__signature"},"def ",Object(l.b)("span",{class:"ident"},"path"),"(self, **kwargs) \u2011>\xa0",Object(l.b)("a",{title:"h2o_wave.core.Expando",href:"core#h2o_wave.core.Expando"},"Expando")),Object(l.b)("div",{className:"api__description"},Object(l.b)("p",null,"A SVG path element representing the commands in this ",Object(l.b)("code",null,Object(l.b)("a",{title:"h2o_wave.graphics.Path",href:"#h2o_wave.graphics.Path"},"Path"))," instance. Same as calling ",Object(l.b)("code",null,"h2o_wave.graphics.path(d=path.d())")),Object(l.b)("h5",{id:"args"},"Args"),Object(l.b)("dl",null,Object(l.b)("dt",null,Object(l.b)("code",null,"kwargs")),Object(l.b)("dd",null,"Additional attributes for the SVG path element.")),Object(l.b)("h5",{id:"returns"},"Returns"),Object(l.b)("p",null,"A SVG path element.")))),Object(l.b)("div",{className:"api"},Object(l.b)("h4",{id:"q-1"},"q ",Object(l.b)("a",{name:"h2o_wave.graphics.Path.q"})),Object(l.b)("div",{className:"api__body"},Object(l.b)("div",{className:"api__signature"},"def ",Object(l.b)("span",{class:"ident"},"q"),"(self, x1:\xa0float, y1:\xa0float, x:\xa0float, y:\xa0float) \u2011>\xa0",Object(l.b)("a",{title:"h2o_wave.graphics.Path",href:"#h2o_wave.graphics.Path"},"Path")),Object(l.b)("div",{className:"api__description"},Object(l.b)("p",null,"Draws a quadratic B\xe9zier curve from the current point to (x,y) using (x1,y1) as the control point. In relative coordinates."),Object(l.b)("p",null,"See ",Object(l.b)("a",{href:"https://www.w3.org/TR/SVG/paths.html#PathDataQuadraticBezierCommands"},"https://www.w3.org/TR/SVG/paths.html#PathDataQuadraticBezierCommands")),Object(l.b)("h5",{id:"args"},"Args"),Object(l.b)("dl",null,Object(l.b)("dt",null,Object(l.b)("code",null,"x1")),Object(l.b)("dd",null,"x-coordinate of first control point"),Object(l.b)("dt",null,Object(l.b)("code",null,"y1")),Object(l.b)("dd",null,"y-coordinate of first control point"),Object(l.b)("dt",null,Object(l.b)("code",null,"x")),Object(l.b)("dd",null,"x-coordinate"),Object(l.b)("dt",null,Object(l.b)("code",null,"y")),Object(l.b)("dd",null,"y-coordinate")),Object(l.b)("h5",{id:"returns"},"Returns"),Object(l.b)("p",null,"The current ",Object(l.b)("code",null,Object(l.b)("a",{title:"h2o_wave.graphics.Path",href:"#h2o_wave.graphics.Path"},"Path"))," instance.")))),Object(l.b)("div",{className:"api"},Object(l.b)("h4",{id:"s-1"},"s ",Object(l.b)("a",{name:"h2o_wave.graphics.Path.s"})),Object(l.b)("div",{className:"api__body"},Object(l.b)("div",{className:"api__signature"},"def ",Object(l.b)("span",{class:"ident"},"s"),"(self, x2:\xa0float, y2:\xa0float, x:\xa0float, y:\xa0float) \u2011>\xa0",Object(l.b)("a",{title:"h2o_wave.graphics.Path",href:"#h2o_wave.graphics.Path"},"Path")),Object(l.b)("div",{className:"api__description"},Object(l.b)("p",null,"Draws a cubic B\xe9zier curve from the current point to (x,y). The first control point is assumed to be the reflection of the second control point on the previous command relative to the current point. (x2,y2) is the second control point (i.e., the control point at the end of the curve). In relative coordinates."),Object(l.b)("p",null,"See ",Object(l.b)("a",{href:"https://www.w3.org/TR/SVG/paths.html#PathDataCubicBezierCommands"},"https://www.w3.org/TR/SVG/paths.html#PathDataCubicBezierCommands")),Object(l.b)("h5",{id:"args"},"Args"),Object(l.b)("dl",null,Object(l.b)("dt",null,Object(l.b)("code",null,"x2")),Object(l.b)("dd",null,"x-coordinate of second control point"),Object(l.b)("dt",null,Object(l.b)("code",null,"y2")),Object(l.b)("dd",null,"y-coordinate of second control point"),Object(l.b)("dt",null,Object(l.b)("code",null,"x")),Object(l.b)("dd",null,"x-coordinate"),Object(l.b)("dt",null,Object(l.b)("code",null,"y")),Object(l.b)("dd",null,"y-coordinate")),Object(l.b)("h5",{id:"returns"},"Returns"),Object(l.b)("p",null,"The current ",Object(l.b)("code",null,Object(l.b)("a",{title:"h2o_wave.graphics.Path",href:"#h2o_wave.graphics.Path"},"Path"))," instance.")))),Object(l.b)("div",{className:"api"},Object(l.b)("h4",{id:"t-1"},"t ",Object(l.b)("a",{name:"h2o_wave.graphics.Path.t"})),Object(l.b)("div",{className:"api__body"},Object(l.b)("div",{className:"api__signature"},"def ",Object(l.b)("span",{class:"ident"},"t"),"(self, x:\xa0float, y:\xa0float) \u2011>\xa0",Object(l.b)("a",{title:"h2o_wave.graphics.Path",href:"#h2o_wave.graphics.Path"},"Path")),Object(l.b)("div",{className:"api__description"},Object(l.b)("p",null,"Draws a quadratic B\xe9zier curve from the current point to (x,y). The control point is assumed to be the reflection of the control point on the previous command relative to the current point. In relative coordinates."),Object(l.b)("p",null,"See ",Object(l.b)("a",{href:"https://www.w3.org/TR/SVG/paths.html#PathDataQuadraticBezierCommands"},"https://www.w3.org/TR/SVG/paths.html#PathDataQuadraticBezierCommands")),Object(l.b)("h5",{id:"args"},"Args"),Object(l.b)("dl",null,Object(l.b)("dt",null,Object(l.b)("code",null,"x")),Object(l.b)("dd",null,"x-coordinate"),Object(l.b)("dt",null,Object(l.b)("code",null,"y")),Object(l.b)("dd",null,"y-coordinate")),Object(l.b)("h5",{id:"returns"},"Returns"),Object(l.b)("p",null,"The current ",Object(l.b)("code",null,Object(l.b)("a",{title:"h2o_wave.graphics.Path",href:"#h2o_wave.graphics.Path"},"Path"))," instance.")))),Object(l.b)("div",{className:"api"},Object(l.b)("h4",{id:"v-1"},"v ",Object(l.b)("a",{name:"h2o_wave.graphics.Path.v"})),Object(l.b)("div",{className:"api__body"},Object(l.b)("div",{className:"api__signature"},"def ",Object(l.b)("span",{class:"ident"},"v"),"(self, y:\xa0float) \u2011>\xa0",Object(l.b)("a",{title:"h2o_wave.graphics.Path",href:"#h2o_wave.graphics.Path"},"Path")),Object(l.b)("div",{className:"api__description"},Object(l.b)("p",null,"Draws a vertical line from the current point. In relative coordinates."),Object(l.b)("p",null,"See ",Object(l.b)("a",{href:"https://www.w3.org/TR/SVG/paths.html#PathDataLinetoCommands"},"https://www.w3.org/TR/SVG/paths.html#PathDataLinetoCommands")),Object(l.b)("h5",{id:"args"},"Args"),Object(l.b)("dl",null,Object(l.b)("dt",null,Object(l.b)("code",null,"y")),Object(l.b)("dd",null,"y-coordinate")),Object(l.b)("h5",{id:"returns"},"Returns"),Object(l.b)("p",null,"The current ",Object(l.b)("code",null,Object(l.b)("a",{title:"h2o_wave.graphics.Path",href:"#h2o_wave.graphics.Path"},"Path"))," instance.")))),Object(l.b)("div",{className:"api"},Object(l.b)("h4",{id:"z-1"},"z ",Object(l.b)("a",{name:"h2o_wave.graphics.Path.z"})),Object(l.b)("div",{className:"api__body"},Object(l.b)("div",{className:"api__signature"},"def ",Object(l.b)("span",{class:"ident"},"z"),"(self) \u2011>\xa0",Object(l.b)("a",{title:"h2o_wave.graphics.Path",href:"#h2o_wave.graphics.Path"},"Path")),Object(l.b)("div",{className:"api__description"},Object(l.b)("p",null,"Close the current subpath by connecting it back to the current subpath's initial point."),Object(l.b)("p",null,"See ",Object(l.b)("a",{href:"https://www.w3.org/TR/SVG/paths.html#PathDataClosePathCommand"},"https://www.w3.org/TR/SVG/paths.html#PathDataClosePathCommand")),Object(l.b)("h5",{id:"returns"},"Returns"),Object(l.b)("p",null,"The current ",Object(l.b)("code",null,Object(l.b)("a",{title:"h2o_wave.graphics.Path",href:"#h2o_wave.graphics.Path"},"Path"))," instance."))))))),Object(l.b)("div",{className:"api"},Object(l.b)("h3",{id:"turtle-1"},"Turtle ",Object(l.b)("a",{name:"h2o_wave.graphics.Turtle"})),Object(l.b)("div",{className:"api__body"},Object(l.b)("div",{className:"api__signature"},"class ",Object(l.b)("span",{class:"ident"},"Turtle"),"(x=0.0, y=0.0, degrees=0.0)"),Object(l.b)("div",{className:"api__description"},Object(l.b)("p",null,"A Logo-like Turtle implementation for generating SVG paths. This is not a complete Turtle implementation. Contains a useful subset relevant to generating paths without using trigonometry or mental gymnastics."),Object(l.b)("p",null,"Create a Turtle."),Object(l.b)("h5",{id:"args"},"Args"),Object(l.b)("dl",null,Object(l.b)("dt",null,Object(l.b)("code",null,"x")),Object(l.b)("dd",null,"initial position x"),Object(l.b)("dt",null,Object(l.b)("code",null,"y")),Object(l.b)("dd",null,"initial position y"),Object(l.b)("dt",null,Object(l.b)("code",null,"degrees")),Object(l.b)("dd",null,"initial angle in degrees"))),Object(l.b)("h4",{id:"methods-1"},"Methods"),Object(l.b)("div",{className:"api__body"},Object(l.b)("div",{className:"api"},Object(l.b)("h4",{id:"a-2"},"a ",Object(l.b)("a",{name:"h2o_wave.graphics.Turtle.a"})),Object(l.b)("div",{className:"api__body"},Object(l.b)("div",{className:"api__signature"},"def ",Object(l.b)("span",{class:"ident"},"a"),"(self, degrees:\xa0float\xa0=\xa00) \u2011>\xa0",Object(l.b)("a",{title:"h2o_wave.graphics.Turtle",href:"#h2o_wave.graphics.Turtle"},"Turtle")),Object(l.b)("div",{className:"api__description"},Object(l.b)("p",null,"Set the turtle's orientation."),Object(l.b)("h5",{id:"args"},"Args"),Object(l.b)("dl",null,Object(l.b)("dt",null,Object(l.b)("code",null,"degrees")),Object(l.b)("dd",null,"angle in degrees")),Object(l.b)("h5",{id:"returns"},"Returns"),Object(l.b)("p",null,"The current turtle instance.")))),Object(l.b)("div",{className:"api"},Object(l.b)("h4",{id:"b"},"b ",Object(l.b)("a",{name:"h2o_wave.graphics.Turtle.b"})),Object(l.b)("div",{className:"api__body"},Object(l.b)("div",{className:"api__signature"},"def ",Object(l.b)("span",{class:"ident"},"b"),"(self, distance:\xa0float) \u2011>\xa0",Object(l.b)("a",{title:"h2o_wave.graphics.Turtle",href:"#h2o_wave.graphics.Turtle"},"Turtle")),Object(l.b)("div",{className:"api__description"},Object(l.b)("p",null,"Move backward."),Object(l.b)("h5",{id:"args"},"Args"),Object(l.b)("dl",null,Object(l.b)("dt",null,Object(l.b)("code",null,"distance")),Object(l.b)("dd",null,"Distance to move by.")),Object(l.b)("h5",{id:"returns"},"Returns"),Object(l.b)("p",null,"The current turtle instance.")))),Object(l.b)("div",{className:"api"},Object(l.b)("h4",{id:"d-1"},"d ",Object(l.b)("a",{name:"h2o_wave.graphics.Turtle.d"})),Object(l.b)("div",{className:"api__body"},Object(l.b)("div",{className:"api__signature"},"def ",Object(l.b)("span",{class:"ident"},"d"),"(self) \u2011>\xa0str"),Object(l.b)("div",{className:"api__description"},Object(l.b)("p",null,"Serialize this turtle's movements into SVG path data."),Object(l.b)("h5",{id:"returns"},"Returns"),Object(l.b)("p",null,"The ",Object(l.b)("code",null,"d")," attribute for a SVG path.")))),Object(l.b)("div",{className:"api"},Object(l.b)("h4",{id:"f"},"f ",Object(l.b)("a",{name:"h2o_wave.graphics.Turtle.f"})),Object(l.b)("div",{className:"api__body"},Object(l.b)("div",{className:"api__signature"},"def ",Object(l.b)("span",{class:"ident"},"f"),"(self, distance:\xa0float) \u2011>\xa0",Object(l.b)("a",{title:"h2o_wave.graphics.Turtle",href:"#h2o_wave.graphics.Turtle"},"Turtle")),Object(l.b)("div",{className:"api__description"},Object(l.b)("p",null,"Move forward."),Object(l.b)("h5",{id:"args"},"Args"),Object(l.b)("dl",null,Object(l.b)("dt",null,Object(l.b)("code",null,"distance")),Object(l.b)("dd",null,"Distance to move by.")),Object(l.b)("h5",{id:"returns"},"Returns"),Object(l.b)("p",null,"The current turtle instance.")))),Object(l.b)("div",{className:"api"},Object(l.b)("h4",{id:"l-2"},"l ",Object(l.b)("a",{name:"h2o_wave.graphics.Turtle.l"})),Object(l.b)("div",{className:"api__body"},Object(l.b)("div",{className:"api__signature"},"def ",Object(l.b)("span",{class:"ident"},"l"),"(self, degrees:\xa0float) \u2011>\xa0",Object(l.b)("a",{title:"h2o_wave.graphics.Turtle",href:"#h2o_wave.graphics.Turtle"},"Turtle")),Object(l.b)("div",{className:"api__description"},Object(l.b)("p",null,"Turn left."),Object(l.b)("h5",{id:"args"},"Args"),Object(l.b)("dl",null,Object(l.b)("dt",null,Object(l.b)("code",null,"degrees")),Object(l.b)("dd",null,"Angle in degrees.")),Object(l.b)("h5",{id:"returns"},"Returns"),Object(l.b)("p",null,"The current turtle instance.")))),Object(l.b)("div",{className:"api"},Object(l.b)("h4",{id:"p-1"},"p ",Object(l.b)("a",{name:"h2o_wave.graphics.Turtle.p"})),Object(l.b)("div",{className:"api__body"},Object(l.b)("div",{className:"api__signature"},"def ",Object(l.b)("span",{class:"ident"},"p"),"(self, x:\xa0float\xa0=\xa00.0, y:\xa0float\xa0=\xa00.0) \u2011>\xa0",Object(l.b)("a",{title:"h2o_wave.graphics.Turtle",href:"#h2o_wave.graphics.Turtle"},"Turtle")),Object(l.b)("div",{className:"api__description"},Object(l.b)("p",null,"Set the turtle's position."),Object(l.b)("h5",{id:"args"},"Args"),Object(l.b)("dl",null,Object(l.b)("dt",null,Object(l.b)("code",null,"x")),Object(l.b)("dd",null,"x-coordinate"),Object(l.b)("dt",null,Object(l.b)("code",null,"y")),Object(l.b)("dd",null,"y-coordinate")),Object(l.b)("h5",{id:"returns"},"Returns"),Object(l.b)("p",null,"The current turtle instance.")))),Object(l.b)("div",{className:"api"},Object(l.b)("h4",{id:"path-3"},"path ",Object(l.b)("a",{name:"h2o_wave.graphics.Turtle.path"})),Object(l.b)("div",{className:"api__body"},Object(l.b)("div",{className:"api__signature"},"def ",Object(l.b)("span",{class:"ident"},"path"),"(self, **kwargs) \u2011>\xa0",Object(l.b)("a",{title:"h2o_wave.core.Expando",href:"core#h2o_wave.core.Expando"},"Expando")),Object(l.b)("div",{className:"api__description"},Object(l.b)("p",null,"Create a SVG path element that represents this turtle's movements."),Object(l.b)("h5",{id:"args"},"Args"),Object(l.b)("dl",null,Object(l.b)("dt",null,Object(l.b)("code",null,"kwargs")),Object(l.b)("dd",null,"Additional attributes for the SVG path element.")),Object(l.b)("h5",{id:"returns"},"Returns"),Object(l.b)("p",null,"A SVG path element.")))),Object(l.b)("div",{className:"api"},Object(l.b)("h4",{id:"pd"},"pd ",Object(l.b)("a",{name:"h2o_wave.graphics.Turtle.pd"})),Object(l.b)("div",{className:"api__body"},Object(l.b)("div",{className:"api__signature"},"def ",Object(l.b)("span",{class:"ident"},"pd"),"(self) \u2011>\xa0",Object(l.b)("a",{title:"h2o_wave.graphics.Turtle",href:"#h2o_wave.graphics.Turtle"},"Turtle")),Object(l.b)("div",{className:"api__description"},Object(l.b)("p",null,"Pen down."),Object(l.b)("h5",{id:"returns"},"Returns"),Object(l.b)("p",null,"The current turtle instance.")))),Object(l.b)("div",{className:"api"},Object(l.b)("h4",{id:"pu"},"pu ",Object(l.b)("a",{name:"h2o_wave.graphics.Turtle.pu"})),Object(l.b)("div",{className:"api__body"},Object(l.b)("div",{className:"api__signature"},"def ",Object(l.b)("span",{class:"ident"},"pu"),"(self, close:\xa0bool) \u2011>\xa0",Object(l.b)("a",{title:"h2o_wave.graphics.Turtle",href:"#h2o_wave.graphics.Turtle"},"Turtle")),Object(l.b)("div",{className:"api__description"},Object(l.b)("p",null,"Pen up."),Object(l.b)("h5",{id:"args"},"Args"),Object(l.b)("dl",null,Object(l.b)("dt",null,Object(l.b)("code",null,"close")),Object(l.b)("dd",null,"Whether to close the current subpath.")),Object(l.b)("h5",{id:"returns"},"Returns"),Object(l.b)("p",null,"The current turtle instance.")))),Object(l.b)("div",{className:"api"},Object(l.b)("h4",{id:"r"},"r ",Object(l.b)("a",{name:"h2o_wave.graphics.Turtle.r"})),Object(l.b)("div",{className:"api__body"},Object(l.b)("div",{className:"api__signature"},"def ",Object(l.b)("span",{class:"ident"},"r"),"(self, degrees:\xa0float) \u2011>\xa0",Object(l.b)("a",{title:"h2o_wave.graphics.Turtle",href:"#h2o_wave.graphics.Turtle"},"Turtle")),Object(l.b)("div",{className:"api__description"},Object(l.b)("p",null,"Turn right."),Object(l.b)("h5",{id:"args"},"Args"),Object(l.b)("dl",null,Object(l.b)("dt",null,Object(l.b)("code",null,"degrees")),Object(l.b)("dd",null,"Angle in degrees.")),Object(l.b)("h5",{id:"returns"},"Returns"),Object(l.b)("p",null,"The current turtle instance."))))))))}o.isMDXComponent=!0},290:function(e,t,a){"use strict";a.d(t,"a",(function(){return d})),a.d(t,"b",(function(){return O}));var c=a(0),b=a.n(c);function l(e,t,a){return t in e?Object.defineProperty(e,t,{value:a,enumerable:!0,configurable:!0,writable:!0}):e[t]=a,e}function n(e,t){var a=Object.keys(e);if(Object.getOwnPropertySymbols){var c=Object.getOwnPropertySymbols(e);t&&(c=c.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),a.push.apply(a,c)}return a}function i(e){for(var t=1;t=0||(b[a]=e[a]);return b}(e,t);if(Object.getOwnPropertySymbols){var l=Object.getOwnPropertySymbols(e);for(c=0;c=0||Object.prototype.propertyIsEnumerable.call(e,a)&&(b[a]=e[a])}return b}var r=b.a.createContext({}),o=function(e){var t=b.a.useContext(r),a=t;return e&&(a="function"==typeof e?e(t):i(i({},t),e)),a},d=function(e){var t=o(e.components);return b.a.createElement(r.Provider,{value:t},e.children)},h={inlineCode:"code",wrapper:function(e){var t=e.children;return b.a.createElement(b.a.Fragment,{},t)}},p=b.a.forwardRef((function(e,t){var a=e.components,c=e.mdxType,l=e.originalType,n=e.parentName,r=s(e,["components","mdxType","originalType","parentName"]),d=o(a),p=c,O=d["".concat(n,".").concat(p)]||d[p]||h[p]||l;return a?b.a.createElement(O,i(i({ref:t},r),{},{components:a})):b.a.createElement(O,i({ref:t},r))}));function O(e,t){var a=arguments,c=t&&t.mdxType;if("string"==typeof e||c){var l=a.length,n=new Array(l);n[0]=p;var i={};for(var s in t)hasOwnProperty.call(t,s)&&(i[s]=t[s]);i.originalType=e,i.mdxType="string"==typeof e?e:c,n[1]=i;for(var r=2;r',id:"arc",children:[]},{value:'circle ',id:"circle",children:[]},{value:'draw ',id:"draw",children:[]},{value:'ellipse ',id:"ellipse",children:[]},{value:'image ',id:"image",children:[]},{value:'line ',id:"line",children:[]},{value:'p ',id:"p",children:[]},{value:'path ',id:"path",children:[]},{value:'polygon ',id:"polygon",children:[]},{value:'polyline ',id:"polyline",children:[]},{value:'rect ',id:"rect",children:[]},{value:'reset ',id:"reset",children:[]},{value:'scene ',id:"scene",children:[]},{value:'spline ',id:"spline",children:[]},{value:'stage ',id:"stage",children:[]},{value:'text ',id:"text",children:[]},{value:'turtle ',id:"turtle",children:[]},{value:'type_of ',id:"type_of",children:[]}]},{value:"Classes",id:"classes",children:[{value:'Path ',id:"path-1",children:[]},{value:'Turtle ',id:"turtle-1",children:[]}]}],r={rightToc:s};function o(e){var t=e.components,a=Object(b.a)(e,["components"]);return Object(l.b)("wrapper",Object(c.a)({},r,a,{components:t,mdxType:"MDXLayout"}),Object(l.b)("h2",{id:"functions"},"Functions"),Object(l.b)("div",{className:"api"},Object(l.b)("h3",{id:"arc"},"arc ",Object(l.b)("a",{name:"h2o_wave.graphics.arc"})),Object(l.b)("div",{className:"api__body"},Object(l.b)("div",{className:"api__signature"},"def ",Object(l.b)("span",{class:"ident"},"arc"),"(r1:\xa0float, r2:\xa0float, a1:\xa0float, a2:\xa0float, **kwargs) \u2011>\xa0",Object(l.b)("a",{title:"h2o_wave.core.Expando",href:"core#h2o_wave.core.Expando"},"Expando")),Object(l.b)("div",{className:"api__description"},Object(l.b)("p",null,"Draw circular or annular sector, as in a pie or donut chart, centered at (0, 0)."),Object(l.b)("h5",{id:"args"},"Args"),Object(l.b)("dl",null,Object(l.b)("dt",null,Object(l.b)("code",null,"r1")),Object(l.b)("dd",null,"inner radius."),Object(l.b)("dt",null,Object(l.b)("code",null,"r2")),Object(l.b)("dd",null,"outer radius."),Object(l.b)("dt",null,Object(l.b)("code",null,"a1")),Object(l.b)("dd",null,"start angle, in degrees."),Object(l.b)("dt",null,Object(l.b)("code",null,"a2")),Object(l.b)("dd",null,"end angle, in degrees."),Object(l.b)("dt",null,Object(l.b)("code",null,"kwargs")),Object(l.b)("dd",null,"Attributes to use for the initial render. SVG attributes, snake-cased.")),Object(l.b)("h5",{id:"returns"},"Returns"),Object(l.b)("p",null,"Data for the graphical element.")))),Object(l.b)("div",{className:"api"},Object(l.b)("h3",{id:"circle"},"circle ",Object(l.b)("a",{name:"h2o_wave.graphics.circle"})),Object(l.b)("div",{className:"api__body"},Object(l.b)("div",{className:"api__signature"},"def ",Object(l.b)("span",{class:"ident"},"circle"),"(**kwargs) \u2011>\xa0",Object(l.b)("a",{title:"h2o_wave.core.Expando",href:"core#h2o_wave.core.Expando"},"Expando")),Object(l.b)("div",{className:"api__description"},Object(l.b)("p",null,"Draw a circle. See ",Object(l.b)("a",{href:"https://developer.mozilla.org/en-US/docs/Web/SVG/Element/circle"},"https://developer.mozilla.org/en-US/docs/Web/SVG/Element/circle")),Object(l.b)("h5",{id:"args"},"Args"),Object(l.b)("dl",null,Object(l.b)("dt",null,Object(l.b)("code",null,"kwargs")),Object(l.b)("dd",null,"Attributes to use for the initial render. SVG attributes, snake-cased.")),Object(l.b)("h5",{id:"returns"},"Returns"),Object(l.b)("p",null,"Data for the graphical element.")))),Object(l.b)("div",{className:"api"},Object(l.b)("h3",{id:"draw"},"draw ",Object(l.b)("a",{name:"h2o_wave.graphics.draw"})),Object(l.b)("div",{className:"api__body"},Object(l.b)("div",{className:"api__signature"},"def ",Object(l.b)("span",{class:"ident"},"draw"),"(element:\xa0",Object(l.b)("a",{title:"h2o_wave.core.Ref",href:"core#h2o_wave.core.Ref"},"Ref"),", **kwargs) \u2011>\xa0",Object(l.b)("a",{title:"h2o_wave.core.Ref",href:"core#h2o_wave.core.Ref"},"Ref")),Object(l.b)("div",{className:"api__description"},Object(l.b)("p",null,"Schedule a redraw of the specified graphical element using the provided attributes."),Object(l.b)("h5",{id:"args"},"Args"),Object(l.b)("dl",null,Object(l.b)("dt",null,Object(l.b)("code",null,"element")),Object(l.b)("dd",null,"A reference to a graphical element."),Object(l.b)("dt",null,Object(l.b)("code",null,"kwargs")),Object(l.b)("dd",null,"Attributes to use while performing a redraw.")),Object(l.b)("h5",{id:"returns"},"Returns"),Object(l.b)("p",null,"The element reference, without change.")))),Object(l.b)("div",{className:"api"},Object(l.b)("h3",{id:"ellipse"},"ellipse ",Object(l.b)("a",{name:"h2o_wave.graphics.ellipse"})),Object(l.b)("div",{className:"api__body"},Object(l.b)("div",{className:"api__signature"},"def ",Object(l.b)("span",{class:"ident"},"ellipse"),"(**kwargs) \u2011>\xa0",Object(l.b)("a",{title:"h2o_wave.core.Expando",href:"core#h2o_wave.core.Expando"},"Expando")),Object(l.b)("div",{className:"api__description"},Object(l.b)("p",null,"Draw an ellipse. See ",Object(l.b)("a",{href:"https://developer.mozilla.org/en-US/docs/Web/SVG/Element/ellipse"},"https://developer.mozilla.org/en-US/docs/Web/SVG/Element/ellipse")),Object(l.b)("h5",{id:"args"},"Args"),Object(l.b)("dl",null,Object(l.b)("dt",null,Object(l.b)("code",null,"kwargs")),Object(l.b)("dd",null,"Attributes to use for the initial render. SVG attributes, snake-cased.")),Object(l.b)("h5",{id:"returns"},"Returns"),Object(l.b)("p",null,"Data for the graphical element.")))),Object(l.b)("div",{className:"api"},Object(l.b)("h3",{id:"image"},"image ",Object(l.b)("a",{name:"h2o_wave.graphics.image"})),Object(l.b)("div",{className:"api__body"},Object(l.b)("div",{className:"api__signature"},"def ",Object(l.b)("span",{class:"ident"},"image"),"(**kwargs) \u2011>\xa0",Object(l.b)("a",{title:"h2o_wave.core.Expando",href:"core#h2o_wave.core.Expando"},"Expando")),Object(l.b)("div",{className:"api__description"},Object(l.b)("p",null,"Draw an image. See ",Object(l.b)("a",{href:"https://developer.mozilla.org/en-US/docs/Web/SVG/Element/image"},"https://developer.mozilla.org/en-US/docs/Web/SVG/Element/image")),Object(l.b)("h5",{id:"args"},"Args"),Object(l.b)("dl",null,Object(l.b)("dt",null,Object(l.b)("code",null,"kwargs")),Object(l.b)("dd",null,"Attributes to use for the initial render. SVG attributes, snake-cased.")),Object(l.b)("h5",{id:"returns"},"Returns"),Object(l.b)("p",null,"Data for the graphical element.")))),Object(l.b)("div",{className:"api"},Object(l.b)("h3",{id:"line"},"line ",Object(l.b)("a",{name:"h2o_wave.graphics.line"})),Object(l.b)("div",{className:"api__body"},Object(l.b)("div",{className:"api__signature"},"def ",Object(l.b)("span",{class:"ident"},"line"),"(**kwargs) \u2011>\xa0",Object(l.b)("a",{title:"h2o_wave.core.Expando",href:"core#h2o_wave.core.Expando"},"Expando")),Object(l.b)("div",{className:"api__description"},Object(l.b)("p",null,"Draw a line. See ",Object(l.b)("a",{href:"https://developer.mozilla.org/en-US/docs/Web/SVG/Element/line"},"https://developer.mozilla.org/en-US/docs/Web/SVG/Element/line")),Object(l.b)("h5",{id:"args"},"Args"),Object(l.b)("dl",null,Object(l.b)("dt",null,Object(l.b)("code",null,"kwargs")),Object(l.b)("dd",null,"Attributes to use for the initial render. SVG attributes, snake-cased.")),Object(l.b)("h5",{id:"returns"},"Returns"),Object(l.b)("p",null,"Data for the graphical element.")))),Object(l.b)("div",{className:"api"},Object(l.b)("h3",{id:"p"},"p ",Object(l.b)("a",{name:"h2o_wave.graphics.p"})),Object(l.b)("div",{className:"api__body"},Object(l.b)("div",{className:"api__signature"},"def ",Object(l.b)("span",{class:"ident"},"p"),"() \u2011>\xa0",Object(l.b)("a",{title:"h2o_wave.graphics.Path",href:"#h2o_wave.graphics.Path"},"Path")),Object(l.b)("div",{className:"api__description"},Object(l.b)("p",null,"Create a new ",Object(l.b)("code",null,Object(l.b)("a",{title:"h2o_wave.graphics.Path",href:"#h2o_wave.graphics.Path"},"Path")),"."),Object(l.b)("h5",{id:"returns"},"Returns"),Object(l.b)("p",null,"A new ",Object(l.b)("code",null,Object(l.b)("a",{title:"h2o_wave.graphics.Path",href:"#h2o_wave.graphics.Path"},"Path")),".")))),Object(l.b)("div",{className:"api"},Object(l.b)("h3",{id:"path"},"path ",Object(l.b)("a",{name:"h2o_wave.graphics.path"})),Object(l.b)("div",{className:"api__body"},Object(l.b)("div",{className:"api__signature"},"def ",Object(l.b)("span",{class:"ident"},"path"),"(**kwargs) \u2011>\xa0",Object(l.b)("a",{title:"h2o_wave.core.Expando",href:"core#h2o_wave.core.Expando"},"Expando")),Object(l.b)("div",{className:"api__description"},Object(l.b)("p",null,"Draw a path. See ",Object(l.b)("a",{href:"https://developer.mozilla.org/en-US/docs/Web/SVG/Element/path"},"https://developer.mozilla.org/en-US/docs/Web/SVG/Element/path")),Object(l.b)("h5",{id:"args"},"Args"),Object(l.b)("dl",null,Object(l.b)("dt",null,Object(l.b)("code",null,"kwargs")),Object(l.b)("dd",null,"Attributes to use for the initial render. SVG attributes, snake-cased.")),Object(l.b)("h5",{id:"returns"},"Returns"),Object(l.b)("p",null,"Data for the graphical element.")))),Object(l.b)("div",{className:"api"},Object(l.b)("h3",{id:"polygon"},"polygon ",Object(l.b)("a",{name:"h2o_wave.graphics.polygon"})),Object(l.b)("div",{className:"api__body"},Object(l.b)("div",{className:"api__signature"},"def ",Object(l.b)("span",{class:"ident"},"polygon"),"(**kwargs) \u2011>\xa0",Object(l.b)("a",{title:"h2o_wave.core.Expando",href:"core#h2o_wave.core.Expando"},"Expando")),Object(l.b)("div",{className:"api__description"},Object(l.b)("p",null,"Draw a polygon. See ",Object(l.b)("a",{href:"https://developer.mozilla.org/en-US/docs/Web/SVG/Element/polygon"},"https://developer.mozilla.org/en-US/docs/Web/SVG/Element/polygon")),Object(l.b)("h5",{id:"args"},"Args"),Object(l.b)("dl",null,Object(l.b)("dt",null,Object(l.b)("code",null,"kwargs")),Object(l.b)("dd",null,"Attributes to use for the initial render. SVG attributes, snake-cased.")),Object(l.b)("h5",{id:"returns"},"Returns"),Object(l.b)("p",null,"Data for the graphical element.")))),Object(l.b)("div",{className:"api"},Object(l.b)("h3",{id:"polyline"},"polyline ",Object(l.b)("a",{name:"h2o_wave.graphics.polyline"})),Object(l.b)("div",{className:"api__body"},Object(l.b)("div",{className:"api__signature"},"def ",Object(l.b)("span",{class:"ident"},"polyline"),"(**kwargs) \u2011>\xa0",Object(l.b)("a",{title:"h2o_wave.core.Expando",href:"core#h2o_wave.core.Expando"},"Expando")),Object(l.b)("div",{className:"api__description"},Object(l.b)("p",null,"Draw a polyline. See ",Object(l.b)("a",{href:"https://developer.mozilla.org/en-US/docs/Web/SVG/Element/polyline"},"https://developer.mozilla.org/en-US/docs/Web/SVG/Element/polyline")),Object(l.b)("h5",{id:"args"},"Args"),Object(l.b)("dl",null,Object(l.b)("dt",null,Object(l.b)("code",null,"kwargs")),Object(l.b)("dd",null,"Attributes to use for the initial render. SVG attributes, snake-cased.")),Object(l.b)("h5",{id:"returns"},"Returns"),Object(l.b)("p",null,"Data for the graphical element.")))),Object(l.b)("div",{className:"api"},Object(l.b)("h3",{id:"rect"},"rect ",Object(l.b)("a",{name:"h2o_wave.graphics.rect"})),Object(l.b)("div",{className:"api__body"},Object(l.b)("div",{className:"api__signature"},"def ",Object(l.b)("span",{class:"ident"},"rect"),"(**kwargs) \u2011>\xa0",Object(l.b)("a",{title:"h2o_wave.core.Expando",href:"core#h2o_wave.core.Expando"},"Expando")),Object(l.b)("div",{className:"api__description"},Object(l.b)("p",null,"Draw a rectangle. See ",Object(l.b)("a",{href:"https://developer.mozilla.org/en-US/docs/Web/SVG/Element/rect"},"https://developer.mozilla.org/en-US/docs/Web/SVG/Element/rect")),Object(l.b)("h5",{id:"args"},"Args"),Object(l.b)("dl",null,Object(l.b)("dt",null,Object(l.b)("code",null,"kwargs")),Object(l.b)("dd",null,"Attributes to use for the initial render. SVG attributes, snake-cased.")),Object(l.b)("h5",{id:"returns"},"Returns"),Object(l.b)("p",null,"Data for the graphical element.")))),Object(l.b)("div",{className:"api"},Object(l.b)("h3",{id:"reset"},"reset ",Object(l.b)("a",{name:"h2o_wave.graphics.reset"})),Object(l.b)("div",{className:"api__body"},Object(l.b)("div",{className:"api__signature"},"def ",Object(l.b)("span",{class:"ident"},"reset"),"(element:\xa0",Object(l.b)("a",{title:"h2o_wave.core.Ref",href:"core#h2o_wave.core.Ref"},"Ref"),") \u2011>\xa0",Object(l.b)("a",{title:"h2o_wave.core.Ref",href:"core#h2o_wave.core.Ref"},"Ref")),Object(l.b)("div",{className:"api__description"},Object(l.b)("p",null,"Schedule a redraw of the specified graphical element using its original attributes. Calling this function clears any changes performed using the ",Object(l.b)("code",null,Object(l.b)("a",{title:"h2o_wave.graphics.draw",href:"#h2o_wave.graphics.draw"},"draw()"))," function."),Object(l.b)("h5",{id:"args"},"Args"),Object(l.b)("dl",null,Object(l.b)("dt",null,Object(l.b)("code",null,"element")),Object(l.b)("dd",null,"A reference to a graphical element.")),Object(l.b)("h5",{id:"returns"},"Returns"),Object(l.b)("p",null,"The element reference, without change.")))),Object(l.b)("div",{className:"api"},Object(l.b)("h3",{id:"scene"},"scene ",Object(l.b)("a",{name:"h2o_wave.graphics.scene"})),Object(l.b)("div",{className:"api__body"},Object(l.b)("div",{className:"api__signature"},"def ",Object(l.b)("span",{class:"ident"},"scene"),"(**kwargs) \u2011>\xa0",Object(l.b)("a",{title:"h2o_wave.core.Data",href:"core#h2o_wave.core.Data"},"Data")),Object(l.b)("div",{className:"api__description"},Object(l.b)("p",null,"Create a scene. A scene holds graphic elements whose attributes need to be changed dynamically (causing a re-render). The return value must be assigned to the ",Object(l.b)("code",null,Object(l.b)("a",{title:"h2o_wave.graphics.scene",href:"#h2o_wave.graphics.scene"},"scene()"))," property of a ",Object(l.b)("code",null,Object(l.b)("a",{title:"h2o_wave.types.GraphicsCard",href:"types#h2o_wave.types.GraphicsCard"},"GraphicsCard")),"."),Object(l.b)("h5",{id:"args"},"Args"),Object(l.b)("dl",null,Object(l.b)("dt",null,Object(l.b)("code",null,"kwargs")),Object(l.b)("dd",null,"Graphical elements to render as part of the scene.")),Object(l.b)("h5",{id:"returns"},"Returns"),Object(l.b)("p",null,"A ",Object(l.b)("code",null,Object(l.b)("a",{title:"h2o_wave.core.Data",href:"core#h2o_wave.core.Data"},"Data"))," instance.")))),Object(l.b)("div",{className:"api"},Object(l.b)("h3",{id:"spline"},"spline ",Object(l.b)("a",{name:"h2o_wave.graphics.spline"})),Object(l.b)("div",{className:"api__body"},Object(l.b)("div",{className:"api__signature"},"def ",Object(l.b)("span",{class:"ident"},"spline"),"(x:\xa0Union[List[Union[float,\xa0NoneType]],\xa0NoneType]\xa0=\xa0None, y:\xa0Union[List[Union[float,\xa0NoneType]],\xa0NoneType]\xa0=\xa0None, x0:\xa0Union[List[Union[float,\xa0NoneType]],\xa0NoneType]\xa0=\xa0None, y0:\xa0Union[List[Union[float,\xa0NoneType]],\xa0NoneType]\xa0=\xa0None, curve:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, radial:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, **kwargs) \u2011>\xa0",Object(l.b)("a",{title:"h2o_wave.core.Expando",href:"core#h2o_wave.core.Expando"},"Expando")),Object(l.b)("div",{className:"api__description"},Object(l.b)("p",null,"Draw a spline."),Object(l.b)("p",null,"If x, y are specified, draws a regular spline."),Object(l.b)("p",null,"If x, y, y0 are specified, draws a horizontal area spline. Sets baseline to zero if y0 is an empty list."),Object(l.b)("p",null,"If x, x0, y are specified, draws a vertical area spline. Sets baseline to zero if x0 is an empty list"),Object(l.b)("p",null,"Missing information is rendered as gaps in the spline."),Object(l.b)("h5",{id:"args"},"Args"),Object(l.b)("dl",null,Object(l.b)("dt",null,Object(l.b)("code",null,"x")),Object(l.b)("dd",null,"x-coordinates."),Object(l.b)("dt",null,Object(l.b)("code",null,"y")),Object(l.b)("dd",null,"y-coordinates."),Object(l.b)("dt",null,Object(l.b)("code",null,"x0")),Object(l.b)("dd",null,"base x-coordinates."),Object(l.b)("dt",null,Object(l.b)("code",null,"y0")),Object(l.b)("dd",null,"base y-coordinates."),Object(l.b)("dt",null,Object(l.b)("code",null,"curve")),Object(l.b)("dd",null,"Interpolation. One of basis, basis-closed, basis-open, cardinal, cardinal-closed, cardinal-open, smooth, smooth-closed, smooth-open, linear, linear-closed, monotone-x, monotone-y, natural, step, step-after, step-before. Defaults to linear."),Object(l.b)("dt",null,Object(l.b)("code",null,"radial")),Object(l.b)("dd",null,"Whether (x, y) should be treated as (angle,radius) or (x0, x, y0, y) should be treated as (start-angle, end-angle, inner-radius, outer-radius)."),Object(l.b)("dt",null,Object(l.b)("code",null,"kwargs")),Object(l.b)("dd",null,"Attributes to use for the initial render. SVG attributes, snake-cased.")),Object(l.b)("h5",{id:"returns"},"Returns"),Object(l.b)("p",null,"Data for the graphical element.")))),Object(l.b)("div",{className:"api"},Object(l.b)("h3",{id:"stage"},"stage ",Object(l.b)("a",{name:"h2o_wave.graphics.stage"})),Object(l.b)("div",{className:"api__body"},Object(l.b)("div",{className:"api__signature"},"def ",Object(l.b)("span",{class:"ident"},"stage"),"(**kwargs) \u2011>\xa0str"),Object(l.b)("div",{className:"api__description"},Object(l.b)("p",null,"Create a stage. A stage holds static graphics elements that are rendered as part of the background (behind the scene). The return value must be assigned to the ",Object(l.b)("code",null,Object(l.b)("a",{title:"h2o_wave.graphics.stage",href:"#h2o_wave.graphics.stage"},"stage()"))," property of a ",Object(l.b)("code",null,Object(l.b)("a",{title:"h2o_wave.types.GraphicsCard",href:"types#h2o_wave.types.GraphicsCard"},"GraphicsCard")),"."),Object(l.b)("h5",{id:"args"},"Args"),Object(l.b)("dl",null,Object(l.b)("dt",null,Object(l.b)("code",null,"kwargs")),Object(l.b)("dd",null,"Graphical elements to render as part of the stage.")),Object(l.b)("h5",{id:"returns"},"Returns"),Object(l.b)("p",null,"Packed data.")))),Object(l.b)("div",{className:"api"},Object(l.b)("h3",{id:"text"},"text ",Object(l.b)("a",{name:"h2o_wave.graphics.text"})),Object(l.b)("div",{className:"api__body"},Object(l.b)("div",{className:"api__signature"},"def ",Object(l.b)("span",{class:"ident"},"text"),"(text:\xa0str, **kwargs) \u2011>\xa0",Object(l.b)("a",{title:"h2o_wave.core.Expando",href:"core#h2o_wave.core.Expando"},"Expando")),Object(l.b)("div",{className:"api__description"},Object(l.b)("p",null,"Draw text. See ",Object(l.b)("a",{href:"https://developer.mozilla.org/en-US/docs/Web/SVG/Element/text"},"https://developer.mozilla.org/en-US/docs/Web/SVG/Element/text")),Object(l.b)("h5",{id:"args"},"Args"),Object(l.b)("dl",null,Object(l.b)("dt",null,Object(l.b)("code",null,"text")),Object(l.b)("dd",null,"The text content."),Object(l.b)("dt",null,Object(l.b)("code",null,"kwargs")),Object(l.b)("dd",null,"Attributes to use for the initial render. SVG attributes, snake-cased.")),Object(l.b)("h5",{id:"returns"},"Returns"),Object(l.b)("p",null,"Data for the graphical element.")))),Object(l.b)("div",{className:"api"},Object(l.b)("h3",{id:"turtle"},"turtle ",Object(l.b)("a",{name:"h2o_wave.graphics.turtle"})),Object(l.b)("div",{className:"api__body"},Object(l.b)("div",{className:"api__signature"},"def ",Object(l.b)("span",{class:"ident"},"turtle"),"(x=0.0, y=0.0, degrees=0.0) \u2011>\xa0",Object(l.b)("a",{title:"h2o_wave.graphics.Turtle",href:"#h2o_wave.graphics.Turtle"},"Turtle")),Object(l.b)("div",{className:"api__description"},Object(l.b)("p",null,"Create a new ",Object(l.b)("code",null,Object(l.b)("a",{title:"h2o_wave.graphics.Turtle",href:"#h2o_wave.graphics.Turtle"},"Turtle")),"."),Object(l.b)("h5",{id:"args"},"Args"),Object(l.b)("dl",null,Object(l.b)("dt",null,Object(l.b)("code",null,"x")),Object(l.b)("dd",null,"initial position x"),Object(l.b)("dt",null,Object(l.b)("code",null,"y")),Object(l.b)("dd",null,"initial position y"),Object(l.b)("dt",null,Object(l.b)("code",null,"degrees")),Object(l.b)("dd",null,"initial angle in degrees")),Object(l.b)("h5",{id:"returns"},"Returns"),Object(l.b)("p",null,"A new ",Object(l.b)("code",null,Object(l.b)("a",{title:"h2o_wave.graphics.Turtle",href:"#h2o_wave.graphics.Turtle"},"Turtle")),".")))),Object(l.b)("div",{className:"api"},Object(l.b)("h3",{id:"type_of"},"type_of ",Object(l.b)("a",{name:"h2o_wave.graphics.type_of"})),Object(l.b)("div",{className:"api__body"},Object(l.b)("div",{className:"api__signature"},"def ",Object(l.b)("span",{class:"ident"},"type_of"),"(element:\xa0",Object(l.b)("a",{title:"h2o_wave.core.Expando",href:"core#h2o_wave.core.Expando"},"Expando"),") \u2011>\xa0Union[str,\xa0NoneType]"),Object(l.b)("div",{className:"api__description"},Object(l.b)("p",null,"Get the type of the graphical element."),Object(l.b)("h5",{id:"args"},"Args"),Object(l.b)("dl",null,Object(l.b)("dt",null,Object(l.b)("code",null,"element")),Object(l.b)("dd",null,"A graphical element.")),Object(l.b)("h5",{id:"returns"},"Returns"),Object(l.b)("p",null,"A string indicating the type of the element, e.g. 'circle', 'line', etc.")))),Object(l.b)("h2",{id:"classes"},"Classes"),Object(l.b)("div",{className:"api"},Object(l.b)("h3",{id:"path-1"},"Path ",Object(l.b)("a",{name:"h2o_wave.graphics.Path"})),Object(l.b)("div",{className:"api__body"},Object(l.b)("div",{className:"api__signature"},"class ",Object(l.b)("span",{class:"ident"},"Path")),Object(l.b)("div",{className:"api__description"},Object(l.b)("p",null,"A convenience class for drawing SVG paths.")),Object(l.b)("h4",{id:"methods"},"Methods"),Object(l.b)("div",{className:"api__body"},Object(l.b)("div",{className:"api"},Object(l.b)("h4",{id:"a"},"A ",Object(l.b)("a",{name:"h2o_wave.graphics.Path.A"})),Object(l.b)("div",{className:"api__body"},Object(l.b)("div",{className:"api__signature"},"def ",Object(l.b)("span",{class:"ident"},"A"),"(self, rx:\xa0float, ry:\xa0float, x_axis_rotation:\xa0float, large_arc:\xa0bool, sweep:\xa0bool, x:\xa0float, y:\xa0float) \u2011>\xa0",Object(l.b)("a",{title:"h2o_wave.graphics.Path",href:"#h2o_wave.graphics.Path"},"Path")),Object(l.b)("div",{className:"api__description"},Object(l.b)("p",null,"Draws an elliptical arc from the current point to (x, y). The size and orientation of the ellipse are defined by two radii (rx, ry) and an ",Object(l.b)("code",null,"x_axis_rotation"),", which indicates how the ellipse as a whole is rotated, in degrees, relative to the current coordinate system. The center (cx, cy) of the ellipse is calculated automatically to satisfy the constraints imposed by the other parameters. ",Object(l.b)("code",null,"large_arc")," and ",Object(l.b)("code",null,"sweep_flag"),"contribute to the automatic calculations and help determine how the arc is drawn. In absolute coordinates."),Object(l.b)("p",null,"See ",Object(l.b)("a",{href:"https://www.w3.org/TR/SVG/paths.html#PathDataEllipticalArcCommands"},"https://www.w3.org/TR/SVG/paths.html#PathDataEllipticalArcCommands")),Object(l.b)("h5",{id:"args"},"Args"),Object(l.b)("dl",null,Object(l.b)("dt",null,Object(l.b)("code",null,"rx")),Object(l.b)("dd",null,"x-radius"),Object(l.b)("dt",null,Object(l.b)("code",null,"ry")),Object(l.b)("dd",null,"y-radius"),Object(l.b)("dt",null,Object(l.b)("code",null,"x_axis_rotation")),Object(l.b)("dd",null,"Rotation in degrees."),Object(l.b)("dt",null,Object(l.b)("code",null,"large_arc")),Object(l.b)("dd",null,"Determines if the arc should be greater than or less than 180 degrees."),Object(l.b)("dt",null,Object(l.b)("code",null,"sweep")),Object(l.b)("dd",null,"Determines if the arc should begin moving at positive angles or negative ones."),Object(l.b)("dt",null,Object(l.b)("code",null,"x")),Object(l.b)("dd",null,"x-coordinate"),Object(l.b)("dt",null,Object(l.b)("code",null,"y")),Object(l.b)("dd",null,"y-coordinate")),Object(l.b)("h5",{id:"returns"},"Returns"),Object(l.b)("p",null,"The current ",Object(l.b)("code",null,Object(l.b)("a",{title:"h2o_wave.graphics.Path",href:"#h2o_wave.graphics.Path"},"Path"))," instance.")))),Object(l.b)("div",{className:"api"},Object(l.b)("h4",{id:"c"},"C ",Object(l.b)("a",{name:"h2o_wave.graphics.Path.C"})),Object(l.b)("div",{className:"api__body"},Object(l.b)("div",{className:"api__signature"},"def ",Object(l.b)("span",{class:"ident"},"C"),"(self, x1:\xa0float, y1:\xa0float, x2:\xa0float, y2:\xa0float, x:\xa0float, y:\xa0float) \u2011>\xa0",Object(l.b)("a",{title:"h2o_wave.graphics.Path",href:"#h2o_wave.graphics.Path"},"Path")),Object(l.b)("div",{className:"api__description"},Object(l.b)("p",null,"Draws a cubic B\xe9zier curve from the current point to (x,y) using (x1,y1) as the control point at the beginning of the curve and (x2,y2) as the control point at the end of the curve. In absolute coordinates."),Object(l.b)("p",null,"See ",Object(l.b)("a",{href:"https://www.w3.org/TR/SVG/paths.html#PathDataCubicBezierCommands"},"https://www.w3.org/TR/SVG/paths.html#PathDataCubicBezierCommands")),Object(l.b)("h5",{id:"args"},"Args"),Object(l.b)("dl",null,Object(l.b)("dt",null,Object(l.b)("code",null,"x1")),Object(l.b)("dd",null,"x-coordinate of first control point"),Object(l.b)("dt",null,Object(l.b)("code",null,"y1")),Object(l.b)("dd",null,"y-coordinate of first control point"),Object(l.b)("dt",null,Object(l.b)("code",null,"x2")),Object(l.b)("dd",null,"x-coordinate of second control point"),Object(l.b)("dt",null,Object(l.b)("code",null,"y2")),Object(l.b)("dd",null,"y-coordinate of second control point"),Object(l.b)("dt",null,Object(l.b)("code",null,"x")),Object(l.b)("dd",null,"x-coordinate"),Object(l.b)("dt",null,Object(l.b)("code",null,"y")),Object(l.b)("dd",null,"y-coordinate")),Object(l.b)("h5",{id:"returns"},"Returns"),Object(l.b)("p",null,"The current ",Object(l.b)("code",null,Object(l.b)("a",{title:"h2o_wave.graphics.Path",href:"#h2o_wave.graphics.Path"},"Path"))," instance.")))),Object(l.b)("div",{className:"api"},Object(l.b)("h4",{id:"h"},"H ",Object(l.b)("a",{name:"h2o_wave.graphics.Path.H"})),Object(l.b)("div",{className:"api__body"},Object(l.b)("div",{className:"api__signature"},"def ",Object(l.b)("span",{class:"ident"},"H"),"(self, x:\xa0float) \u2011>\xa0",Object(l.b)("a",{title:"h2o_wave.graphics.Path",href:"#h2o_wave.graphics.Path"},"Path")),Object(l.b)("div",{className:"api__description"},Object(l.b)("p",null,"Draws a horizontal line from the current point. In absolute coordinates."),Object(l.b)("p",null,"See ",Object(l.b)("a",{href:"https://www.w3.org/TR/SVG/paths.html#PathDataLinetoCommands"},"https://www.w3.org/TR/SVG/paths.html#PathDataLinetoCommands")),Object(l.b)("h5",{id:"args"},"Args"),Object(l.b)("dl",null,Object(l.b)("dt",null,Object(l.b)("code",null,"x")),Object(l.b)("dd",null,"x-coordinate")),Object(l.b)("h5",{id:"returns"},"Returns"),Object(l.b)("p",null,"The current ",Object(l.b)("code",null,Object(l.b)("a",{title:"h2o_wave.graphics.Path",href:"#h2o_wave.graphics.Path"},"Path"))," instance.")))),Object(l.b)("div",{className:"api"},Object(l.b)("h4",{id:"l"},"L ",Object(l.b)("a",{name:"h2o_wave.graphics.Path.L"})),Object(l.b)("div",{className:"api__body"},Object(l.b)("div",{className:"api__signature"},"def ",Object(l.b)("span",{class:"ident"},"L"),"(self, x:\xa0float, y:\xa0float) \u2011>\xa0",Object(l.b)("a",{title:"h2o_wave.graphics.Path",href:"#h2o_wave.graphics.Path"},"Path")),Object(l.b)("div",{className:"api__description"},Object(l.b)("p",null,"Draw a line from the current point to the given (x,y) coordinate which becomes the new current point. In absolute coordinates."),Object(l.b)("p",null,"See ",Object(l.b)("a",{href:"https://www.w3.org/TR/SVG/paths.html#PathDataLinetoCommands"},"https://www.w3.org/TR/SVG/paths.html#PathDataLinetoCommands")),Object(l.b)("h5",{id:"args"},"Args"),Object(l.b)("dl",null,Object(l.b)("dt",null,Object(l.b)("code",null,"x")),Object(l.b)("dd",null,"x-coordinate"),Object(l.b)("dt",null,Object(l.b)("code",null,"y")),Object(l.b)("dd",null,"y-coordinate")),Object(l.b)("h5",{id:"returns"},"Returns"),Object(l.b)("p",null,"The current ",Object(l.b)("code",null,Object(l.b)("a",{title:"h2o_wave.graphics.Path",href:"#h2o_wave.graphics.Path"},"Path"))," instance.")))),Object(l.b)("div",{className:"api"},Object(l.b)("h4",{id:"m"},"M ",Object(l.b)("a",{name:"h2o_wave.graphics.Path.M"})),Object(l.b)("div",{className:"api__body"},Object(l.b)("div",{className:"api__signature"},"def ",Object(l.b)("span",{class:"ident"},"M"),"(self, x:\xa0float, y:\xa0float) \u2011>\xa0",Object(l.b)("a",{title:"h2o_wave.graphics.Path",href:"#h2o_wave.graphics.Path"},"Path")),Object(l.b)("div",{className:"api__description"},Object(l.b)("p",null,"Start a new sub-path at the given (x,y) coordinates. In absolute coordinates."),Object(l.b)("p",null,"See ",Object(l.b)("a",{href:"https://www.w3.org/TR/SVG/paths.html#PathDataMovetoCommands"},"https://www.w3.org/TR/SVG/paths.html#PathDataMovetoCommands")),Object(l.b)("h5",{id:"args"},"Args"),Object(l.b)("dl",null,Object(l.b)("dt",null,Object(l.b)("code",null,"x")),Object(l.b)("dd",null,"x-coordinate"),Object(l.b)("dt",null,Object(l.b)("code",null,"y")),Object(l.b)("dd",null,"y-coordinate")),Object(l.b)("h5",{id:"returns"},"Returns"),Object(l.b)("p",null,"The current ",Object(l.b)("code",null,Object(l.b)("a",{title:"h2o_wave.graphics.Path",href:"#h2o_wave.graphics.Path"},"Path"))," instance.")))),Object(l.b)("div",{className:"api"},Object(l.b)("h4",{id:"q"},"Q ",Object(l.b)("a",{name:"h2o_wave.graphics.Path.Q"})),Object(l.b)("div",{className:"api__body"},Object(l.b)("div",{className:"api__signature"},"def ",Object(l.b)("span",{class:"ident"},"Q"),"(self, x1:\xa0float, y1:\xa0float, x:\xa0float, y:\xa0float) \u2011>\xa0",Object(l.b)("a",{title:"h2o_wave.graphics.Path",href:"#h2o_wave.graphics.Path"},"Path")),Object(l.b)("div",{className:"api__description"},Object(l.b)("p",null,"Draws a quadratic B\xe9zier curve from the current point to (x,y) using (x1,y1) as the control point. In absolute coordinates."),Object(l.b)("p",null,"See ",Object(l.b)("a",{href:"https://www.w3.org/TR/SVG/paths.html#PathDataQuadraticBezierCommands"},"https://www.w3.org/TR/SVG/paths.html#PathDataQuadraticBezierCommands")),Object(l.b)("h5",{id:"args"},"Args"),Object(l.b)("dl",null,Object(l.b)("dt",null,Object(l.b)("code",null,"x1")),Object(l.b)("dd",null,"x-coordinate of first control point"),Object(l.b)("dt",null,Object(l.b)("code",null,"y1")),Object(l.b)("dd",null,"y-coordinate of first control point"),Object(l.b)("dt",null,Object(l.b)("code",null,"x")),Object(l.b)("dd",null,"x-coordinate"),Object(l.b)("dt",null,Object(l.b)("code",null,"y")),Object(l.b)("dd",null,"y-coordinate")),Object(l.b)("h5",{id:"returns"},"Returns"),Object(l.b)("p",null,"The current ",Object(l.b)("code",null,Object(l.b)("a",{title:"h2o_wave.graphics.Path",href:"#h2o_wave.graphics.Path"},"Path"))," instance.")))),Object(l.b)("div",{className:"api"},Object(l.b)("h4",{id:"s"},"S ",Object(l.b)("a",{name:"h2o_wave.graphics.Path.S"})),Object(l.b)("div",{className:"api__body"},Object(l.b)("div",{className:"api__signature"},"def ",Object(l.b)("span",{class:"ident"},"S"),"(self, x2:\xa0float, y2:\xa0float, x:\xa0float, y:\xa0float) \u2011>\xa0",Object(l.b)("a",{title:"h2o_wave.graphics.Path",href:"#h2o_wave.graphics.Path"},"Path")),Object(l.b)("div",{className:"api__description"},Object(l.b)("p",null,"Draws a cubic B\xe9zier curve from the current point to (x,y). The first control point is assumed to be the reflection of the second control point on the previous command relative to the current point. (x2,y2) is the second control point (i.e., the control point at the end of the curve). In absolute coordinates."),Object(l.b)("p",null,"See ",Object(l.b)("a",{href:"https://www.w3.org/TR/SVG/paths.html#PathDataCubicBezierCommands"},"https://www.w3.org/TR/SVG/paths.html#PathDataCubicBezierCommands")),Object(l.b)("h5",{id:"args"},"Args"),Object(l.b)("dl",null,Object(l.b)("dt",null,Object(l.b)("code",null,"x2")),Object(l.b)("dd",null,"x-coordinate of second control point"),Object(l.b)("dt",null,Object(l.b)("code",null,"y2")),Object(l.b)("dd",null,"y-coordinate of second control point"),Object(l.b)("dt",null,Object(l.b)("code",null,"x")),Object(l.b)("dd",null,"x-coordinate"),Object(l.b)("dt",null,Object(l.b)("code",null,"y")),Object(l.b)("dd",null,"y-coordinate")),Object(l.b)("h5",{id:"returns"},"Returns"),Object(l.b)("p",null,"The current ",Object(l.b)("code",null,Object(l.b)("a",{title:"h2o_wave.graphics.Path",href:"#h2o_wave.graphics.Path"},"Path"))," instance.")))),Object(l.b)("div",{className:"api"},Object(l.b)("h4",{id:"t"},"T ",Object(l.b)("a",{name:"h2o_wave.graphics.Path.T"})),Object(l.b)("div",{className:"api__body"},Object(l.b)("div",{className:"api__signature"},"def ",Object(l.b)("span",{class:"ident"},"T"),"(self, x:\xa0float, y:\xa0float) \u2011>\xa0",Object(l.b)("a",{title:"h2o_wave.graphics.Path",href:"#h2o_wave.graphics.Path"},"Path")),Object(l.b)("div",{className:"api__description"},Object(l.b)("p",null,"Draws a quadratic B\xe9zier curve from the current point to (x,y). The control point is assumed to be the reflection of the control point on the previous command relative to the current point. In absolute coordinates."),Object(l.b)("p",null,"See ",Object(l.b)("a",{href:"https://www.w3.org/TR/SVG/paths.html#PathDataQuadraticBezierCommands"},"https://www.w3.org/TR/SVG/paths.html#PathDataQuadraticBezierCommands")),Object(l.b)("h5",{id:"args"},"Args"),Object(l.b)("dl",null,Object(l.b)("dt",null,Object(l.b)("code",null,"x")),Object(l.b)("dd",null,"x-coordinate"),Object(l.b)("dt",null,Object(l.b)("code",null,"y")),Object(l.b)("dd",null,"y-coordinate")),Object(l.b)("h5",{id:"returns"},"Returns"),Object(l.b)("p",null,"The current ",Object(l.b)("code",null,Object(l.b)("a",{title:"h2o_wave.graphics.Path",href:"#h2o_wave.graphics.Path"},"Path"))," instance.")))),Object(l.b)("div",{className:"api"},Object(l.b)("h4",{id:"v"},"V ",Object(l.b)("a",{name:"h2o_wave.graphics.Path.V"})),Object(l.b)("div",{className:"api__body"},Object(l.b)("div",{className:"api__signature"},"def ",Object(l.b)("span",{class:"ident"},"V"),"(self, y:\xa0float) \u2011>\xa0",Object(l.b)("a",{title:"h2o_wave.graphics.Path",href:"#h2o_wave.graphics.Path"},"Path")),Object(l.b)("div",{className:"api__description"},Object(l.b)("p",null,"Draws a vertical line from the current point. In absolute coordinates."),Object(l.b)("p",null,"See ",Object(l.b)("a",{href:"https://www.w3.org/TR/SVG/paths.html#PathDataLinetoCommands"},"https://www.w3.org/TR/SVG/paths.html#PathDataLinetoCommands")),Object(l.b)("h5",{id:"args"},"Args"),Object(l.b)("dl",null,Object(l.b)("dt",null,Object(l.b)("code",null,"y")),Object(l.b)("dd",null,"y-coordinate")),Object(l.b)("h5",{id:"returns"},"Returns"),Object(l.b)("p",null,"The current ",Object(l.b)("code",null,Object(l.b)("a",{title:"h2o_wave.graphics.Path",href:"#h2o_wave.graphics.Path"},"Path"))," instance.")))),Object(l.b)("div",{className:"api"},Object(l.b)("h4",{id:"z"},"Z ",Object(l.b)("a",{name:"h2o_wave.graphics.Path.Z"})),Object(l.b)("div",{className:"api__body"},Object(l.b)("div",{className:"api__signature"},"def ",Object(l.b)("span",{class:"ident"},"Z"),"(self) \u2011>\xa0",Object(l.b)("a",{title:"h2o_wave.graphics.Path",href:"#h2o_wave.graphics.Path"},"Path")),Object(l.b)("div",{className:"api__description"},Object(l.b)("p",null,"Close the current subpath by connecting it back to the current subpath's initial point."),Object(l.b)("p",null,"See ",Object(l.b)("a",{href:"https://www.w3.org/TR/SVG/paths.html#PathDataClosePathCommand"},"https://www.w3.org/TR/SVG/paths.html#PathDataClosePathCommand")),Object(l.b)("h5",{id:"returns"},"Returns"),Object(l.b)("p",null,"The current ",Object(l.b)("code",null,Object(l.b)("a",{title:"h2o_wave.graphics.Path",href:"#h2o_wave.graphics.Path"},"Path"))," instance.")))),Object(l.b)("div",{className:"api"},Object(l.b)("h4",{id:"a-1"},"a ",Object(l.b)("a",{name:"h2o_wave.graphics.Path.a"})),Object(l.b)("div",{className:"api__body"},Object(l.b)("div",{className:"api__signature"},"def ",Object(l.b)("span",{class:"ident"},"a"),"(self, rx:\xa0float, ry:\xa0float, x_axis_rotation:\xa0float, large_arc:\xa0bool, sweep:\xa0bool, x:\xa0float, y:\xa0float) \u2011>\xa0",Object(l.b)("a",{title:"h2o_wave.graphics.Path",href:"#h2o_wave.graphics.Path"},"Path")),Object(l.b)("div",{className:"api__description"},Object(l.b)("p",null,"Draws an elliptical arc from the current point to (x, y). The size and orientation of the ellipse are defined by two radii (rx, ry) and an ",Object(l.b)("code",null,"x_axis_rotation"),", which indicates how the ellipse as a whole is rotated, in degrees, relative to the current coordinate system. The center (cx, cy) of the ellipse is calculated automatically to satisfy the constraints imposed by the other parameters. ",Object(l.b)("code",null,"large_arc")," and ",Object(l.b)("code",null,"sweep_flag"),"contribute to the automatic calculations and help determine how the arc is drawn. In relative coordinates."),Object(l.b)("p",null,"See ",Object(l.b)("a",{href:"https://www.w3.org/TR/SVG/paths.html#PathDataEllipticalArcCommands"},"https://www.w3.org/TR/SVG/paths.html#PathDataEllipticalArcCommands")),Object(l.b)("h5",{id:"args"},"Args"),Object(l.b)("dl",null,Object(l.b)("dt",null,Object(l.b)("code",null,"rx")),Object(l.b)("dd",null,"x-radius"),Object(l.b)("dt",null,Object(l.b)("code",null,"ry")),Object(l.b)("dd",null,"y-radius"),Object(l.b)("dt",null,Object(l.b)("code",null,"x_axis_rotation")),Object(l.b)("dd",null,"Rotation in degrees."),Object(l.b)("dt",null,Object(l.b)("code",null,"large_arc")),Object(l.b)("dd",null,"Determines if the arc should be greater than or less than 180 degrees."),Object(l.b)("dt",null,Object(l.b)("code",null,"sweep")),Object(l.b)("dd",null,"Determines if the arc should begin moving at positive angles or negative ones."),Object(l.b)("dt",null,Object(l.b)("code",null,"x")),Object(l.b)("dd",null,"x-coordinate"),Object(l.b)("dt",null,Object(l.b)("code",null,"y")),Object(l.b)("dd",null,"y-coordinate")),Object(l.b)("h5",{id:"returns"},"Returns"),Object(l.b)("p",null,"The current ",Object(l.b)("code",null,Object(l.b)("a",{title:"h2o_wave.graphics.Path",href:"#h2o_wave.graphics.Path"},"Path"))," instance.")))),Object(l.b)("div",{className:"api"},Object(l.b)("h4",{id:"c-1"},"c ",Object(l.b)("a",{name:"h2o_wave.graphics.Path.c"})),Object(l.b)("div",{className:"api__body"},Object(l.b)("div",{className:"api__signature"},"def ",Object(l.b)("span",{class:"ident"},"c"),"(self, x1:\xa0float, y1:\xa0float, x2:\xa0float, y2:\xa0float, x:\xa0float, y:\xa0float) \u2011>\xa0",Object(l.b)("a",{title:"h2o_wave.graphics.Path",href:"#h2o_wave.graphics.Path"},"Path")),Object(l.b)("div",{className:"api__description"},Object(l.b)("p",null,"Draws a cubic B\xe9zier curve from the current point to (x,y) using (x1,y1) as the control point at the beginning of the curve and (x2,y2) as the control point at the end of the curve. In relative coordinates."),Object(l.b)("p",null,"See ",Object(l.b)("a",{href:"https://www.w3.org/TR/SVG/paths.html#PathDataCubicBezierCommands"},"https://www.w3.org/TR/SVG/paths.html#PathDataCubicBezierCommands")),Object(l.b)("h5",{id:"args"},"Args"),Object(l.b)("dl",null,Object(l.b)("dt",null,Object(l.b)("code",null,"x1")),Object(l.b)("dd",null,"x-coordinate of first control point"),Object(l.b)("dt",null,Object(l.b)("code",null,"y1")),Object(l.b)("dd",null,"y-coordinate of first control point"),Object(l.b)("dt",null,Object(l.b)("code",null,"x2")),Object(l.b)("dd",null,"x-coordinate of second control point"),Object(l.b)("dt",null,Object(l.b)("code",null,"y2")),Object(l.b)("dd",null,"y-coordinate of second control point"),Object(l.b)("dt",null,Object(l.b)("code",null,"x")),Object(l.b)("dd",null,"x-coordinate"),Object(l.b)("dt",null,Object(l.b)("code",null,"y")),Object(l.b)("dd",null,"y-coordinate")),Object(l.b)("h5",{id:"returns"},"Returns"),Object(l.b)("p",null,"The current ",Object(l.b)("code",null,Object(l.b)("a",{title:"h2o_wave.graphics.Path",href:"#h2o_wave.graphics.Path"},"Path"))," instance.")))),Object(l.b)("div",{className:"api"},Object(l.b)("h4",{id:"d"},"d ",Object(l.b)("a",{name:"h2o_wave.graphics.Path.d"})),Object(l.b)("div",{className:"api__body"},Object(l.b)("div",{className:"api__signature"},"def ",Object(l.b)("span",{class:"ident"},"d"),"(self) \u2011>\xa0str"),Object(l.b)("div",{className:"api__description"},Object(l.b)("p",null,"Serialize this path's commands into SVG path data."),Object(l.b)("h5",{id:"returns"},"Returns"),Object(l.b)("p",null,"The ",Object(l.b)("code",null,"d")," attribute for a SVG path.")))),Object(l.b)("div",{className:"api"},Object(l.b)("h4",{id:"h-1"},"h ",Object(l.b)("a",{name:"h2o_wave.graphics.Path.h"})),Object(l.b)("div",{className:"api__body"},Object(l.b)("div",{className:"api__signature"},"def ",Object(l.b)("span",{class:"ident"},"h"),"(self, x:\xa0float) \u2011>\xa0",Object(l.b)("a",{title:"h2o_wave.graphics.Path",href:"#h2o_wave.graphics.Path"},"Path")),Object(l.b)("div",{className:"api__description"},Object(l.b)("p",null,"Draws a horizontal line from the current point. In relative coordinates."),Object(l.b)("p",null,"See ",Object(l.b)("a",{href:"https://www.w3.org/TR/SVG/paths.html#PathDataLinetoCommands"},"https://www.w3.org/TR/SVG/paths.html#PathDataLinetoCommands")),Object(l.b)("h5",{id:"args"},"Args"),Object(l.b)("dl",null,Object(l.b)("dt",null,Object(l.b)("code",null,"x")),Object(l.b)("dd",null,"x-coordinate")),Object(l.b)("h5",{id:"returns"},"Returns"),Object(l.b)("p",null,"The current ",Object(l.b)("code",null,Object(l.b)("a",{title:"h2o_wave.graphics.Path",href:"#h2o_wave.graphics.Path"},"Path"))," instance.")))),Object(l.b)("div",{className:"api"},Object(l.b)("h4",{id:"l-1"},"l ",Object(l.b)("a",{name:"h2o_wave.graphics.Path.l"})),Object(l.b)("div",{className:"api__body"},Object(l.b)("div",{className:"api__signature"},"def ",Object(l.b)("span",{class:"ident"},"l"),"(self, x:\xa0float, y:\xa0float) \u2011>\xa0",Object(l.b)("a",{title:"h2o_wave.graphics.Path",href:"#h2o_wave.graphics.Path"},"Path")),Object(l.b)("div",{className:"api__description"},Object(l.b)("p",null,"Draw a line from the current point to the given (x,y) coordinate which becomes the new current point. In relative coordinates."),Object(l.b)("p",null,"See ",Object(l.b)("a",{href:"https://www.w3.org/TR/SVG/paths.html#PathDataLinetoCommands"},"https://www.w3.org/TR/SVG/paths.html#PathDataLinetoCommands")),Object(l.b)("h5",{id:"args"},"Args"),Object(l.b)("dl",null,Object(l.b)("dt",null,Object(l.b)("code",null,"x")),Object(l.b)("dd",null,"x-coordinate"),Object(l.b)("dt",null,Object(l.b)("code",null,"y")),Object(l.b)("dd",null,"y-coordinate")),Object(l.b)("h5",{id:"returns"},"Returns"),Object(l.b)("p",null,"The current ",Object(l.b)("code",null,Object(l.b)("a",{title:"h2o_wave.graphics.Path",href:"#h2o_wave.graphics.Path"},"Path"))," instance.")))),Object(l.b)("div",{className:"api"},Object(l.b)("h4",{id:"m-1"},"m ",Object(l.b)("a",{name:"h2o_wave.graphics.Path.m"})),Object(l.b)("div",{className:"api__body"},Object(l.b)("div",{className:"api__signature"},"def ",Object(l.b)("span",{class:"ident"},"m"),"(self, x:\xa0float, y:\xa0float) \u2011>\xa0",Object(l.b)("a",{title:"h2o_wave.graphics.Path",href:"#h2o_wave.graphics.Path"},"Path")),Object(l.b)("div",{className:"api__description"},Object(l.b)("p",null,"Start a new sub-path at the given (x,y) coordinates. In relative coordinates."),Object(l.b)("p",null,"See ",Object(l.b)("a",{href:"https://www.w3.org/TR/SVG/paths.html#PathDataMovetoCommands"},"https://www.w3.org/TR/SVG/paths.html#PathDataMovetoCommands")),Object(l.b)("h5",{id:"args"},"Args"),Object(l.b)("dl",null,Object(l.b)("dt",null,Object(l.b)("code",null,"x")),Object(l.b)("dd",null,"x-coordinate"),Object(l.b)("dt",null,Object(l.b)("code",null,"y")),Object(l.b)("dd",null,"y-coordinate")),Object(l.b)("h5",{id:"returns"},"Returns"),Object(l.b)("p",null,"The current ",Object(l.b)("code",null,Object(l.b)("a",{title:"h2o_wave.graphics.Path",href:"#h2o_wave.graphics.Path"},"Path"))," instance.")))),Object(l.b)("div",{className:"api"},Object(l.b)("h4",{id:"path-2"},"path ",Object(l.b)("a",{name:"h2o_wave.graphics.Path.path"})),Object(l.b)("div",{className:"api__body"},Object(l.b)("div",{className:"api__signature"},"def ",Object(l.b)("span",{class:"ident"},"path"),"(self, **kwargs) \u2011>\xa0",Object(l.b)("a",{title:"h2o_wave.core.Expando",href:"core#h2o_wave.core.Expando"},"Expando")),Object(l.b)("div",{className:"api__description"},Object(l.b)("p",null,"A SVG path element representing the commands in this ",Object(l.b)("code",null,Object(l.b)("a",{title:"h2o_wave.graphics.Path",href:"#h2o_wave.graphics.Path"},"Path"))," instance. Same as calling ",Object(l.b)("code",null,"h2o_wave.graphics.path(d=path.d())")),Object(l.b)("h5",{id:"args"},"Args"),Object(l.b)("dl",null,Object(l.b)("dt",null,Object(l.b)("code",null,"kwargs")),Object(l.b)("dd",null,"Additional attributes for the SVG path element.")),Object(l.b)("h5",{id:"returns"},"Returns"),Object(l.b)("p",null,"A SVG path element.")))),Object(l.b)("div",{className:"api"},Object(l.b)("h4",{id:"q-1"},"q ",Object(l.b)("a",{name:"h2o_wave.graphics.Path.q"})),Object(l.b)("div",{className:"api__body"},Object(l.b)("div",{className:"api__signature"},"def ",Object(l.b)("span",{class:"ident"},"q"),"(self, x1:\xa0float, y1:\xa0float, x:\xa0float, y:\xa0float) \u2011>\xa0",Object(l.b)("a",{title:"h2o_wave.graphics.Path",href:"#h2o_wave.graphics.Path"},"Path")),Object(l.b)("div",{className:"api__description"},Object(l.b)("p",null,"Draws a quadratic B\xe9zier curve from the current point to (x,y) using (x1,y1) as the control point. In relative coordinates."),Object(l.b)("p",null,"See ",Object(l.b)("a",{href:"https://www.w3.org/TR/SVG/paths.html#PathDataQuadraticBezierCommands"},"https://www.w3.org/TR/SVG/paths.html#PathDataQuadraticBezierCommands")),Object(l.b)("h5",{id:"args"},"Args"),Object(l.b)("dl",null,Object(l.b)("dt",null,Object(l.b)("code",null,"x1")),Object(l.b)("dd",null,"x-coordinate of first control point"),Object(l.b)("dt",null,Object(l.b)("code",null,"y1")),Object(l.b)("dd",null,"y-coordinate of first control point"),Object(l.b)("dt",null,Object(l.b)("code",null,"x")),Object(l.b)("dd",null,"x-coordinate"),Object(l.b)("dt",null,Object(l.b)("code",null,"y")),Object(l.b)("dd",null,"y-coordinate")),Object(l.b)("h5",{id:"returns"},"Returns"),Object(l.b)("p",null,"The current ",Object(l.b)("code",null,Object(l.b)("a",{title:"h2o_wave.graphics.Path",href:"#h2o_wave.graphics.Path"},"Path"))," instance.")))),Object(l.b)("div",{className:"api"},Object(l.b)("h4",{id:"s-1"},"s ",Object(l.b)("a",{name:"h2o_wave.graphics.Path.s"})),Object(l.b)("div",{className:"api__body"},Object(l.b)("div",{className:"api__signature"},"def ",Object(l.b)("span",{class:"ident"},"s"),"(self, x2:\xa0float, y2:\xa0float, x:\xa0float, y:\xa0float) \u2011>\xa0",Object(l.b)("a",{title:"h2o_wave.graphics.Path",href:"#h2o_wave.graphics.Path"},"Path")),Object(l.b)("div",{className:"api__description"},Object(l.b)("p",null,"Draws a cubic B\xe9zier curve from the current point to (x,y). The first control point is assumed to be the reflection of the second control point on the previous command relative to the current point. (x2,y2) is the second control point (i.e., the control point at the end of the curve). In relative coordinates."),Object(l.b)("p",null,"See ",Object(l.b)("a",{href:"https://www.w3.org/TR/SVG/paths.html#PathDataCubicBezierCommands"},"https://www.w3.org/TR/SVG/paths.html#PathDataCubicBezierCommands")),Object(l.b)("h5",{id:"args"},"Args"),Object(l.b)("dl",null,Object(l.b)("dt",null,Object(l.b)("code",null,"x2")),Object(l.b)("dd",null,"x-coordinate of second control point"),Object(l.b)("dt",null,Object(l.b)("code",null,"y2")),Object(l.b)("dd",null,"y-coordinate of second control point"),Object(l.b)("dt",null,Object(l.b)("code",null,"x")),Object(l.b)("dd",null,"x-coordinate"),Object(l.b)("dt",null,Object(l.b)("code",null,"y")),Object(l.b)("dd",null,"y-coordinate")),Object(l.b)("h5",{id:"returns"},"Returns"),Object(l.b)("p",null,"The current ",Object(l.b)("code",null,Object(l.b)("a",{title:"h2o_wave.graphics.Path",href:"#h2o_wave.graphics.Path"},"Path"))," instance.")))),Object(l.b)("div",{className:"api"},Object(l.b)("h4",{id:"t-1"},"t ",Object(l.b)("a",{name:"h2o_wave.graphics.Path.t"})),Object(l.b)("div",{className:"api__body"},Object(l.b)("div",{className:"api__signature"},"def ",Object(l.b)("span",{class:"ident"},"t"),"(self, x:\xa0float, y:\xa0float) \u2011>\xa0",Object(l.b)("a",{title:"h2o_wave.graphics.Path",href:"#h2o_wave.graphics.Path"},"Path")),Object(l.b)("div",{className:"api__description"},Object(l.b)("p",null,"Draws a quadratic B\xe9zier curve from the current point to (x,y). The control point is assumed to be the reflection of the control point on the previous command relative to the current point. In relative coordinates."),Object(l.b)("p",null,"See ",Object(l.b)("a",{href:"https://www.w3.org/TR/SVG/paths.html#PathDataQuadraticBezierCommands"},"https://www.w3.org/TR/SVG/paths.html#PathDataQuadraticBezierCommands")),Object(l.b)("h5",{id:"args"},"Args"),Object(l.b)("dl",null,Object(l.b)("dt",null,Object(l.b)("code",null,"x")),Object(l.b)("dd",null,"x-coordinate"),Object(l.b)("dt",null,Object(l.b)("code",null,"y")),Object(l.b)("dd",null,"y-coordinate")),Object(l.b)("h5",{id:"returns"},"Returns"),Object(l.b)("p",null,"The current ",Object(l.b)("code",null,Object(l.b)("a",{title:"h2o_wave.graphics.Path",href:"#h2o_wave.graphics.Path"},"Path"))," instance.")))),Object(l.b)("div",{className:"api"},Object(l.b)("h4",{id:"v-1"},"v ",Object(l.b)("a",{name:"h2o_wave.graphics.Path.v"})),Object(l.b)("div",{className:"api__body"},Object(l.b)("div",{className:"api__signature"},"def ",Object(l.b)("span",{class:"ident"},"v"),"(self, y:\xa0float) \u2011>\xa0",Object(l.b)("a",{title:"h2o_wave.graphics.Path",href:"#h2o_wave.graphics.Path"},"Path")),Object(l.b)("div",{className:"api__description"},Object(l.b)("p",null,"Draws a vertical line from the current point. In relative coordinates."),Object(l.b)("p",null,"See ",Object(l.b)("a",{href:"https://www.w3.org/TR/SVG/paths.html#PathDataLinetoCommands"},"https://www.w3.org/TR/SVG/paths.html#PathDataLinetoCommands")),Object(l.b)("h5",{id:"args"},"Args"),Object(l.b)("dl",null,Object(l.b)("dt",null,Object(l.b)("code",null,"y")),Object(l.b)("dd",null,"y-coordinate")),Object(l.b)("h5",{id:"returns"},"Returns"),Object(l.b)("p",null,"The current ",Object(l.b)("code",null,Object(l.b)("a",{title:"h2o_wave.graphics.Path",href:"#h2o_wave.graphics.Path"},"Path"))," instance.")))),Object(l.b)("div",{className:"api"},Object(l.b)("h4",{id:"z-1"},"z ",Object(l.b)("a",{name:"h2o_wave.graphics.Path.z"})),Object(l.b)("div",{className:"api__body"},Object(l.b)("div",{className:"api__signature"},"def ",Object(l.b)("span",{class:"ident"},"z"),"(self) \u2011>\xa0",Object(l.b)("a",{title:"h2o_wave.graphics.Path",href:"#h2o_wave.graphics.Path"},"Path")),Object(l.b)("div",{className:"api__description"},Object(l.b)("p",null,"Close the current subpath by connecting it back to the current subpath's initial point."),Object(l.b)("p",null,"See ",Object(l.b)("a",{href:"https://www.w3.org/TR/SVG/paths.html#PathDataClosePathCommand"},"https://www.w3.org/TR/SVG/paths.html#PathDataClosePathCommand")),Object(l.b)("h5",{id:"returns"},"Returns"),Object(l.b)("p",null,"The current ",Object(l.b)("code",null,Object(l.b)("a",{title:"h2o_wave.graphics.Path",href:"#h2o_wave.graphics.Path"},"Path"))," instance."))))))),Object(l.b)("div",{className:"api"},Object(l.b)("h3",{id:"turtle-1"},"Turtle ",Object(l.b)("a",{name:"h2o_wave.graphics.Turtle"})),Object(l.b)("div",{className:"api__body"},Object(l.b)("div",{className:"api__signature"},"class ",Object(l.b)("span",{class:"ident"},"Turtle"),"(x=0.0, y=0.0, degrees=0.0)"),Object(l.b)("div",{className:"api__description"},Object(l.b)("p",null,"A Logo-like Turtle implementation for generating SVG paths. This is not a complete Turtle implementation. Contains a useful subset relevant to generating paths without using trigonometry or mental gymnastics."),Object(l.b)("p",null,"Create a Turtle."),Object(l.b)("h5",{id:"args"},"Args"),Object(l.b)("dl",null,Object(l.b)("dt",null,Object(l.b)("code",null,"x")),Object(l.b)("dd",null,"initial position x"),Object(l.b)("dt",null,Object(l.b)("code",null,"y")),Object(l.b)("dd",null,"initial position y"),Object(l.b)("dt",null,Object(l.b)("code",null,"degrees")),Object(l.b)("dd",null,"initial angle in degrees"))),Object(l.b)("h4",{id:"methods-1"},"Methods"),Object(l.b)("div",{className:"api__body"},Object(l.b)("div",{className:"api"},Object(l.b)("h4",{id:"a-2"},"a ",Object(l.b)("a",{name:"h2o_wave.graphics.Turtle.a"})),Object(l.b)("div",{className:"api__body"},Object(l.b)("div",{className:"api__signature"},"def ",Object(l.b)("span",{class:"ident"},"a"),"(self, degrees:\xa0float\xa0=\xa00) \u2011>\xa0",Object(l.b)("a",{title:"h2o_wave.graphics.Turtle",href:"#h2o_wave.graphics.Turtle"},"Turtle")),Object(l.b)("div",{className:"api__description"},Object(l.b)("p",null,"Set the turtle's orientation."),Object(l.b)("h5",{id:"args"},"Args"),Object(l.b)("dl",null,Object(l.b)("dt",null,Object(l.b)("code",null,"degrees")),Object(l.b)("dd",null,"angle in degrees")),Object(l.b)("h5",{id:"returns"},"Returns"),Object(l.b)("p",null,"The current turtle instance.")))),Object(l.b)("div",{className:"api"},Object(l.b)("h4",{id:"b"},"b ",Object(l.b)("a",{name:"h2o_wave.graphics.Turtle.b"})),Object(l.b)("div",{className:"api__body"},Object(l.b)("div",{className:"api__signature"},"def ",Object(l.b)("span",{class:"ident"},"b"),"(self, distance:\xa0float) \u2011>\xa0",Object(l.b)("a",{title:"h2o_wave.graphics.Turtle",href:"#h2o_wave.graphics.Turtle"},"Turtle")),Object(l.b)("div",{className:"api__description"},Object(l.b)("p",null,"Move backward."),Object(l.b)("h5",{id:"args"},"Args"),Object(l.b)("dl",null,Object(l.b)("dt",null,Object(l.b)("code",null,"distance")),Object(l.b)("dd",null,"Distance to move by.")),Object(l.b)("h5",{id:"returns"},"Returns"),Object(l.b)("p",null,"The current turtle instance.")))),Object(l.b)("div",{className:"api"},Object(l.b)("h4",{id:"d-1"},"d ",Object(l.b)("a",{name:"h2o_wave.graphics.Turtle.d"})),Object(l.b)("div",{className:"api__body"},Object(l.b)("div",{className:"api__signature"},"def ",Object(l.b)("span",{class:"ident"},"d"),"(self) \u2011>\xa0str"),Object(l.b)("div",{className:"api__description"},Object(l.b)("p",null,"Serialize this turtle's movements into SVG path data."),Object(l.b)("h5",{id:"returns"},"Returns"),Object(l.b)("p",null,"The ",Object(l.b)("code",null,"d")," attribute for a SVG path.")))),Object(l.b)("div",{className:"api"},Object(l.b)("h4",{id:"f"},"f ",Object(l.b)("a",{name:"h2o_wave.graphics.Turtle.f"})),Object(l.b)("div",{className:"api__body"},Object(l.b)("div",{className:"api__signature"},"def ",Object(l.b)("span",{class:"ident"},"f"),"(self, distance:\xa0float) \u2011>\xa0",Object(l.b)("a",{title:"h2o_wave.graphics.Turtle",href:"#h2o_wave.graphics.Turtle"},"Turtle")),Object(l.b)("div",{className:"api__description"},Object(l.b)("p",null,"Move forward."),Object(l.b)("h5",{id:"args"},"Args"),Object(l.b)("dl",null,Object(l.b)("dt",null,Object(l.b)("code",null,"distance")),Object(l.b)("dd",null,"Distance to move by.")),Object(l.b)("h5",{id:"returns"},"Returns"),Object(l.b)("p",null,"The current turtle instance.")))),Object(l.b)("div",{className:"api"},Object(l.b)("h4",{id:"l-2"},"l ",Object(l.b)("a",{name:"h2o_wave.graphics.Turtle.l"})),Object(l.b)("div",{className:"api__body"},Object(l.b)("div",{className:"api__signature"},"def ",Object(l.b)("span",{class:"ident"},"l"),"(self, degrees:\xa0float) \u2011>\xa0",Object(l.b)("a",{title:"h2o_wave.graphics.Turtle",href:"#h2o_wave.graphics.Turtle"},"Turtle")),Object(l.b)("div",{className:"api__description"},Object(l.b)("p",null,"Turn left."),Object(l.b)("h5",{id:"args"},"Args"),Object(l.b)("dl",null,Object(l.b)("dt",null,Object(l.b)("code",null,"degrees")),Object(l.b)("dd",null,"Angle in degrees.")),Object(l.b)("h5",{id:"returns"},"Returns"),Object(l.b)("p",null,"The current turtle instance.")))),Object(l.b)("div",{className:"api"},Object(l.b)("h4",{id:"p-1"},"p ",Object(l.b)("a",{name:"h2o_wave.graphics.Turtle.p"})),Object(l.b)("div",{className:"api__body"},Object(l.b)("div",{className:"api__signature"},"def ",Object(l.b)("span",{class:"ident"},"p"),"(self, x:\xa0float\xa0=\xa00.0, y:\xa0float\xa0=\xa00.0) \u2011>\xa0",Object(l.b)("a",{title:"h2o_wave.graphics.Turtle",href:"#h2o_wave.graphics.Turtle"},"Turtle")),Object(l.b)("div",{className:"api__description"},Object(l.b)("p",null,"Set the turtle's position."),Object(l.b)("h5",{id:"args"},"Args"),Object(l.b)("dl",null,Object(l.b)("dt",null,Object(l.b)("code",null,"x")),Object(l.b)("dd",null,"x-coordinate"),Object(l.b)("dt",null,Object(l.b)("code",null,"y")),Object(l.b)("dd",null,"y-coordinate")),Object(l.b)("h5",{id:"returns"},"Returns"),Object(l.b)("p",null,"The current turtle instance.")))),Object(l.b)("div",{className:"api"},Object(l.b)("h4",{id:"path-3"},"path ",Object(l.b)("a",{name:"h2o_wave.graphics.Turtle.path"})),Object(l.b)("div",{className:"api__body"},Object(l.b)("div",{className:"api__signature"},"def ",Object(l.b)("span",{class:"ident"},"path"),"(self, **kwargs) \u2011>\xa0",Object(l.b)("a",{title:"h2o_wave.core.Expando",href:"core#h2o_wave.core.Expando"},"Expando")),Object(l.b)("div",{className:"api__description"},Object(l.b)("p",null,"Create a SVG path element that represents this turtle's movements."),Object(l.b)("h5",{id:"args"},"Args"),Object(l.b)("dl",null,Object(l.b)("dt",null,Object(l.b)("code",null,"kwargs")),Object(l.b)("dd",null,"Additional attributes for the SVG path element.")),Object(l.b)("h5",{id:"returns"},"Returns"),Object(l.b)("p",null,"A SVG path element.")))),Object(l.b)("div",{className:"api"},Object(l.b)("h4",{id:"pd"},"pd ",Object(l.b)("a",{name:"h2o_wave.graphics.Turtle.pd"})),Object(l.b)("div",{className:"api__body"},Object(l.b)("div",{className:"api__signature"},"def ",Object(l.b)("span",{class:"ident"},"pd"),"(self) \u2011>\xa0",Object(l.b)("a",{title:"h2o_wave.graphics.Turtle",href:"#h2o_wave.graphics.Turtle"},"Turtle")),Object(l.b)("div",{className:"api__description"},Object(l.b)("p",null,"Pen down."),Object(l.b)("h5",{id:"returns"},"Returns"),Object(l.b)("p",null,"The current turtle instance.")))),Object(l.b)("div",{className:"api"},Object(l.b)("h4",{id:"pu"},"pu ",Object(l.b)("a",{name:"h2o_wave.graphics.Turtle.pu"})),Object(l.b)("div",{className:"api__body"},Object(l.b)("div",{className:"api__signature"},"def ",Object(l.b)("span",{class:"ident"},"pu"),"(self, close:\xa0bool) \u2011>\xa0",Object(l.b)("a",{title:"h2o_wave.graphics.Turtle",href:"#h2o_wave.graphics.Turtle"},"Turtle")),Object(l.b)("div",{className:"api__description"},Object(l.b)("p",null,"Pen up."),Object(l.b)("h5",{id:"args"},"Args"),Object(l.b)("dl",null,Object(l.b)("dt",null,Object(l.b)("code",null,"close")),Object(l.b)("dd",null,"Whether to close the current subpath.")),Object(l.b)("h5",{id:"returns"},"Returns"),Object(l.b)("p",null,"The current turtle instance.")))),Object(l.b)("div",{className:"api"},Object(l.b)("h4",{id:"r"},"r ",Object(l.b)("a",{name:"h2o_wave.graphics.Turtle.r"})),Object(l.b)("div",{className:"api__body"},Object(l.b)("div",{className:"api__signature"},"def ",Object(l.b)("span",{class:"ident"},"r"),"(self, degrees:\xa0float) \u2011>\xa0",Object(l.b)("a",{title:"h2o_wave.graphics.Turtle",href:"#h2o_wave.graphics.Turtle"},"Turtle")),Object(l.b)("div",{className:"api__description"},Object(l.b)("p",null,"Turn right."),Object(l.b)("h5",{id:"args"},"Args"),Object(l.b)("dl",null,Object(l.b)("dt",null,Object(l.b)("code",null,"degrees")),Object(l.b)("dd",null,"Angle in degrees.")),Object(l.b)("h5",{id:"returns"},"Returns"),Object(l.b)("p",null,"The current turtle instance."))))))))}o.isMDXComponent=!0},292:function(e,t,a){"use strict";a.d(t,"a",(function(){return d})),a.d(t,"b",(function(){return O}));var c=a(0),b=a.n(c);function l(e,t,a){return t in e?Object.defineProperty(e,t,{value:a,enumerable:!0,configurable:!0,writable:!0}):e[t]=a,e}function n(e,t){var a=Object.keys(e);if(Object.getOwnPropertySymbols){var c=Object.getOwnPropertySymbols(e);t&&(c=c.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),a.push.apply(a,c)}return a}function i(e){for(var t=1;t=0||(b[a]=e[a]);return b}(e,t);if(Object.getOwnPropertySymbols){var l=Object.getOwnPropertySymbols(e);for(c=0;c=0||Object.prototype.propertyIsEnumerable.call(e,a)&&(b[a]=e[a])}return b}var r=b.a.createContext({}),o=function(e){var t=b.a.useContext(r),a=t;return e&&(a="function"==typeof e?e(t):i(i({},t),e)),a},d=function(e){var t=o(e.components);return b.a.createElement(r.Provider,{value:t},e.children)},h={inlineCode:"code",wrapper:function(e){var t=e.children;return b.a.createElement(b.a.Fragment,{},t)}},p=b.a.forwardRef((function(e,t){var a=e.components,c=e.mdxType,l=e.originalType,n=e.parentName,r=s(e,["components","mdxType","originalType","parentName"]),d=o(a),p=c,O=d["".concat(n,".").concat(p)]||d[p]||h[p]||l;return a?b.a.createElement(O,i(i({ref:t},r),{},{components:a})):b.a.createElement(O,i({ref:t},r))}));function O(e,t){var a=arguments,c=t&&t.mdxType;if("string"==typeof e||c){var l=a.length,n=new Array(l);n[0]=p;var i={};for(var s in t)hasOwnProperty.call(t,s)&&(i[s]=t[s]);i.originalType=e,i.mdxType="string"==typeof e?e:c,n[1]=i;for(var r=2;r=0||(n[r]=e[r]);return n}(e,t);if(Object.getOwnPropertySymbols){var c=Object.getOwnPropertySymbols(e);for(o=0;o=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(n[r]=e[r])}return n}var p=n.a.createContext({}),s=function(e){var t=n.a.useContext(p),r=t;return e&&(r="function"==typeof e?e(t):i(i({},t),e)),r},l=function(e){var t=s(e.components);return n.a.createElement(p.Provider,{value:t},e.children)},g={inlineCode:"code",wrapper:function(e){var t=e.children;return n.a.createElement(n.a.Fragment,{},t)}},d=n.a.forwardRef((function(e,t){var r=e.components,o=e.mdxType,c=e.originalType,a=e.parentName,p=u(e,["components","mdxType","originalType","parentName"]),l=s(r),d=o,m=l["".concat(a,".").concat(d)]||l[d]||g[d]||c;return r?n.a.createElement(m,i(i({ref:t},p),{},{components:r})):n.a.createElement(m,i({ref:t},p))}));function m(e,t){var r=arguments,o=t&&t.mdxType;if("string"==typeof e||o){var c=r.length,a=new Array(c);a[0]=d;var i={};for(var u in t)hasOwnProperty.call(t,u)&&(i[u]=t[u]);i.originalType=e,i.mdxType="string"==typeof e?e:o,a[1]=i;for(var p=2;p=0||(n[r]=e[r]);return n}(e,t);if(Object.getOwnPropertySymbols){var c=Object.getOwnPropertySymbols(e);for(o=0;o=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(n[r]=e[r])}return n}var s=n.a.createContext({}),p=function(e){var t=n.a.useContext(s),r=t;return e&&(r="function"==typeof e?e(t):i(i({},t),e)),r},l=function(e){var t=p(e.components);return n.a.createElement(s.Provider,{value:t},e.children)},g={inlineCode:"code",wrapper:function(e){var t=e.children;return n.a.createElement(n.a.Fragment,{},t)}},d=n.a.forwardRef((function(e,t){var r=e.components,o=e.mdxType,c=e.originalType,a=e.parentName,s=u(e,["components","mdxType","originalType","parentName"]),l=p(r),d=o,m=l["".concat(a,".").concat(d)]||l[d]||g[d]||c;return r?n.a.createElement(m,i(i({ref:t},s),{},{components:r})):n.a.createElement(m,i({ref:t},s))}));function m(e,t){var r=arguments,o=t&&t.mdxType;if("string"==typeof e||o){var c=r.length,a=new Array(c);a[0]=d;var i={};for(var u in t)hasOwnProperty.call(t,u)&&(i[u]=t[u]);i.originalType=e,i.mdxType="string"==typeof e?e:o,a[1]=i;for(var s=2;s=0||(a[r]=e[r]);return a}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(a[r]=e[r])}return a}var m=a.a.createContext({}),u=function(e){var t=a.a.useContext(m),r=t;return e&&(r="function"==typeof e?e(t):c(c({},t),e)),r},s=function(e){var t=u(e.components);return a.a.createElement(m.Provider,{value:t},e.children)},b={inlineCode:"code",wrapper:function(e){var t=e.children;return a.a.createElement(a.a.Fragment,{},t)}},p=a.a.forwardRef((function(e,t){var r=e.components,n=e.mdxType,i=e.originalType,o=e.parentName,m=l(e,["components","mdxType","originalType","parentName"]),s=u(r),p=n,f=s["".concat(o,".").concat(p)]||s[p]||b[p]||i;return r?a.a.createElement(f,c(c({ref:t},m),{},{components:r})):a.a.createElement(f,c({ref:t},m))}));function f(e,t){var r=arguments,n=t&&t.mdxType;if("string"==typeof e||n){var i=r.length,o=new Array(i);o[0]=p;var c={};for(var l in t)hasOwnProperty.call(t,l)&&(c[l]=t[l]);c.originalType=e,c.mdxType="string"==typeof e?e:n,o[1]=c;for(var m=2;m=0||(a[r]=e[r]);return a}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(a[r]=e[r])}return a}var m=a.a.createContext({}),u=function(e){var t=a.a.useContext(m),r=t;return e&&(r="function"==typeof e?e(t):c(c({},t),e)),r},s=function(e){var t=u(e.components);return a.a.createElement(m.Provider,{value:t},e.children)},b={inlineCode:"code",wrapper:function(e){var t=e.children;return a.a.createElement(a.a.Fragment,{},t)}},p=a.a.forwardRef((function(e,t){var r=e.components,n=e.mdxType,i=e.originalType,o=e.parentName,m=l(e,["components","mdxType","originalType","parentName"]),s=u(r),p=n,f=s["".concat(o,".").concat(p)]||s[p]||b[p]||i;return r?a.a.createElement(f,c(c({ref:t},m),{},{components:r})):a.a.createElement(f,c({ref:t},m))}));function f(e,t){var r=arguments,n=t&&t.mdxType;if("string"==typeof e||n){var i=r.length,o=new Array(i);o[0]=p;var c={};for(var l in t)hasOwnProperty.call(t,l)&&(c[l]=t[l]);c.originalType=e,c.mdxType="string"==typeof e?e:n,o[1]=c;for(var m=2;m=0||(o[a]=e[a]);return o}(e,t);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,a)&&(o[a]=e[a])}return o}var s=o.a.createContext({}),p=function(e){var t=o.a.useContext(s),a=t;return e&&(a="function"==typeof e?e(t):l(l({},t),e)),a},d=function(e){var t=p(e.components);return o.a.createElement(s.Provider,{value:t},e.children)},u={inlineCode:"code",wrapper:function(e){var t=e.children;return o.a.createElement(o.a.Fragment,{},t)}},b=o.a.forwardRef((function(e,t){var a=e.components,n=e.mdxType,r=e.originalType,i=e.parentName,s=c(e,["components","mdxType","originalType","parentName"]),d=p(a),b=n,m=d["".concat(i,".").concat(b)]||d[b]||u[b]||r;return a?o.a.createElement(m,l(l({ref:t},s),{},{components:a})):o.a.createElement(m,l({ref:t},s))}));function m(e,t){var a=arguments,n=t&&t.mdxType;if("string"==typeof e||n){var r=a.length,i=new Array(r);i[0]=b;var l={};for(var c in t)hasOwnProperty.call(t,c)&&(l[c]=t[c]);l.originalType=e,l.mdxType="string"==typeof e?e:n,i[1]=l;for(var s=2;s=0||(r[a]=e[a]);return r}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,a)&&(r[a]=e[a])}return r}var c=r.a.createContext({}),p=function(e){var t=r.a.useContext(c),a=t;return e&&(a="function"==typeof e?e(t):l(l({},t),e)),a},d=function(e){var t=p(e.components);return r.a.createElement(c.Provider,{value:t},e.children)},u={inlineCode:"code",wrapper:function(e){var t=e.children;return r.a.createElement(r.a.Fragment,{},t)}},b=r.a.forwardRef((function(e,t){var a=e.components,n=e.mdxType,o=e.originalType,i=e.parentName,c=s(e,["components","mdxType","originalType","parentName"]),d=p(a),b=n,m=d["".concat(i,".").concat(b)]||d[b]||u[b]||o;return a?r.a.createElement(m,l(l({ref:t},c),{},{components:a})):r.a.createElement(m,l({ref:t},c))}));function m(e,t){var a=arguments,n=t&&t.mdxType;if("string"==typeof e||n){var o=a.length,i=new Array(o);i[0]=b;var l={};for(var s in t)hasOwnProperty.call(t,s)&&(l[s]=t[s]);l.originalType=e,l.mdxType="string"==typeof e?e:n,i[1]=l;for(var c=2;c=0||(r[n]=e[n]);return r}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(a=0;a=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(r[n]=e[n])}return r}var p=r.a.createContext({}),l=function(e){var t=r.a.useContext(p),n=t;return e&&(n="function"==typeof e?e(t):u(u({},t),e)),n},s=function(e){var t=l(e.components);return r.a.createElement(p.Provider,{value:t},e.children)},d={inlineCode:"code",wrapper:function(e){var t=e.children;return r.a.createElement(r.a.Fragment,{},t)}},c=r.a.forwardRef((function(e,t){var n=e.components,a=e.mdxType,o=e.originalType,i=e.parentName,p=b(e,["components","mdxType","originalType","parentName"]),s=l(n),c=a,m=s["".concat(i,".").concat(c)]||s[c]||d[c]||o;return n?r.a.createElement(m,u(u({ref:t},p),{},{components:n})):r.a.createElement(m,u({ref:t},p))}));function m(e,t){var n=arguments,a=t&&t.mdxType;if("string"==typeof e||a){var o=n.length,i=new Array(o);i[0]=c;var u={};for(var b in t)hasOwnProperty.call(t,b)&&(u[b]=t[b]);u.originalType=e,u.mdxType="string"==typeof e?e:a,i[1]=u;for(var p=2;p=0||(r[n]=e[n]);return r}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(a=0;a=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(r[n]=e[n])}return r}var p=r.a.createContext({}),l=function(e){var t=r.a.useContext(p),n=t;return e&&(n="function"==typeof e?e(t):u(u({},t),e)),n},s=function(e){var t=l(e.components);return r.a.createElement(p.Provider,{value:t},e.children)},d={inlineCode:"code",wrapper:function(e){var t=e.children;return r.a.createElement(r.a.Fragment,{},t)}},c=r.a.forwardRef((function(e,t){var n=e.components,a=e.mdxType,o=e.originalType,i=e.parentName,p=b(e,["components","mdxType","originalType","parentName"]),s=l(n),c=a,m=s["".concat(i,".").concat(c)]||s[c]||d[c]||o;return n?r.a.createElement(m,u(u({ref:t},p),{},{components:n})):r.a.createElement(m,u({ref:t},p))}));function m(e,t){var n=arguments,a=t&&t.mdxType;if("string"==typeof e||a){var o=n.length,i=new Array(o);i[0]=c;var u={};for(var b in t)hasOwnProperty.call(t,b)&&(u[b]=t[b]);u.originalType=e,u.mdxType="string"==typeof e?e:a,i[1]=u;for(var p=2;p\n
  • Spam
    • \n
  • Ham
    • \n
  • Eggs
    • \n\n'''\nmenu = '''\n
      \n{{#each dishes}}\n
    1. {{name}} costs {{price}}
      2. \n{{/each}}\n=0||(r[a]=e[a]);return r}(e,n);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(t=0;t=0||Object.prototype.propertyIsEnumerable.call(e,a)&&(r[a]=e[a])}return r}var u=r.a.createContext({}),s=function(e){var n=r.a.useContext(u),a=n;return e&&(a="function"==typeof e?e(n):l(l({},n),e)),a},p=function(e){var n=s(e.components);return r.a.createElement(u.Provider,{value:n},e.children)},m={inlineCode:"code",wrapper:function(e){var n=e.children;return r.a.createElement(r.a.Fragment,{},n)}},b=r.a.forwardRef((function(e,n){var a=e.components,t=e.mdxType,o=e.originalType,i=e.parentName,u=c(e,["components","mdxType","originalType","parentName"]),p=s(a),b=t,d=p["".concat(i,".").concat(b)]||p[b]||m[b]||o;return a?r.a.createElement(d,l(l({ref:n},u),{},{components:a})):r.a.createElement(d,l({ref:n},u))}));function d(e,n){var a=arguments,t=n&&n.mdxType;if("string"==typeof e||t){var o=a.length,i=new Array(o);i[0]=b;var l={};for(var c in n)hasOwnProperty.call(n,c)&&(l[c]=n[c]);l.originalType=e,l.mdxType="string"==typeof e?e:t,i[1]=l;for(var u=2;u\n
    2. Spam
      3. \n
    3. Ham
      4. \n
    4. Eggs
      5. \n
    \n'''\nmenu = '''\n
      \n{{#each dishes}}\n
    1. {{name}} costs {{price}}
      2. \n{{/each}}\n=0||(r[a]=e[a]);return r}(e,n);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(t=0;t=0||Object.prototype.propertyIsEnumerable.call(e,a)&&(r[a]=e[a])}return r}var u=r.a.createContext({}),s=function(e){var n=r.a.useContext(u),a=n;return e&&(a="function"==typeof e?e(n):l(l({},n),e)),a},p=function(e){var n=s(e.components);return r.a.createElement(u.Provider,{value:n},e.children)},m={inlineCode:"code",wrapper:function(e){var n=e.children;return r.a.createElement(r.a.Fragment,{},n)}},b=r.a.forwardRef((function(e,n){var a=e.components,t=e.mdxType,o=e.originalType,i=e.parentName,u=c(e,["components","mdxType","originalType","parentName"]),p=s(a),b=t,d=p["".concat(i,".").concat(b)]||p[b]||m[b]||o;return a?r.a.createElement(d,l(l({ref:n},u),{},{components:a})):r.a.createElement(d,l({ref:n},u))}));function d(e,n){var a=arguments,t=n&&n.mdxType;if("string"==typeof e||t){var o=a.length,i=new Array(o);i[0]=b;var l={};for(var c in n)hasOwnProperty.call(n,c)&&(l[c]=n[c]);l.originalType=e,l.mdxType="string"==typeof e?e:t,i[1]=l;for(var u=2;u=0||(a[r]=e[r]);return a}(e,n);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(t=0;t=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(a[r]=e[r])}return a}var c=a.a.createContext({}),m=function(e){var n=a.a.useContext(c),r=n;return e&&(r="function"==typeof e?e(n):l(l({},n),e)),r},d=function(e){var n=m(e.components);return a.a.createElement(c.Provider,{value:n},e.children)},u={inlineCode:"code",wrapper:function(e){var n=e.children;return a.a.createElement(a.a.Fragment,{},n)}},f=a.a.forwardRef((function(e,n){var r=e.components,t=e.mdxType,o=e.originalType,i=e.parentName,c=s(e,["components","mdxType","originalType","parentName"]),d=m(r),f=t,p=d["".concat(i,".").concat(f)]||d[f]||u[f]||o;return r?a.a.createElement(p,l(l({ref:n},c),{},{components:r})):a.a.createElement(p,l({ref:n},c))}));function p(e,n){var r=arguments,t=n&&n.mdxType;if("string"==typeof e||t){var o=r.length,i=new Array(o);i[0]=f;var l={};for(var s in n)hasOwnProperty.call(n,s)&&(l[s]=n[s]);l.originalType=e,l.mdxType="string"==typeof e?e:t,i[1]=l;for(var c=2;c=0||(a[r]=e[r]);return a}(e,n);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(t=0;t=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(a[r]=e[r])}return a}var c=a.a.createContext({}),m=function(e){var n=a.a.useContext(c),r=n;return e&&(r="function"==typeof e?e(n):s(s({},n),e)),r},d=function(e){var n=m(e.components);return a.a.createElement(c.Provider,{value:n},e.children)},u={inlineCode:"code",wrapper:function(e){var n=e.children;return a.a.createElement(a.a.Fragment,{},n)}},f=a.a.forwardRef((function(e,n){var r=e.components,t=e.mdxType,o=e.originalType,i=e.parentName,c=l(e,["components","mdxType","originalType","parentName"]),d=m(r),f=t,p=d["".concat(i,".").concat(f)]||d[f]||u[f]||o;return r?a.a.createElement(p,s(s({ref:n},c),{},{components:r})):a.a.createElement(p,s({ref:n},c))}));function p(e,n){var r=arguments,t=n&&n.mdxType;if("string"==typeof e||t){var o=r.length,i=new Array(o);i[0]=f;var s={};for(var l in n)hasOwnProperty.call(n,l)&&(s[l]=n[l]);s.originalType=e,s.mdxType="string"==typeof e?e:t,i[1]=s;for(var c=2;c 0.5 else 'BoxMultiplySolid'),\n notifications=('Off' if random.random() > 0.5 else 'On')) for i in range(100)\n]\n\n# Create columns for our issue table.\ncolumns = [\n ui.table_column(name='text', label='Issue'),\n ui.table_column(name='status', label='Status'),\n ui.table_column(name='notifications', label='Notifications'),\n ui.table_column(name='done', label='Done', cell_type=ui.icon_table_cell_type()),\n ui.table_column(name='views', label='Views'),\n ui.table_column(name='progress', label='Progress', cell_type=ui.progress_table_cell_type()),\n]\n\n\n@app('/demo')\nasync def serve(q: Q):\n q.page['form'] = ui.form_card(box='1 1 -1 11', items=[\n ui.table(\n name='issues',\n columns=columns,\n rows=[ui.table_row(\n name=issue.id,\n cells=[issue.text, issue.status, issue.notifications, issue.icon, str(issue.views), issue.progress]) for\n issue in issues],\n downloadable=True,\n )\n ])\n await q.page.save()\n")))}f.isMDXComponent=!0},292:function(e,n,t){"use strict";t.d(n,"a",(function(){return c})),t.d(n,"b",(function(){return A}));var i=t(0),r=t.n(i);function a(e,n,t){return n in e?Object.defineProperty(e,n,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[n]=t,e}function l(e,n){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);n&&(i=i.filter((function(n){return Object.getOwnPropertyDescriptor(e,n).enumerable}))),t.push.apply(t,i)}return t}function s(e){for(var n=1;n=0||(r[t]=e[t]);return r}(e,n);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(i=0;i=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(r[t]=e[t])}return r}var u=r.a.createContext({}),f=function(e){var n=r.a.useContext(u),t=n;return e&&(t="function"==typeof e?e(n):s(s({},n),e)),t},c=function(e){var n=f(e.components);return r.a.createElement(u.Provider,{value:n},e.children)},p={inlineCode:"code",wrapper:function(e){var n=e.children;return r.a.createElement(r.a.Fragment,{},n)}},d=r.a.forwardRef((function(e,n){var t=e.components,i=e.mdxType,a=e.originalType,l=e.parentName,u=o(e,["components","mdxType","originalType","parentName"]),c=f(t),d=i,A=c["".concat(l,".").concat(d)]||c[d]||p[d]||a;return t?r.a.createElement(A,s(s({ref:n},u),{},{components:t})):r.a.createElement(A,s({ref:n},u))}));function A(e,n){var t=arguments,i=n&&n.mdxType;if("string"==typeof e||i){var a=t.length,l=new Array(a);l[0]=d;var s={};for(var o in n)hasOwnProperty.call(n,o)&&(s[o]=n[o]);s.originalType=e,s.mdxType="string"==typeof e?e:i,l[1]=s;for(var u=2;u 0.5 else 'BoxMultiplySolid'),\n notifications=('Off' if random.random() > 0.5 else 'On')) for i in range(100)\n]\n\n# Create columns for our issue table.\ncolumns = [\n ui.table_column(name='text', label='Issue'),\n ui.table_column(name='status', label='Status'),\n ui.table_column(name='notifications', label='Notifications'),\n ui.table_column(name='done', label='Done', cell_type=ui.icon_table_cell_type()),\n ui.table_column(name='views', label='Views'),\n ui.table_column(name='progress', label='Progress', cell_type=ui.progress_table_cell_type()),\n]\n\n\nasync def serve(q: Q):\n q.page['form'] = ui.form_card(box='1 1 -1 11', items=[\n ui.table(\n name='issues',\n columns=columns,\n rows=[ui.table_row(\n name=issue.id,\n cells=[issue.text, issue.status, issue.notifications, issue.icon, str(issue.views), issue.progress]) for\n issue in issues],\n downloadable=True,\n )\n ])\n await q.page.save()\n\n\nlisten('/demo', serve)\n")))}f.isMDXComponent=!0},290:function(e,n,t){"use strict";t.d(n,"a",(function(){return c})),t.d(n,"b",(function(){return A}));var i=t(0),r=t.n(i);function a(e,n,t){return n in e?Object.defineProperty(e,n,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[n]=t,e}function l(e,n){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);n&&(i=i.filter((function(n){return Object.getOwnPropertyDescriptor(e,n).enumerable}))),t.push.apply(t,i)}return t}function s(e){for(var n=1;n=0||(r[t]=e[t]);return r}(e,n);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(i=0;i=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(r[t]=e[t])}return r}var u=r.a.createContext({}),f=function(e){var n=r.a.useContext(u),t=n;return e&&(t="function"==typeof e?e(n):s(s({},n),e)),t},c=function(e){var n=f(e.components);return r.a.createElement(u.Provider,{value:n},e.children)},d={inlineCode:"code",wrapper:function(e){var n=e.children;return r.a.createElement(r.a.Fragment,{},n)}},p=r.a.forwardRef((function(e,n){var t=e.components,i=e.mdxType,a=e.originalType,l=e.parentName,u=o(e,["components","mdxType","originalType","parentName"]),c=f(t),p=i,A=c["".concat(l,".").concat(p)]||c[p]||d[p]||a;return t?r.a.createElement(A,s(s({ref:n},u),{},{components:t})):r.a.createElement(A,s({ref:n},u))}));function A(e,n){var t=arguments,i=n&&n.mdxType;if("string"==typeof e||i){var a=t.length,l=new Array(a);l[0]=p;var s={};for(var o in n)hasOwnProperty.call(n,o)&&(s[o]=n[o]);s.originalType=e,s.mdxType="string"==typeof e?e:i,l[1]=s;for(var u=2;u=0||(a[n]=e[n]);return a}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(a[n]=e[n])}return a}var s=a.a.createContext({}),l=function(e){var t=a.a.useContext(s),n=t;return e&&(n="function"==typeof e?e(t):o(o({},t),e)),n},u=function(e){var t=l(e.components);return a.a.createElement(s.Provider,{value:t},e.children)},h={inlineCode:"code",wrapper:function(e){var t=e.children;return a.a.createElement(a.a.Fragment,{},t)}},m=a.a.forwardRef((function(e,t){var n=e.components,r=e.mdxType,i=e.originalType,p=e.parentName,s=c(e,["components","mdxType","originalType","parentName"]),u=l(n),m=r,g=u["".concat(p,".").concat(m)]||u[m]||h[m]||i;return n?a.a.createElement(g,o(o({ref:t},s),{},{components:n})):a.a.createElement(g,o({ref:t},s))}));function g(e,t){var n=arguments,r=t&&t.mdxType;if("string"==typeof e||r){var i=n.length,p=new Array(i);p[0]=m;var o={};for(var c in t)hasOwnProperty.call(t,c)&&(o[c]=t[c]);o.originalType=e,o.mdxType="string"==typeof e?e:r,p[1]=o;for(var s=2;s=0||(a[n]=e[n]);return a}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(a[n]=e[n])}return a}var s=a.a.createContext({}),l=function(e){var t=a.a.useContext(s),n=t;return e&&(n="function"==typeof e?e(t):p(p({},t),e)),n},u=function(e){var t=l(e.components);return a.a.createElement(s.Provider,{value:t},e.children)},h={inlineCode:"code",wrapper:function(e){var t=e.children;return a.a.createElement(a.a.Fragment,{},t)}},m=a.a.forwardRef((function(e,t){var n=e.components,r=e.mdxType,i=e.originalType,o=e.parentName,s=c(e,["components","mdxType","originalType","parentName"]),u=l(n),m=r,d=u["".concat(o,".").concat(m)]||u[m]||h[m]||i;return n?a.a.createElement(d,p(p({ref:t},s),{},{components:n})):a.a.createElement(d,p({ref:t},s))}));function d(e,t){var n=arguments,r=t&&t.mdxType;if("string"==typeof e||r){var i=n.length,o=new Array(i);o[0]=m;var p={};for(var c in t)hasOwnProperty.call(t,c)&&(p[c]=t[c]);p.originalType=e,p.mdxType="string"==typeof e?e:r,o[1]=p;for(var s=2;s=0||(r[n]=e[n]);return r}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(c=0;c=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(r[n]=e[n])}return r}var l=r.a.createContext({}),s=function(e){var t=r.a.useContext(l),n=t;return e&&(n="function"==typeof e?e(t):i(i({},t),e)),n},b=function(e){var t=s(e.components);return r.a.createElement(l.Provider,{value:t},e.children)},d={inlineCode:"code",wrapper:function(e){var t=e.children;return r.a.createElement(r.a.Fragment,{},t)}},p=r.a.forwardRef((function(e,t){var n=e.components,c=e.mdxType,a=e.originalType,o=e.parentName,l=u(e,["components","mdxType","originalType","parentName"]),b=s(n),p=c,m=b["".concat(o,".").concat(p)]||b[p]||d[p]||a;return n?r.a.createElement(m,i(i({ref:t},l),{},{components:n})):r.a.createElement(m,i({ref:t},l))}));function m(e,t){var n=arguments,c=t&&t.mdxType;if("string"==typeof e||c){var a=n.length,o=new Array(a);o[0]=p;var i={};for(var u in t)hasOwnProperty.call(t,u)&&(i[u]=t[u]);i.originalType=e,i.mdxType="string"==typeof e?e:c,o[1]=i;for(var l=2;l=0||(r[n]=e[n]);return r}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(c=0;c=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(r[n]=e[n])}return r}var u=r.a.createContext({}),l=function(e){var t=r.a.useContext(u),n=t;return e&&(n="function"==typeof e?e(t):i(i({},t),e)),n},b=function(e){var t=l(e.components);return r.a.createElement(u.Provider,{value:t},e.children)},d={inlineCode:"code",wrapper:function(e){var t=e.children;return r.a.createElement(r.a.Fragment,{},t)}},p=r.a.forwardRef((function(e,t){var n=e.components,c=e.mdxType,a=e.originalType,o=e.parentName,u=s(e,["components","mdxType","originalType","parentName"]),b=l(n),p=c,m=b["".concat(o,".").concat(p)]||b[p]||d[p]||a;return n?r.a.createElement(m,i(i({ref:t},u),{},{components:n})):r.a.createElement(m,i({ref:t},u))}));function m(e,t){var n=arguments,c=t&&t.mdxType;if("string"==typeof e||c){var a=n.length,o=new Array(a);o[0]=p;var i={};for(var s in t)hasOwnProperty.call(t,s)&&(i[s]=t[s]);i.originalType=e,i.mdxType="string"==typeof e?e:c,o[1]=i;for(var u=2;u=0||(a[r]=e[r]);return a}(e,t);if(Object.getOwnPropertySymbols){var p=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(a[r]=e[r])}return a}var c=a.a.createContext({}),l=function(e){var t=a.a.useContext(c),r=t;return e&&(r="function"==typeof e?e(t):s(s({},t),e)),r},u=function(e){var t=l(e.components);return a.a.createElement(c.Provider,{value:t},e.children)},m={inlineCode:"code",wrapper:function(e){var t=e.children;return a.a.createElement(a.a.Fragment,{},t)}},b=a.a.forwardRef((function(e,t){var r=e.components,n=e.mdxType,p=e.originalType,o=e.parentName,c=i(e,["components","mdxType","originalType","parentName"]),u=l(r),b=n,d=u["".concat(o,".").concat(b)]||u[b]||m[b]||p;return r?a.a.createElement(d,s(s({ref:t},c),{},{components:r})):a.a.createElement(d,s({ref:t},c))}));function d(e,t){var r=arguments,n=t&&t.mdxType;if("string"==typeof e||n){var p=r.length,o=new Array(p);o[0]=b;var s={};for(var i in t)hasOwnProperty.call(t,i)&&(s[i]=t[i]);s.originalType=e,s.mdxType="string"==typeof e?e:n,o[1]=s;for(var c=2;c=0||(a[r]=e[r]);return a}(e,t);if(Object.getOwnPropertySymbols){var p=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(a[r]=e[r])}return a}var c=a.a.createContext({}),u=function(e){var t=a.a.useContext(c),r=t;return e&&(r="function"==typeof e?e(t):i(i({},t),e)),r},l=function(e){var t=u(e.components);return a.a.createElement(c.Provider,{value:t},e.children)},m={inlineCode:"code",wrapper:function(e){var t=e.children;return a.a.createElement(a.a.Fragment,{},t)}},b=a.a.forwardRef((function(e,t){var r=e.components,n=e.mdxType,p=e.originalType,o=e.parentName,c=s(e,["components","mdxType","originalType","parentName"]),l=u(r),b=n,d=l["".concat(o,".").concat(b)]||l[b]||m[b]||p;return r?a.a.createElement(d,i(i({ref:t},c),{},{components:r})):a.a.createElement(d,i({ref:t},c))}));function d(e,t){var r=arguments,n=t&&t.mdxType;if("string"==typeof e||n){var p=r.length,o=new Array(p);o[0]=b;var i={};for(var s in t)hasOwnProperty.call(t,s)&&(i[s]=t[s]);i.originalType=e,i.mdxType="string"==typeof e?e:n,o[1]=i;for(var c=2;c=0||(r[n]=e[n]);return r}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(a=0;a=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(r[n]=e[n])}return r}var l=r.a.createContext({}),b=function(e){var t=r.a.useContext(l),n=t;return e&&(n="function"==typeof e?e(t):c(c({},t),e)),n},s=function(e){var t=b(e.components);return r.a.createElement(l.Provider,{value:t},e.children)},u={inlineCode:"code",wrapper:function(e){var t=e.children;return r.a.createElement(r.a.Fragment,{},t)}},m=r.a.forwardRef((function(e,t){var n=e.components,a=e.mdxType,o=e.originalType,i=e.parentName,l=p(e,["components","mdxType","originalType","parentName"]),s=b(n),m=a,d=s["".concat(i,".").concat(m)]||s[m]||u[m]||o;return n?r.a.createElement(d,c(c({ref:t},l),{},{components:n})):r.a.createElement(d,c({ref:t},l))}));function d(e,t){var n=arguments,a=t&&t.mdxType;if("string"==typeof e||a){var o=n.length,i=new Array(o);i[0]=m;var c={};for(var p in t)hasOwnProperty.call(t,p)&&(c[p]=t[p]);c.originalType=e,c.mdxType="string"==typeof e?e:a,i[1]=c;for(var l=2;l=0||(o[r]=e[r]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(o[r]=e[r])}return o}var l=o.a.createContext({}),s=function(e){var t=o.a.useContext(l),r=t;return e&&(r="function"==typeof e?e(t):u(u({},t),e)),r},p=function(e){var t=s(e.components);return o.a.createElement(l.Provider,{value:t},e.children)},m={inlineCode:"code",wrapper:function(e){var t=e.children;return o.a.createElement(o.a.Fragment,{},t)}},f=o.a.forwardRef((function(e,t){var r=e.components,n=e.mdxType,a=e.originalType,i=e.parentName,l=c(e,["components","mdxType","originalType","parentName"]),p=s(r),f=n,b=p["".concat(i,".").concat(f)]||p[f]||m[f]||a;return r?o.a.createElement(b,u(u({ref:t},l),{},{components:r})):o.a.createElement(b,u({ref:t},l))}));function b(e,t){var r=arguments,n=t&&t.mdxType;if("string"==typeof e||n){var a=r.length,i=new Array(a);i[0]=f;var u={};for(var c in t)hasOwnProperty.call(t,c)&&(u[c]=t[c]);u.originalType=e,u.mdxType="string"==typeof e?e:n,i[1]=u;for(var l=2;l=0||(a[n]=e[n]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(a[n]=e[n])}return a}var p=a.a.createContext({}),s=function(e){var t=a.a.useContext(p),n=t;return e&&(n="function"==typeof e?e(t):i(i({},t),e)),n},u=function(e){var t=s(e.components);return a.a.createElement(p.Provider,{value:t},e.children)},m={inlineCode:"code",wrapper:function(e){var t=e.children;return a.a.createElement(a.a.Fragment,{},t)}},f=a.a.forwardRef((function(e,t){var n=e.components,r=e.mdxType,o=e.originalType,l=e.parentName,p=c(e,["components","mdxType","originalType","parentName"]),u=s(n),f=r,b=u["".concat(l,".").concat(f)]||u[f]||m[f]||o;return n?a.a.createElement(b,i(i({ref:t},p),{},{components:n})):a.a.createElement(b,i({ref:t},p))}));function b(e,t){var n=arguments,r=t&&t.mdxType;if("string"==typeof e||r){var o=n.length,l=new Array(o);l[0]=f;var i={};for(var c in t)hasOwnProperty.call(t,c)&&(i[c]=t[c]);i.originalType=e,i.mdxType="string"==typeof e?e:r,l[1]=i;for(var p=2;p=0||(a[n]=e[n]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(a[n]=e[n])}return a}var p=a.a.createContext({}),s=function(e){var t=a.a.useContext(p),n=t;return e&&(n="function"==typeof e?e(t):i(i({},t),e)),n},u=function(e){var t=s(e.components);return a.a.createElement(p.Provider,{value:t},e.children)},m={inlineCode:"code",wrapper:function(e){var t=e.children;return a.a.createElement(a.a.Fragment,{},t)}},f=a.a.forwardRef((function(e,t){var n=e.components,r=e.mdxType,o=e.originalType,l=e.parentName,p=c(e,["components","mdxType","originalType","parentName"]),u=s(n),f=r,b=u["".concat(l,".").concat(f)]||u[f]||m[f]||o;return n?a.a.createElement(b,i(i({ref:t},p),{},{components:n})):a.a.createElement(b,i({ref:t},p))}));function b(e,t){var n=arguments,r=t&&t.mdxType;if("string"==typeof e||r){var o=n.length,l=new Array(o);l[0]=f;var i={};for(var c in t)hasOwnProperty.call(t,c)&&(i[c]=t[c]);i.originalType=e,i.mdxType="string"==typeof e?e:r,l[1]=i;for(var p=2;p "Open...", then choose ',Object(o.b)("inlineCode",{parentName:"li"},"$HOME/wave-apps"),"."),Object(o.b)("li",{parentName:"ol"},"Right-click on ",Object(o.b)("inlineCode",{parentName:"li"},"wave-apps"),' in the "Project" tree, then click "New" -> "Python File".'),Object(o.b)("li",{parentName:"ol"},"Enter a file name, say, ",Object(o.b)("inlineCode",{parentName:"li"},"hello_world.py"),"."),Object(o.b)("li",{parentName:"ol"},"Write some code (see sample below)."),Object(o.b)("li",{parentName:"ol"},'Right-click anywhere inside the file and choose "Run hello_world" or "Debug hello_world".')),Object(o.b)("h2",{id:"using-visual-studio-code"},"Using Visual Studio Code"),Object(o.b)("ol",null,Object(o.b)("li",{parentName:"ol"},"Launch Visual Studio Code"),Object(o.b)("li",{parentName:"ol"},'Click "File" -> "Open...", then choose ',Object(o.b)("inlineCode",{parentName:"li"},"$HOME/wave-apps"),"."),Object(o.b)("li",{parentName:"ol"},'Click "File" -> "New File"; save the file as, say, ',Object(o.b)("inlineCode",{parentName:"li"},"hello_world.py"),"."),Object(o.b)("li",{parentName:"ol"},'You should now get a prompt asking if you want to install extensions for Python. Click "Install".'),Object(o.b)("li",{parentName:"ol"},"Write some code (see sample below)."),Object(o.b)("li",{parentName:"ol"},"Hit ",Object(o.b)("inlineCode",{parentName:"li"},"Ctrl+F5")," to run, or ",Object(o.b)("inlineCode",{parentName:"li"},"F5")," to debug.")),Object(o.b)("h2",{id:"a-hello-world-sample"},"A hello world sample"),Object(o.b)("pre",null,Object(o.b)("code",Object(a.a)({parentName:"pre"},{className:"language-py",metastring:'title="$HOME/wave-apps/hello_world.py"',title:'"$HOME/wave-apps/hello_world.py"'}),"from h2o_wave import site, ui\n\n# Grab a reference to the page at route '/hello'\npage = site['/hello']\n\n# Add a markdown card to the page.\npage['quote'] = ui.markdown_card(\n box='1 1 2 2',\n title='Hello World',\n content='\"The Internet? Is that thing still around?\" - *Homer Simpson*',\n)\n\n# Finally, save the page.\npage.save()\n")))}s.isMDXComponent=!0},290:function(e,t,n){"use strict";n.d(t,"a",(function(){return d})),n.d(t,"b",(function(){return u}));var a=n(0),r=n.n(a);function o(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function i(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);t&&(a=a.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,a)}return n}function l(e){for(var t=1;t=0||(r[n]=e[n]);return r}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(a=0;a=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(r[n]=e[n])}return r}var p=r.a.createContext({}),s=function(e){var t=r.a.useContext(p),n=t;return e&&(n="function"==typeof e?e(t):l(l({},t),e)),n},d=function(e){var t=s(e.components);return r.a.createElement(p.Provider,{value:t},e.children)},b={inlineCode:"code",wrapper:function(e){var t=e.children;return r.a.createElement(r.a.Fragment,{},t)}},m=r.a.forwardRef((function(e,t){var n=e.components,a=e.mdxType,o=e.originalType,i=e.parentName,p=c(e,["components","mdxType","originalType","parentName"]),d=s(n),m=a,u=d["".concat(i,".").concat(m)]||d[m]||b[m]||o;return n?r.a.createElement(u,l(l({ref:t},p),{},{components:n})):r.a.createElement(u,l({ref:t},p))}));function u(e,t){var n=arguments,a=t&&t.mdxType;if("string"==typeof e||a){var o=n.length,i=new Array(o);i[0]=m;var l={};for(var c in t)hasOwnProperty.call(t,c)&&(l[c]=t[c]);l.originalType=e,l.mdxType="string"==typeof e?e:a,i[1]=l;for(var p=2;p "Open...", then choose ',Object(r.b)("inlineCode",{parentName:"li"},"$HOME/wave-apps"),"."),Object(r.b)("li",{parentName:"ol"},"Right-click on ",Object(r.b)("inlineCode",{parentName:"li"},"wave-apps"),' in the "Project" tree, then click "New" -> "Python File".'),Object(r.b)("li",{parentName:"ol"},"Enter a file name, say, ",Object(r.b)("inlineCode",{parentName:"li"},"foo.py"),"."),Object(r.b)("li",{parentName:"ol"},"Write some code (see sample below)."),Object(r.b)("li",{parentName:"ol"},'Right-click anywhere inside the file and choose "Run foo" or "Debug foo".')),Object(r.b)("h3",{id:"using-visual-studio-code"},"Using Visual Studio Code"),Object(r.b)("ol",null,Object(r.b)("li",{parentName:"ol"},"Launch Visual Studio Code"),Object(r.b)("li",{parentName:"ol"},'Click "File" -> "Open...", then choose ',Object(r.b)("inlineCode",{parentName:"li"},"$HOME/wave-apps"),"."),Object(r.b)("li",{parentName:"ol"},'Click "File" -> "New File"; save the file as, say, ',Object(r.b)("inlineCode",{parentName:"li"},"foo.py"),"."),Object(r.b)("li",{parentName:"ol"},'You should now get a prompt asking if you want to install extensions for Python. Click "Install".'),Object(r.b)("li",{parentName:"ol"},"Write some code (see sample below)."),Object(r.b)("li",{parentName:"ol"},"Hit ",Object(r.b)("inlineCode",{parentName:"li"},"Ctrl+F5")," to run, or ",Object(r.b)("inlineCode",{parentName:"li"},"F5")," to debug.")),Object(r.b)("h2",{id:"debugging-apps"},"Debugging Apps"),Object(r.b)("p",null,"To debug Wave apps, set your IDE or editor's configuration to execute the command ",Object(r.b)("inlineCode",{parentName:"p"},"python -m h2o_wave run --no-reload foo")," instead of ",Object(r.b)("inlineCode",{parentName:"p"},"python foo.py"),"."),Object(r.b)("div",{className:"admonition admonition-tip alert alert--success"},Object(r.b)("div",Object(a.a)({parentName:"div"},{className:"admonition-heading"}),Object(r.b)("h5",{parentName:"div"},Object(r.b)("span",Object(a.a)({parentName:"h5"},{className:"admonition-icon"}),Object(r.b)("svg",Object(a.a)({parentName:"span"},{xmlns:"http://www.w3.org/2000/svg",width:"12",height:"16",viewBox:"0 0 12 16"}),Object(r.b)("path",Object(a.a)({parentName:"svg"},{fillRule:"evenodd",d:"M6.5 0C3.48 0 1 2.19 1 5c0 .92.55 2.25 1 3 1.34 2.25 1.78 2.78 2 4v1h5v-1c.22-1.22.66-1.75 2-4 .45-.75 1-2.08 1-3 0-2.81-2.48-5-5.5-5zm3.64 7.48c-.25.44-.47.8-.67 1.11-.86 1.41-1.25 2.06-1.45 3.23-.02.05-.02.11-.02.17H5c0-.06 0-.13-.02-.17-.2-1.17-.59-1.83-1.45-3.23-.2-.31-.42-.67-.67-1.11C2.44 6.78 2 5.65 2 5c0-2.2 2.02-4 4.5-4 1.22 0 2.36.42 3.22 1.19C10.55 2.94 11 3.94 11 5c0 .66-.44 1.78-.86 2.48zM4 14h5c-.23 1.14-1.3 2-2.5 2s-2.27-.86-2.5-2z"})))),"tip")),Object(r.b)("div",Object(a.a)({parentName:"div"},{className:"admonition-content"}),Object(r.b)("p",{parentName:"div"},"The command ",Object(r.b)("inlineCode",{parentName:"p"},"wave run --no-reload foo")," is equivalent to ",Object(r.b)("inlineCode",{parentName:"p"},"python -m h2o_wave run --no-reload foo"),"."))),Object(r.b)("h3",{id:"using-pycharm-1"},"Using PyCharm"),Object(r.b)("ul",null,Object(r.b)("li",{parentName:"ul"},'Open the "Run/Debug Configurations" dialog for your script.'),Object(r.b)("li",{parentName:"ul"},'Under "Configuration", change the "Script path" dropdown to "Module name".'),Object(r.b)("li",{parentName:"ul"},'Set "Module name" to ',Object(r.b)("inlineCode",{parentName:"li"},"h2o_wave"),"."),Object(r.b)("li",{parentName:"ul"},'Set "Parameters" to ',Object(r.b)("inlineCode",{parentName:"li"},"start foo")," (assuming your app's source code is in ",Object(r.b)("inlineCode",{parentName:"li"},"foo.py"),")")))}b.isMDXComponent=!0},292:function(e,t,n){"use strict";n.d(t,"a",(function(){return s})),n.d(t,"b",(function(){return u}));var a=n(0),o=n.n(a);function r(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function i(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);t&&(a=a.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,a)}return n}function c(e){for(var t=1;t=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);for(a=0;a=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var p=o.a.createContext({}),b=function(e){var t=o.a.useContext(p),n=t;return e&&(n="function"==typeof e?e(t):c(c({},t),e)),n},s=function(e){var t=b(e.components);return o.a.createElement(p.Provider,{value:t},e.children)},m={inlineCode:"code",wrapper:function(e){var t=e.children;return o.a.createElement(o.a.Fragment,{},t)}},d=o.a.forwardRef((function(e,t){var n=e.components,a=e.mdxType,r=e.originalType,i=e.parentName,p=l(e,["components","mdxType","originalType","parentName"]),s=b(n),d=a,u=s["".concat(i,".").concat(d)]||s[d]||m[d]||r;return n?o.a.createElement(u,c(c({ref:t},p),{},{components:n})):o.a.createElement(u,c({ref:t},p))}));function u(e,t){var n=arguments,a=t&&t.mdxType;if("string"==typeof e||a){var r=n.length,i=new Array(r);i[0]=d;var c={};for(var l in t)hasOwnProperty.call(t,l)&&(c[l]=t[l]);c.originalType=e,c.mdxType="string"==typeof e?e:a,i[1]=c;for(var p=2;p=0||(r[t]=e[t]);return r}(e,n);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(a=0;a=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(r[t]=e[t])}return r}var p=r.a.createContext({}),s=function(e){var n=r.a.useContext(p),t=n;return e&&(t="function"==typeof e?e(n):l(l({},n),e)),t},d=function(e){var n=s(e.components);return r.a.createElement(p.Provider,{value:n},e.children)},m={inlineCode:"code",wrapper:function(e){var n=e.children;return r.a.createElement(r.a.Fragment,{},n)}},u=r.a.forwardRef((function(e,n){var t=e.components,a=e.mdxType,o=e.originalType,c=e.parentName,p=i(e,["components","mdxType","originalType","parentName"]),d=s(t),u=a,f=d["".concat(c,".").concat(u)]||d[u]||m[u]||o;return t?r.a.createElement(f,l(l({ref:n},p),{},{components:t})):r.a.createElement(f,l({ref:n},p))}));function f(e,n){var t=arguments,a=n&&n.mdxType;if("string"==typeof e||a){var o=t.length,c=new Array(o);c[0]=u;var l={};for(var i in n)hasOwnProperty.call(n,i)&&(l[i]=n[i]);l.originalType=e,l.mdxType="string"==typeof e?e:a,c[1]=l;for(var p=2;p=0||(r[t]=e[t]);return r}(e,n);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(a=0;a=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(r[t]=e[t])}return r}var p=r.a.createContext({}),s=function(e){var n=r.a.useContext(p),t=n;return e&&(t="function"==typeof e?e(n):l(l({},n),e)),t},d=function(e){var n=s(e.components);return r.a.createElement(p.Provider,{value:n},e.children)},m={inlineCode:"code",wrapper:function(e){var n=e.children;return r.a.createElement(r.a.Fragment,{},n)}},u=r.a.forwardRef((function(e,n){var t=e.components,a=e.mdxType,o=e.originalType,c=e.parentName,p=i(e,["components","mdxType","originalType","parentName"]),d=s(t),u=a,f=d["".concat(c,".").concat(u)]||d[u]||m[u]||o;return t?r.a.createElement(f,l(l({ref:n},p),{},{components:t})):r.a.createElement(f,l({ref:n},p))}));function f(e,n){var t=arguments,a=n&&n.mdxType;if("string"==typeof e||a){var o=t.length,c=new Array(o);c[0]=u;var l={};for(var i in n)hasOwnProperty.call(n,i)&&(l[i]=n[i]);l.originalType=e,l.mdxType="string"==typeof e?e:a,c[1]=l;for(var p=2;p 0:\n form = q.page['example']\n form.items = items\n else:\n q.page['example'] = ui.form_card(box='1 1 12 10', items=items)\n\n await q.page.save()\n\n\nlisten('/demo', serve, mode='broadcast')\n")))}l.isMDXComponent=!0},290:function(e,t,n){"use strict";n.d(t,"a",(function(){return p})),n.d(t,"b",(function(){return m}));var r=n(0),a=n.n(r);function o(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function c(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function i(e){for(var t=1;t=0||(a[n]=e[n]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(a[n]=e[n])}return a}var u=a.a.createContext({}),l=function(e){var t=a.a.useContext(u),n=t;return e&&(n="function"==typeof e?e(t):i(i({},t),e)),n},p=function(e){var t=l(e.components);return a.a.createElement(u.Provider,{value:t},e.children)},d={inlineCode:"code",wrapper:function(e){var t=e.children;return a.a.createElement(a.a.Fragment,{},t)}},b=a.a.forwardRef((function(e,t){var n=e.components,r=e.mdxType,o=e.originalType,c=e.parentName,u=s(e,["components","mdxType","originalType","parentName"]),p=l(n),b=r,m=p["".concat(c,".").concat(b)]||p[b]||d[b]||o;return n?a.a.createElement(m,i(i({ref:t},u),{},{components:n})):a.a.createElement(m,i({ref:t},u))}));function m(e,t){var n=arguments,r=t&&t.mdxType;if("string"==typeof e||r){var o=n.length,c=new Array(o);c[0]=b;var i={};for(var s in t)hasOwnProperty.call(t,s)&&(i[s]=t[s]);i.originalType=e,i.mdxType="string"==typeof e?e:r,c[1]=i;for(var u=2;u 0:\n form = q.page['example']\n form.items = items\n else:\n q.page['example'] = ui.form_card(box='1 1 12 10', items=items)\n\n await q.page.save()\n")))}p.isMDXComponent=!0},292:function(e,t,n){"use strict";n.d(t,"a",(function(){return l})),n.d(t,"b",(function(){return b}));var r=n(0),a=n.n(r);function o(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function c(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function i(e){for(var t=1;t=0||(a[n]=e[n]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(a[n]=e[n])}return a}var u=a.a.createContext({}),p=function(e){var t=a.a.useContext(u),n=t;return e&&(n="function"==typeof e?e(t):i(i({},t),e)),n},l=function(e){var t=p(e.components);return a.a.createElement(u.Provider,{value:t},e.children)},d={inlineCode:"code",wrapper:function(e){var t=e.children;return a.a.createElement(a.a.Fragment,{},t)}},m=a.a.forwardRef((function(e,t){var n=e.components,r=e.mdxType,o=e.originalType,c=e.parentName,u=s(e,["components","mdxType","originalType","parentName"]),l=p(n),m=r,b=l["".concat(c,".").concat(m)]||l[m]||d[m]||o;return n?a.a.createElement(b,i(i({ref:t},u),{},{components:n})):a.a.createElement(b,i({ref:t},u))}));function b(e,t){var n=arguments,r=t&&t.mdxType;if("string"==typeof e||r){var o=n.length,c=new Array(o);c[0]=m;var i={};for(var s in t)hasOwnProperty.call(t,s)&&(i[s]=t[s]);i.originalType=e,i.mdxType="string"==typeof e?e:r,c[1]=i;for(var u=2;u=0||(a[r]=e[r]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(a[r]=e[r])}return a}var s=a.a.createContext({}),l=function(e){var t=a.a.useContext(s),r=t;return e&&(r="function"==typeof e?e(t):i(i({},t),e)),r},u=function(e){var t=l(e.components);return a.a.createElement(s.Provider,{value:t},e.children)},f={inlineCode:"code",wrapper:function(e){var t=e.children;return a.a.createElement(a.a.Fragment,{},t)}},m=a.a.forwardRef((function(e,t){var r=e.components,n=e.mdxType,o=e.originalType,c=e.parentName,s=p(e,["components","mdxType","originalType","parentName"]),u=l(r),m=n,b=u["".concat(c,".").concat(m)]||u[m]||f[m]||o;return r?a.a.createElement(b,i(i({ref:t},s),{},{components:r})):a.a.createElement(b,i({ref:t},s))}));function b(e,t){var r=arguments,n=t&&t.mdxType;if("string"==typeof e||n){var o=r.length,c=new Array(o);c[0]=m;var i={};for(var p in t)hasOwnProperty.call(t,p)&&(i[p]=t[p]);i.originalType=e,i.mdxType="string"==typeof e?e:n,c[1]=i;for(var s=2;s=0||(a[r]=e[r]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(a[r]=e[r])}return a}var s=a.a.createContext({}),l=function(e){var t=a.a.useContext(s),r=t;return e&&(r="function"==typeof e?e(t):i(i({},t),e)),r},u=function(e){var t=l(e.components);return a.a.createElement(s.Provider,{value:t},e.children)},f={inlineCode:"code",wrapper:function(e){var t=e.children;return a.a.createElement(a.a.Fragment,{},t)}},m=a.a.forwardRef((function(e,t){var r=e.components,n=e.mdxType,o=e.originalType,c=e.parentName,s=p(e,["components","mdxType","originalType","parentName"]),u=l(r),m=n,b=u["".concat(c,".").concat(m)]||u[m]||f[m]||o;return r?a.a.createElement(b,i(i({ref:t},s),{},{components:r})):a.a.createElement(b,i({ref:t},s))}));function b(e,t){var r=arguments,n=t&&t.mdxType;if("string"==typeof e||n){var o=r.length,c=new Array(o);c[0]=m;var i={};for(var p in t)hasOwnProperty.call(t,p)&&(i[p]=t[p]);i.originalType=e,i.mdxType="string"==typeof e?e:n,c[1]=i;for(var s=2;s=0||(a[r]=e[r]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(a[r]=e[r])}return a}var l=a.a.createContext({}),s=function(e){var t=a.a.useContext(l),r=t;return e&&(r="function"==typeof e?e(t):p(p({},t),e)),r},u=function(e){var t=s(e.components);return a.a.createElement(l.Provider,{value:t},e.children)},f={inlineCode:"code",wrapper:function(e){var t=e.children;return a.a.createElement(a.a.Fragment,{},t)}},m=a.a.forwardRef((function(e,t){var r=e.components,n=e.mdxType,o=e.originalType,i=e.parentName,l=c(e,["components","mdxType","originalType","parentName"]),u=s(r),m=n,d=u["".concat(i,".").concat(m)]||u[m]||f[m]||o;return r?a.a.createElement(d,p(p({ref:t},l),{},{components:r})):a.a.createElement(d,p({ref:t},l))}));function d(e,t){var r=arguments,n=t&&t.mdxType;if("string"==typeof e||n){var o=r.length,i=new Array(o);i[0]=m;var p={};for(var c in t)hasOwnProperty.call(t,c)&&(p[c]=t[c]);p.originalType=e,p.mdxType="string"==typeof e?e:n,i[1]=p;for(var l=2;l=0||(a[r]=e[r]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(a[r]=e[r])}return a}var l=a.a.createContext({}),s=function(e){var t=a.a.useContext(l),r=t;return e&&(r="function"==typeof e?e(t):p(p({},t),e)),r},u=function(e){var t=s(e.components);return a.a.createElement(l.Provider,{value:t},e.children)},f={inlineCode:"code",wrapper:function(e){var t=e.children;return a.a.createElement(a.a.Fragment,{},t)}},m=a.a.forwardRef((function(e,t){var r=e.components,n=e.mdxType,o=e.originalType,i=e.parentName,l=c(e,["components","mdxType","originalType","parentName"]),u=s(r),m=n,d=u["".concat(i,".").concat(m)]||u[m]||f[m]||o;return r?a.a.createElement(d,p(p({ref:t},l),{},{components:r})):a.a.createElement(d,p({ref:t},l))}));function d(e,t){var r=arguments,n=t&&t.mdxType;if("string"==typeof e||n){var o=r.length,i=new Array(o);i[0]=m;var p={};for(var c in t)hasOwnProperty.call(t,c)&&(p[c]=t[c]);p.originalType=e,p.mdxType="string"==typeof e?e:n,i[1]=p;for(var l=2;l=0||(a[t]=e[t]);return a}(e,n);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(a[t]=e[t])}return a}var l=a.a.createContext({}),s=function(e){var n=a.a.useContext(l),t=n;return e&&(t="function"==typeof e?e(n):c(c({},n),e)),t},p=function(e){var n=s(e.components);return a.a.createElement(l.Provider,{value:n},e.children)},b={inlineCode:"code",wrapper:function(e){var n=e.children;return a.a.createElement(a.a.Fragment,{},n)}},m=a.a.forwardRef((function(e,n){var t=e.components,r=e.mdxType,o=e.originalType,i=e.parentName,l=u(e,["components","mdxType","originalType","parentName"]),p=s(t),m=r,d=p["".concat(i,".").concat(m)]||p[m]||b[m]||o;return t?a.a.createElement(d,c(c({ref:n},l),{},{components:t})):a.a.createElement(d,c({ref:n},l))}));function d(e,n){var t=arguments,r=n&&n.mdxType;if("string"==typeof e||r){var o=t.length,i=new Array(o);i[0]=m;var c={};for(var u in n)hasOwnProperty.call(n,u)&&(c[u]=n[u]);c.originalType=e,c.mdxType="string"==typeof e?e:r,i[1]=c;for(var l=2;l=0||(o[t]=e[t]);return o}(e,n);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(o[t]=e[t])}return o}var s=o.a.createContext({}),u=function(e){var n=o.a.useContext(s),t=n;return e&&(t="function"==typeof e?e(n):c(c({},n),e)),t},p=function(e){var n=u(e.components);return o.a.createElement(s.Provider,{value:n},e.children)},b={inlineCode:"code",wrapper:function(e){var n=e.children;return o.a.createElement(o.a.Fragment,{},n)}},m=o.a.forwardRef((function(e,n){var t=e.components,r=e.mdxType,a=e.originalType,i=e.parentName,s=l(e,["components","mdxType","originalType","parentName"]),p=u(t),m=r,d=p["".concat(i,".").concat(m)]||p[m]||b[m]||a;return t?o.a.createElement(d,c(c({ref:n},s),{},{components:t})):o.a.createElement(d,c({ref:n},s))}));function d(e,n){var t=arguments,r=n&&n.mdxType;if("string"==typeof e||r){var a=t.length,i=new Array(a);i[0]=m;var c={};for(var l in n)hasOwnProperty.call(n,l)&&(c[l]=n[l]);c.originalType=e,c.mdxType="string"==typeof e?e:r,i[1]=c;for(var s=2;s=0||(i[n]=e[n]);return i}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(a=0;a=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(i[n]=e[n])}return i}var l=i.a.createContext({}),s=function(e){var t=i.a.useContext(l),n=t;return e&&(n="function"==typeof e?e(t):c(c({},t),e)),n},p=function(e){var t=s(e.components);return i.a.createElement(l.Provider,{value:t},e.children)},d={inlineCode:"code",wrapper:function(e){var t=e.children;return i.a.createElement(i.a.Fragment,{},t)}},u=i.a.forwardRef((function(e,t){var n=e.components,a=e.mdxType,o=e.originalType,r=e.parentName,l=b(e,["components","mdxType","originalType","parentName"]),p=s(n),u=a,m=p["".concat(r,".").concat(u)]||p[u]||d[u]||o;return n?i.a.createElement(m,c(c({ref:t},l),{},{components:n})):i.a.createElement(m,c({ref:t},l))}));function m(e,t){var n=arguments,a=t&&t.mdxType;if("string"==typeof e||a){var o=n.length,r=new Array(o);r[0]=u;var c={};for(var b in t)hasOwnProperty.call(t,b)&&(c[b]=t[b]);c.originalType=e,c.mdxType="string"==typeof e?e:a,r[1]=c;for(var l=2;l=0||(i[n]=e[n]);return i}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(a=0;a=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(i[n]=e[n])}return i}var l=i.a.createContext({}),s=function(e){var t=i.a.useContext(l),n=t;return e&&(n="function"==typeof e?e(t):c(c({},t),e)),n},p=function(e){var t=s(e.components);return i.a.createElement(l.Provider,{value:t},e.children)},d={inlineCode:"code",wrapper:function(e){var t=e.children;return i.a.createElement(i.a.Fragment,{},t)}},u=i.a.forwardRef((function(e,t){var n=e.components,a=e.mdxType,o=e.originalType,r=e.parentName,l=b(e,["components","mdxType","originalType","parentName"]),p=s(n),u=a,m=p["".concat(r,".").concat(u)]||p[u]||d[u]||o;return n?i.a.createElement(m,c(c({ref:t},l),{},{components:n})):i.a.createElement(m,c({ref:t},l))}));function m(e,t){var n=arguments,a=t&&t.mdxType;if("string"==typeof e||a){var o=n.length,r=new Array(o);r[0]=u;var c={};for(var b in t)hasOwnProperty.call(t,b)&&(c[b]=t[b]);c.originalType=e,c.mdxType="string"==typeof e?e:a,r[1]=c;for(var l=2;l=0||(a[n]=e[n]);return a}(e,t);if(Object.getOwnPropertySymbols){var p=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(a[n]=e[n])}return a}var u=a.a.createContext({}),o=function(e){var t=a.a.useContext(u),n=t;return e&&(n="function"==typeof e?e(t):l(l({},t),e)),n},d=function(e){var t=o(e.components);return a.a.createElement(u.Provider,{value:t},e.children)},s={inlineCode:"code",wrapper:function(e){var t=e.children;return a.a.createElement(a.a.Fragment,{},t)}},f=a.a.forwardRef((function(e,t){var n=e.components,r=e.mdxType,p=e.originalType,i=e.parentName,u=c(e,["components","mdxType","originalType","parentName"]),d=o(n),f=r,m=d["".concat(i,".").concat(f)]||d[f]||s[f]||p;return n?a.a.createElement(m,l(l({ref:t},u),{},{components:n})):a.a.createElement(m,l({ref:t},u))}));function m(e,t){var n=arguments,r=t&&t.mdxType;if("string"==typeof e||r){var p=n.length,i=new Array(p);i[0]=f;var l={};for(var c in t)hasOwnProperty.call(t,c)&&(l[c]=t[c]);l.originalType=e,l.mdxType="string"==typeof e?e:r,i[1]=l;for(var u=2;u=0||(a[n]=e[n]);return a}(e,t);if(Object.getOwnPropertySymbols){var p=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(a[n]=e[n])}return a}var u=a.a.createContext({}),o=function(e){var t=a.a.useContext(u),n=t;return e&&(n="function"==typeof e?e(t):l(l({},t),e)),n},d=function(e){var t=o(e.components);return a.a.createElement(u.Provider,{value:t},e.children)},s={inlineCode:"code",wrapper:function(e){var t=e.children;return a.a.createElement(a.a.Fragment,{},t)}},f=a.a.forwardRef((function(e,t){var n=e.components,r=e.mdxType,p=e.originalType,i=e.parentName,u=c(e,["components","mdxType","originalType","parentName"]),d=o(n),f=r,m=d["".concat(i,".").concat(f)]||d[f]||s[f]||p;return n?a.a.createElement(m,l(l({ref:t},u),{},{components:n})):a.a.createElement(m,l({ref:t},u))}));function m(e,t){var n=arguments,r=t&&t.mdxType;if("string"==typeof e||r){var p=n.length,i=new Array(p);i[0]=f;var l={};for(var c in t)hasOwnProperty.call(t,c)&&(l[c]=t[c]);l.originalType=e,l.mdxType="string"==typeof e?e:r,i[1]=l;for(var u=2;u=0||(a[r]=e[r]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(a[r]=e[r])}return a}var l=a.a.createContext({}),s=function(e){var t=a.a.useContext(l),r=t;return e&&(r="function"==typeof e?e(t):i(i({},t),e)),r},u=function(e){var t=s(e.components);return a.a.createElement(l.Provider,{value:t},e.children)},d={inlineCode:"code",wrapper:function(e){var t=e.children;return a.a.createElement(a.a.Fragment,{},t)}},m=a.a.forwardRef((function(e,t){var r=e.components,n=e.mdxType,o=e.originalType,c=e.parentName,l=p(e,["components","mdxType","originalType","parentName"]),u=s(r),m=n,f=u["".concat(c,".").concat(m)]||u[m]||d[m]||o;return r?a.a.createElement(f,i(i({ref:t},l),{},{components:r})):a.a.createElement(f,i({ref:t},l))}));function f(e,t){var r=arguments,n=t&&t.mdxType;if("string"==typeof e||n){var o=r.length,c=new Array(o);c[0]=m;var i={};for(var p in t)hasOwnProperty.call(t,p)&&(i[p]=t[p]);i.originalType=e,i.mdxType="string"==typeof e?e:n,c[1]=i;for(var l=2;l=0||(a[r]=e[r]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(a[r]=e[r])}return a}var l=a.a.createContext({}),s=function(e){var t=a.a.useContext(l),r=t;return e&&(r="function"==typeof e?e(t):i(i({},t),e)),r},u=function(e){var t=s(e.components);return a.a.createElement(l.Provider,{value:t},e.children)},d={inlineCode:"code",wrapper:function(e){var t=e.children;return a.a.createElement(a.a.Fragment,{},t)}},m=a.a.forwardRef((function(e,t){var r=e.components,n=e.mdxType,o=e.originalType,c=e.parentName,l=p(e,["components","mdxType","originalType","parentName"]),u=s(r),m=n,f=u["".concat(c,".").concat(m)]||u[m]||d[m]||o;return r?a.a.createElement(f,i(i({ref:t},l),{},{components:r})):a.a.createElement(f,i({ref:t},l))}));function f(e,t){var r=arguments,n=t&&t.mdxType;if("string"==typeof e||n){var o=r.length,c=new Array(o);c[0]=m;var i={};for(var p in t)hasOwnProperty.call(t,p)&&(i[p]=t[p]);i.originalType=e,i.mdxType="string"==typeof e?e:n,c[1]=i;for(var l=2;l=0||(a[r]=e[r]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(a[r]=e[r])}return a}var s=a.a.createContext({}),c=function(e){var t=a.a.useContext(s),r=t;return e&&(r="function"==typeof e?e(t):i(i({},t),e)),r},u=function(e){var t=c(e.components);return a.a.createElement(s.Provider,{value:t},e.children)},d={inlineCode:"code",wrapper:function(e){var t=e.children;return a.a.createElement(a.a.Fragment,{},t)}},f=a.a.forwardRef((function(e,t){var r=e.components,n=e.mdxType,o=e.originalType,p=e.parentName,s=l(e,["components","mdxType","originalType","parentName"]),u=c(r),f=n,m=u["".concat(p,".").concat(f)]||u[f]||d[f]||o;return r?a.a.createElement(m,i(i({ref:t},s),{},{components:r})):a.a.createElement(m,i({ref:t},s))}));function m(e,t){var r=arguments,n=t&&t.mdxType;if("string"==typeof e||n){var o=r.length,p=new Array(o);p[0]=f;var i={};for(var l in t)hasOwnProperty.call(t,l)&&(i[l]=t[l]);i.originalType=e,i.mdxType="string"==typeof e?e:n,p[1]=i;for(var s=2;s=0||(a[r]=e[r]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(a[r]=e[r])}return a}var s=a.a.createContext({}),c=function(e){var t=a.a.useContext(s),r=t;return e&&(r="function"==typeof e?e(t):i(i({},t),e)),r},u=function(e){var t=c(e.components);return a.a.createElement(s.Provider,{value:t},e.children)},d={inlineCode:"code",wrapper:function(e){var t=e.children;return a.a.createElement(a.a.Fragment,{},t)}},f=a.a.forwardRef((function(e,t){var r=e.components,n=e.mdxType,o=e.originalType,p=e.parentName,s=l(e,["components","mdxType","originalType","parentName"]),u=c(r),f=n,m=u["".concat(p,".").concat(f)]||u[f]||d[f]||o;return r?a.a.createElement(m,i(i({ref:t},s),{},{components:r})):a.a.createElement(m,i({ref:t},s))}));function m(e,t){var r=arguments,n=t&&t.mdxType;if("string"==typeof e||n){var o=r.length,p=new Array(o);p[0]=f;var i={};for(var l in t)hasOwnProperty.call(t,l)&&(i[l]=t[l]);i.originalType=e,i.mdxType="string"==typeof e?e:n,p[1]=i;for(var s=2;s=0||(a[o]=e[o]);return a}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,o)&&(a[o]=e[o])}return a}var l=a.a.createContext({}),c=function(e){var t=a.a.useContext(l),o=t;return e&&(o="function"==typeof e?e(t):d(d({},t),e)),o},p=function(e){var t=c(e.components);return a.a.createElement(l.Provider,{value:t},e.children)},b={inlineCode:"code",wrapper:function(e){var t=e.children;return a.a.createElement(a.a.Fragment,{},t)}},u=a.a.forwardRef((function(e,t){var o=e.components,n=e.mdxType,i=e.originalType,s=e.parentName,l=r(e,["components","mdxType","originalType","parentName"]),p=c(o),u=n,m=p["".concat(s,".").concat(u)]||p[u]||b[u]||i;return o?a.a.createElement(m,d(d({ref:t},l),{},{components:o})):a.a.createElement(m,d({ref:t},l))}));function m(e,t){var o=arguments,n=t&&t.mdxType;if("string"==typeof e||n){var i=o.length,s=new Array(i);s[0]=u;var d={};for(var r in t)hasOwnProperty.call(t,r)&&(d[r]=t[r]);d.originalType=e,d.mdxType="string"==typeof e?e:n,s[1]=d;for(var l=2;l=0||(a[o]=e[o]);return a}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,o)&&(a[o]=e[o])}return a}var l=a.a.createContext({}),c=function(e){var t=a.a.useContext(l),o=t;return e&&(o="function"==typeof e?e(t):r(r({},t),e)),o},p=function(e){var t=c(e.components);return a.a.createElement(l.Provider,{value:t},e.children)},b={inlineCode:"code",wrapper:function(e){var t=e.children;return a.a.createElement(a.a.Fragment,{},t)}},u=a.a.forwardRef((function(e,t){var o=e.components,n=e.mdxType,i=e.originalType,s=e.parentName,l=d(e,["components","mdxType","originalType","parentName"]),p=c(o),u=n,m=p["".concat(s,".").concat(u)]||p[u]||b[u]||i;return o?a.a.createElement(m,r(r({ref:t},l),{},{components:o})):a.a.createElement(m,r({ref:t},l))}));function m(e,t){var o=arguments,n=t&&t.mdxType;if("string"==typeof e||n){var i=o.length,s=new Array(i);s[0]=u;var r={};for(var d in t)hasOwnProperty.call(t,d)&&(r[d]=t[d]);r.originalType=e,r.mdxType="string"==typeof e?e:n,s[1]=r;for(var l=2;l The quick brown fox jumped over the lazy dog.\n\nUnordered list:\n\n- The quick brown fox jumped over the lazy dog.\n- The quick brown fox jumped over the lazy dog.\n- The quick brown fox jumped over the lazy dog.\n\nOrdered list:\n\n1. The quick brown fox jumped over the lazy dog.\n1. The quick brown fox jumped over the lazy dog.\n1. The quick brown fox jumped over the lazy dog.\n\nImage:\n\n![Monty Python](https://upload.wikimedia.org/wikipedia/en/c/cb/Flyingcircus_2.jpg)\n\nTable:\n\n| Column 1 | Column 2 | Column 3 |\n| -------- | -------- | -------- |\n| Item 1 | Item 2 | Item 3 |\n| Item 1 | Item 2 | Item 3 |\n| Item 1 | Item 2 | Item 3 |\n\n'''\n\npage['example'] = ui.markdown_card(\n box='1 1 3 -1',\n title='I was made using markdown!',\n content=sample_markdown,\n)\npage.save()\n")))}m.isMDXComponent=!0},290:function(e,n,t){"use strict";t.d(n,"a",(function(){return p})),t.d(n,"b",(function(){return f}));var r=t(0),o=t.n(r);function a(e,n,t){return n in e?Object.defineProperty(e,n,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[n]=t,e}function c(e,n){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);n&&(r=r.filter((function(n){return Object.getOwnPropertyDescriptor(e,n).enumerable}))),t.push.apply(t,r)}return t}function i(e){for(var n=1;n=0||(o[t]=e[t]);return o}(e,n);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(o[t]=e[t])}return o}var d=o.a.createContext({}),m=function(e){var n=o.a.useContext(d),t=n;return e&&(t="function"==typeof e?e(n):i(i({},n),e)),t},p=function(e){var n=m(e.components);return o.a.createElement(d.Provider,{value:n},e.children)},l={inlineCode:"code",wrapper:function(e){var n=e.children;return o.a.createElement(o.a.Fragment,{},n)}},s=o.a.forwardRef((function(e,n){var t=e.components,r=e.mdxType,a=e.originalType,c=e.parentName,d=u(e,["components","mdxType","originalType","parentName"]),p=m(t),s=r,f=p["".concat(c,".").concat(s)]||p[s]||l[s]||a;return t?o.a.createElement(f,i(i({ref:n},d),{},{components:t})):o.a.createElement(f,i({ref:n},d))}));function f(e,n){var t=arguments,r=n&&n.mdxType;if("string"==typeof e||r){var a=t.length,c=new Array(a);c[0]=s;var i={};for(var u in n)hasOwnProperty.call(n,u)&&(i[u]=n[u]);i.originalType=e,i.mdxType="string"==typeof e?e:r,c[1]=i;for(var d=2;d The quick brown fox jumped over the lazy dog.\n\nUnordered list:\n\n- The quick brown fox jumped over the lazy dog.\n- The quick brown fox jumped over the lazy dog.\n- The quick brown fox jumped over the lazy dog.\n\nOrdered list:\n\n1. The quick brown fox jumped over the lazy dog.\n1. The quick brown fox jumped over the lazy dog.\n1. The quick brown fox jumped over the lazy dog.\n\nImage:\n\n![Monty Python](https://upload.wikimedia.org/wikipedia/en/c/cb/Flyingcircus_2.jpg)\n\nTable:\n\n| Column 1 | Column 2 | Column 3 |\n| -------- | -------- | -------- |\n| Item 1 | Item 2 | Item 3 |\n| Item 1 | Item 2 | Item 3 |\n| Item 1 | Item 2 | Item 3 |\n\n'''\n\npage['example'] = ui.markdown_card(\n box='1 1 3 -1',\n title='I was made using markdown!',\n content=sample_markdown,\n)\npage.save()\n")))}m.isMDXComponent=!0},292:function(e,n,t){"use strict";t.d(n,"a",(function(){return p})),t.d(n,"b",(function(){return f}));var r=t(0),o=t.n(r);function a(e,n,t){return n in e?Object.defineProperty(e,n,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[n]=t,e}function c(e,n){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);n&&(r=r.filter((function(n){return Object.getOwnPropertyDescriptor(e,n).enumerable}))),t.push.apply(t,r)}return t}function i(e){for(var n=1;n=0||(o[t]=e[t]);return o}(e,n);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(o[t]=e[t])}return o}var d=o.a.createContext({}),m=function(e){var n=o.a.useContext(d),t=n;return e&&(t="function"==typeof e?e(n):i(i({},n),e)),t},p=function(e){var n=m(e.components);return o.a.createElement(d.Provider,{value:n},e.children)},l={inlineCode:"code",wrapper:function(e){var n=e.children;return o.a.createElement(o.a.Fragment,{},n)}},s=o.a.forwardRef((function(e,n){var t=e.components,r=e.mdxType,a=e.originalType,c=e.parentName,d=u(e,["components","mdxType","originalType","parentName"]),p=m(t),s=r,f=p["".concat(c,".").concat(s)]||p[s]||l[s]||a;return t?o.a.createElement(f,i(i({ref:n},d),{},{components:t})):o.a.createElement(f,i({ref:n},d))}));function f(e,n){var t=arguments,r=n&&n.mdxType;if("string"==typeof e||r){var a=t.length,c=new Array(a);c[0]=s;var i={};for(var u in n)hasOwnProperty.call(n,u)&&(i[u]=n[u]);i.originalType=e,i.mdxType="string"==typeof e?e:r,c[1]=i;for(var d=2;d=0||(a[r]=e[r]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(a[r]=e[r])}return a}var c=a.a.createContext({}),s=function(e){var t=a.a.useContext(c),r=t;return e&&(r="function"==typeof e?e(t):i(i({},t),e)),r},u=function(e){var t=s(e.components);return a.a.createElement(c.Provider,{value:t},e.children)},d={inlineCode:"code",wrapper:function(e){var t=e.children;return a.a.createElement(a.a.Fragment,{},t)}},f=a.a.forwardRef((function(e,t){var r=e.components,n=e.mdxType,o=e.originalType,l=e.parentName,c=p(e,["components","mdxType","originalType","parentName"]),u=s(r),f=n,m=u["".concat(l,".").concat(f)]||u[f]||d[f]||o;return r?a.a.createElement(m,i(i({ref:t},c),{},{components:r})):a.a.createElement(m,i({ref:t},c))}));function m(e,t){var r=arguments,n=t&&t.mdxType;if("string"==typeof e||n){var o=r.length,l=new Array(o);l[0]=f;var i={};for(var p in t)hasOwnProperty.call(t,p)&&(i[p]=t[p]);i.originalType=e,i.mdxType="string"==typeof e?e:n,l[1]=i;for(var c=2;c=0||(a[r]=e[r]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(a[r]=e[r])}return a}var c=a.a.createContext({}),s=function(e){var t=a.a.useContext(c),r=t;return e&&(r="function"==typeof e?e(t):i(i({},t),e)),r},u=function(e){var t=s(e.components);return a.a.createElement(c.Provider,{value:t},e.children)},d={inlineCode:"code",wrapper:function(e){var t=e.children;return a.a.createElement(a.a.Fragment,{},t)}},f=a.a.forwardRef((function(e,t){var r=e.components,n=e.mdxType,o=e.originalType,l=e.parentName,c=p(e,["components","mdxType","originalType","parentName"]),u=s(r),f=n,m=u["".concat(l,".").concat(f)]||u[f]||d[f]||o;return r?a.a.createElement(m,i(i({ref:t},c),{},{components:r})):a.a.createElement(m,i({ref:t},c))}));function m(e,t){var r=arguments,n=t&&t.mdxType;if("string"==typeof e||n){var o=r.length,l=new Array(o);l[0]=f;var i={};for(var p in t)hasOwnProperty.call(t,p)&&(i[p]=t[p]);i.originalType=e,i.mdxType="string"==typeof e?e:n,l[1]=i;for(var c=2;c=0||(o[t]=e[t]);return o}(e,n);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(o[t]=e[t])}return o}var l=o.a.createContext({}),p=function(e){var n=o.a.useContext(l),t=n;return e&&(t="function"==typeof e?e(n):c(c({},n),e)),t},u=function(e){var n=p(e.components);return o.a.createElement(l.Provider,{value:n},e.children)},d={inlineCode:"code",wrapper:function(e){var n=e.children;return o.a.createElement(o.a.Fragment,{},n)}},b=o.a.forwardRef((function(e,n){var t=e.components,r=e.mdxType,a=e.originalType,i=e.parentName,l=s(e,["components","mdxType","originalType","parentName"]),u=p(t),b=r,f=u["".concat(i,".").concat(b)]||u[b]||d[b]||a;return t?o.a.createElement(f,c(c({ref:n},l),{},{components:t})):o.a.createElement(f,c({ref:n},l))}));function f(e,n){var t=arguments,r=n&&n.mdxType;if("string"==typeof e||r){var a=t.length,i=new Array(a);i[0]=b;var c={};for(var s in n)hasOwnProperty.call(n,s)&&(c[s]=n[s]);c.originalType=e,c.mdxType="string"==typeof e?e:r,i[1]=c;for(var l=2;l=0||(a[n]=e[n]);return a}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(a[n]=e[n])}return a}var p=a.a.createContext({}),l=function(e){var t=a.a.useContext(p),n=t;return e&&(n="function"==typeof e?e(t):c(c({},t),e)),n},d=function(e){var t=l(e.components);return a.a.createElement(p.Provider,{value:t},e.children)},u={inlineCode:"code",wrapper:function(e){var t=e.children;return a.a.createElement(a.a.Fragment,{},t)}},b=a.a.forwardRef((function(e,t){var n=e.components,r=e.mdxType,i=e.originalType,o=e.parentName,p=s(e,["components","mdxType","originalType","parentName"]),d=l(n),b=r,h=d["".concat(o,".").concat(b)]||d[b]||u[b]||i;return n?a.a.createElement(h,c(c({ref:t},p),{},{components:n})):a.a.createElement(h,c({ref:t},p))}));function h(e,t){var n=arguments,r=t&&t.mdxType;if("string"==typeof e||r){var i=n.length,o=new Array(i);o[0]=b;var c={};for(var s in t)hasOwnProperty.call(t,s)&&(c[s]=t[s]);c.originalType=e,c.mdxType="string"==typeof e?e:r,o[1]=c;for(var p=2;p=0||(a[n]=e[n]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(a[n]=e[n])}return a}var l=a.a.createContext({}),u=function(e){var t=a.a.useContext(l),n=t;return e&&(n="function"==typeof e?e(t):c(c({},t),e)),n},s=function(e){var t=u(e.components);return a.a.createElement(l.Provider,{value:t},e.children)},b={inlineCode:"code",wrapper:function(e){var t=e.children;return a.a.createElement(a.a.Fragment,{},t)}},m=a.a.forwardRef((function(e,t){var n=e.components,r=e.mdxType,o=e.originalType,p=e.parentName,l=i(e,["components","mdxType","originalType","parentName"]),s=u(n),m=r,d=s["".concat(p,".").concat(m)]||s[m]||b[m]||o;return n?a.a.createElement(d,c(c({ref:t},l),{},{components:n})):a.a.createElement(d,c({ref:t},l))}));function d(e,t){var n=arguments,r=t&&t.mdxType;if("string"==typeof e||r){var o=n.length,p=new Array(o);p[0]=m;var c={};for(var i in t)hasOwnProperty.call(t,i)&&(c[i]=t[i]);c.originalType=e,c.mdxType="string"==typeof e?e:r,p[1]=c;for(var l=2;l',id:"teledb",children:[]},{value:'TeleDBError       ',id:"teledberror",children:[]}]}],s={rightToc:o};function b(e){var t=e.components,r=Object(a.a)(e,["components"]);return Object(c.b)("wrapper",Object(n.a)({},s,r,{components:t,mdxType:"MDXLayout"}),Object(c.b)("h2",{id:"classes"},"Classes"),Object(c.b)("div",{className:"api"},Object(c.b)("h3",{id:"teledb"},"TeleDB ",Object(c.b)("a",{name:"h2o_wave.db.TeleDB"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"class ",Object(c.b)("span",{class:"ident"},"TeleDB"),"(address:\xa0str, key_id:\xa0str, key_secret:\xa0str)"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Represents a TeleDB database client."),Object(c.b)("p",null,"Create a new client instance."),Object(c.b)("h5",{id:"args"},"Args"),Object(c.b)("dl",null,Object(c.b)("dt",null,Object(c.b)("code",null,"address")),Object(c.b)("dd",null,"database address"),Object(c.b)("dt",null,Object(c.b)("code",null,"key_id")),Object(c.b)("dd",null,"access key id"),Object(c.b)("dt",null,Object(c.b)("code",null,"key_secret")),Object(c.b)("dd",null,"access key secret"))))),Object(c.b)("div",{className:"api"},Object(c.b)("h3",{id:"teledberror"},"TeleDBError ",Object(c.b)("a",{name:"h2o_wave.db.TeleDBError"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"class ",Object(c.b)("span",{class:"ident"},"TeleDBError"),"(*args, **kwargs)"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Represents a remote exception thrown by the TeleDB database server.")),Object(c.b)("h4",{id:"ancestors"},"Ancestors"),Object(c.b)("ul",null,Object(c.b)("li",{parentName:"ul"},"builtins.Exception"),Object(c.b)("li",{parentName:"ul"},"builtins.BaseException")))))}b.isMDXComponent=!0},290:function(e,t,r){"use strict";r.d(t,"a",(function(){return d})),r.d(t,"b",(function(){return O}));var n=r(0),a=r.n(n);function c(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function i(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),r.push.apply(r,n)}return r}function l(e){for(var t=1;t=0||(a[r]=e[r]);return a}(e,t);if(Object.getOwnPropertySymbols){var c=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(a[r]=e[r])}return a}var s=a.a.createContext({}),b=function(e){var t=a.a.useContext(s),r=t;return e&&(r="function"==typeof e?e(t):l(l({},t),e)),r},d=function(e){var t=b(e.components);return a.a.createElement(s.Provider,{value:t},e.children)},u={inlineCode:"code",wrapper:function(e){var t=e.children;return a.a.createElement(a.a.Fragment,{},t)}},p=a.a.forwardRef((function(e,t){var r=e.components,n=e.mdxType,c=e.originalType,i=e.parentName,s=o(e,["components","mdxType","originalType","parentName"]),d=b(r),p=n,O=d["".concat(i,".").concat(p)]||d[p]||u[p]||c;return r?a.a.createElement(O,l(l({ref:t},s),{},{components:r})):a.a.createElement(O,l({ref:t},s))}));function O(e,t){var r=arguments,n=t&&t.mdxType;if("string"==typeof e||n){var c=r.length,i=new Array(c);i[0]=p;var l={};for(var o in t)hasOwnProperty.call(t,o)&&(l[o]=t[o]);l.originalType=e,l.mdxType="string"==typeof e?e:n,i[1]=l;for(var s=2;s',id:"teledb",children:[]},{value:'TeleDBError ',id:"teledberror",children:[]}]}],s={rightToc:o};function b(e){var t=e.components,r=Object(a.a)(e,["components"]);return Object(c.b)("wrapper",Object(n.a)({},s,r,{components:t,mdxType:"MDXLayout"}),Object(c.b)("h2",{id:"classes"},"Classes"),Object(c.b)("div",{className:"api"},Object(c.b)("h3",{id:"teledb"},"TeleDB ",Object(c.b)("a",{name:"h2o_wave.db.TeleDB"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"class ",Object(c.b)("span",{class:"ident"},"TeleDB"),"(address:\xa0str, key_id:\xa0str, key_secret:\xa0str)"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Represents a TeleDB database client."),Object(c.b)("p",null,"Create a new client instance."),Object(c.b)("h5",{id:"args"},"Args"),Object(c.b)("dl",null,Object(c.b)("dt",null,Object(c.b)("code",null,"address")),Object(c.b)("dd",null,"database address"),Object(c.b)("dt",null,Object(c.b)("code",null,"key_id")),Object(c.b)("dd",null,"access key id"),Object(c.b)("dt",null,Object(c.b)("code",null,"key_secret")),Object(c.b)("dd",null,"access key secret"))))),Object(c.b)("div",{className:"api"},Object(c.b)("h3",{id:"teledberror"},"TeleDBError ",Object(c.b)("a",{name:"h2o_wave.db.TeleDBError"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"class ",Object(c.b)("span",{class:"ident"},"TeleDBError"),"(*args, **kwargs)"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Represents a remote exception thrown by the TeleDB database server.")),Object(c.b)("h4",{id:"ancestors"},"Ancestors"),Object(c.b)("ul",null,Object(c.b)("li",{parentName:"ul"},"builtins.Exception"),Object(c.b)("li",{parentName:"ul"},"builtins.BaseException")))))}b.isMDXComponent=!0},292:function(e,t,r){"use strict";r.d(t,"a",(function(){return d})),r.d(t,"b",(function(){return O}));var n=r(0),a=r.n(n);function c(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function i(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),r.push.apply(r,n)}return r}function l(e){for(var t=1;t=0||(a[r]=e[r]);return a}(e,t);if(Object.getOwnPropertySymbols){var c=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(a[r]=e[r])}return a}var s=a.a.createContext({}),b=function(e){var t=a.a.useContext(s),r=t;return e&&(r="function"==typeof e?e(t):l(l({},t),e)),r},d=function(e){var t=b(e.components);return a.a.createElement(s.Provider,{value:t},e.children)},u={inlineCode:"code",wrapper:function(e){var t=e.children;return a.a.createElement(a.a.Fragment,{},t)}},p=a.a.forwardRef((function(e,t){var r=e.components,n=e.mdxType,c=e.originalType,i=e.parentName,s=o(e,["components","mdxType","originalType","parentName"]),d=b(r),p=n,O=d["".concat(i,".").concat(p)]||d[p]||u[p]||c;return r?a.a.createElement(O,l(l({ref:t},s),{},{components:r})):a.a.createElement(O,l({ref:t},s))}));function O(e,t){var r=arguments,n=t&&t.mdxType;if("string"==typeof e||n){var c=r.length,i=new Array(c);i[0]=p;var l={};for(var o in t)hasOwnProperty.call(t,o)&&(l[o]=t[o]);l.originalType=e,l.mdxType="string"==typeof e?e:n,i[1]=l;for(var s=2;s=0||(r[n]=e[n]);return r}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(a=0;a=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(r[n]=e[n])}return r}var u=r.a.createContext({}),s=function(e){var t=r.a.useContext(u),n=t;return e&&(n="function"==typeof e?e(t):l(l({},t),e)),n},p=function(e){var t=s(e.components);return r.a.createElement(u.Provider,{value:t},e.children)},m={inlineCode:"code",wrapper:function(e){var t=e.children;return r.a.createElement(r.a.Fragment,{},t)}},f=r.a.forwardRef((function(e,t){var n=e.components,a=e.mdxType,o=e.originalType,i=e.parentName,u=c(e,["components","mdxType","originalType","parentName"]),p=s(n),f=a,d=p["".concat(i,".").concat(f)]||p[f]||m[f]||o;return n?r.a.createElement(d,l(l({ref:t},u),{},{components:n})):r.a.createElement(d,l({ref:t},u))}));function d(e,t){var n=arguments,a=t&&t.mdxType;if("string"==typeof e||a){var o=n.length,i=new Array(o);i[0]=f;var l={};for(var c in t)hasOwnProperty.call(t,c)&&(l[c]=t[c]);l.originalType=e,l.mdxType="string"==typeof e?e:a,i[1]=l;for(var u=2;u=0||(r[n]=e[n]);return r}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(a=0;a=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(r[n]=e[n])}return r}var u=r.a.createContext({}),s=function(e){var t=r.a.useContext(u),n=t;return e&&(n="function"==typeof e?e(t):l(l({},t),e)),n},p=function(e){var t=s(e.components);return r.a.createElement(u.Provider,{value:t},e.children)},m={inlineCode:"code",wrapper:function(e){var t=e.children;return r.a.createElement(r.a.Fragment,{},t)}},f=r.a.forwardRef((function(e,t){var n=e.components,a=e.mdxType,o=e.originalType,i=e.parentName,u=c(e,["components","mdxType","originalType","parentName"]),p=s(n),f=a,d=p["".concat(i,".").concat(f)]||p[f]||m[f]||o;return n?r.a.createElement(d,l(l({ref:t},u),{},{components:n})):r.a.createElement(d,l({ref:t},u))}));function d(e,t){var n=arguments,a=t&&t.mdxType;if("string"==typeof e||a){var o=n.length,i=new Array(o);i[0]=f;var l={};for(var c in t)hasOwnProperty.call(t,c)&&(l[c]=t[c]);l.originalType=e,l.mdxType="string"==typeof e?e:a,i[1]=l;for(var u=2;u=0||(r[t]=e[t]);return r}(e,a);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(r[t]=e[t])}return r}var l=r.a.createContext({}),b=function(e){var a=r.a.useContext(l),t=a;return e&&(t="function"==typeof e?e(a):p(p({},a),e)),t},s=function(e){var a=b(e.components);return r.a.createElement(l.Provider,{value:a},e.children)},d={inlineCode:"code",wrapper:function(e){var a=e.children;return r.a.createElement(r.a.Fragment,{},a)}},u=r.a.forwardRef((function(e,a){var t=e.components,n=e.mdxType,o=e.originalType,c=e.parentName,l=i(e,["components","mdxType","originalType","parentName"]),s=b(t),u=n,m=s["".concat(c,".").concat(u)]||s[u]||d[u]||o;return t?r.a.createElement(m,p(p({ref:a},l),{},{components:t})):r.a.createElement(m,p({ref:a},l))}));function m(e,a){var t=arguments,n=a&&a.mdxType;if("string"==typeof e||n){var o=t.length,c=new Array(o);c[0]=u;var p={};for(var i in a)hasOwnProperty.call(a,i)&&(p[i]=a[i]);p.originalType=e,p.mdxType="string"==typeof e?e:n,c[1]=p;for(var l=2;l=0||(r[t]=e[t]);return r}(e,a);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(r[t]=e[t])}return r}var l=r.a.createContext({}),b=function(e){var a=r.a.useContext(l),t=a;return e&&(t="function"==typeof e?e(a):p(p({},a),e)),t},s=function(e){var a=b(e.components);return r.a.createElement(l.Provider,{value:a},e.children)},d={inlineCode:"code",wrapper:function(e){var a=e.children;return r.a.createElement(r.a.Fragment,{},a)}},m=r.a.forwardRef((function(e,a){var t=e.components,n=e.mdxType,o=e.originalType,c=e.parentName,l=i(e,["components","mdxType","originalType","parentName"]),s=b(t),m=n,u=s["".concat(c,".").concat(m)]||s[m]||d[m]||o;return t?r.a.createElement(u,p(p({ref:a},l),{},{components:t})):r.a.createElement(u,p({ref:a},l))}));function u(e,a){var t=arguments,n=a&&a.mdxType;if("string"==typeof e||n){var o=t.length,c=new Array(o);c[0]=m;var p={};for(var i in a)hasOwnProperty.call(a,i)&&(p[i]=a[i]);p.originalType=e,p.mdxType="string"==typeof e?e:n,c[1]=p;for(var l=2;li.a.createElement(r.a,{key:a.metadata.permalink,frontMatter:a.frontMatter,metadata:a.metadata,truncated:a.metadata.truncated},i.a.createElement(a,null)))),i.a.createElement(o,{metadata:e})))))}}}]); \ No newline at end of file +(window.webpackJsonp=window.webpackJsonp||[]).push([[150],{290:function(a,e,t){"use strict";t.r(e);var n=t(0),i=t.n(n),l=t(293),c=t(297),r=t(369),m=t(295);var o=function(a){const{metadata:e}=a,{previousPage:t,nextPage:n}=e;return i.a.createElement("nav",{className:"pagination-nav","aria-label":"Blog list page navigation"},i.a.createElement("div",{className:"pagination-nav__item"},t&&i.a.createElement(m.a,{className:"pagination-nav__link",to:t},i.a.createElement("h4",{className:"pagination-nav__label"},"\xab Newer Entries"))),i.a.createElement("div",{className:"pagination-nav__item pagination-nav__item--next"},n&&i.a.createElement(m.a,{className:"pagination-nav__link",to:n},i.a.createElement("h4",{className:"pagination-nav__label"},"Older Entries \xbb"))))};e.default=function(a){const{metadata:e,items:t}=a,{siteConfig:{title:n}}=Object(l.a)(),m="/"===e.permalink?n:"Blog",{blogDescription:s}=e;return i.a.createElement(c.a,{title:m,description:s},i.a.createElement("div",{className:"container margin-vert--lg"},i.a.createElement("div",{className:"row"},i.a.createElement("main",{className:"col col--8 col--offset-2"},t.map((({content:a})=>i.a.createElement(r.a,{key:a.metadata.permalink,frontMatter:a.frontMatter,metadata:a.metadata,truncated:a.metadata.truncated},i.a.createElement(a,null)))),i.a.createElement(o,{metadata:e})))))}}}]); \ No newline at end of file diff --git a/docs/a814b970.194c0040.js b/docs/a814b970.9c5f6aec.js similarity index 92% rename from docs/a814b970.194c0040.js rename to docs/a814b970.9c5f6aec.js index 4978fc21ad..ebd41b2250 100644 --- a/docs/a814b970.194c0040.js +++ b/docs/a814b970.9c5f6aec.js @@ -1 +1 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[149],{202:function(e,t,n){"use strict";n.r(t),n.d(t,"frontMatter",(function(){return p})),n.d(t,"metadata",(function(){return c})),n.d(t,"rightToc",(function(){return i})),n.d(t,"default",(function(){return u}));var r=n(2),o=n(6),a=(n(0),n(290)),p={title:"Plot / Polygon"},c={unversionedId:"examples/plot-polygon",id:"examples/plot-polygon",isDocsHomePage:!1,title:"Plot / Polygon",description:"Make a heatmap.",source:"@site/docs/examples/plot-polygon.md",slug:"/examples/plot-polygon",permalink:"/wave/docs/examples/plot-polygon",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/examples/plot-polygon.md",version:"current",sidebar:"someSidebar",previous:{title:"Plot / Area + Line / Groups",permalink:"/wave/docs/examples/plot-area-line-groups"},next:{title:"Plot / Histogram",permalink:"/wave/docs/examples/plot-histogram"}},i=[],l={rightToc:i};function u(e){var t=e.components,p=Object(o.a)(e,["components"]);return Object(a.b)("wrapper",Object(r.a)({},l,p,{components:t,mdxType:"MDXLayout"}),Object(a.b)("p",null,"Make a heatmap."),Object(a.b)("div",{className:"cover",style:{backgroundImage:"url("+n(400).default+")"}}),Object(a.b)("pre",null,Object(a.b)("code",Object(r.a)({parentName:"pre"},{className:"language-py"}),"from synth import FakeSeries\nfrom h2o_wave import site, data, ui\n\npage = site['/demo']\n\nk1, k2 = 20, 10\nf = FakeSeries()\nv = page.add('example', ui.plot_card(\n box='1 1 4 5',\n title='Heatmap',\n data=data('country product profit', k1 * k2),\n plot=ui.plot([\n ui.mark(type='polygon', x='=country', y='=product', color='=profit',\n color_range='#fee8c8 #fdbb84 #e34a33')])\n))\nrows = []\nfor i in range(k1):\n for j in range(k2):\n x, dx = f.next()\n rows.append((f'A{i + 1}', f'B{j + 1}', x))\nv.data = rows\n\npage.save()\n")))}u.isMDXComponent=!0},290:function(e,t,n){"use strict";n.d(t,"a",(function(){return s})),n.d(t,"b",(function(){return d}));var r=n(0),o=n.n(r);function a(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function p(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function c(e){for(var t=1;t=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var l=o.a.createContext({}),u=function(e){var t=o.a.useContext(l),n=t;return e&&(n="function"==typeof e?e(t):c(c({},t),e)),n},s=function(e){var t=u(e.components);return o.a.createElement(l.Provider,{value:t},e.children)},f={inlineCode:"code",wrapper:function(e){var t=e.children;return o.a.createElement(o.a.Fragment,{},t)}},m=o.a.forwardRef((function(e,t){var n=e.components,r=e.mdxType,a=e.originalType,p=e.parentName,l=i(e,["components","mdxType","originalType","parentName"]),s=u(n),m=r,d=s["".concat(p,".").concat(m)]||s[m]||f[m]||a;return n?o.a.createElement(d,c(c({ref:t},l),{},{components:n})):o.a.createElement(d,c({ref:t},l))}));function d(e,t){var n=arguments,r=t&&t.mdxType;if("string"==typeof e||r){var a=n.length,p=new Array(a);p[0]=m;var c={};for(var i in t)hasOwnProperty.call(t,i)&&(c[i]=t[i]);c.originalType=e,c.mdxType="string"==typeof e?e:r,p[1]=c;for(var l=2;l=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var l=o.a.createContext({}),u=function(e){var t=o.a.useContext(l),n=t;return e&&(n="function"==typeof e?e(t):c(c({},t),e)),n},s=function(e){var t=u(e.components);return o.a.createElement(l.Provider,{value:t},e.children)},f={inlineCode:"code",wrapper:function(e){var t=e.children;return o.a.createElement(o.a.Fragment,{},t)}},m=o.a.forwardRef((function(e,t){var n=e.components,r=e.mdxType,a=e.originalType,p=e.parentName,l=i(e,["components","mdxType","originalType","parentName"]),s=u(n),m=r,d=s["".concat(p,".").concat(m)]||s[m]||f[m]||a;return n?o.a.createElement(d,c(c({ref:t},l),{},{components:n})):o.a.createElement(d,c({ref:t},l))}));function d(e,t){var n=arguments,r=t&&t.mdxType;if("string"==typeof e||r){var a=n.length,p=new Array(a);p[0]=m;var c={};for(var i in t)hasOwnProperty.call(t,i)&&(c[i]=t[i]);c.originalType=e,c.mdxType="string"==typeof e?e:r,p[1]=c;for(var l=2;l=0||(n[r]=e[r]);return n}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(o=0;o=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(n[r]=e[r])}return n}var c=n.a.createContext({}),p=function(e){var t=n.a.useContext(c),r=t;return e&&(r="function"==typeof e?e(t):l(l({},t),e)),r},s=function(e){var t=p(e.components);return n.a.createElement(c.Provider,{value:t},e.children)},w={inlineCode:"code",wrapper:function(e){var t=e.children;return n.a.createElement(n.a.Fragment,{},t)}},b=n.a.forwardRef((function(e,t){var r=e.components,o=e.mdxType,i=e.originalType,a=e.parentName,c=d(e,["components","mdxType","originalType","parentName"]),s=p(r),b=o,H=s["".concat(a,".").concat(b)]||s[b]||w[b]||i;return r?n.a.createElement(H,l(l({ref:t},c),{},{components:r})):n.a.createElement(H,l({ref:t},c))}));function H(e,t){var r=arguments,o=t&&t.mdxType;if("string"==typeof e||o){var i=r.length,a=new Array(i);a[0]=b;var l={};for(var d in t)hasOwnProperty.call(t,d)&&(l[d]=t[d]);l.originalType=e,l.mdxType="string"==typeof e?e:o,a[1]=l;for(var c=2;c=0||(n[r]=e[r]);return n}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(o=0;o=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(n[r]=e[r])}return n}var c=n.a.createContext({}),p=function(e){var t=n.a.useContext(c),r=t;return e&&(r="function"==typeof e?e(t):l(l({},t),e)),r},s=function(e){var t=p(e.components);return n.a.createElement(c.Provider,{value:t},e.children)},w={inlineCode:"code",wrapper:function(e){var t=e.children;return n.a.createElement(n.a.Fragment,{},t)}},b=n.a.forwardRef((function(e,t){var r=e.components,o=e.mdxType,i=e.originalType,a=e.parentName,c=d(e,["components","mdxType","originalType","parentName"]),s=p(r),b=o,H=s["".concat(a,".").concat(b)]||s[b]||w[b]||i;return r?n.a.createElement(H,l(l({ref:t},c),{},{components:r})):n.a.createElement(H,l({ref:t},c))}));function H(e,t){var r=arguments,o=t&&t.mdxType;if("string"==typeof e||o){var i=r.length,a=new Array(i);a[0]=b;var l={};for(var d in t)hasOwnProperty.call(t,d)&&(l[d]=t[d]);l.originalType=e,l.mdxType="string"==typeof e?e:o,a[1]=l;for(var c=2;c=0||(a[r]=e[r]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(a[r]=e[r])}return a}var u=a.a.createContext({}),l=function(e){var t=a.a.useContext(u),r=t;return e&&(r="function"==typeof e?e(t):c(c({},t),e)),r},p=function(e){var t=l(e.components);return a.a.createElement(u.Provider,{value:t},e.children)},d={inlineCode:"code",wrapper:function(e){var t=e.children;return a.a.createElement(a.a.Fragment,{},t)}},m=a.a.forwardRef((function(e,t){var r=e.components,n=e.mdxType,o=e.originalType,i=e.parentName,u=s(e,["components","mdxType","originalType","parentName"]),p=l(r),m=n,b=p["".concat(i,".").concat(m)]||p[m]||d[m]||o;return r?a.a.createElement(b,c(c({ref:t},u),{},{components:r})):a.a.createElement(b,c({ref:t},u))}));function b(e,t){var r=arguments,n=t&&t.mdxType;if("string"==typeof e||n){var o=r.length,i=new Array(o);i[0]=m;var c={};for(var s in t)hasOwnProperty.call(t,s)&&(c[s]=t[s]);c.originalType=e,c.mdxType="string"==typeof e?e:n,i[1]=c;for(var u=2;u=0||(a[r]=e[r]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(a[r]=e[r])}return a}var u=a.a.createContext({}),l=function(e){var t=a.a.useContext(u),r=t;return e&&(r="function"==typeof e?e(t):c(c({},t),e)),r},p=function(e){var t=l(e.components);return a.a.createElement(u.Provider,{value:t},e.children)},d={inlineCode:"code",wrapper:function(e){var t=e.children;return a.a.createElement(a.a.Fragment,{},t)}},m=a.a.forwardRef((function(e,t){var r=e.components,n=e.mdxType,o=e.originalType,i=e.parentName,u=s(e,["components","mdxType","originalType","parentName"]),p=l(r),m=n,b=p["".concat(i,".").concat(m)]||p[m]||d[m]||o;return r?a.a.createElement(b,c(c({ref:t},u),{},{components:r})):a.a.createElement(b,c({ref:t},u))}));function b(e,t){var r=arguments,n=t&&t.mdxType;if("string"==typeof e||n){var o=r.length,i=new Array(o);i[0]=m;var c={};for(var s in t)hasOwnProperty.call(t,s)&&(c[s]=t[s]);c.originalType=e,c.mdxType="string"==typeof e?e:n,i[1]=c;for(var u=2;u=0||(a[n]=e[n]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(a[n]=e[n])}return a}var p=a.a.createContext({}),s=function(e){var t=a.a.useContext(p),n=t;return e&&(n="function"==typeof e?e(t):l(l({},t),e)),n},u=function(e){var t=s(e.components);return a.a.createElement(p.Provider,{value:t},e.children)},d={inlineCode:"code",wrapper:function(e){var t=e.children;return a.a.createElement(a.a.Fragment,{},t)}},m=a.a.forwardRef((function(e,t){var n=e.components,r=e.mdxType,o=e.originalType,i=e.parentName,p=c(e,["components","mdxType","originalType","parentName"]),u=s(n),m=r,f=u["".concat(i,".").concat(m)]||u[m]||d[m]||o;return n?a.a.createElement(f,l(l({ref:t},p),{},{components:n})):a.a.createElement(f,l({ref:t},p))}));function f(e,t){var n=arguments,r=t&&t.mdxType;if("string"==typeof e||r){var o=n.length,i=new Array(o);i[0]=m;var l={};for(var c in t)hasOwnProperty.call(t,c)&&(l[c]=t[c]);l.originalType=e,l.mdxType="string"==typeof e?e:r,i[1]=l;for(var p=2;p=0||(a[n]=e[n]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(a[n]=e[n])}return a}var p=a.a.createContext({}),s=function(e){var t=a.a.useContext(p),n=t;return e&&(n="function"==typeof e?e(t):l(l({},t),e)),n},u=function(e){var t=s(e.components);return a.a.createElement(p.Provider,{value:t},e.children)},d={inlineCode:"code",wrapper:function(e){var t=e.children;return a.a.createElement(a.a.Fragment,{},t)}},m=a.a.forwardRef((function(e,t){var n=e.components,r=e.mdxType,o=e.originalType,i=e.parentName,p=c(e,["components","mdxType","originalType","parentName"]),u=s(n),m=r,f=u["".concat(i,".").concat(m)]||u[m]||d[m]||o;return n?a.a.createElement(f,l(l({ref:t},p),{},{components:n})):a.a.createElement(f,l({ref:t},p))}));function f(e,t){var n=arguments,r=t&&t.mdxType;if("string"==typeof e||r){var o=n.length,i=new Array(o);i[0]=m;var l={};for(var c in t)hasOwnProperty.call(t,c)&&(l[c]=t[c]);l.originalType=e,l.mdxType="string"==typeof e?e:r,i[1]=l;for(var p=2;p\n{{#each dishes}}\n
    2. {{name}} costs {{price}}
      3. \n{{/each}}\n=0||(a[n]=e[n]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(a[n]=e[n])}return a}var u=a.a.createContext({}),s=function(e){var t=a.a.useContext(u),n=t;return e&&(n="function"==typeof e?e(t):l(l({},t),e)),n},c=function(e){var t=s(e.components);return a.a.createElement(u.Provider,{value:t},e.children)},m={inlineCode:"code",wrapper:function(e){var t=e.children;return a.a.createElement(a.a.Fragment,{},t)}},d=a.a.forwardRef((function(e,t){var n=e.components,r=e.mdxType,o=e.originalType,i=e.parentName,u=p(e,["components","mdxType","originalType","parentName"]),c=s(n),d=r,v=c["".concat(i,".").concat(d)]||c[d]||m[d]||o;return n?a.a.createElement(v,l(l({ref:t},u),{},{components:n})):a.a.createElement(v,l({ref:t},u))}));function v(e,t){var n=arguments,r=t&&t.mdxType;if("string"==typeof e||r){var o=n.length,i=new Array(o);i[0]=d;var l={};for(var p in t)hasOwnProperty.call(t,p)&&(l[p]=t[p]);l.originalType=e,l.mdxType="string"==typeof e?e:r,i[1]=l;for(var u=2;u\n{{#each dishes}}\n
    3. {{name}} costs {{price}}
      4. \n{{/each}}\n=0||(a[n]=e[n]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(a[n]=e[n])}return a}var u=a.a.createContext({}),s=function(e){var t=a.a.useContext(u),n=t;return e&&(n="function"==typeof e?e(t):l(l({},t),e)),n},c=function(e){var t=s(e.components);return a.a.createElement(u.Provider,{value:t},e.children)},m={inlineCode:"code",wrapper:function(e){var t=e.children;return a.a.createElement(a.a.Fragment,{},t)}},d=a.a.forwardRef((function(e,t){var n=e.components,r=e.mdxType,o=e.originalType,i=e.parentName,u=p(e,["components","mdxType","originalType","parentName"]),c=s(n),d=r,v=c["".concat(i,".").concat(d)]||c[d]||m[d]||o;return n?a.a.createElement(v,l(l({ref:t},u),{},{components:n})):a.a.createElement(v,l({ref:t},u))}));function v(e,t){var n=arguments,r=t&&t.mdxType;if("string"==typeof e||r){var o=n.length,i=new Array(o);i[0]=d;var l={};for(var p in t)hasOwnProperty.call(t,p)&&(l[p]=t[p]);l.originalType=e,l.mdxType="string"==typeof e?e:r,i[1]=l;for(var u=2;u=0||(a[n]=e[n]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(a[n]=e[n])}return a}var p=a.a.createContext({}),u=function(e){var t=a.a.useContext(p),n=t;return e&&(n="function"==typeof e?e(t):l(l({},t),e)),n},s=function(e){var t=u(e.components);return a.a.createElement(p.Provider,{value:t},e.children)},m={inlineCode:"code",wrapper:function(e){var t=e.children;return a.a.createElement(a.a.Fragment,{},t)}},d=a.a.forwardRef((function(e,t){var n=e.components,r=e.mdxType,o=e.originalType,i=e.parentName,p=c(e,["components","mdxType","originalType","parentName"]),s=u(n),d=r,f=s["".concat(i,".").concat(d)]||s[d]||m[d]||o;return n?a.a.createElement(f,l(l({ref:t},p),{},{components:n})):a.a.createElement(f,l({ref:t},p))}));function f(e,t){var n=arguments,r=t&&t.mdxType;if("string"==typeof e||r){var o=n.length,i=new Array(o);i[0]=d;var l={};for(var c in t)hasOwnProperty.call(t,c)&&(l[c]=t[c]);l.originalType=e,l.mdxType="string"==typeof e?e:r,i[1]=l;for(var p=2;p=0||(a[n]=e[n]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(a[n]=e[n])}return a}var p=a.a.createContext({}),u=function(e){var t=a.a.useContext(p),n=t;return e&&(n="function"==typeof e?e(t):l(l({},t),e)),n},s=function(e){var t=u(e.components);return a.a.createElement(p.Provider,{value:t},e.children)},m={inlineCode:"code",wrapper:function(e){var t=e.children;return a.a.createElement(a.a.Fragment,{},t)}},d=a.a.forwardRef((function(e,t){var n=e.components,r=e.mdxType,o=e.originalType,i=e.parentName,p=c(e,["components","mdxType","originalType","parentName"]),s=u(n),d=r,f=s["".concat(i,".").concat(d)]||s[d]||m[d]||o;return n?a.a.createElement(f,l(l({ref:t},p),{},{components:n})):a.a.createElement(f,l({ref:t},p))}));function f(e,t){var n=arguments,r=t&&t.mdxType;if("string"==typeof e||r){var o=n.length,i=new Array(o);i[0]=d;var l={};for(var c in t)hasOwnProperty.call(t,c)&&(l[c]=t[c]);l.originalType=e,l.mdxType="string"==typeof e?e:r,i[1]=l;for(var p=2;p=0||(r[n]=e[n]);return r}(e,t);if(Object.getOwnPropertySymbols){var l=Object.getOwnPropertySymbols(e);for(o=0;o=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(r[n]=e[n])}return r}var c=r.a.createContext({}),s=function(e){var t=r.a.useContext(c),n=t;return e&&(n="function"==typeof e?e(t):i(i({},t),e)),n},u=function(e){var t=s(e.components);return r.a.createElement(c.Provider,{value:t},e.children)},m={inlineCode:"code",wrapper:function(e){var t=e.children;return r.a.createElement(r.a.Fragment,{},t)}},d=r.a.forwardRef((function(e,t){var n=e.components,o=e.mdxType,l=e.originalType,a=e.parentName,c=p(e,["components","mdxType","originalType","parentName"]),u=s(n),d=o,f=u["".concat(a,".").concat(d)]||u[d]||m[d]||l;return n?r.a.createElement(f,i(i({ref:t},c),{},{components:n})):r.a.createElement(f,i({ref:t},c))}));function f(e,t){var n=arguments,o=t&&t.mdxType;if("string"==typeof e||o){var l=n.length,a=new Array(l);a[0]=d;var i={};for(var p in t)hasOwnProperty.call(t,p)&&(i[p]=t[p]);i.originalType=e,i.mdxType="string"==typeof e?e:o,a[1]=i;for(var c=2;c=0||(r[n]=e[n]);return r}(e,t);if(Object.getOwnPropertySymbols){var l=Object.getOwnPropertySymbols(e);for(o=0;o=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(r[n]=e[n])}return r}var c=r.a.createContext({}),s=function(e){var t=r.a.useContext(c),n=t;return e&&(n="function"==typeof e?e(t):i(i({},t),e)),n},u=function(e){var t=s(e.components);return r.a.createElement(c.Provider,{value:t},e.children)},m={inlineCode:"code",wrapper:function(e){var t=e.children;return r.a.createElement(r.a.Fragment,{},t)}},d=r.a.forwardRef((function(e,t){var n=e.components,o=e.mdxType,l=e.originalType,a=e.parentName,c=p(e,["components","mdxType","originalType","parentName"]),u=s(n),d=o,f=u["".concat(a,".").concat(d)]||u[d]||m[d]||l;return n?r.a.createElement(f,i(i({ref:t},c),{},{components:n})):r.a.createElement(f,i({ref:t},c))}));function f(e,t){var n=arguments,o=t&&t.mdxType;if("string"==typeof e||o){var l=n.length,a=new Array(l);a[0]=d;var i={};for(var p in t)hasOwnProperty.call(t,p)&&(i[p]=t[p]);i.originalType=e,i.mdxType="string"==typeof e?e:o,a[1]=i;for(var c=2;c=0||(a[r]=e[r]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(a[r]=e[r])}return a}var c=a.a.createContext({}),s=function(e){var t=a.a.useContext(c),r=t;return e&&(r="function"==typeof e?e(t):p(p({},t),e)),r},u=function(e){var t=s(e.components);return a.a.createElement(c.Provider,{value:t},e.children)},d={inlineCode:"code",wrapper:function(e){var t=e.children;return a.a.createElement(a.a.Fragment,{},t)}},m=a.a.forwardRef((function(e,t){var r=e.components,n=e.mdxType,o=e.originalType,i=e.parentName,c=l(e,["components","mdxType","originalType","parentName"]),u=s(r),m=n,f=u["".concat(i,".").concat(m)]||u[m]||d[m]||o;return r?a.a.createElement(f,p(p({ref:t},c),{},{components:r})):a.a.createElement(f,p({ref:t},c))}));function f(e,t){var r=arguments,n=t&&t.mdxType;if("string"==typeof e||n){var o=r.length,i=new Array(o);i[0]=m;var p={};for(var l in t)hasOwnProperty.call(t,l)&&(p[l]=t[l]);p.originalType=e,p.mdxType="string"==typeof e?e:n,i[1]=p;for(var c=2;c=0||(a[r]=e[r]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(a[r]=e[r])}return a}var c=a.a.createContext({}),s=function(e){var t=a.a.useContext(c),r=t;return e&&(r="function"==typeof e?e(t):p(p({},t),e)),r},u=function(e){var t=s(e.components);return a.a.createElement(c.Provider,{value:t},e.children)},d={inlineCode:"code",wrapper:function(e){var t=e.children;return a.a.createElement(a.a.Fragment,{},t)}},m=a.a.forwardRef((function(e,t){var r=e.components,n=e.mdxType,o=e.originalType,i=e.parentName,c=l(e,["components","mdxType","originalType","parentName"]),u=s(r),m=n,f=u["".concat(i,".").concat(m)]||u[m]||d[m]||o;return r?a.a.createElement(f,p(p({ref:t},c),{},{components:r})):a.a.createElement(f,p({ref:t},c))}));function f(e,t){var r=arguments,n=t&&t.mdxType;if("string"==typeof e||n){var o=r.length,i=new Array(o);i[0]=m;var p={};for(var l in t)hasOwnProperty.call(t,l)&&(p[l]=t[l]);p.originalType=e,p.mdxType="string"==typeof e?e:n,i[1]=p;for(var c=2;c=0||(o[r]=e[r]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(o[r]=e[r])}return o}var i=o.a.createContext({}),p=function(e){var t=o.a.useContext(i),r=t;return e&&(r="function"==typeof e?e(t):c(c({},t),e)),r},s=function(e){var t=p(e.components);return o.a.createElement(i.Provider,{value:t},e.children)},b={inlineCode:"code",wrapper:function(e){var t=e.children;return o.a.createElement(o.a.Fragment,{},t)}},f=o.a.forwardRef((function(e,t){var r=e.components,n=e.mdxType,a=e.originalType,l=e.parentName,i=u(e,["components","mdxType","originalType","parentName"]),s=p(r),f=n,m=s["".concat(l,".").concat(f)]||s[f]||b[f]||a;return r?o.a.createElement(m,c(c({ref:t},i),{},{components:r})):o.a.createElement(m,c({ref:t},i))}));function m(e,t){var r=arguments,n=t&&t.mdxType;if("string"==typeof e||n){var a=r.length,l=new Array(a);l[0]=f;var c={};for(var u in t)hasOwnProperty.call(t,u)&&(c[u]=t[u]);c.originalType=e,c.mdxType="string"==typeof e?e:n,l[1]=c;for(var i=2;i=0||(o[r]=e[r]);return o}(e,n);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(t=0;t=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(o[r]=e[r])}return o}var s=o.a.createContext({}),l=function(e){var n=o.a.useContext(s),r=n;return e&&(r="function"==typeof e?e(n):c(c({},n),e)),r},u=function(e){var n=l(e.components);return o.a.createElement(s.Provider,{value:n},e.children)},d={inlineCode:"code",wrapper:function(e){var n=e.children;return o.a.createElement(o.a.Fragment,{},n)}},m=o.a.forwardRef((function(e,n){var r=e.components,t=e.mdxType,a=e.originalType,i=e.parentName,s=p(e,["components","mdxType","originalType","parentName"]),u=l(r),m=t,b=u["".concat(i,".").concat(m)]||u[m]||d[m]||a;return r?o.a.createElement(b,c(c({ref:n},s),{},{components:r})):o.a.createElement(b,c({ref:n},s))}));function b(e,n){var r=arguments,t=n&&n.mdxType;if("string"==typeof e||t){var a=r.length,i=new Array(a);i[0]=m;var c={};for(var p in n)hasOwnProperty.call(n,p)&&(c[p]=n[p]);c.originalType=e,c.mdxType="string"==typeof e?e:t,i[1]=c;for(var s=2;s=0||(o[r]=e[r]);return o}(e,n);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(t=0;t=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(o[r]=e[r])}return o}var s=o.a.createContext({}),u=function(e){var n=o.a.useContext(s),r=n;return e&&(r="function"==typeof e?e(n):c(c({},n),e)),r},l=function(e){var n=u(e.components);return o.a.createElement(s.Provider,{value:n},e.children)},d={inlineCode:"code",wrapper:function(e){var n=e.children;return o.a.createElement(o.a.Fragment,{},n)}},m=o.a.forwardRef((function(e,n){var r=e.components,t=e.mdxType,a=e.originalType,i=e.parentName,s=p(e,["components","mdxType","originalType","parentName"]),l=u(r),m=t,b=l["".concat(i,".").concat(m)]||l[m]||d[m]||a;return r?o.a.createElement(b,c(c({ref:n},s),{},{components:r})):o.a.createElement(b,c({ref:n},s))}));function b(e,n){var r=arguments,t=n&&n.mdxType;if("string"==typeof e||t){var a=r.length,i=new Array(a);i[0]=m;var c={};for(var p in n)hasOwnProperty.call(n,p)&&(c[p]=n[p]);c.originalType=e,c.mdxType="string"==typeof e?e:t,i[1]=c;for(var s=2;s 11:\n row, col = row + 1, 1\n\npage.save()\n")))}c.isMDXComponent=!0},290:function(e,n,r){"use strict";r.d(n,"a",(function(){return p})),r.d(n,"b",(function(){return g}));var t=r(0),s=r.n(t);function i(e,n,r){return n in e?Object.defineProperty(e,n,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[n]=r,e}function a(e,n){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var t=Object.getOwnPropertySymbols(e);n&&(t=t.filter((function(n){return Object.getOwnPropertyDescriptor(e,n).enumerable}))),r.push.apply(r,t)}return r}function l(e){for(var n=1;n=0||(s[r]=e[r]);return s}(e,n);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(t=0;t=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(s[r]=e[r])}return s}var o=s.a.createContext({}),c=function(e){var n=s.a.useContext(o),r=n;return e&&(r="function"==typeof e?e(n):l(l({},n),e)),r},p=function(e){var n=c(e.components);return s.a.createElement(o.Provider,{value:n},e.children)},u={inlineCode:"code",wrapper:function(e){var n=e.children;return s.a.createElement(s.a.Fragment,{},n)}},x=s.a.forwardRef((function(e,n){var r=e.components,t=e.mdxType,i=e.originalType,a=e.parentName,o=y(e,["components","mdxType","originalType","parentName"]),p=c(r),x=t,g=p["".concat(a,".").concat(x)]||p[x]||u[x]||i;return r?s.a.createElement(g,l(l({ref:n},o),{},{components:r})):s.a.createElement(g,l({ref:n},o))}));function g(e,n){var r=arguments,t=n&&n.mdxType;if("string"==typeof e||t){var i=r.length,a=new Array(i);a[0]=x;var l={};for(var y in n)hasOwnProperty.call(n,y)&&(l[y]=n[y]);l.originalType=e,l.mdxType="string"==typeof e?e:t,a[1]=l;for(var o=2;o 11:\n row, col = row + 1, 1\n\npage.save()\n")))}c.isMDXComponent=!0},292:function(e,n,r){"use strict";r.d(n,"a",(function(){return p})),r.d(n,"b",(function(){return g}));var t=r(0),s=r.n(t);function i(e,n,r){return n in e?Object.defineProperty(e,n,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[n]=r,e}function a(e,n){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var t=Object.getOwnPropertySymbols(e);n&&(t=t.filter((function(n){return Object.getOwnPropertyDescriptor(e,n).enumerable}))),r.push.apply(r,t)}return r}function l(e){for(var n=1;n=0||(s[r]=e[r]);return s}(e,n);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(t=0;t=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(s[r]=e[r])}return s}var o=s.a.createContext({}),c=function(e){var n=s.a.useContext(o),r=n;return e&&(r="function"==typeof e?e(n):l(l({},n),e)),r},p=function(e){var n=c(e.components);return s.a.createElement(o.Provider,{value:n},e.children)},u={inlineCode:"code",wrapper:function(e){var n=e.children;return s.a.createElement(s.a.Fragment,{},n)}},x=s.a.forwardRef((function(e,n){var r=e.components,t=e.mdxType,i=e.originalType,a=e.parentName,o=y(e,["components","mdxType","originalType","parentName"]),p=c(r),x=t,g=p["".concat(a,".").concat(x)]||p[x]||u[x]||i;return r?s.a.createElement(g,l(l({ref:n},o),{},{components:r})):s.a.createElement(g,l({ref:n},o))}));function g(e,n){var r=arguments,t=n&&n.mdxType;if("string"==typeof e||t){var i=r.length,a=new Array(i);a[0]=x;var l={};for(var y in n)hasOwnProperty.call(n,y)&&(l[y]=n[y]);l.originalType=e,l.mdxType="string"==typeof e?e:t,a[1]=l;for(var o=2;o\n\n\n

      Hello World!

      \n\n\n'''\n\npage = site['/demo']\n\npage['example'] = ui.frame_card(\n box='1 1 2 2',\n title='Example',\n content=html,\n)\n\npage.save()\n")))}u.isMDXComponent=!0},290:function(e,t,r){"use strict";r.d(t,"a",(function(){return f})),r.d(t,"b",(function(){return v}));var n=r(0),i=r.n(n);function a(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function o(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),r.push.apply(r,n)}return r}function c(e){for(var t=1;t=0||(i[r]=e[r]);return i}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(i[r]=e[r])}return i}var s=i.a.createContext({}),u=function(e){var t=i.a.useContext(s),r=t;return e&&(r="function"==typeof e?e(t):c(c({},t),e)),r},f=function(e){var t=u(e.components);return i.a.createElement(s.Provider,{value:t},e.children)},d={inlineCode:"code",wrapper:function(e){var t=e.children;return i.a.createElement(i.a.Fragment,{},t)}},p=i.a.forwardRef((function(e,t){var r=e.components,n=e.mdxType,a=e.originalType,o=e.parentName,s=m(e,["components","mdxType","originalType","parentName"]),f=u(r),p=n,v=f["".concat(o,".").concat(p)]||f[p]||d[p]||a;return r?i.a.createElement(v,c(c({ref:t},s),{},{components:r})):i.a.createElement(v,c({ref:t},s))}));function v(e,t){var r=arguments,n=t&&t.mdxType;if("string"==typeof e||n){var a=r.length,o=new Array(a);o[0]=p;var c={};for(var m in t)hasOwnProperty.call(t,m)&&(c[m]=t[m]);c.originalType=e,c.mdxType="string"==typeof e?e:n,o[1]=c;for(var s=2;s\n\n\n

      Hello World!

      \n\n\n'''\n\npage = site['/demo']\n\npage['example'] = ui.frame_card(\n box='1 1 2 2',\n title='Example',\n content=html,\n)\n\npage.save()\n")))}u.isMDXComponent=!0},292:function(e,t,r){"use strict";r.d(t,"a",(function(){return f})),r.d(t,"b",(function(){return v}));var n=r(0),i=r.n(n);function a(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function o(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),r.push.apply(r,n)}return r}function c(e){for(var t=1;t=0||(i[r]=e[r]);return i}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(i[r]=e[r])}return i}var s=i.a.createContext({}),u=function(e){var t=i.a.useContext(s),r=t;return e&&(r="function"==typeof e?e(t):c(c({},t),e)),r},f=function(e){var t=u(e.components);return i.a.createElement(s.Provider,{value:t},e.children)},d={inlineCode:"code",wrapper:function(e){var t=e.children;return i.a.createElement(i.a.Fragment,{},t)}},p=i.a.forwardRef((function(e,t){var r=e.components,n=e.mdxType,a=e.originalType,o=e.parentName,s=m(e,["components","mdxType","originalType","parentName"]),f=u(r),p=n,v=f["".concat(o,".").concat(p)]||f[p]||d[p]||a;return r?i.a.createElement(v,c(c({ref:t},s),{},{components:r})):i.a.createElement(v,c({ref:t},s))}));function v(e,t){var r=arguments,n=t&&t.mdxType;if("string"==typeof e||n){var a=r.length,o=new Array(a);o[0]=p;var c={};for(var m in t)hasOwnProperty.call(t,m)&&(c[m]=t[m]);c.originalType=e,c.mdxType="string"==typeof e?e:n,o[1]=c;for(var s=2;s=0||(a[n]=e[n]);return a}(e,i);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(t=0;t=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(a[n]=e[n])}return a}var l=a.a.createContext({}),c=function(e){var i=a.a.useContext(l),n=i;return e&&(n="function"==typeof e?e(i):R(R({},i),e)),n},d=function(e){var i=c(e.components);return a.a.createElement(l.Provider,{value:i},e.children)},E={inlineCode:"code",wrapper:function(e){var i=e.children;return a.a.createElement(a.a.Fragment,{},i)}},p=a.a.forwardRef((function(e,i){var n=e.components,t=e.mdxType,o=e.originalType,r=e.parentName,l=u(e,["components","mdxType","originalType","parentName"]),d=c(n),p=t,s=d["".concat(r,".").concat(p)]||d[p]||E[p]||o;return n?a.a.createElement(s,R(R({ref:i},l),{},{components:n})):a.a.createElement(s,R({ref:i},l))}));function s(e,i){var n=arguments,t=i&&i.mdxType;if("string"==typeof e||t){var o=n.length,r=new Array(o);r[0]=p;var R={};for(var u in i)hasOwnProperty.call(i,u)&&(R[u]=i[u]);R.originalType=e,R.mdxType="string"==typeof e?e:t,r[1]=R;for(var l=2;l=0||(a[n]=e[n]);return a}(e,i);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(t=0;t=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(a[n]=e[n])}return a}var l=a.a.createContext({}),c=function(e){var i=a.a.useContext(l),n=i;return e&&(n="function"==typeof e?e(i):R(R({},i),e)),n},d=function(e){var i=c(e.components);return a.a.createElement(l.Provider,{value:i},e.children)},E={inlineCode:"code",wrapper:function(e){var i=e.children;return a.a.createElement(a.a.Fragment,{},i)}},p=a.a.forwardRef((function(e,i){var n=e.components,t=e.mdxType,o=e.originalType,r=e.parentName,l=u(e,["components","mdxType","originalType","parentName"]),d=c(n),p=t,s=d["".concat(r,".").concat(p)]||d[p]||E[p]||o;return n?a.a.createElement(s,R(R({ref:i},l),{},{components:n})):a.a.createElement(s,R({ref:i},l))}));function s(e,i){var n=arguments,t=i&&i.mdxType;if("string"==typeof e||t){var o=n.length,r=new Array(o);r[0]=p;var R={};for(var u in i)hasOwnProperty.call(i,u)&&(R[u]=i[u]);R.originalType=e,R.mdxType="string"==typeof e?e:t,r[1]=R;for(var l=2;l str:\n time.sleep(seconds) # Blocks!\n return f'Done!'\n")),Object(o.b)("p",null,"To call the above function from an app, don't do this:"),Object(o.b)("pre",null,Object(o.b)("code",Object(r.a)({parentName:"pre"},{className:"language-python",metastring:"{4}","{4}":!0}),"@app('/demo')\nasync def serve(q: Q):\n # ...\n message = blocking_function(42)\n # ...\n")),Object(o.b)("p",null,"Instead, do this:"),Object(o.b)("pre",null,Object(o.b)("code",Object(r.a)({parentName:"pre"},{className:"language-python",metastring:"{4}","{4}":!0}),"@app('/demo')\nasync def serve(q: Q):\n # ...\n message = await q.run(blocking_function, 42)\n # ...\n")),Object(o.b)("p",null,Object(o.b)("inlineCode",{parentName:"p"},"q.run()")," runs the blocking function in the background, in-process."),Object(o.b)("p",null,"Depending on your use case, you might want to use a separate process pool or thread pool from Python's ",Object(o.b)("a",Object(r.a)({parentName:"p"},{href:"https://docs.python.org/3/library/multiprocessing.html"}),"multiprocessing")," library, like this:"),Object(o.b)("pre",null,Object(o.b)("code",Object(r.a)({parentName:"pre"},{className:"language-python",metastring:"{1,6-7}","{1,6-7}":!0}),"import concurrent.futures\n\n@app('/demo')\nasync def serve(q: Q):\n # ...\n with concurrent.futures.ThreadPoolExecutor() as pool:\n message = await q.exec(pool, blocking_function, 42)\n # ...\n")),Object(o.b)("p",null,Object(o.b)("inlineCode",{parentName:"p"},"q.exec()")," accepts a custom process pool or thread pool to run the blocking function."),Object(o.b)("div",{className:"admonition admonition-tip alert alert--success"},Object(o.b)("div",Object(r.a)({parentName:"div"},{className:"admonition-heading"}),Object(o.b)("h5",{parentName:"div"},Object(o.b)("span",Object(r.a)({parentName:"h5"},{className:"admonition-icon"}),Object(o.b)("svg",Object(r.a)({parentName:"span"},{xmlns:"http://www.w3.org/2000/svg",width:"12",height:"16",viewBox:"0 0 12 16"}),Object(o.b)("path",Object(r.a)({parentName:"svg"},{fillRule:"evenodd",d:"M6.5 0C3.48 0 1 2.19 1 5c0 .92.55 2.25 1 3 1.34 2.25 1.78 2.78 2 4v1h5v-1c.22-1.22.66-1.75 2-4 .45-.75 1-2.08 1-3 0-2.81-2.48-5-5.5-5zm3.64 7.48c-.25.44-.47.8-.67 1.11-.86 1.41-1.25 2.06-1.45 3.23-.02.05-.02.11-.02.17H5c0-.06 0-.13-.02-.17-.2-1.17-.59-1.83-1.45-3.23-.2-.31-.42-.67-.67-1.11C2.44 6.78 2 5.65 2 5c0-2.2 2.02-4 4.5-4 1.22 0 2.36.42 3.22 1.19C10.55 2.94 11 3.94 11 5c0 .66-.44 1.78-.86 2.48zM4 14h5c-.23 1.14-1.3 2-2.5 2s-2.27-.86-2.5-2z"})))),"tip")),Object(o.b)("div",Object(r.a)({parentName:"div"},{className:"admonition-content"}),Object(o.b)("p",{parentName:"div"},"Apps that make calls to external services or APIs are better off replacing blocking HTTP clients like ",Object(o.b)("a",Object(r.a)({parentName:"p"},{href:"https://requests.readthedocs.io/en/master/"}),"requests")," with non-blocking clients like ",Object(o.b)("a",Object(r.a)({parentName:"p"},{href:"https://www.python-httpx.org/async/"}),"HTTPX"),"."))))}l.isMDXComponent=!0},292:function(e,n,t){"use strict";t.d(n,"a",(function(){return b})),t.d(n,"b",(function(){return m}));var r=t(0),a=t.n(r);function o(e,n,t){return n in e?Object.defineProperty(e,n,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[n]=t,e}function c(e,n){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);n&&(r=r.filter((function(n){return Object.getOwnPropertyDescriptor(e,n).enumerable}))),t.push.apply(t,r)}return t}function i(e){for(var n=1;n=0||(a[t]=e[t]);return a}(e,n);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(a[t]=e[t])}return a}var p=a.a.createContext({}),l=function(e){var n=a.a.useContext(p),t=n;return e&&(t="function"==typeof e?e(n):i(i({},n),e)),t},b=function(e){var n=l(e.components);return a.a.createElement(p.Provider,{value:n},e.children)},u={inlineCode:"code",wrapper:function(e){var n=e.children;return a.a.createElement(a.a.Fragment,{},n)}},d=a.a.forwardRef((function(e,n){var t=e.components,r=e.mdxType,o=e.originalType,c=e.parentName,p=s(e,["components","mdxType","originalType","parentName"]),b=l(t),d=r,m=b["".concat(c,".").concat(d)]||b[d]||u[d]||o;return t?a.a.createElement(m,i(i({ref:n},p),{},{components:t})):a.a.createElement(m,i({ref:n},p))}));function m(e,n){var t=arguments,r=n&&n.mdxType;if("string"==typeof e||r){var o=t.length,c=new Array(o);c[0]=d;var i={};for(var s in n)hasOwnProperty.call(n,s)&&(i[s]=n[s]);i.originalType=e,i.mdxType="string"==typeof e?e:r,c[1]=i;for(var p=2;p=0||(a[t]=e[t]);return a}(e,n);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(a[t]=e[t])}return a}var s=a.a.createContext({}),l=function(e){var n=a.a.useContext(s),t=n;return e&&(t="function"==typeof e?e(n):c(c({},n),e)),t},m=function(e){var n=l(e.components);return a.a.createElement(s.Provider,{value:n},e.children)},u={inlineCode:"code",wrapper:function(e){var n=e.children;return a.a.createElement(a.a.Fragment,{},n)}},d=a.a.forwardRef((function(e,n){var t=e.components,r=e.mdxType,o=e.originalType,i=e.parentName,s=p(e,["components","mdxType","originalType","parentName"]),m=l(t),d=r,f=m["".concat(i,".").concat(d)]||m[d]||u[d]||o;return t?a.a.createElement(f,c(c({ref:n},s),{},{components:t})):a.a.createElement(f,c({ref:n},s))}));function f(e,n){var t=arguments,r=n&&n.mdxType;if("string"==typeof e||r){var o=t.length,i=new Array(o);i[0]=d;var c={};for(var p in n)hasOwnProperty.call(n,p)&&(c[p]=n[p]);c.originalType=e,c.mdxType="string"==typeof e?e:r,i[1]=c;for(var s=2;s=0||(a[t]=e[t]);return a}(e,n);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(a[t]=e[t])}return a}var s=a.a.createContext({}),l=function(e){var n=a.a.useContext(s),t=n;return e&&(t="function"==typeof e?e(n):c(c({},n),e)),t},m=function(e){var n=l(e.components);return a.a.createElement(s.Provider,{value:n},e.children)},u={inlineCode:"code",wrapper:function(e){var n=e.children;return a.a.createElement(a.a.Fragment,{},n)}},d=a.a.forwardRef((function(e,n){var t=e.components,r=e.mdxType,o=e.originalType,i=e.parentName,s=p(e,["components","mdxType","originalType","parentName"]),m=l(t),d=r,f=m["".concat(i,".").concat(d)]||m[d]||u[d]||o;return t?a.a.createElement(f,c(c({ref:n},s),{},{components:t})):a.a.createElement(f,c({ref:n},s))}));function f(e,n){var t=arguments,r=n&&n.mdxType;if("string"==typeof e||r){var o=t.length,i=new Array(o);i[0]=d;var c={};for(var p in n)hasOwnProperty.call(n,p)&&(c[p]=n[p]);c.originalType=e,c.mdxType="string"==typeof e?e:r,i[1]=c;for(var s=2;s=0||(a[r]=e[r]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(a[r]=e[r])}return a}var s=a.a.createContext({}),l=function(e){var t=a.a.useContext(s),r=t;return e&&(r="function"==typeof e?e(t):c(c({},t),e)),r},d=function(e){var t=l(e.components);return a.a.createElement(s.Provider,{value:t},e.children)},u={inlineCode:"code",wrapper:function(e){var t=e.children;return a.a.createElement(a.a.Fragment,{},t)}},m=a.a.forwardRef((function(e,t){var r=e.components,n=e.mdxType,o=e.originalType,i=e.parentName,s=p(e,["components","mdxType","originalType","parentName"]),d=l(r),m=n,f=d["".concat(i,".").concat(m)]||d[m]||u[m]||o;return r?a.a.createElement(f,c(c({ref:t},s),{},{components:r})):a.a.createElement(f,c({ref:t},s))}));function f(e,t){var r=arguments,n=t&&t.mdxType;if("string"==typeof e||n){var o=r.length,i=new Array(o);i[0]=m;var c={};for(var p in t)hasOwnProperty.call(t,p)&&(c[p]=t[p]);c.originalType=e,c.mdxType="string"==typeof e?e:n,i[1]=c;for(var s=2;s=0||(a[r]=e[r]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(a[r]=e[r])}return a}var s=a.a.createContext({}),l=function(e){var t=a.a.useContext(s),r=t;return e&&(r="function"==typeof e?e(t):c(c({},t),e)),r},d=function(e){var t=l(e.components);return a.a.createElement(s.Provider,{value:t},e.children)},u={inlineCode:"code",wrapper:function(e){var t=e.children;return a.a.createElement(a.a.Fragment,{},t)}},m=a.a.forwardRef((function(e,t){var r=e.components,n=e.mdxType,o=e.originalType,i=e.parentName,s=p(e,["components","mdxType","originalType","parentName"]),d=l(r),m=n,f=d["".concat(i,".").concat(m)]||d[m]||u[m]||o;return r?a.a.createElement(f,c(c({ref:t},s),{},{components:r})):a.a.createElement(f,c({ref:t},s))}));function f(e,t){var r=arguments,n=t&&t.mdxType;if("string"==typeof e||n){var o=r.length,i=new Array(o);i[0]=m;var c={};for(var p in t)hasOwnProperty.call(t,p)&&(c[p]=t[p]);c.originalType=e,c.mdxType="string"==typeof e?e:n,i[1]=c;for(var s=2;s',id:"breadcrumb",children:[]},{value:'BreadcrumbsCard       ',id:"breadcrumbscard",children:[]},{value:'Button ',id:"button",children:[]},{value:'Buttons ',id:"buttons",children:[]},{value:'Checkbox ',id:"checkbox",children:[]},{value:'Checklist ',id:"checklist",children:[]},{value:'Choice ',id:"choice",children:[]},{value:'ChoiceGroup ',id:"choicegroup",children:[]},{value:'ColorPicker ',id:"colorpicker",children:[]},{value:'Combobox ',id:"combobox",children:[]},{value:'Command ',id:"command",children:[]},{value:'Component ',id:"component",children:[]},{value:'DatePicker ',id:"datepicker",children:[]},{value:'Dropdown ',id:"dropdown",children:[]},{value:'Expander ',id:"expander",children:[]},{value:'FileUpload ',id:"fileupload",children:[]},{value:'FlexCard ',id:"flexcard",children:[]},{value:'FormCard ',id:"formcard",children:[]},{value:'Frame ',id:"frame",children:[]},{value:'FrameCard ',id:"framecard",children:[]},{value:'GraphicsCard ',id:"graphicscard",children:[]},{value:'GridCard ',id:"gridcard",children:[]},{value:'HeaderCard ',id:"headercard",children:[]},{value:'IconTableCellType ',id:"icontablecelltype",children:[]},{value:'ImageCard ',id:"imagecard",children:[]},{value:'Label ',id:"label",children:[]},{value:'LargeBarStatCard ',id:"largebarstatcard",children:[]},{value:'LargeStatCard ',id:"largestatcard",children:[]},{value:'Link ',id:"link",children:[]},{value:'ListCard ',id:"listcard",children:[]},{value:'ListItem1Card ',id:"listitem1card",children:[]},{value:'Mark ',id:"mark",children:[]},{value:'MarkdownCard ',id:"markdowncard",children:[]},{value:'Markup ',id:"markup",children:[]},{value:'MarkupCard ',id:"markupcard",children:[]},{value:'MessageBar ',id:"messagebar",children:[]},{value:'MetaCard ',id:"metacard",children:[]},{value:'NavCard ',id:"navcard",children:[]},{value:'NavGroup ',id:"navgroup",children:[]},{value:'NavItem ',id:"navitem",children:[]},{value:'Picker ',id:"picker",children:[]},{value:'PixelArtCard ',id:"pixelartcard",children:[]},{value:'Plot ',id:"plot",children:[]},{value:'PlotCard ',id:"plotcard",children:[]},{value:'Progress ',id:"progress",children:[]},{value:'ProgressTableCellType ',id:"progresstablecelltype",children:[]},{value:'RangeSlider ',id:"rangeslider",children:[]},{value:'RepeatCard ',id:"repeatcard",children:[]},{value:'Separator ',id:"separator",children:[]},{value:'Slider ',id:"slider",children:[]},{value:'SmallSeriesStatCard ',id:"smallseriesstatcard",children:[]},{value:'SmallStatCard ',id:"smallstatcard",children:[]},{value:'Spinbox ',id:"spinbox",children:[]},{value:'Step ',id:"step",children:[]},{value:'Stepper ',id:"stepper",children:[]},{value:'Tab ',id:"tab",children:[]},{value:'TabCard ',id:"tabcard",children:[]},{value:'Table ',id:"table",children:[]},{value:'TableCellType ',id:"tablecelltype",children:[]},{value:'TableColumn ',id:"tablecolumn",children:[]},{value:'TableRow ',id:"tablerow",children:[]},{value:'Tabs ',id:"tabs",children:[]},{value:'TallGaugeStatCard ',id:"tallgaugestatcard",children:[]},{value:'TallSeriesStatCard ',id:"tallseriesstatcard",children:[]},{value:'Template ',id:"template",children:[]},{value:'TemplateCard ',id:"templatecard",children:[]},{value:'Text ',id:"text",children:[]},{value:'TextL ',id:"textl",children:[]},{value:'TextM ',id:"textm",children:[]},{value:'TextS ',id:"texts",children:[]},{value:'TextXl ',id:"textxl",children:[]},{value:'TextXs ',id:"textxs",children:[]},{value:'Textbox ',id:"textbox",children:[]},{value:'Toggle ',id:"toggle",children:[]},{value:'ToolbarCard ',id:"toolbarcard",children:[]},{value:'VegaCard ',id:"vegacard",children:[]},{value:'VegaVisualization ',id:"vegavisualization",children:[]},{value:'Visualization ',id:"visualization",children:[]},{value:'WideBarStatCard ',id:"widebarstatcard",children:[]},{value:'WideGaugeStatCard ',id:"widegaugestatcard",children:[]},{value:'WideSeriesStatCard ',id:"wideseriesstatcard",children:[]}]}],d={rightToc:o};function l(e){var a=e.components,t=Object(i.a)(e,["components"]);return Object(c.b)("wrapper",Object(s.a)({},d,t,{components:a,mdxType:"MDXLayout"}),Object(c.b)("h2",{id:"classes"},"Classes"),Object(c.b)("div",{className:"api"},Object(c.b)("h3",{id:"breadcrumb"},"Breadcrumb ",Object(c.b)("a",{name:"h2o_wave.types.Breadcrumb"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"class ",Object(c.b)("span",{class:"ident"},"Breadcrumb"),"(name:\xa0str, label:\xa0str)"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Create a breadcrumb for a ",Object(c.b)("code",null,Object(c.b)("a",{title:"h2o_wave.types.BreadcrumbsCard",href:"#h2o_wave.types.BreadcrumbsCard"},"BreadcrumbsCard")),".")),Object(c.b)("h4",{id:"static-methods"},"Static methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"load"},"load ",Object(c.b)("a",{name:"h2o_wave.types.Breadcrumb.load"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"load"),"(_Breadcrumb__d:\xa0Dict) \u2011>\xa0",Object(c.b)("a",{title:"h2o_wave.types.Breadcrumb",href:"#h2o_wave.types.Breadcrumb"},"Breadcrumb")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Creates an instance of this class using the contents of a dict."))))),Object(c.b)("h4",{id:"instance-variables"},"Instance variables"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{id:"h2o_wave.types.Breadcrumb.label",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"label")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The label to display.")),Object(c.b)("div",{id:"h2o_wave.types.Breadcrumb.name",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"name")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The name of this item. Prefix the name with a '#' to trigger hash-change navigation."))),Object(c.b)("h4",{id:"methods"},"Methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"dump"},"dump ",Object(c.b)("a",{name:"h2o_wave.types.Breadcrumb.dump"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"dump"),"(self) \u2011>\xa0Dict"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Returns the contents of this object as a dict."))))))),Object(c.b)("div",{className:"api"},Object(c.b)("h3",{id:"breadcrumbscard"},"BreadcrumbsCard ",Object(c.b)("a",{name:"h2o_wave.types.BreadcrumbsCard"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"class ",Object(c.b)("span",{class:"ident"},"BreadcrumbsCard"),"(box:\xa0str, items:\xa0List[",Object(c.b)("a",{title:"h2o_wave.types.Breadcrumb",href:"#h2o_wave.types.Breadcrumb"},"Breadcrumb"),"], commands:\xa0Union[List[",Object(c.b)("a",{title:"h2o_wave.types.Command",href:"#h2o_wave.types.Command"},"Command"),"],\xa0NoneType]\xa0=\xa0None)"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Create a card containing breadcrumbs. Breadcrumbs should be used as a navigational aid in your app or site. They indicate the current page\u2019s location within a hierarchy and help the user understand where they are in relation to the rest of that hierarchy. They also afford one-click access to higher levels of that hierarchy. Breadcrumbs are typically placed, in horizontal form, under the masthead or navigation of an experience, above the primary content area.")),Object(c.b)("h4",{id:"static-methods-1"},"Static methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"load-1"},"load ",Object(c.b)("a",{name:"h2o_wave.types.BreadcrumbsCard.load"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"load"),"(_BreadcrumbsCard__d:\xa0Dict) \u2011>\xa0",Object(c.b)("a",{title:"h2o_wave.types.BreadcrumbsCard",href:"#h2o_wave.types.BreadcrumbsCard"},"BreadcrumbsCard")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Creates an instance of this class using the contents of a dict."))))),Object(c.b)("h4",{id:"instance-variables-1"},"Instance variables"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{id:"h2o_wave.types.BreadcrumbsCard.box",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"box")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"A string indicating how to place this component on the page.")),Object(c.b)("div",{id:"h2o_wave.types.BreadcrumbsCard.commands",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"commands")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Contextual menu commands for this component.")),Object(c.b)("div",{id:"h2o_wave.types.BreadcrumbsCard.items",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"items")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"A list of ",Object(c.b)("code",null,Object(c.b)("a",{title:"h2o_wave.types.Breadcrumb",href:"#h2o_wave.types.Breadcrumb"},"Breadcrumb"))," instances to display. See ",Object(c.b)("code",null,Object(c.b)("a",{title:"h2o_wave.ui.breadcrumb",href:"ui#h2o_wave.ui.breadcrumb"},"breadcrumb()"))))),Object(c.b)("h4",{id:"methods-1"},"Methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"dump-1"},"dump ",Object(c.b)("a",{name:"h2o_wave.types.BreadcrumbsCard.dump"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"dump"),"(self) \u2011>\xa0Dict"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Returns the contents of this object as a dict."))))))),Object(c.b)("div",{className:"api"},Object(c.b)("h3",{id:"button"},"Button ",Object(c.b)("a",{name:"h2o_wave.types.Button"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"class ",Object(c.b)("span",{class:"ident"},"Button"),"(name:\xa0str, label:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, caption:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, value:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, primary:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, disabled:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, link:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, visible:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, tooltip:\xa0Union[str,\xa0NoneType]\xa0=\xa0None)"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Create a button."),Object(c.b)("p",null,"Buttons are best used to enable a user to commit a change or complete steps in a task. They are typically found inside forms, dialogs, panels or pages. An example of their usage is confirming the deletion of a file in a confirmation dialog."),Object(c.b)("p",null,"When considering their place in a layout, contemplate the order in which a user will flow through the UI. As an example, in a form, the individual will need to read and interact with the form fields before submitting the form. Therefore, as a general rule, the button should be placed at the bottom of the UI container which holds the related UI elements."),Object(c.b)("p",null,'Buttons may be placed within a "buttons" component which will lay out the buttons horizontally, or used individually and they will be stacked vertically.'),Object(c.b)("p",null,"While buttons can technically be used to navigate a user to another part of the experience, this is not recommended unless that navigation is part of an action or their flow.")),Object(c.b)("h4",{id:"static-methods-2"},"Static methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"load-2"},"load ",Object(c.b)("a",{name:"h2o_wave.types.Button.load"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"load"),"(_Button__d:\xa0Dict) \u2011>\xa0",Object(c.b)("a",{title:"h2o_wave.types.Button",href:"#h2o_wave.types.Button"},"Button")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Creates an instance of this class using the contents of a dict."))))),Object(c.b)("h4",{id:"instance-variables-2"},"Instance variables"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{id:"h2o_wave.types.Button.caption",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"caption")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The caption displayed below the label. Setting a caption renders a compound button.")),Object(c.b)("div",{id:"h2o_wave.types.Button.disabled",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"disabled")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"True if the button should be disabled.")),Object(c.b)("div",{id:"h2o_wave.types.Button.label",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"label")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The text displayed on the button.")),Object(c.b)("div",{id:"h2o_wave.types.Button.link",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"link")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"True if the button should be rendered as link text and not a standard button.")),Object(c.b)("div",{id:"h2o_wave.types.Button.name",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"name")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"An identifying name for this component. If the name is prefixed with a '#', the button sets the location hash to the name when clicked.")),Object(c.b)("div",{id:"h2o_wave.types.Button.primary",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"primary")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"True if the button should be rendered as the primary button in the set.")),Object(c.b)("div",{id:"h2o_wave.types.Button.tooltip",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"tooltip")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"An optional tooltip message displayed when a user clicks the help icon to the right of the component.")),Object(c.b)("div",{id:"h2o_wave.types.Button.value",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"value")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"A value for this button. If a value is set, it is used for the button's submitted instead of a boolean True.")),Object(c.b)("div",{id:"h2o_wave.types.Button.visible",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"visible")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"True if the component should be visible. Defaults to true."))),Object(c.b)("h4",{id:"methods-2"},"Methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"dump-2"},"dump ",Object(c.b)("a",{name:"h2o_wave.types.Button.dump"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"dump"),"(self) \u2011>\xa0Dict"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Returns the contents of this object as a dict."))))))),Object(c.b)("div",{className:"api"},Object(c.b)("h3",{id:"buttons"},"Buttons ",Object(c.b)("a",{name:"h2o_wave.types.Buttons"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"class ",Object(c.b)("span",{class:"ident"},"Buttons"),"(items:\xa0List[ForwardRef('",Object(c.b)("a",{title:"h2o_wave.types.Component",href:"#h2o_wave.types.Component"},"Component"),"')], justify:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, name:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, visible:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None)"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Create a set of buttons to be layed out horizontally.")),Object(c.b)("h4",{id:"static-methods-3"},"Static methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"load-3"},"load ",Object(c.b)("a",{name:"h2o_wave.types.Buttons.load"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"load"),"(_Buttons__d:\xa0Dict) \u2011>\xa0",Object(c.b)("a",{title:"h2o_wave.types.Buttons",href:"#h2o_wave.types.Buttons"},"Buttons")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Creates an instance of this class using the contents of a dict."))))),Object(c.b)("h4",{id:"instance-variables-3"},"Instance variables"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{id:"h2o_wave.types.Buttons.items",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"items")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The button in this set.")),Object(c.b)("div",{id:"h2o_wave.types.Buttons.justify",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"justify")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Specifies how to lay out buttons horizontally. One of 'start', 'end', 'center', 'between', 'around'.")),Object(c.b)("div",{id:"h2o_wave.types.Buttons.name",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"name")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"An identifying name for this component.")),Object(c.b)("div",{id:"h2o_wave.types.Buttons.visible",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"visible")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"True if the component should be visible. Defaults to true."))),Object(c.b)("h4",{id:"methods-3"},"Methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"dump-3"},"dump ",Object(c.b)("a",{name:"h2o_wave.types.Buttons.dump"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"dump"),"(self) \u2011>\xa0Dict"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Returns the contents of this object as a dict."))))))),Object(c.b)("div",{className:"api"},Object(c.b)("h3",{id:"checkbox"},"Checkbox ",Object(c.b)("a",{name:"h2o_wave.types.Checkbox"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"class ",Object(c.b)("span",{class:"ident"},"Checkbox"),"(name:\xa0str, label:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, value:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, indeterminate:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, disabled:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, trigger:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, visible:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, tooltip:\xa0Union[str,\xa0NoneType]\xa0=\xa0None)"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Create a checkbox."),Object(c.b)("p",null,"A checkbox allows users to switch between two mutually exclusive options (checked or unchecked, on or off) through a single click or tap. It can also be used to indicate a subordinate setting or preference when paired with another component."),Object(c.b)("p",null,"A checkbox is used to select or deselect action items. It can be used for a single item or for a list of multiple items that a user can choose from. The component has two selection states: unselected and selected."),Object(c.b)("p",null,"For a binary choice, the main difference between a checkbox and a toggle switch is that the checkbox is for status and the toggle switch is for action."),Object(c.b)("p",null,"Use multiple checkboxes for multi-select scenarios in which a user chooses one or more items from a group of choices that are not mutually exclusive.")),Object(c.b)("h4",{id:"static-methods-4"},"Static methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"load-4"},"load ",Object(c.b)("a",{name:"h2o_wave.types.Checkbox.load"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"load"),"(_Checkbox__d:\xa0Dict) \u2011>\xa0",Object(c.b)("a",{title:"h2o_wave.types.Checkbox",href:"#h2o_wave.types.Checkbox"},"Checkbox")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Creates an instance of this class using the contents of a dict."))))),Object(c.b)("h4",{id:"instance-variables-4"},"Instance variables"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{id:"h2o_wave.types.Checkbox.disabled",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"disabled")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"True if the checkbox is disabled.")),Object(c.b)("div",{id:"h2o_wave.types.Checkbox.indeterminate",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"indeterminate")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"True if the selection is indeterminate (neither selected nor unselected).")),Object(c.b)("div",{id:"h2o_wave.types.Checkbox.label",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"label")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Text to be displayed alongside the checkbox.")),Object(c.b)("div",{id:"h2o_wave.types.Checkbox.name",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"name")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"An identifying name for this component.")),Object(c.b)("div",{id:"h2o_wave.types.Checkbox.tooltip",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"tooltip")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"An optional tooltip message displayed when a user clicks the help icon to the right of the component.")),Object(c.b)("div",{id:"h2o_wave.types.Checkbox.trigger",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"trigger")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"True if the form should be submitted when the checkbox value changes.")),Object(c.b)("div",{id:"h2o_wave.types.Checkbox.value",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"value")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"True if selected, False if unselected.")),Object(c.b)("div",{id:"h2o_wave.types.Checkbox.visible",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"visible")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"True if the component should be visible. Defaults to true."))),Object(c.b)("h4",{id:"methods-4"},"Methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"dump-4"},"dump ",Object(c.b)("a",{name:"h2o_wave.types.Checkbox.dump"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"dump"),"(self) \u2011>\xa0Dict"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Returns the contents of this object as a dict."))))))),Object(c.b)("div",{className:"api"},Object(c.b)("h3",{id:"checklist"},"Checklist ",Object(c.b)("a",{name:"h2o_wave.types.Checklist"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"class ",Object(c.b)("span",{class:"ident"},"Checklist"),"(name:\xa0str, label:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, values:\xa0Union[List[str],\xa0NoneType]\xa0=\xa0None, choices:\xa0Union[List[",Object(c.b)("a",{title:"h2o_wave.types.Choice",href:"#h2o_wave.types.Choice"},"Choice"),"],\xa0NoneType]\xa0=\xa0None, trigger:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, visible:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, tooltip:\xa0Union[str,\xa0NoneType]\xa0=\xa0None)"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Create a set of checkboxes. Use this for multi-select scenarios in which a user chooses one or more items from a group of choices that are not mutually exclusive.")),Object(c.b)("h4",{id:"static-methods-5"},"Static methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"load-5"},"load ",Object(c.b)("a",{name:"h2o_wave.types.Checklist.load"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"load"),"(_Checklist__d:\xa0Dict) \u2011>\xa0",Object(c.b)("a",{title:"h2o_wave.types.Checklist",href:"#h2o_wave.types.Checklist"},"Checklist")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Creates an instance of this class using the contents of a dict."))))),Object(c.b)("h4",{id:"instance-variables-5"},"Instance variables"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{id:"h2o_wave.types.Checklist.choices",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"choices")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The choices to be presented.")),Object(c.b)("div",{id:"h2o_wave.types.Checklist.label",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"label")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Text to be displayed above the component.")),Object(c.b)("div",{id:"h2o_wave.types.Checklist.name",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"name")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"An identifying name for this component.")),Object(c.b)("div",{id:"h2o_wave.types.Checklist.tooltip",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"tooltip")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"An optional tooltip message displayed when a user clicks the help icon to the right of the component.")),Object(c.b)("div",{id:"h2o_wave.types.Checklist.trigger",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"trigger")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"True if the form should be submitted when the checklist value changes.")),Object(c.b)("div",{id:"h2o_wave.types.Checklist.values",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"values")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The names of the selected choices.")),Object(c.b)("div",{id:"h2o_wave.types.Checklist.visible",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"visible")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"True if the component should be visible. Defaults to true."))),Object(c.b)("h4",{id:"methods-5"},"Methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"dump-5"},"dump ",Object(c.b)("a",{name:"h2o_wave.types.Checklist.dump"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"dump"),"(self) \u2011>\xa0Dict"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Returns the contents of this object as a dict."))))))),Object(c.b)("div",{className:"api"},Object(c.b)("h3",{id:"choice"},"Choice ",Object(c.b)("a",{name:"h2o_wave.types.Choice"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"class ",Object(c.b)("span",{class:"ident"},"Choice"),"(name:\xa0str, label:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, disabled:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None)"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Create a choice for a checklist, choice group or dropdown.")),Object(c.b)("h4",{id:"static-methods-6"},"Static methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"load-6"},"load ",Object(c.b)("a",{name:"h2o_wave.types.Choice.load"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"load"),"(_Choice__d:\xa0Dict) \u2011>\xa0",Object(c.b)("a",{title:"h2o_wave.types.Choice",href:"#h2o_wave.types.Choice"},"Choice")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Creates an instance of this class using the contents of a dict."))))),Object(c.b)("h4",{id:"instance-variables-6"},"Instance variables"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{id:"h2o_wave.types.Choice.disabled",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"disabled")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"True if the checkbox is disabled.")),Object(c.b)("div",{id:"h2o_wave.types.Choice.label",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"label")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Text to be displayed alongside the component.")),Object(c.b)("div",{id:"h2o_wave.types.Choice.name",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"name")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"An identifying name for this component."))),Object(c.b)("h4",{id:"methods-6"},"Methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"dump-6"},"dump ",Object(c.b)("a",{name:"h2o_wave.types.Choice.dump"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"dump"),"(self) \u2011>\xa0Dict"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Returns the contents of this object as a dict."))))))),Object(c.b)("div",{className:"api"},Object(c.b)("h3",{id:"choicegroup"},"ChoiceGroup ",Object(c.b)("a",{name:"h2o_wave.types.ChoiceGroup"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"class ",Object(c.b)("span",{class:"ident"},"ChoiceGroup"),"(name:\xa0str, label:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, value:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, choices:\xa0Union[List[",Object(c.b)("a",{title:"h2o_wave.types.Choice",href:"#h2o_wave.types.Choice"},"Choice"),"],\xa0NoneType]\xa0=\xa0None, required:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, trigger:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, visible:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, tooltip:\xa0Union[str,\xa0NoneType]\xa0=\xa0None)"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Create a choice group. The choice group component, also known as radio buttons, let users select one option from two or more choices. Each option is represented by one choice group button; a user can select only one choice group in a button group."),Object(c.b)("p",null,"Choice groups emphasize all options equally, and that may draw more attention to the options than necessary. Consider using other components, unless the options deserve extra attention from the user. For example, if the default option is recommended for most users in most situations, use a dropdown instead."),Object(c.b)("p",null,'If there are only two mutually exclusive options, combine them into a single Checkbox or Toggle switch. For example, use a checkbox for "I agree" instead of choice group buttons for "I agree" and "I don\'t agree."')),Object(c.b)("h4",{id:"static-methods-7"},"Static methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"load-7"},"load ",Object(c.b)("a",{name:"h2o_wave.types.ChoiceGroup.load"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"load"),"(_ChoiceGroup__d:\xa0Dict) \u2011>\xa0",Object(c.b)("a",{title:"h2o_wave.types.ChoiceGroup",href:"#h2o_wave.types.ChoiceGroup"},"ChoiceGroup")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Creates an instance of this class using the contents of a dict."))))),Object(c.b)("h4",{id:"instance-variables-7"},"Instance variables"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{id:"h2o_wave.types.ChoiceGroup.choices",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"choices")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The choices to be presented.")),Object(c.b)("div",{id:"h2o_wave.types.ChoiceGroup.label",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"label")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Text to be displayed alongside the component.")),Object(c.b)("div",{id:"h2o_wave.types.ChoiceGroup.name",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"name")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"An identifying name for this component.")),Object(c.b)("div",{id:"h2o_wave.types.ChoiceGroup.required",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"required")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"True if this field is required.")),Object(c.b)("div",{id:"h2o_wave.types.ChoiceGroup.tooltip",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"tooltip")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"An optional tooltip message displayed when a user clicks the help icon to the right of the component.")),Object(c.b)("div",{id:"h2o_wave.types.ChoiceGroup.trigger",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"trigger")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"True if the form should be submitted when the selection changes.")),Object(c.b)("div",{id:"h2o_wave.types.ChoiceGroup.value",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"value")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The name of the selected choice.")),Object(c.b)("div",{id:"h2o_wave.types.ChoiceGroup.visible",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"visible")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"True if the component should be visible. Defaults to true."))),Object(c.b)("h4",{id:"methods-7"},"Methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"dump-7"},"dump ",Object(c.b)("a",{name:"h2o_wave.types.ChoiceGroup.dump"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"dump"),"(self) \u2011>\xa0Dict"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Returns the contents of this object as a dict."))))))),Object(c.b)("div",{className:"api"},Object(c.b)("h3",{id:"colorpicker"},"ColorPicker ",Object(c.b)("a",{name:"h2o_wave.types.ColorPicker"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"class ",Object(c.b)("span",{class:"ident"},"ColorPicker"),"(name:\xa0str, label:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, value:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, choices:\xa0Union[List[str],\xa0NoneType]\xa0=\xa0None, visible:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, tooltip:\xa0Union[str,\xa0NoneType]\xa0=\xa0None)"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Create a color picker."),Object(c.b)("p",null,"A date picker allows a user to pick a color value. If the 'choices' parameter is set, a swatch picker is displayed instead of the standard color picker.")),Object(c.b)("h4",{id:"static-methods-8"},"Static methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"load-8"},"load ",Object(c.b)("a",{name:"h2o_wave.types.ColorPicker.load"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"load"),"(_ColorPicker__d:\xa0Dict) \u2011>\xa0",Object(c.b)("a",{title:"h2o_wave.types.ColorPicker",href:"#h2o_wave.types.ColorPicker"},"ColorPicker")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Creates an instance of this class using the contents of a dict."))))),Object(c.b)("h4",{id:"instance-variables-8"},"Instance variables"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{id:"h2o_wave.types.ColorPicker.choices",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"choices")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"A list of colors (CSS-compatible strings) to limit color choices to.")),Object(c.b)("div",{id:"h2o_wave.types.ColorPicker.label",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"label")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Text to be displayed alongside the component.")),Object(c.b)("div",{id:"h2o_wave.types.ColorPicker.name",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"name")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"An identifying name for this component.")),Object(c.b)("div",{id:"h2o_wave.types.ColorPicker.tooltip",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"tooltip")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"An optional tooltip message displayed when a user clicks the help icon to the right of the component.")),Object(c.b)("div",{id:"h2o_wave.types.ColorPicker.value",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"value")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The selected color (CSS-compatible string)")),Object(c.b)("div",{id:"h2o_wave.types.ColorPicker.visible",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"visible")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"True if the component should be visible. Defaults to true."))),Object(c.b)("h4",{id:"methods-8"},"Methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"dump-8"},"dump ",Object(c.b)("a",{name:"h2o_wave.types.ColorPicker.dump"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"dump"),"(self) \u2011>\xa0Dict"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Returns the contents of this object as a dict."))))))),Object(c.b)("div",{className:"api"},Object(c.b)("h3",{id:"combobox"},"Combobox ",Object(c.b)("a",{name:"h2o_wave.types.Combobox"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"class ",Object(c.b)("span",{class:"ident"},"Combobox"),"(name:\xa0str, label:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, placeholder:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, value:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, choices:\xa0Union[List[str],\xa0NoneType]\xa0=\xa0None, error:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, disabled:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, visible:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, tooltip:\xa0Union[str,\xa0NoneType]\xa0=\xa0None)"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Create a combobox."),Object(c.b)("p",null,"A combobox is a list in which the selected item is always visible, and the others are visible on demand by clicking a drop-down button or by typing in the input. They are used to simplify the design and make a choice within the UI."),Object(c.b)("p",null,"When closed, only the selected item is visible. When users click the drop-down button, all the options become visible. To change the value, users open the list and click another value or use the arrow keys (up and down) to select a new value. When collapsed the user can select a new value by typing.")),Object(c.b)("h4",{id:"static-methods-9"},"Static methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"load-9"},"load ",Object(c.b)("a",{name:"h2o_wave.types.Combobox.load"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"load"),"(_Combobox__d:\xa0Dict) \u2011>\xa0",Object(c.b)("a",{title:"h2o_wave.types.Combobox",href:"#h2o_wave.types.Combobox"},"Combobox")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Creates an instance of this class using the contents of a dict."))))),Object(c.b)("h4",{id:"instance-variables-9"},"Instance variables"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{id:"h2o_wave.types.Combobox.choices",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"choices")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The choices to be presented.")),Object(c.b)("div",{id:"h2o_wave.types.Combobox.disabled",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"disabled")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"True if this field is disabled.")),Object(c.b)("div",{id:"h2o_wave.types.Combobox.error",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"error")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Text to be displayed as an error below the text box.")),Object(c.b)("div",{id:"h2o_wave.types.Combobox.label",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"label")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Text to be displayed alongside the component.")),Object(c.b)("div",{id:"h2o_wave.types.Combobox.name",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"name")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"An identifying name for this component.")),Object(c.b)("div",{id:"h2o_wave.types.Combobox.placeholder",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"placeholder")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"A string that provides a brief hint to the user as to what kind of information is expected in the field.")),Object(c.b)("div",{id:"h2o_wave.types.Combobox.tooltip",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"tooltip")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"An optional tooltip message displayed when a user clicks the help icon to the right of the component.")),Object(c.b)("div",{id:"h2o_wave.types.Combobox.value",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"value")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The name of the selected choice.")),Object(c.b)("div",{id:"h2o_wave.types.Combobox.visible",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"visible")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"True if the component should be visible. Defaults to true."))),Object(c.b)("h4",{id:"methods-9"},"Methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"dump-9"},"dump ",Object(c.b)("a",{name:"h2o_wave.types.Combobox.dump"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"dump"),"(self) \u2011>\xa0Dict"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Returns the contents of this object as a dict."))))))),Object(c.b)("div",{className:"api"},Object(c.b)("h3",{id:"command"},"Command ",Object(c.b)("a",{name:"h2o_wave.types.Command"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"class ",Object(c.b)("span",{class:"ident"},"Command"),"(name:\xa0str, label:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, caption:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, icon:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, items:\xa0Union[List[ForwardRef('",Object(c.b)("a",{title:"h2o_wave.types.Command",href:"#h2o_wave.types.Command"},"Command"),"')],\xa0NoneType]\xa0=\xa0None, data:\xa0Union[str,\xa0NoneType]\xa0=\xa0None)"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Create a command."),Object(c.b)("p",null,"Commands are typically displayed as context menu items or toolbar button.")),Object(c.b)("h4",{id:"static-methods-10"},"Static methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"load-10"},"load ",Object(c.b)("a",{name:"h2o_wave.types.Command.load"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"load"),"(_Command__d:\xa0Dict) \u2011>\xa0",Object(c.b)("a",{title:"h2o_wave.types.Command",href:"#h2o_wave.types.Command"},"Command")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Creates an instance of this class using the contents of a dict."))))),Object(c.b)("h4",{id:"instance-variables-10"},"Instance variables"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{id:"h2o_wave.types.Command.caption",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"caption")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The caption for this command (typically a tooltip).")),Object(c.b)("div",{id:"h2o_wave.types.Command.data",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"data")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Data associated with this command, if any.")),Object(c.b)("div",{id:"h2o_wave.types.Command.icon",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"icon")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The icon to be displayed for this command.")),Object(c.b)("div",{id:"h2o_wave.types.Command.items",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"items")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Sub-commands, if any")),Object(c.b)("div",{id:"h2o_wave.types.Command.label",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"label")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The text displayed for this command.")),Object(c.b)("div",{id:"h2o_wave.types.Command.name",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"name")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"An identifying name for this component. If the name is prefixed with a '#', the command sets the location hash to the name when executed."))),Object(c.b)("h4",{id:"methods-10"},"Methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"dump-10"},"dump ",Object(c.b)("a",{name:"h2o_wave.types.Command.dump"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"dump"),"(self) \u2011>\xa0Dict"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Returns the contents of this object as a dict."))))))),Object(c.b)("div",{className:"api"},Object(c.b)("h3",{id:"component"},"Component ",Object(c.b)("a",{name:"h2o_wave.types.Component"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"class ",Object(c.b)("span",{class:"ident"},"Component"),"(text:\xa0Union[",Object(c.b)("a",{title:"h2o_wave.types.Text",href:"#h2o_wave.types.Text"},"Text"),",\xa0NoneType]\xa0=\xa0None, text_xl:\xa0Union[",Object(c.b)("a",{title:"h2o_wave.types.TextXl",href:"#h2o_wave.types.TextXl"},"TextXl"),",\xa0NoneType]\xa0=\xa0None, text_l:\xa0Union[",Object(c.b)("a",{title:"h2o_wave.types.TextL",href:"#h2o_wave.types.TextL"},"TextL"),",\xa0NoneType]\xa0=\xa0None, text_m:\xa0Union[",Object(c.b)("a",{title:"h2o_wave.types.TextM",href:"#h2o_wave.types.TextM"},"TextM"),",\xa0NoneType]\xa0=\xa0None, text_s:\xa0Union[",Object(c.b)("a",{title:"h2o_wave.types.TextS",href:"#h2o_wave.types.TextS"},"TextS"),",\xa0NoneType]\xa0=\xa0None, text_xs:\xa0Union[",Object(c.b)("a",{title:"h2o_wave.types.TextXs",href:"#h2o_wave.types.TextXs"},"TextXs"),",\xa0NoneType]\xa0=\xa0None, label:\xa0Union[",Object(c.b)("a",{title:"h2o_wave.types.Label",href:"#h2o_wave.types.Label"},"Label"),",\xa0NoneType]\xa0=\xa0None, separator:\xa0Union[",Object(c.b)("a",{title:"h2o_wave.types.Separator",href:"#h2o_wave.types.Separator"},"Separator"),",\xa0NoneType]\xa0=\xa0None, progress:\xa0Union[",Object(c.b)("a",{title:"h2o_wave.types.Progress",href:"#h2o_wave.types.Progress"},"Progress"),",\xa0NoneType]\xa0=\xa0None, message_bar:\xa0Union[",Object(c.b)("a",{title:"h2o_wave.types.MessageBar",href:"#h2o_wave.types.MessageBar"},"MessageBar"),",\xa0NoneType]\xa0=\xa0None, textbox:\xa0Union[",Object(c.b)("a",{title:"h2o_wave.types.Textbox",href:"#h2o_wave.types.Textbox"},"Textbox"),",\xa0NoneType]\xa0=\xa0None, checkbox:\xa0Union[",Object(c.b)("a",{title:"h2o_wave.types.Checkbox",href:"#h2o_wave.types.Checkbox"},"Checkbox"),",\xa0NoneType]\xa0=\xa0None, toggle:\xa0Union[",Object(c.b)("a",{title:"h2o_wave.types.Toggle",href:"#h2o_wave.types.Toggle"},"Toggle"),",\xa0NoneType]\xa0=\xa0None, choice_group:\xa0Union[",Object(c.b)("a",{title:"h2o_wave.types.ChoiceGroup",href:"#h2o_wave.types.ChoiceGroup"},"ChoiceGroup"),",\xa0NoneType]\xa0=\xa0None, checklist:\xa0Union[",Object(c.b)("a",{title:"h2o_wave.types.Checklist",href:"#h2o_wave.types.Checklist"},"Checklist"),",\xa0NoneType]\xa0=\xa0None, dropdown:\xa0Union[",Object(c.b)("a",{title:"h2o_wave.types.Dropdown",href:"#h2o_wave.types.Dropdown"},"Dropdown"),",\xa0NoneType]\xa0=\xa0None, combobox:\xa0Union[",Object(c.b)("a",{title:"h2o_wave.types.Combobox",href:"#h2o_wave.types.Combobox"},"Combobox"),",\xa0NoneType]\xa0=\xa0None, slider:\xa0Union[",Object(c.b)("a",{title:"h2o_wave.types.Slider",href:"#h2o_wave.types.Slider"},"Slider"),",\xa0NoneType]\xa0=\xa0None, spinbox:\xa0Union[",Object(c.b)("a",{title:"h2o_wave.types.Spinbox",href:"#h2o_wave.types.Spinbox"},"Spinbox"),",\xa0NoneType]\xa0=\xa0None, date_picker:\xa0Union[",Object(c.b)("a",{title:"h2o_wave.types.DatePicker",href:"#h2o_wave.types.DatePicker"},"DatePicker"),",\xa0NoneType]\xa0=\xa0None, color_picker:\xa0Union[",Object(c.b)("a",{title:"h2o_wave.types.ColorPicker",href:"#h2o_wave.types.ColorPicker"},"ColorPicker"),",\xa0NoneType]\xa0=\xa0None, button:\xa0Union[",Object(c.b)("a",{title:"h2o_wave.types.Button",href:"#h2o_wave.types.Button"},"Button"),",\xa0NoneType]\xa0=\xa0None, buttons:\xa0Union[",Object(c.b)("a",{title:"h2o_wave.types.Buttons",href:"#h2o_wave.types.Buttons"},"Buttons"),",\xa0NoneType]\xa0=\xa0None, file_upload:\xa0Union[",Object(c.b)("a",{title:"h2o_wave.types.FileUpload",href:"#h2o_wave.types.FileUpload"},"FileUpload"),",\xa0NoneType]\xa0=\xa0None, table:\xa0Union[",Object(c.b)("a",{title:"h2o_wave.types.Table",href:"#h2o_wave.types.Table"},"Table"),",\xa0NoneType]\xa0=\xa0None, link:\xa0Union[",Object(c.b)("a",{title:"h2o_wave.types.Link",href:"#h2o_wave.types.Link"},"Link"),",\xa0NoneType]\xa0=\xa0None, tabs:\xa0Union[",Object(c.b)("a",{title:"h2o_wave.types.Tabs",href:"#h2o_wave.types.Tabs"},"Tabs"),",\xa0NoneType]\xa0=\xa0None, expander:\xa0Union[",Object(c.b)("a",{title:"h2o_wave.types.Expander",href:"#h2o_wave.types.Expander"},"Expander"),",\xa0NoneType]\xa0=\xa0None, frame:\xa0Union[",Object(c.b)("a",{title:"h2o_wave.types.Frame",href:"#h2o_wave.types.Frame"},"Frame"),",\xa0NoneType]\xa0=\xa0None, markup:\xa0Union[",Object(c.b)("a",{title:"h2o_wave.types.Markup",href:"#h2o_wave.types.Markup"},"Markup"),",\xa0NoneType]\xa0=\xa0None, template:\xa0Union[",Object(c.b)("a",{title:"h2o_wave.types.Template",href:"#h2o_wave.types.Template"},"Template"),",\xa0NoneType]\xa0=\xa0None, picker:\xa0Union[",Object(c.b)("a",{title:"h2o_wave.types.Picker",href:"#h2o_wave.types.Picker"},"Picker"),",\xa0NoneType]\xa0=\xa0None, range_slider:\xa0Union[",Object(c.b)("a",{title:"h2o_wave.types.RangeSlider",href:"#h2o_wave.types.RangeSlider"},"RangeSlider"),",\xa0NoneType]\xa0=\xa0None, stepper:\xa0Union[",Object(c.b)("a",{title:"h2o_wave.types.Stepper",href:"#h2o_wave.types.Stepper"},"Stepper"),",\xa0NoneType]\xa0=\xa0None, visualization:\xa0Union[",Object(c.b)("a",{title:"h2o_wave.types.Visualization",href:"#h2o_wave.types.Visualization"},"Visualization"),",\xa0NoneType]\xa0=\xa0None, vega_visualization:\xa0Union[",Object(c.b)("a",{title:"h2o_wave.types.VegaVisualization",href:"#h2o_wave.types.VegaVisualization"},"VegaVisualization"),",\xa0NoneType]\xa0=\xa0None)"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Create a component.")),Object(c.b)("h4",{id:"static-methods-11"},"Static methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"load-11"},"load ",Object(c.b)("a",{name:"h2o_wave.types.Component.load"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"load"),"(_Component__d:\xa0Dict) \u2011>\xa0",Object(c.b)("a",{title:"h2o_wave.types.Component",href:"#h2o_wave.types.Component"},"Component")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Creates an instance of this class using the contents of a dict."))))),Object(c.b)("h4",{id:"instance-variables-11"},"Instance variables"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{id:"h2o_wave.types.Component.button",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"button")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Button.")),Object(c.b)("div",{id:"h2o_wave.types.Component.buttons",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"buttons")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Button set.")),Object(c.b)("div",{id:"h2o_wave.types.Component.checkbox",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"checkbox")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Checkbox.")),Object(c.b)("div",{id:"h2o_wave.types.Component.checklist",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"checklist")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Checklist.")),Object(c.b)("div",{id:"h2o_wave.types.Component.choice_group",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"choice_group")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Choice group.")),Object(c.b)("div",{id:"h2o_wave.types.Component.color_picker",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"color_picker")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Color picker.")),Object(c.b)("div",{id:"h2o_wave.types.Component.combobox",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"combobox")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Combobox.")),Object(c.b)("div",{id:"h2o_wave.types.Component.date_picker",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"date_picker")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Date picker.")),Object(c.b)("div",{id:"h2o_wave.types.Component.dropdown",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"dropdown")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Dropdown.")),Object(c.b)("div",{id:"h2o_wave.types.Component.expander",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"expander")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Expander.")),Object(c.b)("div",{id:"h2o_wave.types.Component.file_upload",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"file_upload")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"File upload.")),Object(c.b)("div",{id:"h2o_wave.types.Component.frame",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"frame")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Frame.")),Object(c.b)("div",{id:"h2o_wave.types.Component.label",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"label")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Label.")),Object(c.b)("div",{id:"h2o_wave.types.Component.link",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"link")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Link.")),Object(c.b)("div",{id:"h2o_wave.types.Component.markup",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"markup")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Markup")),Object(c.b)("div",{id:"h2o_wave.types.Component.message_bar",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"message_bar")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Message bar.")),Object(c.b)("div",{id:"h2o_wave.types.Component.picker",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"picker")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Picker.")),Object(c.b)("div",{id:"h2o_wave.types.Component.progress",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"progress")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Progress bar.")),Object(c.b)("div",{id:"h2o_wave.types.Component.range_slider",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"range_slider")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Range Slider.")),Object(c.b)("div",{id:"h2o_wave.types.Component.separator",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"separator")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Separator.")),Object(c.b)("div",{id:"h2o_wave.types.Component.slider",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"slider")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Slider.")),Object(c.b)("div",{id:"h2o_wave.types.Component.spinbox",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"spinbox")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Spinbox.")),Object(c.b)("div",{id:"h2o_wave.types.Component.stepper",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"stepper")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Stepper.")),Object(c.b)("div",{id:"h2o_wave.types.Component.table",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"table")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Table.")),Object(c.b)("div",{id:"h2o_wave.types.Component.tabs",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"tabs")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Tabs.")),Object(c.b)("div",{id:"h2o_wave.types.Component.template",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"template")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Template")),Object(c.b)("div",{id:"h2o_wave.types.Component.text",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"text")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Text block.")),Object(c.b)("div",{id:"h2o_wave.types.Component.text_l",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"text_l")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Large sized text block.")),Object(c.b)("div",{id:"h2o_wave.types.Component.text_m",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"text_m")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Medium sized text block.")),Object(c.b)("div",{id:"h2o_wave.types.Component.text_s",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"text_s")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Small sized text block.")),Object(c.b)("div",{id:"h2o_wave.types.Component.text_xl",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"text_xl")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Extra-large sized text block.")),Object(c.b)("div",{id:"h2o_wave.types.Component.text_xs",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"text_xs")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Extra-small sized text block.")),Object(c.b)("div",{id:"h2o_wave.types.Component.textbox",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"textbox")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Textbox.")),Object(c.b)("div",{id:"h2o_wave.types.Component.toggle",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"toggle")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Toggle.")),Object(c.b)("div",{id:"h2o_wave.types.Component.vega_visualization",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"vega_visualization")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Vega-lite Visualization.")),Object(c.b)("div",{id:"h2o_wave.types.Component.visualization",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"visualization")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Visualization."))),Object(c.b)("h4",{id:"methods-11"},"Methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"dump-11"},"dump ",Object(c.b)("a",{name:"h2o_wave.types.Component.dump"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"dump"),"(self) \u2011>\xa0Dict"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Returns the contents of this object as a dict."))))))),Object(c.b)("div",{className:"api"},Object(c.b)("h3",{id:"datepicker"},"DatePicker ",Object(c.b)("a",{name:"h2o_wave.types.DatePicker"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"class ",Object(c.b)("span",{class:"ident"},"DatePicker"),"(name:\xa0str, label:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, placeholder:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, value:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, disabled:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, trigger:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, visible:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, tooltip:\xa0Union[str,\xa0NoneType]\xa0=\xa0None)"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Create a date picker."),Object(c.b)("p",null,"A date picker allows a user to pick a date value.")),Object(c.b)("h4",{id:"static-methods-12"},"Static methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"load-12"},"load ",Object(c.b)("a",{name:"h2o_wave.types.DatePicker.load"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"load"),"(_DatePicker__d:\xa0Dict) \u2011>\xa0",Object(c.b)("a",{title:"h2o_wave.types.DatePicker",href:"#h2o_wave.types.DatePicker"},"DatePicker")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Creates an instance of this class using the contents of a dict."))))),Object(c.b)("h4",{id:"instance-variables-12"},"Instance variables"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{id:"h2o_wave.types.DatePicker.disabled",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"disabled")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"True if this field is disabled.")),Object(c.b)("div",{id:"h2o_wave.types.DatePicker.label",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"label")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Text to be displayed alongside the component.")),Object(c.b)("div",{id:"h2o_wave.types.DatePicker.name",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"name")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"An identifying name for this component.")),Object(c.b)("div",{id:"h2o_wave.types.DatePicker.placeholder",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"placeholder")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"A string that provides a brief hint to the user as to what kind of information is expected in the field.")),Object(c.b)("div",{id:"h2o_wave.types.DatePicker.tooltip",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"tooltip")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"An optional tooltip message displayed when a user clicks the help icon to the right of the component.")),Object(c.b)("div",{id:"h2o_wave.types.DatePicker.trigger",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"trigger")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"True if the form should be submitted when the datepicker value changes.")),Object(c.b)("div",{id:"h2o_wave.types.DatePicker.value",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"value")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The date value in YYYY-MM-DD format.")),Object(c.b)("div",{id:"h2o_wave.types.DatePicker.visible",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"visible")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"True if the component should be visible. Defaults to true."))),Object(c.b)("h4",{id:"methods-12"},"Methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"dump-12"},"dump ",Object(c.b)("a",{name:"h2o_wave.types.DatePicker.dump"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"dump"),"(self) \u2011>\xa0Dict"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Returns the contents of this object as a dict."))))))),Object(c.b)("div",{className:"api"},Object(c.b)("h3",{id:"dropdown"},"Dropdown ",Object(c.b)("a",{name:"h2o_wave.types.Dropdown"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"class ",Object(c.b)("span",{class:"ident"},"Dropdown"),"(name:\xa0str, label:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, placeholder:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, value:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, values:\xa0Union[List[str],\xa0NoneType]\xa0=\xa0None, choices:\xa0Union[List[",Object(c.b)("a",{title:"h2o_wave.types.Choice",href:"#h2o_wave.types.Choice"},"Choice"),"],\xa0NoneType]\xa0=\xa0None, required:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, disabled:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, trigger:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, visible:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, tooltip:\xa0Union[str,\xa0NoneType]\xa0=\xa0None)"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Create a dropdown."),Object(c.b)("p",null,"A dropdown is a list in which the selected item is always visible, and the others are visible on demand by clicking a drop-down button. They are used to simplify the design and make a choice within the UI. When closed, only the selected item is visible. When users click the drop-down button, all the options become visible."),Object(c.b)("p",null,"To change the value, users open the list and click another value or use the arrow keys (up and down) to select a new value."),Object(c.b)("p",null,"Note: Use either the 'value' parameter or the 'values' parameter. Setting the 'values' parameter renders a multi-select dropdown.")),Object(c.b)("h4",{id:"static-methods-13"},"Static methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"load-13"},"load ",Object(c.b)("a",{name:"h2o_wave.types.Dropdown.load"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"load"),"(_Dropdown__d:\xa0Dict) \u2011>\xa0",Object(c.b)("a",{title:"h2o_wave.types.Dropdown",href:"#h2o_wave.types.Dropdown"},"Dropdown")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Creates an instance of this class using the contents of a dict."))))),Object(c.b)("h4",{id:"instance-variables-13"},"Instance variables"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{id:"h2o_wave.types.Dropdown.choices",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"choices")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The choices to be presented.")),Object(c.b)("div",{id:"h2o_wave.types.Dropdown.disabled",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"disabled")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"True if this field is disabled.")),Object(c.b)("div",{id:"h2o_wave.types.Dropdown.label",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"label")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Text to be displayed alongside the component.")),Object(c.b)("div",{id:"h2o_wave.types.Dropdown.name",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"name")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"An identifying name for this component.")),Object(c.b)("div",{id:"h2o_wave.types.Dropdown.placeholder",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"placeholder")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"A string that provides a brief hint to the user as to what kind of information is expected in the field.")),Object(c.b)("div",{id:"h2o_wave.types.Dropdown.required",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"required")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"True if this is a required field.")),Object(c.b)("div",{id:"h2o_wave.types.Dropdown.tooltip",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"tooltip")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"An optional tooltip message displayed when a user clicks the help icon to the right of the component.")),Object(c.b)("div",{id:"h2o_wave.types.Dropdown.trigger",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"trigger")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"True if the form should be submitted when the dropdown value changes.")),Object(c.b)("div",{id:"h2o_wave.types.Dropdown.value",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"value")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The name of the selected choice.")),Object(c.b)("div",{id:"h2o_wave.types.Dropdown.values",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"values")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The names of the selected choices. If this parameter is set, multiple selections will be allowed.")),Object(c.b)("div",{id:"h2o_wave.types.Dropdown.visible",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"visible")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"True if the component should be visible. Defaults to true."))),Object(c.b)("h4",{id:"methods-13"},"Methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"dump-13"},"dump ",Object(c.b)("a",{name:"h2o_wave.types.Dropdown.dump"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"dump"),"(self) \u2011>\xa0Dict"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Returns the contents of this object as a dict."))))))),Object(c.b)("div",{className:"api"},Object(c.b)("h3",{id:"expander"},"Expander ",Object(c.b)("a",{name:"h2o_wave.types.Expander"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"class ",Object(c.b)("span",{class:"ident"},"Expander"),"(name:\xa0str, label:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, expanded:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, items:\xa0Union[List[ForwardRef('",Object(c.b)("a",{title:"h2o_wave.types.Component",href:"#h2o_wave.types.Component"},"Component"),"')],\xa0NoneType]\xa0=\xa0None, visible:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None)"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Creates a new expander."),Object(c.b)("p",null,"Expanders can be used to show or hide a group of related components.")),Object(c.b)("h4",{id:"static-methods-14"},"Static methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"load-14"},"load ",Object(c.b)("a",{name:"h2o_wave.types.Expander.load"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"load"),"(_Expander__d:\xa0Dict) \u2011>\xa0",Object(c.b)("a",{title:"h2o_wave.types.Expander",href:"#h2o_wave.types.Expander"},"Expander")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Creates an instance of this class using the contents of a dict."))))),Object(c.b)("h4",{id:"instance-variables-14"},"Instance variables"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{id:"h2o_wave.types.Expander.expanded",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"expanded")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"True if expanded, False if collapsed.")),Object(c.b)("div",{id:"h2o_wave.types.Expander.items",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"items")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"List of components to be hideable by the expander.")),Object(c.b)("div",{id:"h2o_wave.types.Expander.label",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"label")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The text displayed on the expander.")),Object(c.b)("div",{id:"h2o_wave.types.Expander.name",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"name")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"An identifying name for this component.")),Object(c.b)("div",{id:"h2o_wave.types.Expander.visible",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"visible")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"True if the component should be visible. Defaults to true."))),Object(c.b)("h4",{id:"methods-14"},"Methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"dump-14"},"dump ",Object(c.b)("a",{name:"h2o_wave.types.Expander.dump"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"dump"),"(self) \u2011>\xa0Dict"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Returns the contents of this object as a dict."))))))),Object(c.b)("div",{className:"api"},Object(c.b)("h3",{id:"fileupload"},"FileUpload ",Object(c.b)("a",{name:"h2o_wave.types.FileUpload"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"class ",Object(c.b)("span",{class:"ident"},"FileUpload"),"(name:\xa0str, label:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, multiple:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, file_extensions:\xa0Union[List[str],\xa0NoneType]\xa0=\xa0None, max_file_size:\xa0Union[float,\xa0NoneType]\xa0=\xa0None, max_size:\xa0Union[float,\xa0NoneType]\xa0=\xa0None, height:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, visible:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, tooltip:\xa0Union[str,\xa0NoneType]\xa0=\xa0None)"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Create a file upload component. A file upload component allows a user to browse, select and upload one or more files.")),Object(c.b)("h4",{id:"static-methods-15"},"Static methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"load-15"},"load ",Object(c.b)("a",{name:"h2o_wave.types.FileUpload.load"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"load"),"(_FileUpload__d:\xa0Dict) \u2011>\xa0",Object(c.b)("a",{title:"h2o_wave.types.FileUpload",href:"#h2o_wave.types.FileUpload"},"FileUpload")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Creates an instance of this class using the contents of a dict."))))),Object(c.b)("h4",{id:"instance-variables-15"},"Instance variables"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{id:"h2o_wave.types.FileUpload.file_extensions",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"file_extensions")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"List of allowed file extensions, e.g. ",Object(c.b)("code",null,"pdf"),", ",Object(c.b)("code",null,"docx"),", etc.")),Object(c.b)("div",{id:"h2o_wave.types.FileUpload.height",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"height")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The height of the file upload, e.g. '400px', '50%', etc.")),Object(c.b)("div",{id:"h2o_wave.types.FileUpload.label",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"label")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Text to be displayed alongside the component.")),Object(c.b)("div",{id:"h2o_wave.types.FileUpload.max_file_size",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"max_file_size")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Maximum allowed size (Mb) per file. Defaults to no limit.")),Object(c.b)("div",{id:"h2o_wave.types.FileUpload.max_size",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"max_size")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Maximum allowed size (Mb) for all files combined. Defaults to no limit.")),Object(c.b)("div",{id:"h2o_wave.types.FileUpload.multiple",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"multiple")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"True if the component should allow multiple files to be uploaded.")),Object(c.b)("div",{id:"h2o_wave.types.FileUpload.name",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"name")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"An identifying name for this component.")),Object(c.b)("div",{id:"h2o_wave.types.FileUpload.tooltip",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"tooltip")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"An optional tooltip message displayed when a user clicks the help icon to the right of the component.")),Object(c.b)("div",{id:"h2o_wave.types.FileUpload.visible",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"visible")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"True if the component should be visible. Defaults to true."))),Object(c.b)("h4",{id:"methods-15"},"Methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"dump-15"},"dump ",Object(c.b)("a",{name:"h2o_wave.types.FileUpload.dump"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"dump"),"(self) \u2011>\xa0Dict"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Returns the contents of this object as a dict."))))))),Object(c.b)("div",{className:"api"},Object(c.b)("h3",{id:"flexcard"},"FlexCard ",Object(c.b)("a",{name:"h2o_wave.types.FlexCard"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"class ",Object(c.b)("span",{class:"ident"},"FlexCard"),"(box:\xa0str, item_view:\xa0str, item_props:\xa0Union[dict,\xa0str], data:\xa0Union[",Object(c.b)("a",{title:"h2o_wave.core.Data",href:"core#h2o_wave.core.Data"},"Data"),",\xa0str], direction:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, justify:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, align:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, wrap:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, commands:\xa0Union[List[",Object(c.b)("a",{title:"h2o_wave.types.Command",href:"#h2o_wave.types.Command"},"Command"),"],\xa0NoneType]\xa0=\xa0None)"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"EXPERIMENTAL. DO NOT USE. Create a card containing other cards laid out using a one-dimensional model with flexible alignemnt and wrapping capabilities.")),Object(c.b)("h4",{id:"static-methods-16"},"Static methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"load-16"},"load ",Object(c.b)("a",{name:"h2o_wave.types.FlexCard.load"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"load"),"(_FlexCard__d:\xa0Dict) \u2011>\xa0",Object(c.b)("a",{title:"h2o_wave.types.FlexCard",href:"#h2o_wave.types.FlexCard"},"FlexCard")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Creates an instance of this class using the contents of a dict."))))),Object(c.b)("h4",{id:"instance-variables-16"},"Instance variables"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{id:"h2o_wave.types.FlexCard.align",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"align")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Layout strategy for cross axis. One of 'start', 'end', 'center', 'baseline', 'stretch'.")),Object(c.b)("div",{id:"h2o_wave.types.FlexCard.box",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"box")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"A string indicating how to place this component on the page.")),Object(c.b)("div",{id:"h2o_wave.types.FlexCard.commands",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"commands")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Contextual menu commands for this component.")),Object(c.b)("div",{id:"h2o_wave.types.FlexCard.data",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"data")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Data for this card.")),Object(c.b)("div",{id:"h2o_wave.types.FlexCard.direction",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"direction")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Layout direction. One of 'horizontal', 'vertical'.")),Object(c.b)("div",{id:"h2o_wave.types.FlexCard.item_props",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"item_props")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The child card properties.")),Object(c.b)("div",{id:"h2o_wave.types.FlexCard.item_view",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"item_view")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The child card type.")),Object(c.b)("div",{id:"h2o_wave.types.FlexCard.justify",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"justify")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Layout strategy for main axis. One of 'start', 'end', 'center', 'between', 'around'.")),Object(c.b)("div",{id:"h2o_wave.types.FlexCard.wrap",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"wrap")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Wrapping strategy. One of 'start', 'end', 'center', 'between', 'around', 'stretch'."))),Object(c.b)("h4",{id:"methods-16"},"Methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"dump-16"},"dump ",Object(c.b)("a",{name:"h2o_wave.types.FlexCard.dump"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"dump"),"(self) \u2011>\xa0Dict"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Returns the contents of this object as a dict."))))))),Object(c.b)("div",{className:"api"},Object(c.b)("h3",{id:"formcard"},"FormCard ",Object(c.b)("a",{name:"h2o_wave.types.FormCard"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"class ",Object(c.b)("span",{class:"ident"},"FormCard"),"(box:\xa0str, items:\xa0Union[List[",Object(c.b)("a",{title:"h2o_wave.types.Component",href:"#h2o_wave.types.Component"},"Component"),"],\xa0str], commands:\xa0Union[List[",Object(c.b)("a",{title:"h2o_wave.types.Command",href:"#h2o_wave.types.Command"},"Command"),"],\xa0NoneType]\xa0=\xa0None)"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Create a form.")),Object(c.b)("h4",{id:"static-methods-17"},"Static methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"load-17"},"load ",Object(c.b)("a",{name:"h2o_wave.types.FormCard.load"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"load"),"(_FormCard__d:\xa0Dict) \u2011>\xa0",Object(c.b)("a",{title:"h2o_wave.types.FormCard",href:"#h2o_wave.types.FormCard"},"FormCard")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Creates an instance of this class using the contents of a dict."))))),Object(c.b)("h4",{id:"instance-variables-17"},"Instance variables"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{id:"h2o_wave.types.FormCard.box",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"box")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"A string indicating how to place this component on the page.")),Object(c.b)("div",{id:"h2o_wave.types.FormCard.commands",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"commands")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Contextual menu commands for this component.")),Object(c.b)("div",{id:"h2o_wave.types.FormCard.items",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"items")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The components in this form."))),Object(c.b)("h4",{id:"methods-17"},"Methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"dump-17"},"dump ",Object(c.b)("a",{name:"h2o_wave.types.FormCard.dump"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"dump"),"(self) \u2011>\xa0Dict"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Returns the contents of this object as a dict."))))))),Object(c.b)("div",{className:"api"},Object(c.b)("h3",{id:"frame"},"Frame ",Object(c.b)("a",{name:"h2o_wave.types.Frame"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"class ",Object(c.b)("span",{class:"ident"},"Frame"),"(path:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, content:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, width:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, height:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, name:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, visible:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None)"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Create a new inline frame (an ",Object(c.b)("code",null,"iframe"),").")),Object(c.b)("h4",{id:"static-methods-18"},"Static methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"load-18"},"load ",Object(c.b)("a",{name:"h2o_wave.types.Frame.load"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"load"),"(_Frame__d:\xa0Dict) \u2011>\xa0",Object(c.b)("a",{title:"h2o_wave.types.Frame",href:"#h2o_wave.types.Frame"},"Frame")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Creates an instance of this class using the contents of a dict."))))),Object(c.b)("h4",{id:"instance-variables-18"},"Instance variables"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{id:"h2o_wave.types.Frame.content",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"content")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The HTML content of the page. A string containing ",Object(c.b)("code",null,"..."),".")),Object(c.b)("div",{id:"h2o_wave.types.Frame.height",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"height")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The height of the frame, e.g. ",Object(c.b)("code",null,"200px"),", ",Object(c.b)("code",null,"50%"),", etc. Defaults to ",Object(c.b)("code",null,"150px"),".")),Object(c.b)("div",{id:"h2o_wave.types.Frame.name",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"name")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"An identifying name for this component.")),Object(c.b)("div",{id:"h2o_wave.types.Frame.path",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"path")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The path or URL of the web page, e.g. ",Object(c.b)("code",null,"/foo.html")," or ",Object(c.b)("code",null,"http://example.com/foo.html"))),Object(c.b)("div",{id:"h2o_wave.types.Frame.visible",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"visible")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"True if the component should be visible. Defaults to true.")),Object(c.b)("div",{id:"h2o_wave.types.Frame.width",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"width")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The width of the frame, e.g. ",Object(c.b)("code",null,"200px"),", ",Object(c.b)("code",null,"50%"),", etc. Defaults to ",Object(c.b)("code",null,"100%"),"."))),Object(c.b)("h4",{id:"methods-18"},"Methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"dump-18"},"dump ",Object(c.b)("a",{name:"h2o_wave.types.Frame.dump"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"dump"),"(self) \u2011>\xa0Dict"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Returns the contents of this object as a dict."))))))),Object(c.b)("div",{className:"api"},Object(c.b)("h3",{id:"framecard"},"FrameCard ",Object(c.b)("a",{name:"h2o_wave.types.FrameCard"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"class ",Object(c.b)("span",{class:"ident"},"FrameCard"),"(box:\xa0str, title:\xa0str, path:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, content:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, commands:\xa0Union[List[",Object(c.b)("a",{title:"h2o_wave.types.Command",href:"#h2o_wave.types.Command"},"Command"),"],\xa0NoneType]\xa0=\xa0None)"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Render a card containing a HTML page inside an inline frame (an ",Object(c.b)("code",null,"iframe"),")."),Object(c.b)("p",null,"Either a path or content can be provided as arguments.")),Object(c.b)("h4",{id:"static-methods-19"},"Static methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"load-19"},"load ",Object(c.b)("a",{name:"h2o_wave.types.FrameCard.load"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"load"),"(_FrameCard__d:\xa0Dict) \u2011>\xa0",Object(c.b)("a",{title:"h2o_wave.types.FrameCard",href:"#h2o_wave.types.FrameCard"},"FrameCard")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Creates an instance of this class using the contents of a dict."))))),Object(c.b)("h4",{id:"instance-variables-19"},"Instance variables"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{id:"h2o_wave.types.FrameCard.box",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"box")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"A string indicating how to place this component on the page.")),Object(c.b)("div",{id:"h2o_wave.types.FrameCard.commands",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"commands")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Contextual menu commands for this component.")),Object(c.b)("div",{id:"h2o_wave.types.FrameCard.content",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"content")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The HTML content of the page. A string containing ",Object(c.b)("code",null,"..."))),Object(c.b)("div",{id:"h2o_wave.types.FrameCard.path",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"path")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The path or URL of the web page, e.g. ",Object(c.b)("code",null,"/foo.html")," or ",Object(c.b)("code",null,"http://example.com/foo.html"))),Object(c.b)("div",{id:"h2o_wave.types.FrameCard.title",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"title")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The title for this card."))),Object(c.b)("h4",{id:"methods-19"},"Methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"dump-19"},"dump ",Object(c.b)("a",{name:"h2o_wave.types.FrameCard.dump"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"dump"),"(self) \u2011>\xa0Dict"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Returns the contents of this object as a dict."))))))),Object(c.b)("div",{className:"api"},Object(c.b)("h3",{id:"graphicscard"},"GraphicsCard ",Object(c.b)("a",{name:"h2o_wave.types.GraphicsCard"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"class ",Object(c.b)("span",{class:"ident"},"GraphicsCard"),"(box:\xa0str, view_box:\xa0str, stage:\xa0Union[List[dict],\xa0str,\xa0NoneType]\xa0=\xa0None, scene:\xa0Union[",Object(c.b)("a",{title:"h2o_wave.core.Data",href:"core#h2o_wave.core.Data"},"Data"),",\xa0str,\xa0NoneType]\xa0=\xa0None, width:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, height:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, commands:\xa0Union[List[",Object(c.b)("a",{title:"h2o_wave.types.Command",href:"#h2o_wave.types.Command"},"Command"),"],\xa0NoneType]\xa0=\xa0None)"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Create a card for displaying vector graphics.")),Object(c.b)("h4",{id:"static-methods-20"},"Static methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"load-20"},"load ",Object(c.b)("a",{name:"h2o_wave.types.GraphicsCard.load"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"load"),"(_GraphicsCard__d:\xa0Dict) \u2011>\xa0",Object(c.b)("a",{title:"h2o_wave.types.GraphicsCard",href:"#h2o_wave.types.GraphicsCard"},"GraphicsCard")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Creates an instance of this class using the contents of a dict."))))),Object(c.b)("h4",{id:"instance-variables-20"},"Instance variables"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{id:"h2o_wave.types.GraphicsCard.box",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"box")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"A string indicating how to place this component on the page.")),Object(c.b)("div",{id:"h2o_wave.types.GraphicsCard.commands",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"commands")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Contextual menu commands for this component.")),Object(c.b)("div",{id:"h2o_wave.types.GraphicsCard.height",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"height")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The displayed height of the rectangular viewport. (Not the height of its coordinate system.)")),Object(c.b)("div",{id:"h2o_wave.types.GraphicsCard.scene",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"scene")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Foreground layer for rendering dynamic SVG elements.")),Object(c.b)("div",{id:"h2o_wave.types.GraphicsCard.stage",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"stage")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Background layer for rendering static SVG elements. Must be packed to conserve memory.")),Object(c.b)("div",{id:"h2o_wave.types.GraphicsCard.view_box",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"view_box")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The position and dimension of the SVG viewport, in user space. A space-separated list of four numbers: min-x, min-y, width and height. For example, '0 0 400 300'. See: ",Object(c.b)("a",{href:"https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/viewBox"},"https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/viewBox"))),Object(c.b)("div",{id:"h2o_wave.types.GraphicsCard.width",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"width")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The displayed width of the rectangular viewport. (Not the width of its coordinate system.)"))),Object(c.b)("h4",{id:"methods-20"},"Methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"dump-20"},"dump ",Object(c.b)("a",{name:"h2o_wave.types.GraphicsCard.dump"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"dump"),"(self) \u2011>\xa0Dict"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Returns the contents of this object as a dict."))))))),Object(c.b)("div",{className:"api"},Object(c.b)("h3",{id:"gridcard"},"GridCard ",Object(c.b)("a",{name:"h2o_wave.types.GridCard"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"class ",Object(c.b)("span",{class:"ident"},"GridCard"),"(box:\xa0str, title:\xa0str, cells:\xa0Union[",Object(c.b)("a",{title:"h2o_wave.core.Data",href:"core#h2o_wave.core.Data"},"Data"),",\xa0str], data:\xa0Union[",Object(c.b)("a",{title:"h2o_wave.core.Data",href:"core#h2o_wave.core.Data"},"Data"),",\xa0str], commands:\xa0Union[List[",Object(c.b)("a",{title:"h2o_wave.types.Command",href:"#h2o_wave.types.Command"},"Command"),"],\xa0NoneType]\xa0=\xa0None)"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"EXPERIMENTAL. DO NOT USE.")),Object(c.b)("h4",{id:"static-methods-21"},"Static methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"load-21"},"load ",Object(c.b)("a",{name:"h2o_wave.types.GridCard.load"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"load"),"(_GridCard__d:\xa0Dict) \u2011>\xa0",Object(c.b)("a",{title:"h2o_wave.types.GridCard",href:"#h2o_wave.types.GridCard"},"GridCard")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Creates an instance of this class using the contents of a dict."))))),Object(c.b)("h4",{id:"instance-variables-21"},"Instance variables"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{id:"h2o_wave.types.GridCard.box",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"box")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"A string indicating how to place this component on the page.")),Object(c.b)("div",{id:"h2o_wave.types.GridCard.cells",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"cells")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"EXPERIMENTAL. DO NOT USE.")),Object(c.b)("div",{id:"h2o_wave.types.GridCard.commands",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"commands")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Contextual menu commands for this component.")),Object(c.b)("div",{id:"h2o_wave.types.GridCard.data",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"data")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"EXPERIMENTAL. DO NOT USE.")),Object(c.b)("div",{id:"h2o_wave.types.GridCard.title",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"title")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"EXPERIMENTAL. DO NOT USE."))),Object(c.b)("h4",{id:"methods-21"},"Methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"dump-21"},"dump ",Object(c.b)("a",{name:"h2o_wave.types.GridCard.dump"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"dump"),"(self) \u2011>\xa0Dict"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Returns the contents of this object as a dict."))))))),Object(c.b)("div",{className:"api"},Object(c.b)("h3",{id:"headercard"},"HeaderCard ",Object(c.b)("a",{name:"h2o_wave.types.HeaderCard"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"class ",Object(c.b)("span",{class:"ident"},"HeaderCard"),"(box:\xa0str, title:\xa0str, subtitle:\xa0str, icon:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, icon_color:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, commands:\xa0Union[List[",Object(c.b)("a",{title:"h2o_wave.types.Command",href:"#h2o_wave.types.Command"},"Command"),"],\xa0NoneType]\xa0=\xa0None)"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Render a card containing a HTML page inside an inline frame (iframe)."),Object(c.b)("p",null,"Either a path or content can be provided as arguments.")),Object(c.b)("h4",{id:"static-methods-22"},"Static methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"load-22"},"load ",Object(c.b)("a",{name:"h2o_wave.types.HeaderCard.load"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"load"),"(_HeaderCard__d:\xa0Dict) \u2011>\xa0",Object(c.b)("a",{title:"h2o_wave.types.HeaderCard",href:"#h2o_wave.types.HeaderCard"},"HeaderCard")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Creates an instance of this class using the contents of a dict."))))),Object(c.b)("h4",{id:"instance-variables-22"},"Instance variables"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{id:"h2o_wave.types.HeaderCard.box",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"box")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"A string indicating how to place this component on the page.")),Object(c.b)("div",{id:"h2o_wave.types.HeaderCard.commands",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"commands")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Contextual menu commands for this component.")),Object(c.b)("div",{id:"h2o_wave.types.HeaderCard.icon",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"icon")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The icon type, displayed to the left.")),Object(c.b)("div",{id:"h2o_wave.types.HeaderCard.icon_color",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"icon_color")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The icon's color.")),Object(c.b)("div",{id:"h2o_wave.types.HeaderCard.subtitle",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"subtitle")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The subtitle, displayed below the title.")),Object(c.b)("div",{id:"h2o_wave.types.HeaderCard.title",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"title")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The title."))),Object(c.b)("h4",{id:"methods-22"},"Methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"dump-22"},"dump ",Object(c.b)("a",{name:"h2o_wave.types.HeaderCard.dump"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"dump"),"(self) \u2011>\xa0Dict"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Returns the contents of this object as a dict."))))))),Object(c.b)("div",{className:"api"},Object(c.b)("h3",{id:"icontablecelltype"},"IconTableCellType ",Object(c.b)("a",{name:"h2o_wave.types.IconTableCellType"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"class ",Object(c.b)("span",{class:"ident"},"IconTableCellType"),"(color:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, name:\xa0Union[str,\xa0NoneType]\xa0=\xa0None)"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Create a cell type that renders a column's cells as icons instead of plain text. If set on a column, the cell value is interpreted as the name of the icon to be displayed.")),Object(c.b)("h4",{id:"static-methods-23"},"Static methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"load-23"},"load ",Object(c.b)("a",{name:"h2o_wave.types.IconTableCellType.load"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"load"),"(_IconTableCellType__d:\xa0Dict) \u2011>\xa0",Object(c.b)("a",{title:"h2o_wave.types.IconTableCellType",href:"#h2o_wave.types.IconTableCellType"},"IconTableCellType")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Creates an instance of this class using the contents of a dict."))))),Object(c.b)("h4",{id:"instance-variables-23"},"Instance variables"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{id:"h2o_wave.types.IconTableCellType.color",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"color")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Icon color.")),Object(c.b)("div",{id:"h2o_wave.types.IconTableCellType.name",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"name")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"An identifying name for this component."))),Object(c.b)("h4",{id:"methods-23"},"Methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"dump-23"},"dump ",Object(c.b)("a",{name:"h2o_wave.types.IconTableCellType.dump"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"dump"),"(self) \u2011>\xa0Dict"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Returns the contents of this object as a dict."))))))),Object(c.b)("div",{className:"api"},Object(c.b)("h3",{id:"imagecard"},"ImageCard ",Object(c.b)("a",{name:"h2o_wave.types.ImageCard"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"class ",Object(c.b)("span",{class:"ident"},"ImageCard"),"(box:\xa0str, title:\xa0str, type:\xa0str, image:\xa0str, data:\xa0Union[dict,\xa0str,\xa0NoneType]\xa0=\xa0None, commands:\xa0Union[List[",Object(c.b)("a",{title:"h2o_wave.types.Command",href:"#h2o_wave.types.Command"},"Command"),"],\xa0NoneType]\xa0=\xa0None)"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Create a card that displays a base64-encoded image.")),Object(c.b)("h4",{id:"static-methods-24"},"Static methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"load-24"},"load ",Object(c.b)("a",{name:"h2o_wave.types.ImageCard.load"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"load"),"(_ImageCard__d:\xa0Dict) \u2011>\xa0",Object(c.b)("a",{title:"h2o_wave.types.ImageCard",href:"#h2o_wave.types.ImageCard"},"ImageCard")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Creates an instance of this class using the contents of a dict."))))),Object(c.b)("h4",{id:"instance-variables-24"},"Instance variables"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{id:"h2o_wave.types.ImageCard.box",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"box")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"A string indicating how to place this component on the page.")),Object(c.b)("div",{id:"h2o_wave.types.ImageCard.commands",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"commands")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Contextual menu commands for this component.")),Object(c.b)("div",{id:"h2o_wave.types.ImageCard.data",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"data")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Data for this card.")),Object(c.b)("div",{id:"h2o_wave.types.ImageCard.image",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"image")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Image data, base64-encoded.")),Object(c.b)("div",{id:"h2o_wave.types.ImageCard.title",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"title")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The card's title.")),Object(c.b)("div",{id:"h2o_wave.types.ImageCard.type",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"type")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The image MIME subtype. One of ",Object(c.b)("code",null,"apng"),", ",Object(c.b)("code",null,"bmp"),", ",Object(c.b)("code",null,"gif"),", ",Object(c.b)("code",null,"x-icon"),", ",Object(c.b)("code",null,"jpeg"),", ",Object(c.b)("code",null,"png"),", ",Object(c.b)("code",null,"webp"),"."))),Object(c.b)("h4",{id:"methods-24"},"Methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"dump-24"},"dump ",Object(c.b)("a",{name:"h2o_wave.types.ImageCard.dump"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"dump"),"(self) \u2011>\xa0Dict"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Returns the contents of this object as a dict."))))))),Object(c.b)("div",{className:"api"},Object(c.b)("h3",{id:"label"},"Label ",Object(c.b)("a",{name:"h2o_wave.types.Label"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"class ",Object(c.b)("span",{class:"ident"},"Label"),"(label:\xa0str, required:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, disabled:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, visible:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, tooltip:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, name:\xa0Union[str,\xa0NoneType]\xa0=\xa0None)"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Create a label."),Object(c.b)("p",null,"Labels give a name or title to a component or group of components. Labels should be in close proximity to the component or group they are paired with. Some components, such as textboxes, dropdowns, or toggles, already have labels incorporated, but other components may optionally add a Label if it helps inform the user of the component\u2019s purpose.")),Object(c.b)("h4",{id:"static-methods-25"},"Static methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"load-25"},"load ",Object(c.b)("a",{name:"h2o_wave.types.Label.load"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"load"),"(_Label__d:\xa0Dict) \u2011>\xa0",Object(c.b)("a",{title:"h2o_wave.types.Label",href:"#h2o_wave.types.Label"},"Label")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Creates an instance of this class using the contents of a dict."))))),Object(c.b)("h4",{id:"instance-variables-25"},"Instance variables"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{id:"h2o_wave.types.Label.disabled",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"disabled")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"True if the label should be disabled.")),Object(c.b)("div",{id:"h2o_wave.types.Label.label",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"label")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The text displayed on the label.")),Object(c.b)("div",{id:"h2o_wave.types.Label.name",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"name")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"An identifying name for this component.")),Object(c.b)("div",{id:"h2o_wave.types.Label.required",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"required")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"True if the field is required.")),Object(c.b)("div",{id:"h2o_wave.types.Label.tooltip",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"tooltip")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"An optional tooltip message displayed when a user clicks the help icon to the right of the component.")),Object(c.b)("div",{id:"h2o_wave.types.Label.visible",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"visible")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"True if the component should be visible. Defaults to true."))),Object(c.b)("h4",{id:"methods-25"},"Methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"dump-25"},"dump ",Object(c.b)("a",{name:"h2o_wave.types.Label.dump"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"dump"),"(self) \u2011>\xa0Dict"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Returns the contents of this object as a dict."))))))),Object(c.b)("div",{className:"api"},Object(c.b)("h3",{id:"largebarstatcard"},"LargeBarStatCard ",Object(c.b)("a",{name:"h2o_wave.types.LargeBarStatCard"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"class ",Object(c.b)("span",{class:"ident"},"LargeBarStatCard"),"(box:\xa0str, title:\xa0str, caption:\xa0str, value:\xa0str, aux_value:\xa0str, value_caption:\xa0str, aux_value_caption:\xa0str, progress:\xa0float, plot_color:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, data:\xa0Union[dict,\xa0str,\xa0NoneType]\xa0=\xa0None, commands:\xa0Union[List[",Object(c.b)("a",{title:"h2o_wave.types.Command",href:"#h2o_wave.types.Command"},"Command"),"],\xa0NoneType]\xa0=\xa0None)"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Create a large captioned card displaying a primary value, an auxiliary value and a progress bar, with captions for each value.")),Object(c.b)("h4",{id:"static-methods-26"},"Static methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"load-26"},"load ",Object(c.b)("a",{name:"h2o_wave.types.LargeBarStatCard.load"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"load"),"(_LargeBarStatCard__d:\xa0Dict) \u2011>\xa0",Object(c.b)("a",{title:"h2o_wave.types.LargeBarStatCard",href:"#h2o_wave.types.LargeBarStatCard"},"LargeBarStatCard")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Creates an instance of this class using the contents of a dict."))))),Object(c.b)("h4",{id:"instance-variables-26"},"Instance variables"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{id:"h2o_wave.types.LargeBarStatCard.aux_value",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"aux_value")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The auxiliary value, typically a target value.")),Object(c.b)("div",{id:"h2o_wave.types.LargeBarStatCard.aux_value_caption",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"aux_value_caption")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The caption displayed below the auxiliary value.")),Object(c.b)("div",{id:"h2o_wave.types.LargeBarStatCard.box",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"box")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"A string indicating how to place this component on the page.")),Object(c.b)("div",{id:"h2o_wave.types.LargeBarStatCard.caption",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"caption")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The card's caption.")),Object(c.b)("div",{id:"h2o_wave.types.LargeBarStatCard.commands",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"commands")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Contextual menu commands for this component.")),Object(c.b)("div",{id:"h2o_wave.types.LargeBarStatCard.data",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"data")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Data for this card.")),Object(c.b)("div",{id:"h2o_wave.types.LargeBarStatCard.plot_color",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"plot_color")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The color of the progress bar.")),Object(c.b)("div",{id:"h2o_wave.types.LargeBarStatCard.progress",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"progress")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The value of the progress bar, between 0 and 1.")),Object(c.b)("div",{id:"h2o_wave.types.LargeBarStatCard.title",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"title")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The card's title.")),Object(c.b)("div",{id:"h2o_wave.types.LargeBarStatCard.value",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"value")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The primary value displayed.")),Object(c.b)("div",{id:"h2o_wave.types.LargeBarStatCard.value_caption",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"value_caption")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The caption displayed below the primary value."))),Object(c.b)("h4",{id:"methods-26"},"Methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"dump-26"},"dump ",Object(c.b)("a",{name:"h2o_wave.types.LargeBarStatCard.dump"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"dump"),"(self) \u2011>\xa0Dict"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Returns the contents of this object as a dict."))))))),Object(c.b)("div",{className:"api"},Object(c.b)("h3",{id:"largestatcard"},"LargeStatCard ",Object(c.b)("a",{name:"h2o_wave.types.LargeStatCard"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"class ",Object(c.b)("span",{class:"ident"},"LargeStatCard"),"(box:\xa0str, title:\xa0str, value:\xa0str, aux_value:\xa0str, caption:\xa0str, data:\xa0Union[dict,\xa0str,\xa0NoneType]\xa0=\xa0None, commands:\xa0Union[List[",Object(c.b)("a",{title:"h2o_wave.types.Command",href:"#h2o_wave.types.Command"},"Command"),"],\xa0NoneType]\xa0=\xa0None)"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Create a stat card displaying a primary value, an auxiliary value and a caption.")),Object(c.b)("h4",{id:"static-methods-27"},"Static methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"load-27"},"load ",Object(c.b)("a",{name:"h2o_wave.types.LargeStatCard.load"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"load"),"(_LargeStatCard__d:\xa0Dict) \u2011>\xa0",Object(c.b)("a",{title:"h2o_wave.types.LargeStatCard",href:"#h2o_wave.types.LargeStatCard"},"LargeStatCard")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Creates an instance of this class using the contents of a dict."))))),Object(c.b)("h4",{id:"instance-variables-27"},"Instance variables"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{id:"h2o_wave.types.LargeStatCard.aux_value",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"aux_value")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The auxiliary value displayed next to the primary value.")),Object(c.b)("div",{id:"h2o_wave.types.LargeStatCard.box",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"box")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"A string indicating how to place this component on the page.")),Object(c.b)("div",{id:"h2o_wave.types.LargeStatCard.caption",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"caption")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The caption displayed below the primary value.")),Object(c.b)("div",{id:"h2o_wave.types.LargeStatCard.commands",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"commands")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Contextual menu commands for this component.")),Object(c.b)("div",{id:"h2o_wave.types.LargeStatCard.data",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"data")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Data for this card.")),Object(c.b)("div",{id:"h2o_wave.types.LargeStatCard.title",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"title")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The card's title.")),Object(c.b)("div",{id:"h2o_wave.types.LargeStatCard.value",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"value")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The primary value displayed."))),Object(c.b)("h4",{id:"methods-27"},"Methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"dump-27"},"dump ",Object(c.b)("a",{name:"h2o_wave.types.LargeStatCard.dump"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"dump"),"(self) \u2011>\xa0Dict"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Returns the contents of this object as a dict."))))))),Object(c.b)("div",{className:"api"},Object(c.b)("h3",{id:"link"},"Link ",Object(c.b)("a",{name:"h2o_wave.types.Link"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"class ",Object(c.b)("span",{class:"ident"},"Link"),"(label:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, path:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, disabled:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, download:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, button:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, visible:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, tooltip:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, name:\xa0Union[str,\xa0NoneType]\xa0=\xa0None)"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Create a hyperlink."),Object(c.b)("p",null,"Hyperlinks can be internal or external. Internal hyperlinks have paths that begin with a ",Object(c.b)("code",null,"/")," and point to URLs within the Q UI. All other kinds of paths are treated as external hyperlinks.")),Object(c.b)("h4",{id:"static-methods-28"},"Static methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"load-28"},"load ",Object(c.b)("a",{name:"h2o_wave.types.Link.load"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"load"),"(_Link__d:\xa0Dict) \u2011>\xa0",Object(c.b)("a",{title:"h2o_wave.types.Link",href:"#h2o_wave.types.Link"},"Link")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Creates an instance of this class using the contents of a dict."))))),Object(c.b)("h4",{id:"instance-variables-28"},"Instance variables"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{id:"h2o_wave.types.Link.button",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"button")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"True if the link should be rendered as a button.")),Object(c.b)("div",{id:"h2o_wave.types.Link.disabled",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"disabled")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"True if the link should be disabled.")),Object(c.b)("div",{id:"h2o_wave.types.Link.download",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"download")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"True if the link should be used for file download.")),Object(c.b)("div",{id:"h2o_wave.types.Link.label",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"label")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The text to be displayed. If blank, the ",Object(c.b)("code",null,"path")," is used as the label.")),Object(c.b)("div",{id:"h2o_wave.types.Link.name",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"name")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"An identifying name for this component.")),Object(c.b)("div",{id:"h2o_wave.types.Link.path",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"path")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The path or URL to link to.")),Object(c.b)("div",{id:"h2o_wave.types.Link.tooltip",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"tooltip")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"An optional tooltip message displayed when a user clicks the help icon to the right of the component.")),Object(c.b)("div",{id:"h2o_wave.types.Link.visible",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"visible")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"True if the component should be visible. Defaults to true."))),Object(c.b)("h4",{id:"methods-28"},"Methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"dump-28"},"dump ",Object(c.b)("a",{name:"h2o_wave.types.Link.dump"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"dump"),"(self) \u2011>\xa0Dict"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Returns the contents of this object as a dict."))))))),Object(c.b)("div",{className:"api"},Object(c.b)("h3",{id:"listcard"},"ListCard ",Object(c.b)("a",{name:"h2o_wave.types.ListCard"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"class ",Object(c.b)("span",{class:"ident"},"ListCard"),"(box:\xa0str, title:\xa0str, item_view:\xa0str, item_props:\xa0Union[dict,\xa0str], data:\xa0Union[",Object(c.b)("a",{title:"h2o_wave.core.Data",href:"core#h2o_wave.core.Data"},"Data"),",\xa0str], commands:\xa0Union[List[",Object(c.b)("a",{title:"h2o_wave.types.Command",href:"#h2o_wave.types.Command"},"Command"),"],\xa0NoneType]\xa0=\xa0None)"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"EXPERIMENTAL. DO NOT USE. Create a card containing other cards laid out in the form of a list (vertically, top-to-bottom).")),Object(c.b)("h4",{id:"static-methods-29"},"Static methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"load-29"},"load ",Object(c.b)("a",{name:"h2o_wave.types.ListCard.load"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"load"),"(_ListCard__d:\xa0Dict) \u2011>\xa0",Object(c.b)("a",{title:"h2o_wave.types.ListCard",href:"#h2o_wave.types.ListCard"},"ListCard")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Creates an instance of this class using the contents of a dict."))))),Object(c.b)("h4",{id:"instance-variables-29"},"Instance variables"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{id:"h2o_wave.types.ListCard.box",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"box")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"A string indicating how to place this component on the page.")),Object(c.b)("div",{id:"h2o_wave.types.ListCard.commands",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"commands")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Contextual menu commands for this component.")),Object(c.b)("div",{id:"h2o_wave.types.ListCard.data",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"data")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Data for this card.")),Object(c.b)("div",{id:"h2o_wave.types.ListCard.item_props",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"item_props")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The child card properties.")),Object(c.b)("div",{id:"h2o_wave.types.ListCard.item_view",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"item_view")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The child card type.")),Object(c.b)("div",{id:"h2o_wave.types.ListCard.title",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"title")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The title for this card."))),Object(c.b)("h4",{id:"methods-29"},"Methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"dump-29"},"dump ",Object(c.b)("a",{name:"h2o_wave.types.ListCard.dump"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"dump"),"(self) \u2011>\xa0Dict"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Returns the contents of this object as a dict."))))))),Object(c.b)("div",{className:"api"},Object(c.b)("h3",{id:"listitem1card"},"ListItem1Card ",Object(c.b)("a",{name:"h2o_wave.types.ListItem1Card"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"class ",Object(c.b)("span",{class:"ident"},"ListItem1Card"),"(box:\xa0str, title:\xa0str, caption:\xa0str, value:\xa0str, aux_value:\xa0str, data:\xa0Union[dict,\xa0str], commands:\xa0Union[List[",Object(c.b)("a",{title:"h2o_wave.types.Command",href:"#h2o_wave.types.Command"},"Command"),"],\xa0NoneType]\xa0=\xa0None)"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"EXPERIMENTAL. DO NOT USE.")),Object(c.b)("h4",{id:"static-methods-30"},"Static methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"load-30"},"load ",Object(c.b)("a",{name:"h2o_wave.types.ListItem1Card.load"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"load"),"(_ListItem1Card__d:\xa0Dict) \u2011>\xa0",Object(c.b)("a",{title:"h2o_wave.types.ListItem1Card",href:"#h2o_wave.types.ListItem1Card"},"ListItem1Card")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Creates an instance of this class using the contents of a dict."))))),Object(c.b)("h4",{id:"instance-variables-30"},"Instance variables"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{id:"h2o_wave.types.ListItem1Card.aux_value",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"aux_value")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"EXPERIMENTAL. DO NOT USE.")),Object(c.b)("div",{id:"h2o_wave.types.ListItem1Card.box",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"box")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"A string indicating how to place this component on the page.")),Object(c.b)("div",{id:"h2o_wave.types.ListItem1Card.caption",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"caption")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"EXPERIMENTAL. DO NOT USE.")),Object(c.b)("div",{id:"h2o_wave.types.ListItem1Card.commands",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"commands")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Contextual menu commands for this component.")),Object(c.b)("div",{id:"h2o_wave.types.ListItem1Card.data",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"data")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"EXPERIMENTAL. DO NOT USE.")),Object(c.b)("div",{id:"h2o_wave.types.ListItem1Card.title",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"title")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"EXPERIMENTAL. DO NOT USE.")),Object(c.b)("div",{id:"h2o_wave.types.ListItem1Card.value",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"value")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"EXPERIMENTAL. DO NOT USE."))),Object(c.b)("h4",{id:"methods-30"},"Methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"dump-30"},"dump ",Object(c.b)("a",{name:"h2o_wave.types.ListItem1Card.dump"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"dump"),"(self) \u2011>\xa0Dict"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Returns the contents of this object as a dict."))))))),Object(c.b)("div",{className:"api"},Object(c.b)("h3",{id:"mark"},"Mark ",Object(c.b)("a",{name:"h2o_wave.types.Mark"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"class ",Object(c.b)("span",{class:"ident"},"Mark"),"(coord:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, type:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, x:\xa0Union[str,\xa0float,\xa0int,\xa0NoneType]\xa0=\xa0None, x0:\xa0Union[str,\xa0float,\xa0int,\xa0NoneType]\xa0=\xa0None, x1:\xa0Union[str,\xa0float,\xa0int,\xa0NoneType]\xa0=\xa0None, x2:\xa0Union[str,\xa0float,\xa0int,\xa0NoneType]\xa0=\xa0None, x_min:\xa0Union[float,\xa0NoneType]\xa0=\xa0None, x_max:\xa0Union[float,\xa0NoneType]\xa0=\xa0None, x_nice:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, x_scale:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, x_title:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, y:\xa0Union[str,\xa0float,\xa0int,\xa0NoneType]\xa0=\xa0None, y0:\xa0Union[str,\xa0float,\xa0int,\xa0NoneType]\xa0=\xa0None, y1:\xa0Union[str,\xa0float,\xa0int,\xa0NoneType]\xa0=\xa0None, y2:\xa0Union[str,\xa0float,\xa0int,\xa0NoneType]\xa0=\xa0None, y_min:\xa0Union[float,\xa0NoneType]\xa0=\xa0None, y_max:\xa0Union[float,\xa0NoneType]\xa0=\xa0None, y_nice:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, y_scale:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, y_title:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, color:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, color_range:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, color_domain:\xa0Union[List[str],\xa0NoneType]\xa0=\xa0None, shape:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, shape_range:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, size:\xa0Union[str,\xa0float,\xa0int,\xa0NoneType]\xa0=\xa0None, size_range:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, stack:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, dodge:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, curve:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, fill_color:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, fill_opacity:\xa0Union[float,\xa0NoneType]\xa0=\xa0None, stroke_color:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, stroke_opacity:\xa0Union[float,\xa0NoneType]\xa0=\xa0None, stroke_size:\xa0Union[float,\xa0NoneType]\xa0=\xa0None, stroke_dash:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, label:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, label_offset:\xa0Union[float,\xa0NoneType]\xa0=\xa0None, label_offset_x:\xa0Union[float,\xa0NoneType]\xa0=\xa0None, label_offset_y:\xa0Union[float,\xa0NoneType]\xa0=\xa0None, label_rotation:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, label_position:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, label_overlap:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, label_fill_color:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, label_fill_opacity:\xa0Union[float,\xa0NoneType]\xa0=\xa0None, label_stroke_color:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, label_stroke_opacity:\xa0Union[float,\xa0NoneType]\xa0=\xa0None, label_stroke_size:\xa0Union[float,\xa0NoneType]\xa0=\xa0None, label_font_size:\xa0Union[float,\xa0NoneType]\xa0=\xa0None, label_font_weight:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, label_line_height:\xa0Union[float,\xa0NoneType]\xa0=\xa0None, label_align:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, ref_stroke_color:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, ref_stroke_opacity:\xa0Union[float,\xa0NoneType]\xa0=\xa0None, ref_stroke_size:\xa0Union[float,\xa0NoneType]\xa0=\xa0None, ref_stroke_dash:\xa0Union[str,\xa0NoneType]\xa0=\xa0None)"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Create a specification for a layer of graphical marks such as bars, lines, points for a plot. A plot can contain multiple such layers of marks.")),Object(c.b)("h4",{id:"static-methods-31"},"Static methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"load-31"},"load ",Object(c.b)("a",{name:"h2o_wave.types.Mark.load"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"load"),"(_Mark__d:\xa0Dict) \u2011>\xa0",Object(c.b)("a",{title:"h2o_wave.types.Mark",href:"#h2o_wave.types.Mark"},"Mark")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Creates an instance of this class using the contents of a dict."))))),Object(c.b)("h4",{id:"instance-variables-31"},"Instance variables"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{id:"h2o_wave.types.Mark.color",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"color")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Mark color field or value.")),Object(c.b)("div",{id:"h2o_wave.types.Mark.color_domain",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"color_domain")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The unique values in the data (labels or categories or classes) to map colors to, e.g. ",Object(c.b)("code",null,"['high', 'medium', 'low']"),". If this is not provided, the unique values are automatically inferred from the ",Object(c.b)("code",null,"color")," attribute.")),Object(c.b)("div",{id:"h2o_wave.types.Mark.color_range",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"color_range")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Mark color range for multi-series plots. A string containing space-separated colors, e.g. ",Object(c.b)("code",null,"'#fee8c8 #fdbb84 #e34a33'"))),Object(c.b)("div",{id:"h2o_wave.types.Mark.coord",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"coord")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Coordinate system. ",Object(c.b)("code",null,"rect")," is synonymous to ",Object(c.b)("code",null,"cartesian"),". ",Object(c.b)("code",null,"theta")," is transposed ",Object(c.b)("code",null,"polar"),". One of 'rect', 'cartesian', 'polar', 'theta', 'helix'.")),Object(c.b)("div",{id:"h2o_wave.types.Mark.curve",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"curve")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Curve type for ",Object(c.b)("code",null,"line")," and ",Object(c.b)("code",null,"area")," mark types. One of 'none', 'smooth', 'step-before', 'step', 'step-after'.")),Object(c.b)("div",{id:"h2o_wave.types.Mark.dodge",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"dodge")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Field to dodge marks by, or 'auto' to infer.")),Object(c.b)("div",{id:"h2o_wave.types.Mark.fill_color",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"fill_color")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Mark fill color.")),Object(c.b)("div",{id:"h2o_wave.types.Mark.fill_opacity",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"fill_opacity")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Mark fill opacity.")),Object(c.b)("div",{id:"h2o_wave.types.Mark.label",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"label")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Label field or value.")),Object(c.b)("div",{id:"h2o_wave.types.Mark.label_align",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"label_align")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Label text alignment. One of 'left', 'right', 'center', 'start', 'end'.")),Object(c.b)("div",{id:"h2o_wave.types.Mark.label_fill_color",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"label_fill_color")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Label fill color.")),Object(c.b)("div",{id:"h2o_wave.types.Mark.label_fill_opacity",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"label_fill_opacity")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Label fill opacity.")),Object(c.b)("div",{id:"h2o_wave.types.Mark.label_font_size",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"label_font_size")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Label font size.")),Object(c.b)("div",{id:"h2o_wave.types.Mark.label_font_weight",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"label_font_weight")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Label font weight.")),Object(c.b)("div",{id:"h2o_wave.types.Mark.label_line_height",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"label_line_height")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Label line height.")),Object(c.b)("div",{id:"h2o_wave.types.Mark.label_offset",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"label_offset")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Distance between label and mark.")),Object(c.b)("div",{id:"h2o_wave.types.Mark.label_offset_x",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"label_offset_x")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Horizontal distance between label and mark.")),Object(c.b)("div",{id:"h2o_wave.types.Mark.label_offset_y",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"label_offset_y")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Vertical distance between label and mark.")),Object(c.b)("div",{id:"h2o_wave.types.Mark.label_overlap",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"label_overlap")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Strategy to use if labels overlap. One of 'hide', 'overlap', 'constrain'.")),Object(c.b)("div",{id:"h2o_wave.types.Mark.label_position",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"label_position")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Label position relative to the mark. One of 'top', 'bottom', 'middle', 'left', 'right'.")),Object(c.b)("div",{id:"h2o_wave.types.Mark.label_rotation",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"label_rotation")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Label rotation angle, in degrees, or 'none' to disable automatic rotation. The default behavior is 'auto' for automatic rotation.")),Object(c.b)("div",{id:"h2o_wave.types.Mark.label_stroke_color",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"label_stroke_color")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Label stroke color.")),Object(c.b)("div",{id:"h2o_wave.types.Mark.label_stroke_opacity",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"label_stroke_opacity")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Label stroke opacity.")),Object(c.b)("div",{id:"h2o_wave.types.Mark.label_stroke_size",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"label_stroke_size")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Label stroke size (line width or pen thickness).")),Object(c.b)("div",{id:"h2o_wave.types.Mark.ref_stroke_color",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"ref_stroke_color")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Reference line stroke color.")),Object(c.b)("div",{id:"h2o_wave.types.Mark.ref_stroke_dash",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"ref_stroke_dash")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Reference line stroke dash style. A string containing space-separated integers that specify distances to alternately draw a line and a gap (in coordinate space units). If the number of elements in the array is odd, the elements of the array get copied and concatenated. For example, [5, 15, 25] will become [5, 15, 25, 5, 15, 25].")),Object(c.b)("div",{id:"h2o_wave.types.Mark.ref_stroke_opacity",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"ref_stroke_opacity")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Reference line stroke opacity.")),Object(c.b)("div",{id:"h2o_wave.types.Mark.ref_stroke_size",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"ref_stroke_size")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Reference line stroke size (line width or pen thickness).")),Object(c.b)("div",{id:"h2o_wave.types.Mark.shape",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"shape")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Mark shape field or value for ",Object(c.b)("code",null,"point")," mark types. Possible values are 'circle', 'square', 'bowtie', 'diamond', 'hexagon', 'triangle', 'triangle-down', 'cross', 'tick', 'plus', 'hyphen', 'line'.")),Object(c.b)("div",{id:"h2o_wave.types.Mark.shape_range",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"shape_range")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Mark shape range for multi-series plots using ",Object(c.b)("code",null,"point")," mark types. A string containing space-separated shapes, e.g. ",Object(c.b)("code",null,"'circle square diamond'"))),Object(c.b)("div",{id:"h2o_wave.types.Mark.size",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"size")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Mark size field or value.")),Object(c.b)("div",{id:"h2o_wave.types.Mark.size_range",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"size_range")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Mark size range. A string containing space-separated integers, e.g. ",Object(c.b)("code",null,"'4 30'"))),Object(c.b)("div",{id:"h2o_wave.types.Mark.stack",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"stack")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Field to stack marks by, or 'auto' to infer.")),Object(c.b)("div",{id:"h2o_wave.types.Mark.stroke_color",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"stroke_color")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Mark stroke color.")),Object(c.b)("div",{id:"h2o_wave.types.Mark.stroke_dash",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"stroke_dash")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Mark stroke dash style. A string containing space-separated integers that specify distances to alternately draw a line and a gap (in coordinate space units). If the number of elements in the array is odd, the elements of the array get copied and concatenated. For example, [5, 15, 25] will become [5, 15, 25, 5, 15, 25].")),Object(c.b)("div",{id:"h2o_wave.types.Mark.stroke_opacity",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"stroke_opacity")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Mark stroke opacity.")),Object(c.b)("div",{id:"h2o_wave.types.Mark.stroke_size",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"stroke_size")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Mark stroke size.")),Object(c.b)("div",{id:"h2o_wave.types.Mark.type",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"type")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Graphical geometry. One of 'interval', 'line', 'path', 'point', 'area', 'polygon', 'schema', 'edge', 'heatmap'.")),Object(c.b)("div",{id:"h2o_wave.types.Mark.x",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"x")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"X field or value.")),Object(c.b)("div",{id:"h2o_wave.types.Mark.x0",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"x0")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"X base field or value.")),Object(c.b)("div",{id:"h2o_wave.types.Mark.x1",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"x1")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"X bin lower bound field or value. For histograms.")),Object(c.b)("div",{id:"h2o_wave.types.Mark.x2",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"x2")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"X bin upper bound field or value. For histograms.")),Object(c.b)("div",{id:"h2o_wave.types.Mark.x_max",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"x_max")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"X axis scale maximum.")),Object(c.b)("div",{id:"h2o_wave.types.Mark.x_min",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"x_min")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"X axis scale minimum.")),Object(c.b)("div",{id:"h2o_wave.types.Mark.x_nice",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"x_nice")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Whether to nice X axis scale ticks.")),Object(c.b)("div",{id:"h2o_wave.types.Mark.x_scale",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"x_scale")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"X axis scale type. One of 'linear', 'cat', 'category', 'identity', 'log', 'pow', 'time', 'timeCat', 'quantize', 'quantile'.")),Object(c.b)("div",{id:"h2o_wave.types.Mark.x_title",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"x_title")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"X axis title.")),Object(c.b)("div",{id:"h2o_wave.types.Mark.y",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"y")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Y field or value.")),Object(c.b)("div",{id:"h2o_wave.types.Mark.y0",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"y0")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Y base field or value.")),Object(c.b)("div",{id:"h2o_wave.types.Mark.y1",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"y1")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Y bin lower bound field or value. For histograms.")),Object(c.b)("div",{id:"h2o_wave.types.Mark.y2",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"y2")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Y bin upper bound field or value. For histograms.")),Object(c.b)("div",{id:"h2o_wave.types.Mark.y_max",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"y_max")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Y axis scale maximum.")),Object(c.b)("div",{id:"h2o_wave.types.Mark.y_min",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"y_min")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Y axis scale minimum.")),Object(c.b)("div",{id:"h2o_wave.types.Mark.y_nice",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"y_nice")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Whether to nice Y axis scale ticks.")),Object(c.b)("div",{id:"h2o_wave.types.Mark.y_scale",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"y_scale")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Y axis scale type. One of 'linear', 'cat', 'category', 'identity', 'log', 'pow', 'time', 'timeCat', 'quantize', 'quantile'.")),Object(c.b)("div",{id:"h2o_wave.types.Mark.y_title",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"y_title")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Y axis title."))),Object(c.b)("h4",{id:"methods-31"},"Methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"dump-31"},"dump ",Object(c.b)("a",{name:"h2o_wave.types.Mark.dump"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"dump"),"(self) \u2011>\xa0Dict"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Returns the contents of this object as a dict."))))))),Object(c.b)("div",{className:"api"},Object(c.b)("h3",{id:"markdowncard"},"MarkdownCard ",Object(c.b)("a",{name:"h2o_wave.types.MarkdownCard"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"class ",Object(c.b)("span",{class:"ident"},"MarkdownCard"),"(box:\xa0str, title:\xa0str, content:\xa0str, data:\xa0Union[dict,\xa0str,\xa0NoneType]\xa0=\xa0None, commands:\xa0Union[List[",Object(c.b)("a",{title:"h2o_wave.types.Command",href:"#h2o_wave.types.Command"},"Command"),"],\xa0NoneType]\xa0=\xa0None)"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Create a card that renders Markdown content."),Object(c.b)("p",null,"Github-flavored markdown is supported. HTML markup is allowed in markdown content. URLs, if found, are displayed as hyperlinks. Copyright, reserved, trademark, quotes, etc. are replaced with language-neutral symbols.")),Object(c.b)("h4",{id:"static-methods-32"},"Static methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"load-32"},"load ",Object(c.b)("a",{name:"h2o_wave.types.MarkdownCard.load"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"load"),"(_MarkdownCard__d:\xa0Dict) \u2011>\xa0",Object(c.b)("a",{title:"h2o_wave.types.MarkdownCard",href:"#h2o_wave.types.MarkdownCard"},"MarkdownCard")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Creates an instance of this class using the contents of a dict."))))),Object(c.b)("h4",{id:"instance-variables-32"},"Instance variables"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{id:"h2o_wave.types.MarkdownCard.box",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"box")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"A string indicating how to place this component on the page.")),Object(c.b)("div",{id:"h2o_wave.types.MarkdownCard.commands",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"commands")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Contextual menu commands for this component.")),Object(c.b)("div",{id:"h2o_wave.types.MarkdownCard.content",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"content")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The markdown content. Supports Github Flavored Markdown (GFM): ",Object(c.b)("a",{href:"https://guides.github.com/features/mastering-markdown/"},"https://guides.github.com/features/mastering-markdown/"))),Object(c.b)("div",{id:"h2o_wave.types.MarkdownCard.data",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"data")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Additional data for the card.")),Object(c.b)("div",{id:"h2o_wave.types.MarkdownCard.title",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"title")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The title for this card."))),Object(c.b)("h4",{id:"methods-32"},"Methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"dump-32"},"dump ",Object(c.b)("a",{name:"h2o_wave.types.MarkdownCard.dump"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"dump"),"(self) \u2011>\xa0Dict"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Returns the contents of this object as a dict."))))))),Object(c.b)("div",{className:"api"},Object(c.b)("h3",{id:"markup"},"Markup ",Object(c.b)("a",{name:"h2o_wave.types.Markup"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"class ",Object(c.b)("span",{class:"ident"},"Markup"),"(content:\xa0str, name:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, visible:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None)"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Render HTML content.")),Object(c.b)("h4",{id:"static-methods-33"},"Static methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"load-33"},"load ",Object(c.b)("a",{name:"h2o_wave.types.Markup.load"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"load"),"(_Markup__d:\xa0Dict) \u2011>\xa0",Object(c.b)("a",{title:"h2o_wave.types.Markup",href:"#h2o_wave.types.Markup"},"Markup")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Creates an instance of this class using the contents of a dict."))))),Object(c.b)("h4",{id:"instance-variables-33"},"Instance variables"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{id:"h2o_wave.types.Markup.content",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"content")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The HTML content.")),Object(c.b)("div",{id:"h2o_wave.types.Markup.name",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"name")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"An identifying name for this component.")),Object(c.b)("div",{id:"h2o_wave.types.Markup.visible",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"visible")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"True if the component should be visible. Defaults to true."))),Object(c.b)("h4",{id:"methods-33"},"Methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"dump-33"},"dump ",Object(c.b)("a",{name:"h2o_wave.types.Markup.dump"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"dump"),"(self) \u2011>\xa0Dict"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Returns the contents of this object as a dict."))))))),Object(c.b)("div",{className:"api"},Object(c.b)("h3",{id:"markupcard"},"MarkupCard ",Object(c.b)("a",{name:"h2o_wave.types.MarkupCard"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"class ",Object(c.b)("span",{class:"ident"},"MarkupCard"),"(box:\xa0str, title:\xa0str, content:\xa0str, commands:\xa0Union[List[",Object(c.b)("a",{title:"h2o_wave.types.Command",href:"#h2o_wave.types.Command"},"Command"),"],\xa0NoneType]\xa0=\xa0None)"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Render HTML content.")),Object(c.b)("h4",{id:"static-methods-34"},"Static methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"load-34"},"load ",Object(c.b)("a",{name:"h2o_wave.types.MarkupCard.load"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"load"),"(_MarkupCard__d:\xa0Dict) \u2011>\xa0",Object(c.b)("a",{title:"h2o_wave.types.MarkupCard",href:"#h2o_wave.types.MarkupCard"},"MarkupCard")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Creates an instance of this class using the contents of a dict."))))),Object(c.b)("h4",{id:"instance-variables-34"},"Instance variables"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{id:"h2o_wave.types.MarkupCard.box",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"box")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"A string indicating how to place this component on the page.")),Object(c.b)("div",{id:"h2o_wave.types.MarkupCard.commands",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"commands")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Contextual menu commands for this component.")),Object(c.b)("div",{id:"h2o_wave.types.MarkupCard.content",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"content")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The HTML content.")),Object(c.b)("div",{id:"h2o_wave.types.MarkupCard.title",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"title")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The title for this card."))),Object(c.b)("h4",{id:"methods-34"},"Methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"dump-34"},"dump ",Object(c.b)("a",{name:"h2o_wave.types.MarkupCard.dump"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"dump"),"(self) \u2011>\xa0Dict"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Returns the contents of this object as a dict."))))))),Object(c.b)("div",{className:"api"},Object(c.b)("h3",{id:"messagebar"},"MessageBar ",Object(c.b)("a",{name:"h2o_wave.types.MessageBar"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"class ",Object(c.b)("span",{class:"ident"},"MessageBar"),"(type:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, text:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, name:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, visible:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None)"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Create a message bar."),Object(c.b)("p",null,"A message bar is an area at the top of a primary view that displays relevant status information. You can use a message bar to tell the user about a situation that does not require their immediate attention and therefore does not need to block other activities.")),Object(c.b)("h4",{id:"static-methods-35"},"Static methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"load-35"},"load ",Object(c.b)("a",{name:"h2o_wave.types.MessageBar.load"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"load"),"(_MessageBar__d:\xa0Dict) \u2011>\xa0",Object(c.b)("a",{title:"h2o_wave.types.MessageBar",href:"#h2o_wave.types.MessageBar"},"MessageBar")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Creates an instance of this class using the contents of a dict."))))),Object(c.b)("h4",{id:"instance-variables-35"},"Instance variables"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{id:"h2o_wave.types.MessageBar.name",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"name")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"An identifying name for this component.")),Object(c.b)("div",{id:"h2o_wave.types.MessageBar.text",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"text")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The text displayed on the message bar.")),Object(c.b)("div",{id:"h2o_wave.types.MessageBar.type",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"type")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The icon and color of the message bar. One of 'info', 'error', 'warning', 'success', 'danger', 'blocked'.")),Object(c.b)("div",{id:"h2o_wave.types.MessageBar.visible",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"visible")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"True if the component should be visible. Defaults to true."))),Object(c.b)("h4",{id:"methods-35"},"Methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"dump-35"},"dump ",Object(c.b)("a",{name:"h2o_wave.types.MessageBar.dump"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"dump"),"(self) \u2011>\xa0Dict"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Returns the contents of this object as a dict."))))))),Object(c.b)("div",{className:"api"},Object(c.b)("h3",{id:"metacard"},"MetaCard ",Object(c.b)("a",{name:"h2o_wave.types.MetaCard"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"class ",Object(c.b)("span",{class:"ident"},"MetaCard"),"(box:\xa0str, title:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, refresh:\xa0Union[int,\xa0NoneType]\xa0=\xa0None, notification:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, redirect:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, commands:\xa0Union[List[",Object(c.b)("a",{title:"h2o_wave.types.Command",href:"#h2o_wave.types.Command"},"Command"),"],\xa0NoneType]\xa0=\xa0None)"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Represents page-global state."),Object(c.b)("p",null,"This card is invisible. It is used to control attributes of the active page.")),Object(c.b)("h4",{id:"static-methods-36"},"Static methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"load-36"},"load ",Object(c.b)("a",{name:"h2o_wave.types.MetaCard.load"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"load"),"(_MetaCard__d:\xa0Dict) \u2011>\xa0",Object(c.b)("a",{title:"h2o_wave.types.MetaCard",href:"#h2o_wave.types.MetaCard"},"MetaCard")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Creates an instance of this class using the contents of a dict."))))),Object(c.b)("h4",{id:"instance-variables-36"},"Instance variables"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{id:"h2o_wave.types.MetaCard.box",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"box")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"A string indicating how to place this component on the page.")),Object(c.b)("div",{id:"h2o_wave.types.MetaCard.commands",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"commands")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Contextual menu commands for this component.")),Object(c.b)("div",{id:"h2o_wave.types.MetaCard.notification",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"notification")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Display a desktop notification to the user.")),Object(c.b)("div",{id:"h2o_wave.types.MetaCard.redirect",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"redirect")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Redirect the page to a new URL.")),Object(c.b)("div",{id:"h2o_wave.types.MetaCard.refresh",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"refresh")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Refresh rate in seconds. A value of 0 turns off live-updates. Values != 0 are currently ignored (reserved for future use).")),Object(c.b)("div",{id:"h2o_wave.types.MetaCard.title",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"title")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The title of the page."))),Object(c.b)("h4",{id:"methods-36"},"Methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"dump-36"},"dump ",Object(c.b)("a",{name:"h2o_wave.types.MetaCard.dump"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"dump"),"(self) \u2011>\xa0Dict"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Returns the contents of this object as a dict."))))))),Object(c.b)("div",{className:"api"},Object(c.b)("h3",{id:"navcard"},"NavCard ",Object(c.b)("a",{name:"h2o_wave.types.NavCard"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"class ",Object(c.b)("span",{class:"ident"},"NavCard"),"(box:\xa0str, items:\xa0List[",Object(c.b)("a",{title:"h2o_wave.types.NavGroup",href:"#h2o_wave.types.NavGroup"},"NavGroup"),"], commands:\xa0Union[List[",Object(c.b)("a",{title:"h2o_wave.types.Command",href:"#h2o_wave.types.Command"},"Command"),"],\xa0NoneType]\xa0=\xa0None)"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Create a card containing a navigation pane.")),Object(c.b)("h4",{id:"static-methods-37"},"Static methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"load-37"},"load ",Object(c.b)("a",{name:"h2o_wave.types.NavCard.load"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"load"),"(_NavCard__d:\xa0Dict) \u2011>\xa0",Object(c.b)("a",{title:"h2o_wave.types.NavCard",href:"#h2o_wave.types.NavCard"},"NavCard")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Creates an instance of this class using the contents of a dict."))))),Object(c.b)("h4",{id:"instance-variables-37"},"Instance variables"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{id:"h2o_wave.types.NavCard.box",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"box")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"A string indicating how to place this component on the page.")),Object(c.b)("div",{id:"h2o_wave.types.NavCard.commands",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"commands")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Contextual menu commands for this component.")),Object(c.b)("div",{id:"h2o_wave.types.NavCard.items",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"items")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The navigation groups contained in this pane."))),Object(c.b)("h4",{id:"methods-37"},"Methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"dump-37"},"dump ",Object(c.b)("a",{name:"h2o_wave.types.NavCard.dump"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"dump"),"(self) \u2011>\xa0Dict"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Returns the contents of this object as a dict."))))))),Object(c.b)("div",{className:"api"},Object(c.b)("h3",{id:"navgroup"},"NavGroup ",Object(c.b)("a",{name:"h2o_wave.types.NavGroup"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"class ",Object(c.b)("span",{class:"ident"},"NavGroup"),"(label:\xa0str, items:\xa0List[",Object(c.b)("a",{title:"h2o_wave.types.NavItem",href:"#h2o_wave.types.NavItem"},"NavItem"),"])"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Create a group of navigation items.")),Object(c.b)("h4",{id:"static-methods-38"},"Static methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"load-38"},"load ",Object(c.b)("a",{name:"h2o_wave.types.NavGroup.load"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"load"),"(_NavGroup__d:\xa0Dict) \u2011>\xa0",Object(c.b)("a",{title:"h2o_wave.types.NavGroup",href:"#h2o_wave.types.NavGroup"},"NavGroup")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Creates an instance of this class using the contents of a dict."))))),Object(c.b)("h4",{id:"instance-variables-38"},"Instance variables"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{id:"h2o_wave.types.NavGroup.items",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"items")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The navigation items contained in this group.")),Object(c.b)("div",{id:"h2o_wave.types.NavGroup.label",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"label")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The label to display for this group."))),Object(c.b)("h4",{id:"methods-38"},"Methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"dump-38"},"dump ",Object(c.b)("a",{name:"h2o_wave.types.NavGroup.dump"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"dump"),"(self) \u2011>\xa0Dict"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Returns the contents of this object as a dict."))))))),Object(c.b)("div",{className:"api"},Object(c.b)("h3",{id:"navitem"},"NavItem ",Object(c.b)("a",{name:"h2o_wave.types.NavItem"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"class ",Object(c.b)("span",{class:"ident"},"NavItem"),"(name:\xa0str, label:\xa0str)"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Create a navigation item.")),Object(c.b)("h4",{id:"static-methods-39"},"Static methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"load-39"},"load ",Object(c.b)("a",{name:"h2o_wave.types.NavItem.load"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"load"),"(_NavItem__d:\xa0Dict) \u2011>\xa0",Object(c.b)("a",{title:"h2o_wave.types.NavItem",href:"#h2o_wave.types.NavItem"},"NavItem")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Creates an instance of this class using the contents of a dict."))))),Object(c.b)("h4",{id:"instance-variables-39"},"Instance variables"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{id:"h2o_wave.types.NavItem.label",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"label")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The label to display.")),Object(c.b)("div",{id:"h2o_wave.types.NavItem.name",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"name")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The name of this item. Prefix the name with a '#' to trigger hash-change navigation."))),Object(c.b)("h4",{id:"methods-39"},"Methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"dump-39"},"dump ",Object(c.b)("a",{name:"h2o_wave.types.NavItem.dump"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"dump"),"(self) \u2011>\xa0Dict"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Returns the contents of this object as a dict."))))))),Object(c.b)("div",{className:"api"},Object(c.b)("h3",{id:"picker"},"Picker ",Object(c.b)("a",{name:"h2o_wave.types.Picker"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"class ",Object(c.b)("span",{class:"ident"},"Picker"),"(name:\xa0str, choices:\xa0List[",Object(c.b)("a",{title:"h2o_wave.types.Choice",href:"#h2o_wave.types.Choice"},"Choice"),"], label:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, values:\xa0Union[List[str],\xa0NoneType]\xa0=\xa0None, max_choices:\xa0Union[int,\xa0NoneType]\xa0=\xa0None, disabled:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, visible:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, tooltip:\xa0Union[str,\xa0NoneType]\xa0=\xa0None)"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Create a picker. Pickers are used to select one or more choices, such as tags or files, from a list. Use a picker to allow the user to quickly search for or manage a few tags or files.")),Object(c.b)("h4",{id:"static-methods-40"},"Static methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"load-40"},"load ",Object(c.b)("a",{name:"h2o_wave.types.Picker.load"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"load"),"(_Picker__d:\xa0Dict) \u2011>\xa0",Object(c.b)("a",{title:"h2o_wave.types.Picker",href:"#h2o_wave.types.Picker"},"Picker")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Creates an instance of this class using the contents of a dict."))))),Object(c.b)("h4",{id:"instance-variables-40"},"Instance variables"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{id:"h2o_wave.types.Picker.choices",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"choices")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The choices to be presented.")),Object(c.b)("div",{id:"h2o_wave.types.Picker.disabled",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"disabled")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Controls whether the picker should be disabled or not.")),Object(c.b)("div",{id:"h2o_wave.types.Picker.label",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"label")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Text to be displayed above the component.")),Object(c.b)("div",{id:"h2o_wave.types.Picker.max_choices",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"max_choices")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Maximum number of selectable choices. Defaults to no limit.")),Object(c.b)("div",{id:"h2o_wave.types.Picker.name",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"name")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"An identifying name for this component.")),Object(c.b)("div",{id:"h2o_wave.types.Picker.tooltip",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"tooltip")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"An optional tooltip message displayed when a user clicks the help icon to the right of the component.")),Object(c.b)("div",{id:"h2o_wave.types.Picker.values",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"values")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The names of the selected choices.")),Object(c.b)("div",{id:"h2o_wave.types.Picker.visible",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"visible")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"True if the component should be visible. Defaults to true."))),Object(c.b)("h4",{id:"methods-40"},"Methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"dump-40"},"dump ",Object(c.b)("a",{name:"h2o_wave.types.Picker.dump"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"dump"),"(self) \u2011>\xa0Dict"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Returns the contents of this object as a dict."))))))),Object(c.b)("div",{className:"api"},Object(c.b)("h3",{id:"pixelartcard"},"PixelArtCard ",Object(c.b)("a",{name:"h2o_wave.types.PixelArtCard"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"class ",Object(c.b)("span",{class:"ident"},"PixelArtCard"),"(box:\xa0str, title:\xa0str, data:\xa0Union[dict,\xa0str], commands:\xa0Union[List[",Object(c.b)("a",{title:"h2o_wave.types.Command",href:"#h2o_wave.types.Command"},"Command"),"],\xa0NoneType]\xa0=\xa0None)"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Create a card displaying a collaborative Pixel art tool, just for kicks.")),Object(c.b)("h4",{id:"static-methods-41"},"Static methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"load-41"},"load ",Object(c.b)("a",{name:"h2o_wave.types.PixelArtCard.load"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"load"),"(_PixelArtCard__d:\xa0Dict) \u2011>\xa0",Object(c.b)("a",{title:"h2o_wave.types.PixelArtCard",href:"#h2o_wave.types.PixelArtCard"},"PixelArtCard")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Creates an instance of this class using the contents of a dict."))))),Object(c.b)("h4",{id:"instance-variables-41"},"Instance variables"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{id:"h2o_wave.types.PixelArtCard.box",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"box")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"A string indicating how to place this component on the page.")),Object(c.b)("div",{id:"h2o_wave.types.PixelArtCard.commands",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"commands")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Contextual menu commands for this component.")),Object(c.b)("div",{id:"h2o_wave.types.PixelArtCard.data",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"data")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The data for this card.")),Object(c.b)("div",{id:"h2o_wave.types.PixelArtCard.title",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"title")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The title for this card."))),Object(c.b)("h4",{id:"methods-41"},"Methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"dump-41"},"dump ",Object(c.b)("a",{name:"h2o_wave.types.PixelArtCard.dump"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"dump"),"(self) \u2011>\xa0Dict"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Returns the contents of this object as a dict."))))))),Object(c.b)("div",{className:"api"},Object(c.b)("h3",{id:"plot"},"Plot ",Object(c.b)("a",{name:"h2o_wave.types.Plot"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"class ",Object(c.b)("span",{class:"ident"},"Plot"),"(marks:\xa0List[",Object(c.b)("a",{title:"h2o_wave.types.Mark",href:"#h2o_wave.types.Mark"},"Mark"),"])"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Create a plot. A plot is composed of one or more graphical mark layers.")),Object(c.b)("h4",{id:"static-methods-42"},"Static methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"load-42"},"load ",Object(c.b)("a",{name:"h2o_wave.types.Plot.load"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"load"),"(_Plot__d:\xa0Dict) \u2011>\xa0",Object(c.b)("a",{title:"h2o_wave.types.Plot",href:"#h2o_wave.types.Plot"},"Plot")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Creates an instance of this class using the contents of a dict."))))),Object(c.b)("h4",{id:"instance-variables-42"},"Instance variables"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{id:"h2o_wave.types.Plot.marks",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"marks")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The graphical mark layers contained in this plot."))),Object(c.b)("h4",{id:"methods-42"},"Methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"dump-42"},"dump ",Object(c.b)("a",{name:"h2o_wave.types.Plot.dump"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"dump"),"(self) \u2011>\xa0Dict"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Returns the contents of this object as a dict."))))))),Object(c.b)("div",{className:"api"},Object(c.b)("h3",{id:"plotcard"},"PlotCard ",Object(c.b)("a",{name:"h2o_wave.types.PlotCard"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"class ",Object(c.b)("span",{class:"ident"},"PlotCard"),"(box:\xa0str, title:\xa0str, data:\xa0Union[dict,\xa0str], plot:\xa0",Object(c.b)("a",{title:"h2o_wave.types.Plot",href:"#h2o_wave.types.Plot"},"Plot"),", commands:\xa0Union[List[",Object(c.b)("a",{title:"h2o_wave.types.Command",href:"#h2o_wave.types.Command"},"Command"),"],\xa0NoneType]\xa0=\xa0None)"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Create a card displaying a plot.")),Object(c.b)("h4",{id:"static-methods-43"},"Static methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"load-43"},"load ",Object(c.b)("a",{name:"h2o_wave.types.PlotCard.load"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"load"),"(_PlotCard__d:\xa0Dict) \u2011>\xa0",Object(c.b)("a",{title:"h2o_wave.types.PlotCard",href:"#h2o_wave.types.PlotCard"},"PlotCard")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Creates an instance of this class using the contents of a dict."))))),Object(c.b)("h4",{id:"instance-variables-43"},"Instance variables"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{id:"h2o_wave.types.PlotCard.box",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"box")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"A string indicating how to place this component on the page.")),Object(c.b)("div",{id:"h2o_wave.types.PlotCard.commands",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"commands")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Contextual menu commands for this component.")),Object(c.b)("div",{id:"h2o_wave.types.PlotCard.data",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"data")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Data for this card.")),Object(c.b)("div",{id:"h2o_wave.types.PlotCard.plot",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"plot")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The plot to be displayed in this card.")),Object(c.b)("div",{id:"h2o_wave.types.PlotCard.title",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"title")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The title for this card."))),Object(c.b)("h4",{id:"methods-43"},"Methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"dump-43"},"dump ",Object(c.b)("a",{name:"h2o_wave.types.PlotCard.dump"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"dump"),"(self) \u2011>\xa0Dict"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Returns the contents of this object as a dict."))))))),Object(c.b)("div",{className:"api"},Object(c.b)("h3",{id:"progress"},"Progress ",Object(c.b)("a",{name:"h2o_wave.types.Progress"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"class ",Object(c.b)("span",{class:"ident"},"Progress"),"(label:\xa0str, caption:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, value:\xa0Union[float,\xa0NoneType]\xa0=\xa0None, visible:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, tooltip:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, name:\xa0Union[str,\xa0NoneType]\xa0=\xa0None)"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Create a progress bar."),Object(c.b)("p",null,"Progress bars are used to show the completion status of an operation lasting more than 2 seconds. If the state of progress cannot be determined, do not set a value. Progress bars feature a bar showing total units to completion, and total units finished. The label appears above the bar, and the caption appears below. The label should tell someone exactly what the operation is doing."),Object(c.b)("p",null,"Examples of formatting include: [Object] is being [operation name], or [Object] is being [operation name] to [destination name] or [Object] is being [operation name] from [source name] to [destination name]"),Object(c.b)("p",null,"Status text is generally in units elapsed and total units. Real-world examples include copying files to a storage location, saving edits to a file, and more. Use units that are informative and relevant to give the best idea to users of how long the operation will take to complete. Avoid time units as they are rarely accurate enough to be trustworthy. Also, combine steps of a complex operation into one total bar to avoid \u201crewinding\u201d the bar. Instead change the label to reflect the change if necessary. Bars moving backwards reduce confidence in the service.")),Object(c.b)("h4",{id:"static-methods-44"},"Static methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"load-44"},"load ",Object(c.b)("a",{name:"h2o_wave.types.Progress.load"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"load"),"(_Progress__d:\xa0Dict) \u2011>\xa0",Object(c.b)("a",{title:"h2o_wave.types.Progress",href:"#h2o_wave.types.Progress"},"Progress")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Creates an instance of this class using the contents of a dict."))))),Object(c.b)("h4",{id:"instance-variables-44"},"Instance variables"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{id:"h2o_wave.types.Progress.caption",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"caption")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The text displayed below the bar.")),Object(c.b)("div",{id:"h2o_wave.types.Progress.label",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"label")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The text displayed above the bar.")),Object(c.b)("div",{id:"h2o_wave.types.Progress.name",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"name")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"An identifying name for this component.")),Object(c.b)("div",{id:"h2o_wave.types.Progress.tooltip",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"tooltip")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"An optional tooltip message displayed when a user clicks the help icon to the right of the component.")),Object(c.b)("div",{id:"h2o_wave.types.Progress.value",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"value")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The progress, between 0.0 and 1.0, or -1 (default) if indeterminate.")),Object(c.b)("div",{id:"h2o_wave.types.Progress.visible",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"visible")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"True if the component should be visible. Defaults to true."))),Object(c.b)("h4",{id:"methods-44"},"Methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"dump-44"},"dump ",Object(c.b)("a",{name:"h2o_wave.types.Progress.dump"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"dump"),"(self) \u2011>\xa0Dict"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Returns the contents of this object as a dict."))))))),Object(c.b)("div",{className:"api"},Object(c.b)("h3",{id:"progresstablecelltype"},"ProgressTableCellType ",Object(c.b)("a",{name:"h2o_wave.types.ProgressTableCellType"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"class ",Object(c.b)("span",{class:"ident"},"ProgressTableCellType"),"(color:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, name:\xa0Union[str,\xa0NoneType]\xa0=\xa0None)"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Create a cell type that renders a column's cells as progress bars instead of plain text. If set on a column, the cell value must be between 0.0 and 1.0.")),Object(c.b)("h4",{id:"static-methods-45"},"Static methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"load-45"},"load ",Object(c.b)("a",{name:"h2o_wave.types.ProgressTableCellType.load"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"load"),"(_ProgressTableCellType__d:\xa0Dict) \u2011>\xa0",Object(c.b)("a",{title:"h2o_wave.types.ProgressTableCellType",href:"#h2o_wave.types.ProgressTableCellType"},"ProgressTableCellType")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Creates an instance of this class using the contents of a dict."))))),Object(c.b)("h4",{id:"instance-variables-45"},"Instance variables"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{id:"h2o_wave.types.ProgressTableCellType.color",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"color")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Color of the progress arc.")),Object(c.b)("div",{id:"h2o_wave.types.ProgressTableCellType.name",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"name")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"An identifying name for this component."))),Object(c.b)("h4",{id:"methods-45"},"Methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"dump-45"},"dump ",Object(c.b)("a",{name:"h2o_wave.types.ProgressTableCellType.dump"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"dump"),"(self) \u2011>\xa0Dict"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Returns the contents of this object as a dict."))))))),Object(c.b)("div",{className:"api"},Object(c.b)("h3",{id:"rangeslider"},"RangeSlider ",Object(c.b)("a",{name:"h2o_wave.types.RangeSlider"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"class ",Object(c.b)("span",{class:"ident"},"RangeSlider"),"(name:\xa0str, label:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, min:\xa0Union[float,\xa0NoneType]\xa0=\xa0None, max:\xa0Union[float,\xa0NoneType]\xa0=\xa0None, step:\xa0Union[float,\xa0NoneType]\xa0=\xa0None, min_value:\xa0Union[float,\xa0NoneType]\xa0=\xa0None, max_value:\xa0Union[float,\xa0NoneType]\xa0=\xa0None, disabled:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, trigger:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, visible:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, tooltip:\xa0Union[str,\xa0NoneType]\xa0=\xa0None)"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Create a range slider."),Object(c.b)("p",null,"A range slider is an element used to select a value range. It provides a visual indication of adjustable content, as well as the current setting in the total range of content. It is displayed as a horizontal track with options on either side. Knobs or levers are dragged to one end or the other to make the choice, indicating the current max and min value.")),Object(c.b)("h4",{id:"static-methods-46"},"Static methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"load-46"},"load ",Object(c.b)("a",{name:"h2o_wave.types.RangeSlider.load"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"load"),"(_RangeSlider__d:\xa0Dict) \u2011>\xa0",Object(c.b)("a",{title:"h2o_wave.types.RangeSlider",href:"#h2o_wave.types.RangeSlider"},"RangeSlider")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Creates an instance of this class using the contents of a dict."))))),Object(c.b)("h4",{id:"instance-variables-46"},"Instance variables"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{id:"h2o_wave.types.RangeSlider.disabled",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"disabled")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"True if this field is disabled.")),Object(c.b)("div",{id:"h2o_wave.types.RangeSlider.label",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"label")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Text to be displayed alongside the component.")),Object(c.b)("div",{id:"h2o_wave.types.RangeSlider.max",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"max")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The maximum value of the slider. Defaults to 100.")),Object(c.b)("div",{id:"h2o_wave.types.RangeSlider.max_value",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"max_value")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The upper bound of the selected range.")),Object(c.b)("div",{id:"h2o_wave.types.RangeSlider.min",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"min")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The minimum value of the slider. Defaults to 0.")),Object(c.b)("div",{id:"h2o_wave.types.RangeSlider.min_value",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"min_value")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The lower bound of the selected range.")),Object(c.b)("div",{id:"h2o_wave.types.RangeSlider.name",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"name")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"An identifying name for this component.")),Object(c.b)("div",{id:"h2o_wave.types.RangeSlider.step",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"step")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The difference between two adjacent values of the slider.")),Object(c.b)("div",{id:"h2o_wave.types.RangeSlider.tooltip",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"tooltip")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"An optional tooltip message displayed when a user clicks the help icon to the right of the component.")),Object(c.b)("div",{id:"h2o_wave.types.RangeSlider.trigger",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"trigger")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"True if the form should be submitted when the slider value changes.")),Object(c.b)("div",{id:"h2o_wave.types.RangeSlider.visible",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"visible")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"True if the component should be visible. Defaults to true."))),Object(c.b)("h4",{id:"methods-46"},"Methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"dump-46"},"dump ",Object(c.b)("a",{name:"h2o_wave.types.RangeSlider.dump"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"dump"),"(self) \u2011>\xa0Dict"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Returns the contents of this object as a dict."))))))),Object(c.b)("div",{className:"api"},Object(c.b)("h3",{id:"repeatcard"},"RepeatCard ",Object(c.b)("a",{name:"h2o_wave.types.RepeatCard"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"class ",Object(c.b)("span",{class:"ident"},"RepeatCard"),"(box:\xa0str, item_view:\xa0str, item_props:\xa0Union[dict,\xa0str], data:\xa0Union[",Object(c.b)("a",{title:"h2o_wave.core.Data",href:"core#h2o_wave.core.Data"},"Data"),",\xa0str], commands:\xa0Union[List[",Object(c.b)("a",{title:"h2o_wave.types.Command",href:"#h2o_wave.types.Command"},"Command"),"],\xa0NoneType]\xa0=\xa0None)"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"EXPERIMENTAL. DO NOT USE. Create a card containing other cards.")),Object(c.b)("h4",{id:"static-methods-47"},"Static methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"load-47"},"load ",Object(c.b)("a",{name:"h2o_wave.types.RepeatCard.load"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"load"),"(_RepeatCard__d:\xa0Dict) \u2011>\xa0",Object(c.b)("a",{title:"h2o_wave.types.RepeatCard",href:"#h2o_wave.types.RepeatCard"},"RepeatCard")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Creates an instance of this class using the contents of a dict."))))),Object(c.b)("h4",{id:"instance-variables-47"},"Instance variables"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{id:"h2o_wave.types.RepeatCard.box",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"box")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"A string indicating how to place this component on the page.")),Object(c.b)("div",{id:"h2o_wave.types.RepeatCard.commands",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"commands")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Contextual menu commands for this component.")),Object(c.b)("div",{id:"h2o_wave.types.RepeatCard.data",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"data")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Data for this card.")),Object(c.b)("div",{id:"h2o_wave.types.RepeatCard.item_props",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"item_props")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The child card properties.")),Object(c.b)("div",{id:"h2o_wave.types.RepeatCard.item_view",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"item_view")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"EXPERIMENTAL. DO NOT USE."))),Object(c.b)("h4",{id:"methods-47"},"Methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"dump-47"},"dump ",Object(c.b)("a",{name:"h2o_wave.types.RepeatCard.dump"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"dump"),"(self) \u2011>\xa0Dict"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Returns the contents of this object as a dict."))))))),Object(c.b)("div",{className:"api"},Object(c.b)("h3",{id:"separator"},"Separator ",Object(c.b)("a",{name:"h2o_wave.types.Separator"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"class ",Object(c.b)("span",{class:"ident"},"Separator"),"(label:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, name:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, visible:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None)"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Create a separator."),Object(c.b)("p",null,"A separator visually separates content into groups.")),Object(c.b)("h4",{id:"static-methods-48"},"Static methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"load-48"},"load ",Object(c.b)("a",{name:"h2o_wave.types.Separator.load"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"load"),"(_Separator__d:\xa0Dict) \u2011>\xa0",Object(c.b)("a",{title:"h2o_wave.types.Separator",href:"#h2o_wave.types.Separator"},"Separator")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Creates an instance of this class using the contents of a dict."))))),Object(c.b)("h4",{id:"instance-variables-48"},"Instance variables"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{id:"h2o_wave.types.Separator.label",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"label")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The text displayed on the separator.")),Object(c.b)("div",{id:"h2o_wave.types.Separator.name",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"name")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"An identifying name for this component.")),Object(c.b)("div",{id:"h2o_wave.types.Separator.visible",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"visible")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"True if the component should be visible. Defaults to true."))),Object(c.b)("h4",{id:"methods-48"},"Methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"dump-48"},"dump ",Object(c.b)("a",{name:"h2o_wave.types.Separator.dump"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"dump"),"(self) \u2011>\xa0Dict"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Returns the contents of this object as a dict."))))))),Object(c.b)("div",{className:"api"},Object(c.b)("h3",{id:"slider"},"Slider ",Object(c.b)("a",{name:"h2o_wave.types.Slider"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"class ",Object(c.b)("span",{class:"ident"},"Slider"),"(name:\xa0str, label:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, min:\xa0Union[float,\xa0NoneType]\xa0=\xa0None, max:\xa0Union[float,\xa0NoneType]\xa0=\xa0None, step:\xa0Union[float,\xa0NoneType]\xa0=\xa0None, value:\xa0Union[float,\xa0NoneType]\xa0=\xa0None, disabled:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, trigger:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, visible:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, tooltip:\xa0Union[str,\xa0NoneType]\xa0=\xa0None)"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Create a slider."),Object(c.b)("p",null,"A slider is an element used to set a value. It provides a visual indication of adjustable content, as well as the current setting in the total range of content. It is displayed as a horizontal track with options on either side. A knob or lever is dragged to one end or the other to make the choice, indicating the current value. Marks on the slider bar can show values and users can choose where they want to drag the knob or lever to set the value."),Object(c.b)("p",null,"A slider is a good choice when you know that users think of the value as a relative quantity, not a numeric value. For example, users think about setting their audio volume to low or medium \u2014 not about setting the value to two or five."),Object(c.b)("p",null,"The default value of the slider will be zero or be constrained to the min and max values. The min will be returned if the value is set under the min and the max will be returned if set higher than the max value.")),Object(c.b)("h4",{id:"static-methods-49"},"Static methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"load-49"},"load ",Object(c.b)("a",{name:"h2o_wave.types.Slider.load"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"load"),"(_Slider__d:\xa0Dict) \u2011>\xa0",Object(c.b)("a",{title:"h2o_wave.types.Slider",href:"#h2o_wave.types.Slider"},"Slider")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Creates an instance of this class using the contents of a dict."))))),Object(c.b)("h4",{id:"instance-variables-49"},"Instance variables"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{id:"h2o_wave.types.Slider.disabled",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"disabled")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"True if this field is disabled.")),Object(c.b)("div",{id:"h2o_wave.types.Slider.label",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"label")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Text to be displayed alongside the component.")),Object(c.b)("div",{id:"h2o_wave.types.Slider.max",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"max")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The maximum value of the slider.")),Object(c.b)("div",{id:"h2o_wave.types.Slider.min",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"min")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The minimum value of the slider.")),Object(c.b)("div",{id:"h2o_wave.types.Slider.name",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"name")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"An identifying name for this component.")),Object(c.b)("div",{id:"h2o_wave.types.Slider.step",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"step")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The difference between two adjacent values of the slider.")),Object(c.b)("div",{id:"h2o_wave.types.Slider.tooltip",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"tooltip")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"An optional tooltip message displayed when a user clicks the help icon to the right of the component.")),Object(c.b)("div",{id:"h2o_wave.types.Slider.trigger",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"trigger")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"True if the form should be submitted when the slider value changes.")),Object(c.b)("div",{id:"h2o_wave.types.Slider.value",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"value")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The current value of the slider.")),Object(c.b)("div",{id:"h2o_wave.types.Slider.visible",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"visible")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"True if the component should be visible. Defaults to true."))),Object(c.b)("h4",{id:"methods-49"},"Methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"dump-49"},"dump ",Object(c.b)("a",{name:"h2o_wave.types.Slider.dump"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"dump"),"(self) \u2011>\xa0Dict"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Returns the contents of this object as a dict."))))))),Object(c.b)("div",{className:"api"},Object(c.b)("h3",{id:"smallseriesstatcard"},"SmallSeriesStatCard ",Object(c.b)("a",{name:"h2o_wave.types.SmallSeriesStatCard"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"class ",Object(c.b)("span",{class:"ident"},"SmallSeriesStatCard"),"(box:\xa0str, title:\xa0str, value:\xa0str, plot_data:\xa0Union[",Object(c.b)("a",{title:"h2o_wave.core.Data",href:"core#h2o_wave.core.Data"},"Data"),",\xa0str], plot_value:\xa0str, plot_zero_value:\xa0Union[float,\xa0NoneType]\xa0=\xa0None, plot_category:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, plot_type:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, plot_curve:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, plot_color:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, data:\xa0Union[dict,\xa0str,\xa0NoneType]\xa0=\xa0None, commands:\xa0Union[List[",Object(c.b)("a",{title:"h2o_wave.types.Command",href:"#h2o_wave.types.Command"},"Command"),"],\xa0NoneType]\xa0=\xa0None)"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Create a small stat card displaying a primary value and a series plot.")),Object(c.b)("h4",{id:"static-methods-50"},"Static methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"load-50"},"load ",Object(c.b)("a",{name:"h2o_wave.types.SmallSeriesStatCard.load"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"load"),"(_SmallSeriesStatCard__d:\xa0Dict) \u2011>\xa0",Object(c.b)("a",{title:"h2o_wave.types.SmallSeriesStatCard",href:"#h2o_wave.types.SmallSeriesStatCard"},"SmallSeriesStatCard")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Creates an instance of this class using the contents of a dict."))))),Object(c.b)("h4",{id:"instance-variables-50"},"Instance variables"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{id:"h2o_wave.types.SmallSeriesStatCard.box",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"box")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"A string indicating how to place this component on the page.")),Object(c.b)("div",{id:"h2o_wave.types.SmallSeriesStatCard.commands",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"commands")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Contextual menu commands for this component.")),Object(c.b)("div",{id:"h2o_wave.types.SmallSeriesStatCard.data",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"data")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Data for this card.")),Object(c.b)("div",{id:"h2o_wave.types.SmallSeriesStatCard.plot_category",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"plot_category")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The data field to use for x-axis values (ignored if ",Object(c.b)("code",null,"plot_type")," is ",Object(c.b)("code",null,"area"),"; must be provided if ",Object(c.b)("code",null,"plot_type")," is ",Object(c.b)("code",null,"interval"),"). Defaults to 'x'.")),Object(c.b)("div",{id:"h2o_wave.types.SmallSeriesStatCard.plot_color",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"plot_color")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The plot's color.")),Object(c.b)("div",{id:"h2o_wave.types.SmallSeriesStatCard.plot_curve",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"plot_curve")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The plot's curve style. Defaults to ",Object(c.b)("code",null,"linear"),". One of 'linear', 'smooth', 'step', 'step-after', 'step-before'.")),Object(c.b)("div",{id:"h2o_wave.types.SmallSeriesStatCard.plot_data",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"plot_data")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The plot's data.")),Object(c.b)("div",{id:"h2o_wave.types.SmallSeriesStatCard.plot_type",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"plot_type")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The type of plot. Defaults to ",Object(c.b)("code",null,"area"),". One of 'area', 'interval'.")),Object(c.b)("div",{id:"h2o_wave.types.SmallSeriesStatCard.plot_value",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"plot_value")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The data field to use for y-axis values.")),Object(c.b)("div",{id:"h2o_wave.types.SmallSeriesStatCard.plot_zero_value",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"plot_zero_value")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The base value to use for each y-axis mark. Set this to ",Object(c.b)("code",null,"0")," if you want to pin the x-axis at ",Object(c.b)("code",null,"y=0"),". If not provided, the minimum value from the data is used.")),Object(c.b)("div",{id:"h2o_wave.types.SmallSeriesStatCard.title",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"title")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The card's title.")),Object(c.b)("div",{id:"h2o_wave.types.SmallSeriesStatCard.value",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"value")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The primary value displayed."))),Object(c.b)("h4",{id:"methods-50"},"Methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"dump-50"},"dump ",Object(c.b)("a",{name:"h2o_wave.types.SmallSeriesStatCard.dump"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"dump"),"(self) \u2011>\xa0Dict"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Returns the contents of this object as a dict."))))))),Object(c.b)("div",{className:"api"},Object(c.b)("h3",{id:"smallstatcard"},"SmallStatCard ",Object(c.b)("a",{name:"h2o_wave.types.SmallStatCard"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"class ",Object(c.b)("span",{class:"ident"},"SmallStatCard"),"(box:\xa0str, title:\xa0str, value:\xa0str, data:\xa0Union[dict,\xa0str,\xa0NoneType]\xa0=\xa0None, commands:\xa0Union[List[",Object(c.b)("a",{title:"h2o_wave.types.Command",href:"#h2o_wave.types.Command"},"Command"),"],\xa0NoneType]\xa0=\xa0None)"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Create a stat card displaying a single value.")),Object(c.b)("h4",{id:"static-methods-51"},"Static methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"load-51"},"load ",Object(c.b)("a",{name:"h2o_wave.types.SmallStatCard.load"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"load"),"(_SmallStatCard__d:\xa0Dict) \u2011>\xa0",Object(c.b)("a",{title:"h2o_wave.types.SmallStatCard",href:"#h2o_wave.types.SmallStatCard"},"SmallStatCard")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Creates an instance of this class using the contents of a dict."))))),Object(c.b)("h4",{id:"instance-variables-51"},"Instance variables"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{id:"h2o_wave.types.SmallStatCard.box",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"box")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"A string indicating how to place this component on the page.")),Object(c.b)("div",{id:"h2o_wave.types.SmallStatCard.commands",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"commands")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Contextual menu commands for this component.")),Object(c.b)("div",{id:"h2o_wave.types.SmallStatCard.data",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"data")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Data for this card.")),Object(c.b)("div",{id:"h2o_wave.types.SmallStatCard.title",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"title")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The card's title.")),Object(c.b)("div",{id:"h2o_wave.types.SmallStatCard.value",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"value")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The primary value displayed."))),Object(c.b)("h4",{id:"methods-51"},"Methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"dump-51"},"dump ",Object(c.b)("a",{name:"h2o_wave.types.SmallStatCard.dump"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"dump"),"(self) \u2011>\xa0Dict"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Returns the contents of this object as a dict."))))))),Object(c.b)("div",{className:"api"},Object(c.b)("h3",{id:"spinbox"},"Spinbox ",Object(c.b)("a",{name:"h2o_wave.types.Spinbox"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"class ",Object(c.b)("span",{class:"ident"},"Spinbox"),"(name:\xa0str, label:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, min:\xa0Union[float,\xa0NoneType]\xa0=\xa0None, max:\xa0Union[float,\xa0NoneType]\xa0=\xa0None, step:\xa0Union[float,\xa0NoneType]\xa0=\xa0None, value:\xa0Union[float,\xa0NoneType]\xa0=\xa0None, disabled:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, visible:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, tooltip:\xa0Union[str,\xa0NoneType]\xa0=\xa0None)"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Create a spinbox."),Object(c.b)("p",null,"A spinbox allows the user to incrementally adjust a value in small steps. It is mainly used for numeric values, but other values are supported too.")),Object(c.b)("h4",{id:"static-methods-52"},"Static methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"load-52"},"load ",Object(c.b)("a",{name:"h2o_wave.types.Spinbox.load"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"load"),"(_Spinbox__d:\xa0Dict) \u2011>\xa0",Object(c.b)("a",{title:"h2o_wave.types.Spinbox",href:"#h2o_wave.types.Spinbox"},"Spinbox")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Creates an instance of this class using the contents of a dict."))))),Object(c.b)("h4",{id:"instance-variables-52"},"Instance variables"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{id:"h2o_wave.types.Spinbox.disabled",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"disabled")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"True if this field is disabled.")),Object(c.b)("div",{id:"h2o_wave.types.Spinbox.label",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"label")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Text to be displayed alongside the component.")),Object(c.b)("div",{id:"h2o_wave.types.Spinbox.max",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"max")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The maximum value of the spinbox.")),Object(c.b)("div",{id:"h2o_wave.types.Spinbox.min",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"min")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The minimum value of the spinbox.")),Object(c.b)("div",{id:"h2o_wave.types.Spinbox.name",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"name")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"An identifying name for this component.")),Object(c.b)("div",{id:"h2o_wave.types.Spinbox.step",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"step")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The difference between two adjacent values of the spinbox.")),Object(c.b)("div",{id:"h2o_wave.types.Spinbox.tooltip",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"tooltip")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"An optional tooltip message displayed when a user clicks the help icon to the right of the component.")),Object(c.b)("div",{id:"h2o_wave.types.Spinbox.value",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"value")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The current value of the spinbox.")),Object(c.b)("div",{id:"h2o_wave.types.Spinbox.visible",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"visible")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"True if the component should be visible. Defaults to true."))),Object(c.b)("h4",{id:"methods-52"},"Methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"dump-52"},"dump ",Object(c.b)("a",{name:"h2o_wave.types.Spinbox.dump"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"dump"),"(self) \u2011>\xa0Dict"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Returns the contents of this object as a dict."))))))),Object(c.b)("div",{className:"api"},Object(c.b)("h3",{id:"step"},"Step ",Object(c.b)("a",{name:"h2o_wave.types.Step"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"class ",Object(c.b)("span",{class:"ident"},"Step"),"(label:\xa0str, icon:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, done:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None)"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Create a step for a stepper.")),Object(c.b)("h4",{id:"static-methods-53"},"Static methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"load-53"},"load ",Object(c.b)("a",{name:"h2o_wave.types.Step.load"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"load"),"(_Step__d:\xa0Dict) \u2011>\xa0",Object(c.b)("a",{title:"h2o_wave.types.Step",href:"#h2o_wave.types.Step"},"Step")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Creates an instance of this class using the contents of a dict."))))),Object(c.b)("h4",{id:"instance-variables-53"},"Instance variables"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{id:"h2o_wave.types.Step.done",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"done")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Indicates whether this step has already been completed.")),Object(c.b)("div",{id:"h2o_wave.types.Step.icon",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"icon")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Icon to be displayed.")),Object(c.b)("div",{id:"h2o_wave.types.Step.label",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"label")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Text displayed below icon."))),Object(c.b)("h4",{id:"methods-53"},"Methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"dump-53"},"dump ",Object(c.b)("a",{name:"h2o_wave.types.Step.dump"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"dump"),"(self) \u2011>\xa0Dict"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Returns the contents of this object as a dict."))))))),Object(c.b)("div",{className:"api"},Object(c.b)("h3",{id:"stepper"},"Stepper ",Object(c.b)("a",{name:"h2o_wave.types.Stepper"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"class ",Object(c.b)("span",{class:"ident"},"Stepper"),"(name:\xa0str, items:\xa0List[",Object(c.b)("a",{title:"h2o_wave.types.Step",href:"#h2o_wave.types.Step"},"Step"),"], visible:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, tooltip:\xa0Union[str,\xa0NoneType]\xa0=\xa0None)"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Create a component that displays a sequence of steps in a process. The steps keep users informed about where they are in the process and how much is left to complete.")),Object(c.b)("h4",{id:"static-methods-54"},"Static methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"load-54"},"load ",Object(c.b)("a",{name:"h2o_wave.types.Stepper.load"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"load"),"(_Stepper__d:\xa0Dict) \u2011>\xa0",Object(c.b)("a",{title:"h2o_wave.types.Stepper",href:"#h2o_wave.types.Stepper"},"Stepper")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Creates an instance of this class using the contents of a dict."))))),Object(c.b)("h4",{id:"instance-variables-54"},"Instance variables"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{id:"h2o_wave.types.Stepper.items",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"items")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The sequence of steps to be displayed.")),Object(c.b)("div",{id:"h2o_wave.types.Stepper.name",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"name")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"An identifying name for this component.")),Object(c.b)("div",{id:"h2o_wave.types.Stepper.tooltip",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"tooltip")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"An optional tooltip message displayed when a user clicks the help icon to the right of the component.")),Object(c.b)("div",{id:"h2o_wave.types.Stepper.visible",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"visible")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"True if the component should be visible. Defaults to true."))),Object(c.b)("h4",{id:"methods-54"},"Methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"dump-54"},"dump ",Object(c.b)("a",{name:"h2o_wave.types.Stepper.dump"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"dump"),"(self) \u2011>\xa0Dict"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Returns the contents of this object as a dict."))))))),Object(c.b)("div",{className:"api"},Object(c.b)("h3",{id:"tab"},"Tab ",Object(c.b)("a",{name:"h2o_wave.types.Tab"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"class ",Object(c.b)("span",{class:"ident"},"Tab"),"(name:\xa0str, label:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, icon:\xa0Union[str,\xa0NoneType]\xa0=\xa0None)"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Create a tab.")),Object(c.b)("h4",{id:"static-methods-55"},"Static methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"load-55"},"load ",Object(c.b)("a",{name:"h2o_wave.types.Tab.load"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"load"),"(_Tab__d:\xa0Dict) \u2011>\xa0",Object(c.b)("a",{title:"h2o_wave.types.Tab",href:"#h2o_wave.types.Tab"},"Tab")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Creates an instance of this class using the contents of a dict."))))),Object(c.b)("h4",{id:"instance-variables-55"},"Instance variables"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{id:"h2o_wave.types.Tab.icon",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"icon")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The icon displayed on the tab.")),Object(c.b)("div",{id:"h2o_wave.types.Tab.label",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"label")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The text displayed on the tab.")),Object(c.b)("div",{id:"h2o_wave.types.Tab.name",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"name")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"An identifying name for this component."))),Object(c.b)("h4",{id:"methods-55"},"Methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"dump-55"},"dump ",Object(c.b)("a",{name:"h2o_wave.types.Tab.dump"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"dump"),"(self) \u2011>\xa0Dict"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Returns the contents of this object as a dict."))))))),Object(c.b)("div",{className:"api"},Object(c.b)("h3",{id:"tabcard"},"TabCard ",Object(c.b)("a",{name:"h2o_wave.types.TabCard"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"class ",Object(c.b)("span",{class:"ident"},"TabCard"),"(box:\xa0str, items:\xa0List[",Object(c.b)("a",{title:"h2o_wave.types.Tab",href:"#h2o_wave.types.Tab"},"Tab"),"], value:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, link:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, commands:\xa0Union[List[",Object(c.b)("a",{title:"h2o_wave.types.Command",href:"#h2o_wave.types.Command"},"Command"),"],\xa0NoneType]\xa0=\xa0None)"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Create a card containing tabs for navigation.")),Object(c.b)("h4",{id:"static-methods-56"},"Static methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"load-56"},"load ",Object(c.b)("a",{name:"h2o_wave.types.TabCard.load"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"load"),"(_TabCard__d:\xa0Dict) \u2011>\xa0",Object(c.b)("a",{title:"h2o_wave.types.TabCard",href:"#h2o_wave.types.TabCard"},"TabCard")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Creates an instance of this class using the contents of a dict."))))),Object(c.b)("h4",{id:"instance-variables-56"},"Instance variables"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{id:"h2o_wave.types.TabCard.box",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"box")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"A string indicating how to place this component on the page.")),Object(c.b)("div",{id:"h2o_wave.types.TabCard.commands",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"commands")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Contextual menu commands for this component.")),Object(c.b)("div",{id:"h2o_wave.types.TabCard.items",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"items")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Items to render.")),Object(c.b)("div",{id:"h2o_wave.types.TabCard.link",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"link")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"True if tabs should be rendered as links and not a standard tab.")),Object(c.b)("div",{id:"h2o_wave.types.TabCard.value",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"value")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The name of the tab to select."))),Object(c.b)("h4",{id:"methods-56"},"Methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"dump-56"},"dump ",Object(c.b)("a",{name:"h2o_wave.types.TabCard.dump"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"dump"),"(self) \u2011>\xa0Dict"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Returns the contents of this object as a dict."))))))),Object(c.b)("div",{className:"api"},Object(c.b)("h3",{id:"table"},"Table ",Object(c.b)("a",{name:"h2o_wave.types.Table"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"class ",Object(c.b)("span",{class:"ident"},"Table"),"(name:\xa0str, columns:\xa0List[",Object(c.b)("a",{title:"h2o_wave.types.TableColumn",href:"#h2o_wave.types.TableColumn"},"TableColumn"),"], rows:\xa0List[",Object(c.b)("a",{title:"h2o_wave.types.TableRow",href:"#h2o_wave.types.TableRow"},"TableRow"),"], multiple:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, groupable:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, downloadable:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, resettable:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, height:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, values:\xa0Union[List[str],\xa0NoneType]\xa0=\xa0None, visible:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, tooltip:\xa0Union[str,\xa0NoneType]\xa0=\xa0None)"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Create an interactive table."),Object(c.b)("p",null,"This table differs from a markdown table in that it supports clicking or selecting rows. If you simply want to display a non-interactive table of information, use a markdown table."),Object(c.b)("p",null,"If ",Object(c.b)("code",null,"multiple")," is set to False (default), each row in the table is clickable. When a row is clicked, the form is submitted automatically, and ",Object(c.b)("code",null,"q.args.table_name")," is set to ",Object(c.b)("code",null,"[row_name]"),", where ",Object(c.b)("code",null,"table_name")," is the ",Object(c.b)("code",null,"name")," of the table, and ",Object(c.b)("code",null,"row_name")," is the ",Object(c.b)("code",null,"name")," of the row that was clicked on."),Object(c.b)("p",null,"If ",Object(c.b)("code",null,"multiple")," is set to True, each row in the table is selectable. A row can be selected by clicking on it. Multiple rows can be selected either by shift+clicking or using marquee selection. When the form is submitted,",Object(c.b)("code",null,"q.args.table_name")," is set to ",Object(c.b)("code",null,"[row1_name, row2_name, \u2026]")," where ",Object(c.b)("code",null,"table_name")," is the ",Object(c.b)("code",null,"name")," of the table, and ",Object(c.b)("code",null,"row1_name"),", ",Object(c.b)("code",null,"row2_name")," are the ",Object(c.b)("code",null,"name")," of the rows that were selected. Note that if ",Object(c.b)("code",null,"multiple")," is set to True, the form is not submitted automatically, and one or more buttons are required in the form to trigger submission.")),Object(c.b)("h4",{id:"static-methods-57"},"Static methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"load-57"},"load ",Object(c.b)("a",{name:"h2o_wave.types.Table.load"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"load"),"(_Table__d:\xa0Dict) \u2011>\xa0",Object(c.b)("a",{title:"h2o_wave.types.Table",href:"#h2o_wave.types.Table"},"Table")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Creates an instance of this class using the contents of a dict."))))),Object(c.b)("h4",{id:"instance-variables-57"},"Instance variables"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{id:"h2o_wave.types.Table.columns",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"columns")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The columns in this table.")),Object(c.b)("div",{id:"h2o_wave.types.Table.downloadable",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"downloadable")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Indicates whether the contents of this table can be downloaded and saved as a CSV file. Defaults to False.")),Object(c.b)("div",{id:"h2o_wave.types.Table.groupable",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"groupable")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"True to allow group by feature.")),Object(c.b)("div",{id:"h2o_wave.types.Table.height",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"height")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The height of the table, e.g. '400px', '50%', etc.")),Object(c.b)("div",{id:"h2o_wave.types.Table.multiple",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"multiple")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"True to allow multiple rows to be selected.")),Object(c.b)("div",{id:"h2o_wave.types.Table.name",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"name")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"An identifying name for this component.")),Object(c.b)("div",{id:"h2o_wave.types.Table.resettable",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"resettable")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Indicates whether a Reset button should be displayed to reset search / filter / group-by values to their defaults. Defaults to False.")),Object(c.b)("div",{id:"h2o_wave.types.Table.rows",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"rows")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The rows in this table.")),Object(c.b)("div",{id:"h2o_wave.types.Table.tooltip",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"tooltip")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"An optional tooltip message displayed when a user clicks the help icon to the right of the component.")),Object(c.b)("div",{id:"h2o_wave.types.Table.values",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"values")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The names of the selected rows. If this parameter is set, multiple selections will be allowed (",Object(c.b)("code",null,"multiple")," is assumed to be ",Object(c.b)("code",null,"True"),").")),Object(c.b)("div",{id:"h2o_wave.types.Table.visible",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"visible")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"True if the component should be visible. Defaults to true."))),Object(c.b)("h4",{id:"methods-57"},"Methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"dump-57"},"dump ",Object(c.b)("a",{name:"h2o_wave.types.Table.dump"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"dump"),"(self) \u2011>\xa0Dict"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Returns the contents of this object as a dict."))))))),Object(c.b)("div",{className:"api"},Object(c.b)("h3",{id:"tablecelltype"},"TableCellType ",Object(c.b)("a",{name:"h2o_wave.types.TableCellType"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"class ",Object(c.b)("span",{class:"ident"},"TableCellType"),"(progress:\xa0Union[",Object(c.b)("a",{title:"h2o_wave.types.ProgressTableCellType",href:"#h2o_wave.types.ProgressTableCellType"},"ProgressTableCellType"),",\xa0NoneType]\xa0=\xa0None, icon:\xa0Union[",Object(c.b)("a",{title:"h2o_wave.types.IconTableCellType",href:"#h2o_wave.types.IconTableCellType"},"IconTableCellType"),",\xa0NoneType]\xa0=\xa0None)"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Defines cell content to be rendered instead of a simple text.")),Object(c.b)("h4",{id:"static-methods-58"},"Static methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"load-58"},"load ",Object(c.b)("a",{name:"h2o_wave.types.TableCellType.load"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"load"),"(_TableCellType__d:\xa0Dict) \u2011>\xa0",Object(c.b)("a",{title:"h2o_wave.types.TableCellType",href:"#h2o_wave.types.TableCellType"},"TableCellType")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Creates an instance of this class using the contents of a dict."))))),Object(c.b)("h4",{id:"instance-variables-58"},"Instance variables"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{id:"h2o_wave.types.TableCellType.icon",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"icon")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"No documentation available.")),Object(c.b)("div",{id:"h2o_wave.types.TableCellType.progress",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"progress")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"No documentation available."))),Object(c.b)("h4",{id:"methods-58"},"Methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"dump-58"},"dump ",Object(c.b)("a",{name:"h2o_wave.types.TableCellType.dump"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"dump"),"(self) \u2011>\xa0Dict"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Returns the contents of this object as a dict."))))))),Object(c.b)("div",{className:"api"},Object(c.b)("h3",{id:"tablecolumn"},"TableColumn ",Object(c.b)("a",{name:"h2o_wave.types.TableColumn"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"class ",Object(c.b)("span",{class:"ident"},"TableColumn"),"(name:\xa0str, label:\xa0str, min_width:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, max_width:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, sortable:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, searchable:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, filterable:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, link:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, cell_type:\xa0Union[",Object(c.b)("a",{title:"h2o_wave.types.TableCellType",href:"#h2o_wave.types.TableCellType"},"TableCellType"),",\xa0NoneType]\xa0=\xa0None)"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Create a table column.")),Object(c.b)("h4",{id:"static-methods-59"},"Static methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"load-59"},"load ",Object(c.b)("a",{name:"h2o_wave.types.TableColumn.load"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"load"),"(_TableColumn__d:\xa0Dict) \u2011>\xa0",Object(c.b)("a",{title:"h2o_wave.types.TableColumn",href:"#h2o_wave.types.TableColumn"},"TableColumn")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Creates an instance of this class using the contents of a dict."))))),Object(c.b)("h4",{id:"instance-variables-59"},"Instance variables"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{id:"h2o_wave.types.TableColumn.cell_type",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"cell_type")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Defines how to render each cell in this column. Defaults to plain text.")),Object(c.b)("div",{id:"h2o_wave.types.TableColumn.filterable",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"filterable")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Indicates whether the contents of this column are displayed as filters in a dropdown.")),Object(c.b)("div",{id:"h2o_wave.types.TableColumn.label",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"label")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The text displayed on the column header.")),Object(c.b)("div",{id:"h2o_wave.types.TableColumn.link",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"link")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Indicates whether each cell in this column should be displayed as a clickable link.")),Object(c.b)("div",{id:"h2o_wave.types.TableColumn.max_width",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"max_width")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The maximum width of this column, e.g. '100px'. Only ",Object(c.b)("code",null,"px")," units are supported at this time.")),Object(c.b)("div",{id:"h2o_wave.types.TableColumn.min_width",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"min_width")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The minimum width of this column, e.g. '50px'. Only ",Object(c.b)("code",null,"px")," units are supported at this time.")),Object(c.b)("div",{id:"h2o_wave.types.TableColumn.name",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"name")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"An identifying name for this column.")),Object(c.b)("div",{id:"h2o_wave.types.TableColumn.searchable",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"searchable")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Indicates whether the contents of this column can be searched through. Enables a search box for the table if true.")),Object(c.b)("div",{id:"h2o_wave.types.TableColumn.sortable",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"sortable")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Indicates whether the column is sortable."))),Object(c.b)("h4",{id:"methods-59"},"Methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"dump-59"},"dump ",Object(c.b)("a",{name:"h2o_wave.types.TableColumn.dump"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"dump"),"(self) \u2011>\xa0Dict"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Returns the contents of this object as a dict."))))))),Object(c.b)("div",{className:"api"},Object(c.b)("h3",{id:"tablerow"},"TableRow ",Object(c.b)("a",{name:"h2o_wave.types.TableRow"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"class ",Object(c.b)("span",{class:"ident"},"TableRow"),"(name:\xa0str, cells:\xa0List[str])"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Create a table row.")),Object(c.b)("h4",{id:"static-methods-60"},"Static methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"load-60"},"load ",Object(c.b)("a",{name:"h2o_wave.types.TableRow.load"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"load"),"(_TableRow__d:\xa0Dict) \u2011>\xa0",Object(c.b)("a",{title:"h2o_wave.types.TableRow",href:"#h2o_wave.types.TableRow"},"TableRow")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Creates an instance of this class using the contents of a dict."))))),Object(c.b)("h4",{id:"instance-variables-60"},"Instance variables"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{id:"h2o_wave.types.TableRow.cells",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"cells")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The cells in this row (displayed left to right).")),Object(c.b)("div",{id:"h2o_wave.types.TableRow.name",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"name")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"An identifying name for this row."))),Object(c.b)("h4",{id:"methods-60"},"Methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"dump-60"},"dump ",Object(c.b)("a",{name:"h2o_wave.types.TableRow.dump"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"dump"),"(self) \u2011>\xa0Dict"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Returns the contents of this object as a dict."))))))),Object(c.b)("div",{className:"api"},Object(c.b)("h3",{id:"tabs"},"Tabs ",Object(c.b)("a",{name:"h2o_wave.types.Tabs"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"class ",Object(c.b)("span",{class:"ident"},"Tabs"),"(name:\xa0str, value:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, items:\xa0Union[List[",Object(c.b)("a",{title:"h2o_wave.types.Tab",href:"#h2o_wave.types.Tab"},"Tab"),"],\xa0NoneType]\xa0=\xa0None, visible:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None)"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Create a tab bar.")),Object(c.b)("h4",{id:"static-methods-61"},"Static methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"load-61"},"load ",Object(c.b)("a",{name:"h2o_wave.types.Tabs.load"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"load"),"(_Tabs__d:\xa0Dict) \u2011>\xa0",Object(c.b)("a",{title:"h2o_wave.types.Tabs",href:"#h2o_wave.types.Tabs"},"Tabs")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Creates an instance of this class using the contents of a dict."))))),Object(c.b)("h4",{id:"instance-variables-61"},"Instance variables"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{id:"h2o_wave.types.Tabs.items",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"items")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The tabs in this tab bar.")),Object(c.b)("div",{id:"h2o_wave.types.Tabs.name",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"name")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"An identifying name for this component.")),Object(c.b)("div",{id:"h2o_wave.types.Tabs.value",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"value")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The name of the tab to select.")),Object(c.b)("div",{id:"h2o_wave.types.Tabs.visible",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"visible")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"True if the component should be visible. Defaults to true."))),Object(c.b)("h4",{id:"methods-61"},"Methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"dump-61"},"dump ",Object(c.b)("a",{name:"h2o_wave.types.Tabs.dump"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"dump"),"(self) \u2011>\xa0Dict"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Returns the contents of this object as a dict."))))))),Object(c.b)("div",{className:"api"},Object(c.b)("h3",{id:"tallgaugestatcard"},"TallGaugeStatCard ",Object(c.b)("a",{name:"h2o_wave.types.TallGaugeStatCard"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"class ",Object(c.b)("span",{class:"ident"},"TallGaugeStatCard"),"(box:\xa0str, title:\xa0str, value:\xa0str, aux_value:\xa0str, progress:\xa0float, plot_color:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, data:\xa0Union[dict,\xa0str,\xa0NoneType]\xa0=\xa0None, commands:\xa0Union[List[",Object(c.b)("a",{title:"h2o_wave.types.Command",href:"#h2o_wave.types.Command"},"Command"),"],\xa0NoneType]\xa0=\xa0None)"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Create a tall stat card displaying a primary value, an auxiliary value and a progress gauge.")),Object(c.b)("h4",{id:"static-methods-62"},"Static methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"load-62"},"load ",Object(c.b)("a",{name:"h2o_wave.types.TallGaugeStatCard.load"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"load"),"(_TallGaugeStatCard__d:\xa0Dict) \u2011>\xa0",Object(c.b)("a",{title:"h2o_wave.types.TallGaugeStatCard",href:"#h2o_wave.types.TallGaugeStatCard"},"TallGaugeStatCard")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Creates an instance of this class using the contents of a dict."))))),Object(c.b)("h4",{id:"instance-variables-62"},"Instance variables"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{id:"h2o_wave.types.TallGaugeStatCard.aux_value",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"aux_value")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The auxiliary value displayed next to the primary value.")),Object(c.b)("div",{id:"h2o_wave.types.TallGaugeStatCard.box",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"box")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"A string indicating how to place this component on the page.")),Object(c.b)("div",{id:"h2o_wave.types.TallGaugeStatCard.commands",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"commands")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Contextual menu commands for this component.")),Object(c.b)("div",{id:"h2o_wave.types.TallGaugeStatCard.data",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"data")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Data for this card.")),Object(c.b)("div",{id:"h2o_wave.types.TallGaugeStatCard.plot_color",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"plot_color")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The color of the progress gauge.")),Object(c.b)("div",{id:"h2o_wave.types.TallGaugeStatCard.progress",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"progress")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The value of the progress gauge, between 0 and 1.")),Object(c.b)("div",{id:"h2o_wave.types.TallGaugeStatCard.title",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"title")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The card's title.")),Object(c.b)("div",{id:"h2o_wave.types.TallGaugeStatCard.value",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"value")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The primary value displayed."))),Object(c.b)("h4",{id:"methods-62"},"Methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"dump-62"},"dump ",Object(c.b)("a",{name:"h2o_wave.types.TallGaugeStatCard.dump"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"dump"),"(self) \u2011>\xa0Dict"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Returns the contents of this object as a dict."))))))),Object(c.b)("div",{className:"api"},Object(c.b)("h3",{id:"tallseriesstatcard"},"TallSeriesStatCard ",Object(c.b)("a",{name:"h2o_wave.types.TallSeriesStatCard"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"class ",Object(c.b)("span",{class:"ident"},"TallSeriesStatCard"),"(box:\xa0str, title:\xa0str, value:\xa0str, aux_value:\xa0str, plot_data:\xa0Union[",Object(c.b)("a",{title:"h2o_wave.core.Data",href:"core#h2o_wave.core.Data"},"Data"),",\xa0str], plot_value:\xa0str, plot_zero_value:\xa0Union[float,\xa0NoneType]\xa0=\xa0None, plot_category:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, plot_type:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, plot_curve:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, plot_color:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, data:\xa0Union[dict,\xa0str,\xa0NoneType]\xa0=\xa0None, commands:\xa0Union[List[",Object(c.b)("a",{title:"h2o_wave.types.Command",href:"#h2o_wave.types.Command"},"Command"),"],\xa0NoneType]\xa0=\xa0None)"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Create a tall stat card displaying a primary value, an auxiliary value and a series plot.")),Object(c.b)("h4",{id:"static-methods-63"},"Static methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"load-63"},"load ",Object(c.b)("a",{name:"h2o_wave.types.TallSeriesStatCard.load"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"load"),"(_TallSeriesStatCard__d:\xa0Dict) \u2011>\xa0",Object(c.b)("a",{title:"h2o_wave.types.TallSeriesStatCard",href:"#h2o_wave.types.TallSeriesStatCard"},"TallSeriesStatCard")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Creates an instance of this class using the contents of a dict."))))),Object(c.b)("h4",{id:"instance-variables-63"},"Instance variables"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{id:"h2o_wave.types.TallSeriesStatCard.aux_value",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"aux_value")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The auxiliary value displayed below the primary value.")),Object(c.b)("div",{id:"h2o_wave.types.TallSeriesStatCard.box",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"box")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"A string indicating how to place this component on the page.")),Object(c.b)("div",{id:"h2o_wave.types.TallSeriesStatCard.commands",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"commands")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Contextual menu commands for this component.")),Object(c.b)("div",{id:"h2o_wave.types.TallSeriesStatCard.data",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"data")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Data for this card.")),Object(c.b)("div",{id:"h2o_wave.types.TallSeriesStatCard.plot_category",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"plot_category")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The data field to use for x-axis values (ignored if ",Object(c.b)("code",null,"plot_type")," is ",Object(c.b)("code",null,"area"),"; must be provided if ",Object(c.b)("code",null,"plot_type")," is ",Object(c.b)("code",null,"interval"),"). Defaults to 'x'.")),Object(c.b)("div",{id:"h2o_wave.types.TallSeriesStatCard.plot_color",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"plot_color")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The plot's color.")),Object(c.b)("div",{id:"h2o_wave.types.TallSeriesStatCard.plot_curve",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"plot_curve")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The plot's curve style. Defaults to ",Object(c.b)("code",null,"linear"),". One of 'linear', 'smooth', 'step', 'step-after', 'step-before'.")),Object(c.b)("div",{id:"h2o_wave.types.TallSeriesStatCard.plot_data",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"plot_data")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The plot's data.")),Object(c.b)("div",{id:"h2o_wave.types.TallSeriesStatCard.plot_type",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"plot_type")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The type of plot. Defaults to ",Object(c.b)("code",null,"area"),". One of 'area', 'interval'.")),Object(c.b)("div",{id:"h2o_wave.types.TallSeriesStatCard.plot_value",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"plot_value")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The data field to use for y-axis values.")),Object(c.b)("div",{id:"h2o_wave.types.TallSeriesStatCard.plot_zero_value",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"plot_zero_value")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The base value to use for each y-axis mark. Set this to ",Object(c.b)("code",null,"0")," if you want to pin the x-axis at ",Object(c.b)("code",null,"y=0"),". If not provided, the minimum value from the data is used.")),Object(c.b)("div",{id:"h2o_wave.types.TallSeriesStatCard.title",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"title")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The card's title.")),Object(c.b)("div",{id:"h2o_wave.types.TallSeriesStatCard.value",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"value")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The primary value displayed."))),Object(c.b)("h4",{id:"methods-63"},"Methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"dump-63"},"dump ",Object(c.b)("a",{name:"h2o_wave.types.TallSeriesStatCard.dump"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"dump"),"(self) \u2011>\xa0Dict"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Returns the contents of this object as a dict."))))))),Object(c.b)("div",{className:"api"},Object(c.b)("h3",{id:"template"},"Template ",Object(c.b)("a",{name:"h2o_wave.types.Template"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"class ",Object(c.b)("span",{class:"ident"},"Template"),"(content:\xa0str, data:\xa0Union[dict,\xa0str,\xa0NoneType]\xa0=\xa0None, name:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, visible:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None)"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Render dynamic content using an HTML template.")),Object(c.b)("h4",{id:"static-methods-64"},"Static methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"load-64"},"load ",Object(c.b)("a",{name:"h2o_wave.types.Template.load"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"load"),"(_Template__d:\xa0Dict) \u2011>\xa0",Object(c.b)("a",{title:"h2o_wave.types.Template",href:"#h2o_wave.types.Template"},"Template")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Creates an instance of this class using the contents of a dict."))))),Object(c.b)("h4",{id:"instance-variables-64"},"Instance variables"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{id:"h2o_wave.types.Template.content",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"content")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The Handlebars template. ",Object(c.b)("a",{href:"https://handlebarsjs.com/guide/"},"https://handlebarsjs.com/guide/"))),Object(c.b)("div",{id:"h2o_wave.types.Template.data",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"data")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Data for the Handlebars template")),Object(c.b)("div",{id:"h2o_wave.types.Template.name",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"name")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"An identifying name for this component.")),Object(c.b)("div",{id:"h2o_wave.types.Template.visible",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"visible")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"True if the component should be visible. Defaults to true."))),Object(c.b)("h4",{id:"methods-64"},"Methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"dump-64"},"dump ",Object(c.b)("a",{name:"h2o_wave.types.Template.dump"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"dump"),"(self) \u2011>\xa0Dict"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Returns the contents of this object as a dict."))))))),Object(c.b)("div",{className:"api"},Object(c.b)("h3",{id:"templatecard"},"TemplateCard ",Object(c.b)("a",{name:"h2o_wave.types.TemplateCard"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"class ",Object(c.b)("span",{class:"ident"},"TemplateCard"),"(box:\xa0str, title:\xa0str, content:\xa0str, data:\xa0Union[dict,\xa0str,\xa0NoneType]\xa0=\xa0None, commands:\xa0Union[List[",Object(c.b)("a",{title:"h2o_wave.types.Command",href:"#h2o_wave.types.Command"},"Command"),"],\xa0NoneType]\xa0=\xa0None)"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Render dynamic content using an HTML template.")),Object(c.b)("h4",{id:"static-methods-65"},"Static methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"load-65"},"load ",Object(c.b)("a",{name:"h2o_wave.types.TemplateCard.load"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"load"),"(_TemplateCard__d:\xa0Dict) \u2011>\xa0",Object(c.b)("a",{title:"h2o_wave.types.TemplateCard",href:"#h2o_wave.types.TemplateCard"},"TemplateCard")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Creates an instance of this class using the contents of a dict."))))),Object(c.b)("h4",{id:"instance-variables-65"},"Instance variables"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{id:"h2o_wave.types.TemplateCard.box",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"box")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"A string indicating how to place this component on the page.")),Object(c.b)("div",{id:"h2o_wave.types.TemplateCard.commands",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"commands")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Contextual menu commands for this component.")),Object(c.b)("div",{id:"h2o_wave.types.TemplateCard.content",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"content")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The Handlebars template. ",Object(c.b)("a",{href:"https://handlebarsjs.com/guide/"},"https://handlebarsjs.com/guide/"))),Object(c.b)("div",{id:"h2o_wave.types.TemplateCard.data",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"data")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Data for the Handlebars template.")),Object(c.b)("div",{id:"h2o_wave.types.TemplateCard.title",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"title")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The title for this card."))),Object(c.b)("h4",{id:"methods-65"},"Methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"dump-65"},"dump ",Object(c.b)("a",{name:"h2o_wave.types.TemplateCard.dump"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"dump"),"(self) \u2011>\xa0Dict"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Returns the contents of this object as a dict."))))))),Object(c.b)("div",{className:"api"},Object(c.b)("h3",{id:"text"},"Text ",Object(c.b)("a",{name:"h2o_wave.types.Text"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"class ",Object(c.b)("span",{class:"ident"},"Text"),"(content:\xa0str, size:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, visible:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, tooltip:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, name:\xa0Union[str,\xa0NoneType]\xa0=\xa0None)"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Create text content.")),Object(c.b)("h4",{id:"static-methods-66"},"Static methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"load-66"},"load ",Object(c.b)("a",{name:"h2o_wave.types.Text.load"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"load"),"(_Text__d:\xa0Dict) \u2011>\xa0",Object(c.b)("a",{title:"h2o_wave.types.Text",href:"#h2o_wave.types.Text"},"Text")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Creates an instance of this class using the contents of a dict."))))),Object(c.b)("h4",{id:"instance-variables-66"},"Instance variables"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{id:"h2o_wave.types.Text.content",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"content")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The text content.")),Object(c.b)("div",{id:"h2o_wave.types.Text.name",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"name")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"An identifying name for this component.")),Object(c.b)("div",{id:"h2o_wave.types.Text.size",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"size")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The font size of the text content. One of 'xl', 'l', 'm', 's', 'xs'.")),Object(c.b)("div",{id:"h2o_wave.types.Text.tooltip",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"tooltip")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Tooltip message.")),Object(c.b)("div",{id:"h2o_wave.types.Text.visible",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"visible")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"True if the component should be visible. Defaults to true."))),Object(c.b)("h4",{id:"methods-66"},"Methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"dump-66"},"dump ",Object(c.b)("a",{name:"h2o_wave.types.Text.dump"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"dump"),"(self) \u2011>\xa0Dict"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Returns the contents of this object as a dict."))))))),Object(c.b)("div",{className:"api"},Object(c.b)("h3",{id:"textl"},"TextL ",Object(c.b)("a",{name:"h2o_wave.types.TextL"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"class ",Object(c.b)("span",{class:"ident"},"TextL"),"(content:\xa0str, visible:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, tooltip:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, commands:\xa0Union[List[",Object(c.b)("a",{title:"h2o_wave.types.Command",href:"#h2o_wave.types.Command"},"Command"),"],\xa0NoneType]\xa0=\xa0None, name:\xa0Union[str,\xa0NoneType]\xa0=\xa0None)"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Create large sized text content.")),Object(c.b)("h4",{id:"static-methods-67"},"Static methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"load-67"},"load ",Object(c.b)("a",{name:"h2o_wave.types.TextL.load"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"load"),"(_TextL__d:\xa0Dict) \u2011>\xa0",Object(c.b)("a",{title:"h2o_wave.types.TextL",href:"#h2o_wave.types.TextL"},"TextL")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Creates an instance of this class using the contents of a dict."))))),Object(c.b)("h4",{id:"instance-variables-67"},"Instance variables"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{id:"h2o_wave.types.TextL.commands",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"commands")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Contextual menu commands for this component.")),Object(c.b)("div",{id:"h2o_wave.types.TextL.content",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"content")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The text content.")),Object(c.b)("div",{id:"h2o_wave.types.TextL.name",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"name")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"An identifying name for this component.")),Object(c.b)("div",{id:"h2o_wave.types.TextL.tooltip",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"tooltip")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Tooltip message.")),Object(c.b)("div",{id:"h2o_wave.types.TextL.visible",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"visible")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"True if the component should be visible. Defaults to true."))),Object(c.b)("h4",{id:"methods-67"},"Methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"dump-67"},"dump ",Object(c.b)("a",{name:"h2o_wave.types.TextL.dump"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"dump"),"(self) \u2011>\xa0Dict"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Returns the contents of this object as a dict."))))))),Object(c.b)("div",{className:"api"},Object(c.b)("h3",{id:"textm"},"TextM ",Object(c.b)("a",{name:"h2o_wave.types.TextM"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"class ",Object(c.b)("span",{class:"ident"},"TextM"),"(content:\xa0str, visible:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, tooltip:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, name:\xa0Union[str,\xa0NoneType]\xa0=\xa0None)"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Create medium sized text content.")),Object(c.b)("h4",{id:"static-methods-68"},"Static methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"load-68"},"load ",Object(c.b)("a",{name:"h2o_wave.types.TextM.load"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"load"),"(_TextM__d:\xa0Dict) \u2011>\xa0",Object(c.b)("a",{title:"h2o_wave.types.TextM",href:"#h2o_wave.types.TextM"},"TextM")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Creates an instance of this class using the contents of a dict."))))),Object(c.b)("h4",{id:"instance-variables-68"},"Instance variables"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{id:"h2o_wave.types.TextM.content",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"content")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The text content.")),Object(c.b)("div",{id:"h2o_wave.types.TextM.name",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"name")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"An identifying name for this component.")),Object(c.b)("div",{id:"h2o_wave.types.TextM.tooltip",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"tooltip")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Tooltip message.")),Object(c.b)("div",{id:"h2o_wave.types.TextM.visible",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"visible")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"True if the component should be visible. Defaults to true."))),Object(c.b)("h4",{id:"methods-68"},"Methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"dump-68"},"dump ",Object(c.b)("a",{name:"h2o_wave.types.TextM.dump"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"dump"),"(self) \u2011>\xa0Dict"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Returns the contents of this object as a dict."))))))),Object(c.b)("div",{className:"api"},Object(c.b)("h3",{id:"texts"},"TextS ",Object(c.b)("a",{name:"h2o_wave.types.TextS"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"class ",Object(c.b)("span",{class:"ident"},"TextS"),"(content:\xa0str, visible:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, tooltip:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, name:\xa0Union[str,\xa0NoneType]\xa0=\xa0None)"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Create small sized text content.")),Object(c.b)("h4",{id:"static-methods-69"},"Static methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"load-69"},"load ",Object(c.b)("a",{name:"h2o_wave.types.TextS.load"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"load"),"(_TextS__d:\xa0Dict) \u2011>\xa0",Object(c.b)("a",{title:"h2o_wave.types.TextS",href:"#h2o_wave.types.TextS"},"TextS")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Creates an instance of this class using the contents of a dict."))))),Object(c.b)("h4",{id:"instance-variables-69"},"Instance variables"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{id:"h2o_wave.types.TextS.content",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"content")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The text content.")),Object(c.b)("div",{id:"h2o_wave.types.TextS.name",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"name")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"An identifying name for this component.")),Object(c.b)("div",{id:"h2o_wave.types.TextS.tooltip",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"tooltip")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Tooltip message.")),Object(c.b)("div",{id:"h2o_wave.types.TextS.visible",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"visible")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"True if the component should be visible. Defaults to true."))),Object(c.b)("h4",{id:"methods-69"},"Methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"dump-69"},"dump ",Object(c.b)("a",{name:"h2o_wave.types.TextS.dump"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"dump"),"(self) \u2011>\xa0Dict"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Returns the contents of this object as a dict."))))))),Object(c.b)("div",{className:"api"},Object(c.b)("h3",{id:"textxl"},"TextXl ",Object(c.b)("a",{name:"h2o_wave.types.TextXl"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"class ",Object(c.b)("span",{class:"ident"},"TextXl"),"(content:\xa0str, visible:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, tooltip:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, commands:\xa0Union[List[",Object(c.b)("a",{title:"h2o_wave.types.Command",href:"#h2o_wave.types.Command"},"Command"),"],\xa0NoneType]\xa0=\xa0None, name:\xa0Union[str,\xa0NoneType]\xa0=\xa0None)"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Create extra-large sized text content.")),Object(c.b)("h4",{id:"static-methods-70"},"Static methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"load-70"},"load ",Object(c.b)("a",{name:"h2o_wave.types.TextXl.load"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"load"),"(_TextXl__d:\xa0Dict) \u2011>\xa0",Object(c.b)("a",{title:"h2o_wave.types.TextXl",href:"#h2o_wave.types.TextXl"},"TextXl")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Creates an instance of this class using the contents of a dict."))))),Object(c.b)("h4",{id:"instance-variables-70"},"Instance variables"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{id:"h2o_wave.types.TextXl.commands",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"commands")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Contextual menu commands for this component.")),Object(c.b)("div",{id:"h2o_wave.types.TextXl.content",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"content")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The text content.")),Object(c.b)("div",{id:"h2o_wave.types.TextXl.name",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"name")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"An identifying name for this component.")),Object(c.b)("div",{id:"h2o_wave.types.TextXl.tooltip",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"tooltip")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Tooltip message.")),Object(c.b)("div",{id:"h2o_wave.types.TextXl.visible",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"visible")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"True if the component should be visible. Defaults to true."))),Object(c.b)("h4",{id:"methods-70"},"Methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"dump-70"},"dump ",Object(c.b)("a",{name:"h2o_wave.types.TextXl.dump"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"dump"),"(self) \u2011>\xa0Dict"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Returns the contents of this object as a dict."))))))),Object(c.b)("div",{className:"api"},Object(c.b)("h3",{id:"textxs"},"TextXs ",Object(c.b)("a",{name:"h2o_wave.types.TextXs"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"class ",Object(c.b)("span",{class:"ident"},"TextXs"),"(content:\xa0str, visible:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, tooltip:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, name:\xa0Union[str,\xa0NoneType]\xa0=\xa0None)"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Create extra-small sized text content.")),Object(c.b)("h4",{id:"static-methods-71"},"Static methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"load-71"},"load ",Object(c.b)("a",{name:"h2o_wave.types.TextXs.load"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"load"),"(_TextXs__d:\xa0Dict) \u2011>\xa0",Object(c.b)("a",{title:"h2o_wave.types.TextXs",href:"#h2o_wave.types.TextXs"},"TextXs")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Creates an instance of this class using the contents of a dict."))))),Object(c.b)("h4",{id:"instance-variables-71"},"Instance variables"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{id:"h2o_wave.types.TextXs.content",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"content")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The text content.")),Object(c.b)("div",{id:"h2o_wave.types.TextXs.name",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"name")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"An identifying name for this component.")),Object(c.b)("div",{id:"h2o_wave.types.TextXs.tooltip",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"tooltip")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Tooltip message.")),Object(c.b)("div",{id:"h2o_wave.types.TextXs.visible",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"visible")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"True if the component should be visible. Defaults to true."))),Object(c.b)("h4",{id:"methods-71"},"Methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"dump-71"},"dump ",Object(c.b)("a",{name:"h2o_wave.types.TextXs.dump"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"dump"),"(self) \u2011>\xa0Dict"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Returns the contents of this object as a dict."))))))),Object(c.b)("div",{className:"api"},Object(c.b)("h3",{id:"textbox"},"Textbox ",Object(c.b)("a",{name:"h2o_wave.types.Textbox"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"class ",Object(c.b)("span",{class:"ident"},"Textbox"),"(name:\xa0str, label:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, placeholder:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, value:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, mask:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, icon:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, prefix:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, suffix:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, error:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, required:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, disabled:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, readonly:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, multiline:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, password:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, trigger:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, visible:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, tooltip:\xa0Union[str,\xa0NoneType]\xa0=\xa0None)"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Create a text box."),Object(c.b)("p",null,"The text box component enables a user to type text into an app. It's typically used to capture a single line of text, but can be configured to capture multiple lines of text. The text displays on the screen in a simple, uniform format.")),Object(c.b)("h4",{id:"static-methods-72"},"Static methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"load-72"},"load ",Object(c.b)("a",{name:"h2o_wave.types.Textbox.load"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"load"),"(_Textbox__d:\xa0Dict) \u2011>\xa0",Object(c.b)("a",{title:"h2o_wave.types.Textbox",href:"#h2o_wave.types.Textbox"},"Textbox")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Creates an instance of this class using the contents of a dict."))))),Object(c.b)("h4",{id:"instance-variables-72"},"Instance variables"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{id:"h2o_wave.types.Textbox.disabled",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"disabled")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"True if the text box is disabled.")),Object(c.b)("div",{id:"h2o_wave.types.Textbox.error",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"error")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Text to be displayed as an error below the text box.")),Object(c.b)("div",{id:"h2o_wave.types.Textbox.icon",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"icon")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Icon displayed in the far right end of the text field.")),Object(c.b)("div",{id:"h2o_wave.types.Textbox.label",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"label")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The text displayed above the field.")),Object(c.b)("div",{id:"h2o_wave.types.Textbox.mask",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"mask")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The masking string that defines the mask's behavior. A backslash will escape any character. Special format characters are: '9': [0-9] 'a': [a-zA-Z] '*': [a-zA-Z0-9].")),Object(c.b)("div",{id:"h2o_wave.types.Textbox.multiline",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"multiline")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"True if the text box should allow multi-line text entry.")),Object(c.b)("div",{id:"h2o_wave.types.Textbox.name",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"name")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"An identifying name for this component.")),Object(c.b)("div",{id:"h2o_wave.types.Textbox.password",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"password")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"True if the text box should hide text content.")),Object(c.b)("div",{id:"h2o_wave.types.Textbox.placeholder",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"placeholder")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"A string that provides a brief hint to the user as to what kind of information is expected in the field. It should be a word or short phrase that demonstrates the expected type of data, rather than an explanatory message.")),Object(c.b)("div",{id:"h2o_wave.types.Textbox.prefix",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"prefix")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Text to be displayed before the text box contents.")),Object(c.b)("div",{id:"h2o_wave.types.Textbox.readonly",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"readonly")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"True if the text box is a read-only field.")),Object(c.b)("div",{id:"h2o_wave.types.Textbox.required",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"required")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"True if the text box is a required field.")),Object(c.b)("div",{id:"h2o_wave.types.Textbox.suffix",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"suffix")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Text to be displayed after the text box contents.")),Object(c.b)("div",{id:"h2o_wave.types.Textbox.tooltip",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"tooltip")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"An optional tooltip message displayed when a user clicks the help icon to the right of the component.")),Object(c.b)("div",{id:"h2o_wave.types.Textbox.trigger",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"trigger")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"True if the form should be submitted when the text value changes.")),Object(c.b)("div",{id:"h2o_wave.types.Textbox.value",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"value")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Text to be displayed inside the text box.")),Object(c.b)("div",{id:"h2o_wave.types.Textbox.visible",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"visible")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"True if the component should be visible. Defaults to true."))),Object(c.b)("h4",{id:"methods-72"},"Methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"dump-72"},"dump ",Object(c.b)("a",{name:"h2o_wave.types.Textbox.dump"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"dump"),"(self) \u2011>\xa0Dict"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Returns the contents of this object as a dict."))))))),Object(c.b)("div",{className:"api"},Object(c.b)("h3",{id:"toggle"},"Toggle ",Object(c.b)("a",{name:"h2o_wave.types.Toggle"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"class ",Object(c.b)("span",{class:"ident"},"Toggle"),"(name:\xa0str, label:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, value:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, disabled:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, trigger:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, visible:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, tooltip:\xa0Union[str,\xa0NoneType]\xa0=\xa0None)"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Create a toggle. Toggles represent a physical switch that allows users to turn things on or off. Use toggles to present users with two mutually exclusive options (like on/off), where choosing an option results in an immediate action."),Object(c.b)("p",null,"Use a toggle for binary operations that take effect right after the user flips the Toggle. For example, use a Toggle to turn services or hardware components on or off. In other words, if a physical switch would work for the action, a Toggle is probably the best component to use.")),Object(c.b)("h4",{id:"static-methods-73"},"Static methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"load-73"},"load ",Object(c.b)("a",{name:"h2o_wave.types.Toggle.load"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"load"),"(_Toggle__d:\xa0Dict) \u2011>\xa0",Object(c.b)("a",{title:"h2o_wave.types.Toggle",href:"#h2o_wave.types.Toggle"},"Toggle")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Creates an instance of this class using the contents of a dict."))))),Object(c.b)("h4",{id:"instance-variables-73"},"Instance variables"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{id:"h2o_wave.types.Toggle.disabled",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"disabled")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"True if the checkbox is disabled.")),Object(c.b)("div",{id:"h2o_wave.types.Toggle.label",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"label")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Text to be displayed alongside the component.")),Object(c.b)("div",{id:"h2o_wave.types.Toggle.name",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"name")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"An identifying name for this component.")),Object(c.b)("div",{id:"h2o_wave.types.Toggle.tooltip",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"tooltip")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"An optional tooltip message displayed when a user clicks the help icon to the right of the component.")),Object(c.b)("div",{id:"h2o_wave.types.Toggle.trigger",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"trigger")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"True if the form should be submitted when the toggle value changes.")),Object(c.b)("div",{id:"h2o_wave.types.Toggle.value",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"value")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"True if selected, False if unselected.")),Object(c.b)("div",{id:"h2o_wave.types.Toggle.visible",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"visible")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"True if the component should be visible. Defaults to true."))),Object(c.b)("h4",{id:"methods-73"},"Methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"dump-73"},"dump ",Object(c.b)("a",{name:"h2o_wave.types.Toggle.dump"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"dump"),"(self) \u2011>\xa0Dict"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Returns the contents of this object as a dict."))))))),Object(c.b)("div",{className:"api"},Object(c.b)("h3",{id:"toolbarcard"},"ToolbarCard ",Object(c.b)("a",{name:"h2o_wave.types.ToolbarCard"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"class ",Object(c.b)("span",{class:"ident"},"ToolbarCard"),"(box:\xa0str, items:\xa0List[",Object(c.b)("a",{title:"h2o_wave.types.Command",href:"#h2o_wave.types.Command"},"Command"),"], secondary_items:\xa0Union[List[",Object(c.b)("a",{title:"h2o_wave.types.Command",href:"#h2o_wave.types.Command"},"Command"),"],\xa0NoneType]\xa0=\xa0None, overflow_items:\xa0Union[List[",Object(c.b)("a",{title:"h2o_wave.types.Command",href:"#h2o_wave.types.Command"},"Command"),"],\xa0NoneType]\xa0=\xa0None, commands:\xa0Union[List[",Object(c.b)("a",{title:"h2o_wave.types.Command",href:"#h2o_wave.types.Command"},"Command"),"],\xa0NoneType]\xa0=\xa0None)"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Create a card containing a toolbar.")),Object(c.b)("h4",{id:"static-methods-74"},"Static methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"load-74"},"load ",Object(c.b)("a",{name:"h2o_wave.types.ToolbarCard.load"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"load"),"(_ToolbarCard__d:\xa0Dict) \u2011>\xa0",Object(c.b)("a",{title:"h2o_wave.types.ToolbarCard",href:"#h2o_wave.types.ToolbarCard"},"ToolbarCard")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Creates an instance of this class using the contents of a dict."))))),Object(c.b)("h4",{id:"instance-variables-74"},"Instance variables"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{id:"h2o_wave.types.ToolbarCard.box",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"box")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"A string indicating how to place this component on the page.")),Object(c.b)("div",{id:"h2o_wave.types.ToolbarCard.commands",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"commands")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Contextual menu commands for this component.")),Object(c.b)("div",{id:"h2o_wave.types.ToolbarCard.items",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"items")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Items to render.")),Object(c.b)("div",{id:"h2o_wave.types.ToolbarCard.overflow_items",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"overflow_items")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Items to render in an overflow menu.")),Object(c.b)("div",{id:"h2o_wave.types.ToolbarCard.secondary_items",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"secondary_items")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Items to render on the right side (or left, in RTL)."))),Object(c.b)("h4",{id:"methods-74"},"Methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"dump-74"},"dump ",Object(c.b)("a",{name:"h2o_wave.types.ToolbarCard.dump"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"dump"),"(self) \u2011>\xa0Dict"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Returns the contents of this object as a dict."))))))),Object(c.b)("div",{className:"api"},Object(c.b)("h3",{id:"vegacard"},"VegaCard ",Object(c.b)("a",{name:"h2o_wave.types.VegaCard"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"class ",Object(c.b)("span",{class:"ident"},"VegaCard"),"(box:\xa0str, title:\xa0str, specification:\xa0str, data:\xa0Union[dict,\xa0str,\xa0NoneType]\xa0=\xa0None, commands:\xa0Union[List[",Object(c.b)("a",{title:"h2o_wave.types.Command",href:"#h2o_wave.types.Command"},"Command"),"],\xa0NoneType]\xa0=\xa0None)"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Create a card containing a Vega-lite plot.")),Object(c.b)("h4",{id:"static-methods-75"},"Static methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"load-75"},"load ",Object(c.b)("a",{name:"h2o_wave.types.VegaCard.load"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"load"),"(_VegaCard__d:\xa0Dict) \u2011>\xa0",Object(c.b)("a",{title:"h2o_wave.types.VegaCard",href:"#h2o_wave.types.VegaCard"},"VegaCard")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Creates an instance of this class using the contents of a dict."))))),Object(c.b)("h4",{id:"instance-variables-75"},"Instance variables"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{id:"h2o_wave.types.VegaCard.box",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"box")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"A string indicating how to place this component on the page.")),Object(c.b)("div",{id:"h2o_wave.types.VegaCard.commands",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"commands")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Contextual menu commands for this component.")),Object(c.b)("div",{id:"h2o_wave.types.VegaCard.data",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"data")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Data for the plot, if any.")),Object(c.b)("div",{id:"h2o_wave.types.VegaCard.specification",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"specification")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The Vega-lite specification.")),Object(c.b)("div",{id:"h2o_wave.types.VegaCard.title",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"title")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The title of this card."))),Object(c.b)("h4",{id:"methods-75"},"Methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"dump-75"},"dump ",Object(c.b)("a",{name:"h2o_wave.types.VegaCard.dump"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"dump"),"(self) \u2011>\xa0Dict"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Returns the contents of this object as a dict."))))))),Object(c.b)("div",{className:"api"},Object(c.b)("h3",{id:"vegavisualization"},"VegaVisualization ",Object(c.b)("a",{name:"h2o_wave.types.VegaVisualization"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"class ",Object(c.b)("span",{class:"ident"},"VegaVisualization"),"(specification:\xa0str, data:\xa0Union[dict,\xa0str,\xa0NoneType]\xa0=\xa0None, width:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, height:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, name:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, visible:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None)"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Create a Vega-lite plot for display inside a form.")),Object(c.b)("h4",{id:"static-methods-76"},"Static methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"load-76"},"load ",Object(c.b)("a",{name:"h2o_wave.types.VegaVisualization.load"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"load"),"(_VegaVisualization__d:\xa0Dict) \u2011>\xa0",Object(c.b)("a",{title:"h2o_wave.types.VegaVisualization",href:"#h2o_wave.types.VegaVisualization"},"VegaVisualization")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Creates an instance of this class using the contents of a dict."))))),Object(c.b)("h4",{id:"instance-variables-76"},"Instance variables"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{id:"h2o_wave.types.VegaVisualization.data",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"data")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Data for the plot, if any.")),Object(c.b)("div",{id:"h2o_wave.types.VegaVisualization.height",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"height")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The height of the visualization. Defaults to 300px.")),Object(c.b)("div",{id:"h2o_wave.types.VegaVisualization.name",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"name")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"An identifying name for this component.")),Object(c.b)("div",{id:"h2o_wave.types.VegaVisualization.specification",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"specification")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The Vega-lite specification.")),Object(c.b)("div",{id:"h2o_wave.types.VegaVisualization.visible",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"visible")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"True if the component should be visible. Defaults to true.")),Object(c.b)("div",{id:"h2o_wave.types.VegaVisualization.width",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"width")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The width of the visualization. Defaults to 100%."))),Object(c.b)("h4",{id:"methods-76"},"Methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"dump-76"},"dump ",Object(c.b)("a",{name:"h2o_wave.types.VegaVisualization.dump"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"dump"),"(self) \u2011>\xa0Dict"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Returns the contents of this object as a dict."))))))),Object(c.b)("div",{className:"api"},Object(c.b)("h3",{id:"visualization"},"Visualization ",Object(c.b)("a",{name:"h2o_wave.types.Visualization"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"class ",Object(c.b)("span",{class:"ident"},"Visualization"),"(plot:\xa0",Object(c.b)("a",{title:"h2o_wave.types.Plot",href:"#h2o_wave.types.Plot"},"Plot"),", data:\xa0Union[dict,\xa0str], width:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, height:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, name:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, visible:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None)"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Create a visualization for display inside a form.")),Object(c.b)("h4",{id:"static-methods-77"},"Static methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"load-77"},"load ",Object(c.b)("a",{name:"h2o_wave.types.Visualization.load"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"load"),"(_Visualization__d:\xa0Dict) \u2011>\xa0",Object(c.b)("a",{title:"h2o_wave.types.Visualization",href:"#h2o_wave.types.Visualization"},"Visualization")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Creates an instance of this class using the contents of a dict."))))),Object(c.b)("h4",{id:"instance-variables-77"},"Instance variables"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{id:"h2o_wave.types.Visualization.data",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"data")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Data for this visualization.")),Object(c.b)("div",{id:"h2o_wave.types.Visualization.height",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"height")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The hight of the visualization. Defaults to 300px.")),Object(c.b)("div",{id:"h2o_wave.types.Visualization.name",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"name")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"An identifying name for this component.")),Object(c.b)("div",{id:"h2o_wave.types.Visualization.plot",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"plot")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The plot to be rendered in this visualization.")),Object(c.b)("div",{id:"h2o_wave.types.Visualization.visible",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"visible")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"True if the component should be visible. Defaults to true.")),Object(c.b)("div",{id:"h2o_wave.types.Visualization.width",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"width")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The width of the visualization. Defaults to 100%."))),Object(c.b)("h4",{id:"methods-77"},"Methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"dump-77"},"dump ",Object(c.b)("a",{name:"h2o_wave.types.Visualization.dump"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"dump"),"(self) \u2011>\xa0Dict"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Returns the contents of this object as a dict."))))))),Object(c.b)("div",{className:"api"},Object(c.b)("h3",{id:"widebarstatcard"},"WideBarStatCard ",Object(c.b)("a",{name:"h2o_wave.types.WideBarStatCard"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"class ",Object(c.b)("span",{class:"ident"},"WideBarStatCard"),"(box:\xa0str, title:\xa0str, value:\xa0str, aux_value:\xa0str, progress:\xa0float, plot_color:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, data:\xa0Union[dict,\xa0str,\xa0NoneType]\xa0=\xa0None, commands:\xa0Union[List[",Object(c.b)("a",{title:"h2o_wave.types.Command",href:"#h2o_wave.types.Command"},"Command"),"],\xa0NoneType]\xa0=\xa0None)"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Create a wide stat card displaying a primary value, an auxiliary value and a progress bar.")),Object(c.b)("h4",{id:"static-methods-78"},"Static methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"load-78"},"load ",Object(c.b)("a",{name:"h2o_wave.types.WideBarStatCard.load"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"load"),"(_WideBarStatCard__d:\xa0Dict) \u2011>\xa0",Object(c.b)("a",{title:"h2o_wave.types.WideBarStatCard",href:"#h2o_wave.types.WideBarStatCard"},"WideBarStatCard")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Creates an instance of this class using the contents of a dict."))))),Object(c.b)("h4",{id:"instance-variables-78"},"Instance variables"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{id:"h2o_wave.types.WideBarStatCard.aux_value",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"aux_value")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The auxiliary value displayed next to the primary value.")),Object(c.b)("div",{id:"h2o_wave.types.WideBarStatCard.box",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"box")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"A string indicating how to place this component on the page.")),Object(c.b)("div",{id:"h2o_wave.types.WideBarStatCard.commands",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"commands")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Contextual menu commands for this component.")),Object(c.b)("div",{id:"h2o_wave.types.WideBarStatCard.data",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"data")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Data for this card.")),Object(c.b)("div",{id:"h2o_wave.types.WideBarStatCard.plot_color",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"plot_color")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The color of the progress bar.")),Object(c.b)("div",{id:"h2o_wave.types.WideBarStatCard.progress",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"progress")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The value of the progress bar, between 0 and 1.")),Object(c.b)("div",{id:"h2o_wave.types.WideBarStatCard.title",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"title")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The card's title.")),Object(c.b)("div",{id:"h2o_wave.types.WideBarStatCard.value",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"value")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The primary value displayed."))),Object(c.b)("h4",{id:"methods-78"},"Methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"dump-78"},"dump ",Object(c.b)("a",{name:"h2o_wave.types.WideBarStatCard.dump"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"dump"),"(self) \u2011>\xa0Dict"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Returns the contents of this object as a dict."))))))),Object(c.b)("div",{className:"api"},Object(c.b)("h3",{id:"widegaugestatcard"},"WideGaugeStatCard ",Object(c.b)("a",{name:"h2o_wave.types.WideGaugeStatCard"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"class ",Object(c.b)("span",{class:"ident"},"WideGaugeStatCard"),"(box:\xa0str, title:\xa0str, value:\xa0str, aux_value:\xa0str, progress:\xa0float, plot_color:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, data:\xa0Union[dict,\xa0str,\xa0NoneType]\xa0=\xa0None, commands:\xa0Union[List[",Object(c.b)("a",{title:"h2o_wave.types.Command",href:"#h2o_wave.types.Command"},"Command"),"],\xa0NoneType]\xa0=\xa0None)"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Create a wide stat card displaying a primary value, an auxiliary value and a progress gauge.")),Object(c.b)("h4",{id:"static-methods-79"},"Static methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"load-79"},"load ",Object(c.b)("a",{name:"h2o_wave.types.WideGaugeStatCard.load"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"load"),"(_WideGaugeStatCard__d:\xa0Dict) \u2011>\xa0",Object(c.b)("a",{title:"h2o_wave.types.WideGaugeStatCard",href:"#h2o_wave.types.WideGaugeStatCard"},"WideGaugeStatCard")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Creates an instance of this class using the contents of a dict."))))),Object(c.b)("h4",{id:"instance-variables-79"},"Instance variables"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{id:"h2o_wave.types.WideGaugeStatCard.aux_value",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"aux_value")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The auxiliary value displayed next to the primary value.")),Object(c.b)("div",{id:"h2o_wave.types.WideGaugeStatCard.box",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"box")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"A string indicating how to place this component on the page.")),Object(c.b)("div",{id:"h2o_wave.types.WideGaugeStatCard.commands",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"commands")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Contextual menu commands for this component.")),Object(c.b)("div",{id:"h2o_wave.types.WideGaugeStatCard.data",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"data")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Data for this card.")),Object(c.b)("div",{id:"h2o_wave.types.WideGaugeStatCard.plot_color",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"plot_color")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The color of the progress gauge.")),Object(c.b)("div",{id:"h2o_wave.types.WideGaugeStatCard.progress",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"progress")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The value of the progress gauge, between 0 and 1.")),Object(c.b)("div",{id:"h2o_wave.types.WideGaugeStatCard.title",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"title")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The card's title.")),Object(c.b)("div",{id:"h2o_wave.types.WideGaugeStatCard.value",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"value")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The primary value displayed."))),Object(c.b)("h4",{id:"methods-79"},"Methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"dump-79"},"dump ",Object(c.b)("a",{name:"h2o_wave.types.WideGaugeStatCard.dump"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"dump"),"(self) \u2011>\xa0Dict"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Returns the contents of this object as a dict."))))))),Object(c.b)("div",{className:"api"},Object(c.b)("h3",{id:"wideseriesstatcard"},"WideSeriesStatCard ",Object(c.b)("a",{name:"h2o_wave.types.WideSeriesStatCard"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"class ",Object(c.b)("span",{class:"ident"},"WideSeriesStatCard"),"(box:\xa0str, title:\xa0str, value:\xa0str, aux_value:\xa0str, plot_data:\xa0Union[",Object(c.b)("a",{title:"h2o_wave.core.Data",href:"core#h2o_wave.core.Data"},"Data"),",\xa0str], plot_value:\xa0str, plot_zero_value:\xa0Union[float,\xa0NoneType]\xa0=\xa0None, plot_category:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, plot_type:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, plot_curve:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, plot_color:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, data:\xa0Union[dict,\xa0str,\xa0NoneType]\xa0=\xa0None, commands:\xa0Union[List[",Object(c.b)("a",{title:"h2o_wave.types.Command",href:"#h2o_wave.types.Command"},"Command"),"],\xa0NoneType]\xa0=\xa0None)"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Create a wide stat card displaying a primary value, an auxiliary value and a series plot.")),Object(c.b)("h4",{id:"static-methods-80"},"Static methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"load-80"},"load ",Object(c.b)("a",{name:"h2o_wave.types.WideSeriesStatCard.load"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"load"),"(_WideSeriesStatCard__d:\xa0Dict) \u2011>\xa0",Object(c.b)("a",{title:"h2o_wave.types.WideSeriesStatCard",href:"#h2o_wave.types.WideSeriesStatCard"},"WideSeriesStatCard")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Creates an instance of this class using the contents of a dict."))))),Object(c.b)("h4",{id:"instance-variables-80"},"Instance variables"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{id:"h2o_wave.types.WideSeriesStatCard.aux_value",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"aux_value")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The auxiliary value displayed below the primary value.")),Object(c.b)("div",{id:"h2o_wave.types.WideSeriesStatCard.box",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"box")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"A string indicating how to place this component on the page.")),Object(c.b)("div",{id:"h2o_wave.types.WideSeriesStatCard.commands",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"commands")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Contextual menu commands for this component.")),Object(c.b)("div",{id:"h2o_wave.types.WideSeriesStatCard.data",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"data")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Data for this card.")),Object(c.b)("div",{id:"h2o_wave.types.WideSeriesStatCard.plot_category",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"plot_category")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The data field to use for x-axis values (ignored if ",Object(c.b)("code",null,"plot_type")," is ",Object(c.b)("code",null,"area"),"; must be provided if ",Object(c.b)("code",null,"plot_type")," is ",Object(c.b)("code",null,"interval"),"). Defaults to 'x'.")),Object(c.b)("div",{id:"h2o_wave.types.WideSeriesStatCard.plot_color",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"plot_color")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The plot's color.")),Object(c.b)("div",{id:"h2o_wave.types.WideSeriesStatCard.plot_curve",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"plot_curve")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The plot's curve style. Defaults to ",Object(c.b)("code",null,"linear"),". One of 'linear', 'smooth', 'step', 'step-after', 'step-before'.")),Object(c.b)("div",{id:"h2o_wave.types.WideSeriesStatCard.plot_data",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"plot_data")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The plot's data.")),Object(c.b)("div",{id:"h2o_wave.types.WideSeriesStatCard.plot_type",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"plot_type")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The type of plot. Defaults to ",Object(c.b)("code",null,"area"),". One of 'area', 'interval'.")),Object(c.b)("div",{id:"h2o_wave.types.WideSeriesStatCard.plot_value",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"plot_value")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The data field to use for y-axis values.")),Object(c.b)("div",{id:"h2o_wave.types.WideSeriesStatCard.plot_zero_value",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"plot_zero_value")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The base value to use for each y-axis mark. Set this to ",Object(c.b)("code",null,"0")," if you want to pin the x-axis at ",Object(c.b)("code",null,"y=0"),". If not provided, the minimum value from the data is used.")),Object(c.b)("div",{id:"h2o_wave.types.WideSeriesStatCard.title",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"title")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The card's title.")),Object(c.b)("div",{id:"h2o_wave.types.WideSeriesStatCard.value",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"value")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The primary value displayed."))),Object(c.b)("h4",{id:"methods-80"},"Methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"dump-80"},"dump ",Object(c.b)("a",{name:"h2o_wave.types.WideSeriesStatCard.dump"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"dump"),"(self) \u2011>\xa0Dict"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Returns the contents of this object as a dict."))))))))}l.isMDXComponent=!0},290:function(e,a,t){"use strict";t.d(a,"a",(function(){return p})),t.d(a,"b",(function(){return m}));var s=t(0),i=t.n(s);function c(e,a,t){return a in e?Object.defineProperty(e,a,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[a]=t,e}function b(e,a){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var s=Object.getOwnPropertySymbols(e);a&&(s=s.filter((function(a){return Object.getOwnPropertyDescriptor(e,a).enumerable}))),t.push.apply(t,s)}return t}function n(e){for(var a=1;a=0||(i[t]=e[t]);return i}(e,a);if(Object.getOwnPropertySymbols){var c=Object.getOwnPropertySymbols(e);for(s=0;s=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(i[t]=e[t])}return i}var d=i.a.createContext({}),l=function(e){var a=i.a.useContext(d),t=a;return e&&(t="function"==typeof e?e(a):n(n({},a),e)),t},p=function(e){var a=l(e.components);return i.a.createElement(d.Provider,{value:a},e.children)},r={inlineCode:"code",wrapper:function(e){var a=e.children;return i.a.createElement(i.a.Fragment,{},a)}},_=i.a.forwardRef((function(e,a){var t=e.components,s=e.mdxType,c=e.originalType,b=e.parentName,d=o(e,["components","mdxType","originalType","parentName"]),p=l(t),_=s,m=p["".concat(b,".").concat(_)]||p[_]||r[_]||c;return t?i.a.createElement(m,n(n({ref:a},d),{},{components:t})):i.a.createElement(m,n({ref:a},d))}));function m(e,a){var t=arguments,s=a&&a.mdxType;if("string"==typeof e||s){var c=t.length,b=new Array(c);b[0]=_;var n={};for(var o in a)hasOwnProperty.call(a,o)&&(n[o]=a[o]);n.originalType=e,n.mdxType="string"==typeof e?e:s,b[1]=n;for(var d=2;d',id:"breadcrumb",children:[]},{value:'BreadcrumbsCard ',id:"breadcrumbscard",children:[]},{value:'Button ',id:"button",children:[]},{value:'Buttons ',id:"buttons",children:[]},{value:'Checkbox ',id:"checkbox",children:[]},{value:'Checklist ',id:"checklist",children:[]},{value:'Choice ',id:"choice",children:[]},{value:'ChoiceGroup ',id:"choicegroup",children:[]},{value:'ColorPicker ',id:"colorpicker",children:[]},{value:'Combobox ',id:"combobox",children:[]},{value:'Command ',id:"command",children:[]},{value:'Component ',id:"component",children:[]},{value:'DatePicker ',id:"datepicker",children:[]},{value:'Dropdown ',id:"dropdown",children:[]},{value:'Expander ',id:"expander",children:[]},{value:'FileUpload ',id:"fileupload",children:[]},{value:'FlexCard ',id:"flexcard",children:[]},{value:'FormCard ',id:"formcard",children:[]},{value:'Frame ',id:"frame",children:[]},{value:'FrameCard ',id:"framecard",children:[]},{value:'GraphicsCard ',id:"graphicscard",children:[]},{value:'GridCard ',id:"gridcard",children:[]},{value:'HeaderCard ',id:"headercard",children:[]},{value:'IconTableCellType ',id:"icontablecelltype",children:[]},{value:'ImageCard ',id:"imagecard",children:[]},{value:'Label ',id:"label",children:[]},{value:'LargeBarStatCard ',id:"largebarstatcard",children:[]},{value:'LargeStatCard ',id:"largestatcard",children:[]},{value:'Link ',id:"link",children:[]},{value:'ListCard ',id:"listcard",children:[]},{value:'ListItem1Card ',id:"listitem1card",children:[]},{value:'Mark ',id:"mark",children:[]},{value:'MarkdownCard ',id:"markdowncard",children:[]},{value:'Markup ',id:"markup",children:[]},{value:'MarkupCard ',id:"markupcard",children:[]},{value:'MessageBar ',id:"messagebar",children:[]},{value:'MetaCard ',id:"metacard",children:[]},{value:'NavCard ',id:"navcard",children:[]},{value:'NavGroup ',id:"navgroup",children:[]},{value:'NavItem ',id:"navitem",children:[]},{value:'Picker ',id:"picker",children:[]},{value:'PixelArtCard ',id:"pixelartcard",children:[]},{value:'Plot ',id:"plot",children:[]},{value:'PlotCard ',id:"plotcard",children:[]},{value:'Progress ',id:"progress",children:[]},{value:'ProgressTableCellType ',id:"progresstablecelltype",children:[]},{value:'RangeSlider ',id:"rangeslider",children:[]},{value:'RepeatCard ',id:"repeatcard",children:[]},{value:'Separator ',id:"separator",children:[]},{value:'Slider ',id:"slider",children:[]},{value:'SmallSeriesStatCard ',id:"smallseriesstatcard",children:[]},{value:'SmallStatCard ',id:"smallstatcard",children:[]},{value:'Spinbox ',id:"spinbox",children:[]},{value:'Step ',id:"step",children:[]},{value:'Stepper ',id:"stepper",children:[]},{value:'Tab ',id:"tab",children:[]},{value:'TabCard ',id:"tabcard",children:[]},{value:'Table ',id:"table",children:[]},{value:'TableCellType ',id:"tablecelltype",children:[]},{value:'TableColumn ',id:"tablecolumn",children:[]},{value:'TableRow ',id:"tablerow",children:[]},{value:'Tabs ',id:"tabs",children:[]},{value:'TallGaugeStatCard ',id:"tallgaugestatcard",children:[]},{value:'TallSeriesStatCard ',id:"tallseriesstatcard",children:[]},{value:'Template ',id:"template",children:[]},{value:'TemplateCard ',id:"templatecard",children:[]},{value:'Text ',id:"text",children:[]},{value:'TextL ',id:"textl",children:[]},{value:'TextM ',id:"textm",children:[]},{value:'TextS ',id:"texts",children:[]},{value:'TextXl ',id:"textxl",children:[]},{value:'TextXs ',id:"textxs",children:[]},{value:'Textbox ',id:"textbox",children:[]},{value:'Toggle ',id:"toggle",children:[]},{value:'ToolbarCard ',id:"toolbarcard",children:[]},{value:'VegaCard ',id:"vegacard",children:[]},{value:'VegaVisualization ',id:"vegavisualization",children:[]},{value:'Visualization ',id:"visualization",children:[]},{value:'WideBarStatCard ',id:"widebarstatcard",children:[]},{value:'WideGaugeStatCard ',id:"widegaugestatcard",children:[]},{value:'WideSeriesStatCard ',id:"wideseriesstatcard",children:[]}]}],d={rightToc:o};function l(e){var a=e.components,t=Object(i.a)(e,["components"]);return Object(c.b)("wrapper",Object(s.a)({},d,t,{components:a,mdxType:"MDXLayout"}),Object(c.b)("h2",{id:"classes"},"Classes"),Object(c.b)("div",{className:"api"},Object(c.b)("h3",{id:"breadcrumb"},"Breadcrumb ",Object(c.b)("a",{name:"h2o_wave.types.Breadcrumb"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"class ",Object(c.b)("span",{class:"ident"},"Breadcrumb"),"(name:\xa0str, label:\xa0str)"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Create a breadcrumb for a ",Object(c.b)("code",null,Object(c.b)("a",{title:"h2o_wave.types.BreadcrumbsCard",href:"#h2o_wave.types.BreadcrumbsCard"},"BreadcrumbsCard")),".")),Object(c.b)("h4",{id:"static-methods"},"Static methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"load"},"load ",Object(c.b)("a",{name:"h2o_wave.types.Breadcrumb.load"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"load"),"(_Breadcrumb__d:\xa0Dict) \u2011>\xa0",Object(c.b)("a",{title:"h2o_wave.types.Breadcrumb",href:"#h2o_wave.types.Breadcrumb"},"Breadcrumb")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Creates an instance of this class using the contents of a dict."))))),Object(c.b)("h4",{id:"instance-variables"},"Instance variables"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{id:"h2o_wave.types.Breadcrumb.label",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"label")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The label to display.")),Object(c.b)("div",{id:"h2o_wave.types.Breadcrumb.name",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"name")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The name of this item. Prefix the name with a '#' to trigger hash-change navigation."))),Object(c.b)("h4",{id:"methods"},"Methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"dump"},"dump ",Object(c.b)("a",{name:"h2o_wave.types.Breadcrumb.dump"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"dump"),"(self) \u2011>\xa0Dict"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Returns the contents of this object as a dict."))))))),Object(c.b)("div",{className:"api"},Object(c.b)("h3",{id:"breadcrumbscard"},"BreadcrumbsCard ",Object(c.b)("a",{name:"h2o_wave.types.BreadcrumbsCard"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"class ",Object(c.b)("span",{class:"ident"},"BreadcrumbsCard"),"(box:\xa0str, items:\xa0List[",Object(c.b)("a",{title:"h2o_wave.types.Breadcrumb",href:"#h2o_wave.types.Breadcrumb"},"Breadcrumb"),"], commands:\xa0Union[List[",Object(c.b)("a",{title:"h2o_wave.types.Command",href:"#h2o_wave.types.Command"},"Command"),"],\xa0NoneType]\xa0=\xa0None)"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Create a card containing breadcrumbs. Breadcrumbs should be used as a navigational aid in your app or site. They indicate the current page\u2019s location within a hierarchy and help the user understand where they are in relation to the rest of that hierarchy. They also afford one-click access to higher levels of that hierarchy. Breadcrumbs are typically placed, in horizontal form, under the masthead or navigation of an experience, above the primary content area.")),Object(c.b)("h4",{id:"static-methods-1"},"Static methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"load-1"},"load ",Object(c.b)("a",{name:"h2o_wave.types.BreadcrumbsCard.load"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"load"),"(_BreadcrumbsCard__d:\xa0Dict) \u2011>\xa0",Object(c.b)("a",{title:"h2o_wave.types.BreadcrumbsCard",href:"#h2o_wave.types.BreadcrumbsCard"},"BreadcrumbsCard")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Creates an instance of this class using the contents of a dict."))))),Object(c.b)("h4",{id:"instance-variables-1"},"Instance variables"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{id:"h2o_wave.types.BreadcrumbsCard.box",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"box")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"A string indicating how to place this component on the page.")),Object(c.b)("div",{id:"h2o_wave.types.BreadcrumbsCard.commands",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"commands")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Contextual menu commands for this component.")),Object(c.b)("div",{id:"h2o_wave.types.BreadcrumbsCard.items",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"items")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"A list of ",Object(c.b)("code",null,Object(c.b)("a",{title:"h2o_wave.types.Breadcrumb",href:"#h2o_wave.types.Breadcrumb"},"Breadcrumb"))," instances to display. See ",Object(c.b)("code",null,Object(c.b)("a",{title:"h2o_wave.ui.breadcrumb",href:"ui#h2o_wave.ui.breadcrumb"},"breadcrumb()"))))),Object(c.b)("h4",{id:"methods-1"},"Methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"dump-1"},"dump ",Object(c.b)("a",{name:"h2o_wave.types.BreadcrumbsCard.dump"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"dump"),"(self) \u2011>\xa0Dict"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Returns the contents of this object as a dict."))))))),Object(c.b)("div",{className:"api"},Object(c.b)("h3",{id:"button"},"Button ",Object(c.b)("a",{name:"h2o_wave.types.Button"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"class ",Object(c.b)("span",{class:"ident"},"Button"),"(name:\xa0str, label:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, caption:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, value:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, primary:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, disabled:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, link:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, visible:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, tooltip:\xa0Union[str,\xa0NoneType]\xa0=\xa0None)"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Create a button."),Object(c.b)("p",null,"Buttons are best used to enable a user to commit a change or complete steps in a task. They are typically found inside forms, dialogs, panels or pages. An example of their usage is confirming the deletion of a file in a confirmation dialog."),Object(c.b)("p",null,"When considering their place in a layout, contemplate the order in which a user will flow through the UI. As an example, in a form, the individual will need to read and interact with the form fields before submitting the form. Therefore, as a general rule, the button should be placed at the bottom of the UI container which holds the related UI elements."),Object(c.b)("p",null,'Buttons may be placed within a "buttons" component which will lay out the buttons horizontally, or used individually and they will be stacked vertically.'),Object(c.b)("p",null,"While buttons can technically be used to navigate a user to another part of the experience, this is not recommended unless that navigation is part of an action or their flow.")),Object(c.b)("h4",{id:"static-methods-2"},"Static methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"load-2"},"load ",Object(c.b)("a",{name:"h2o_wave.types.Button.load"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"load"),"(_Button__d:\xa0Dict) \u2011>\xa0",Object(c.b)("a",{title:"h2o_wave.types.Button",href:"#h2o_wave.types.Button"},"Button")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Creates an instance of this class using the contents of a dict."))))),Object(c.b)("h4",{id:"instance-variables-2"},"Instance variables"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{id:"h2o_wave.types.Button.caption",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"caption")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The caption displayed below the label. Setting a caption renders a compound button.")),Object(c.b)("div",{id:"h2o_wave.types.Button.disabled",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"disabled")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"True if the button should be disabled.")),Object(c.b)("div",{id:"h2o_wave.types.Button.label",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"label")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The text displayed on the button.")),Object(c.b)("div",{id:"h2o_wave.types.Button.link",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"link")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"True if the button should be rendered as link text and not a standard button.")),Object(c.b)("div",{id:"h2o_wave.types.Button.name",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"name")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"An identifying name for this component. If the name is prefixed with a '#', the button sets the location hash to the name when clicked.")),Object(c.b)("div",{id:"h2o_wave.types.Button.primary",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"primary")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"True if the button should be rendered as the primary button in the set.")),Object(c.b)("div",{id:"h2o_wave.types.Button.tooltip",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"tooltip")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"An optional tooltip message displayed when a user clicks the help icon to the right of the component.")),Object(c.b)("div",{id:"h2o_wave.types.Button.value",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"value")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"A value for this button. If a value is set, it is used for the button's submitted instead of a boolean True.")),Object(c.b)("div",{id:"h2o_wave.types.Button.visible",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"visible")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"True if the component should be visible. Defaults to true."))),Object(c.b)("h4",{id:"methods-2"},"Methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"dump-2"},"dump ",Object(c.b)("a",{name:"h2o_wave.types.Button.dump"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"dump"),"(self) \u2011>\xa0Dict"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Returns the contents of this object as a dict."))))))),Object(c.b)("div",{className:"api"},Object(c.b)("h3",{id:"buttons"},"Buttons ",Object(c.b)("a",{name:"h2o_wave.types.Buttons"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"class ",Object(c.b)("span",{class:"ident"},"Buttons"),"(items:\xa0List[ForwardRef('",Object(c.b)("a",{title:"h2o_wave.types.Component",href:"#h2o_wave.types.Component"},"Component"),"')], justify:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, name:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, visible:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None)"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Create a set of buttons to be layed out horizontally.")),Object(c.b)("h4",{id:"static-methods-3"},"Static methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"load-3"},"load ",Object(c.b)("a",{name:"h2o_wave.types.Buttons.load"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"load"),"(_Buttons__d:\xa0Dict) \u2011>\xa0",Object(c.b)("a",{title:"h2o_wave.types.Buttons",href:"#h2o_wave.types.Buttons"},"Buttons")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Creates an instance of this class using the contents of a dict."))))),Object(c.b)("h4",{id:"instance-variables-3"},"Instance variables"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{id:"h2o_wave.types.Buttons.items",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"items")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The button in this set.")),Object(c.b)("div",{id:"h2o_wave.types.Buttons.justify",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"justify")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Specifies how to lay out buttons horizontally. One of 'start', 'end', 'center', 'between', 'around'.")),Object(c.b)("div",{id:"h2o_wave.types.Buttons.name",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"name")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"An identifying name for this component.")),Object(c.b)("div",{id:"h2o_wave.types.Buttons.visible",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"visible")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"True if the component should be visible. Defaults to true."))),Object(c.b)("h4",{id:"methods-3"},"Methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"dump-3"},"dump ",Object(c.b)("a",{name:"h2o_wave.types.Buttons.dump"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"dump"),"(self) \u2011>\xa0Dict"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Returns the contents of this object as a dict."))))))),Object(c.b)("div",{className:"api"},Object(c.b)("h3",{id:"checkbox"},"Checkbox ",Object(c.b)("a",{name:"h2o_wave.types.Checkbox"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"class ",Object(c.b)("span",{class:"ident"},"Checkbox"),"(name:\xa0str, label:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, value:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, indeterminate:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, disabled:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, trigger:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, visible:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, tooltip:\xa0Union[str,\xa0NoneType]\xa0=\xa0None)"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Create a checkbox."),Object(c.b)("p",null,"A checkbox allows users to switch between two mutually exclusive options (checked or unchecked, on or off) through a single click or tap. It can also be used to indicate a subordinate setting or preference when paired with another component."),Object(c.b)("p",null,"A checkbox is used to select or deselect action items. It can be used for a single item or for a list of multiple items that a user can choose from. The component has two selection states: unselected and selected."),Object(c.b)("p",null,"For a binary choice, the main difference between a checkbox and a toggle switch is that the checkbox is for status and the toggle switch is for action."),Object(c.b)("p",null,"Use multiple checkboxes for multi-select scenarios in which a user chooses one or more items from a group of choices that are not mutually exclusive.")),Object(c.b)("h4",{id:"static-methods-4"},"Static methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"load-4"},"load ",Object(c.b)("a",{name:"h2o_wave.types.Checkbox.load"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"load"),"(_Checkbox__d:\xa0Dict) \u2011>\xa0",Object(c.b)("a",{title:"h2o_wave.types.Checkbox",href:"#h2o_wave.types.Checkbox"},"Checkbox")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Creates an instance of this class using the contents of a dict."))))),Object(c.b)("h4",{id:"instance-variables-4"},"Instance variables"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{id:"h2o_wave.types.Checkbox.disabled",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"disabled")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"True if the checkbox is disabled.")),Object(c.b)("div",{id:"h2o_wave.types.Checkbox.indeterminate",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"indeterminate")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"True if the selection is indeterminate (neither selected nor unselected).")),Object(c.b)("div",{id:"h2o_wave.types.Checkbox.label",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"label")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Text to be displayed alongside the checkbox.")),Object(c.b)("div",{id:"h2o_wave.types.Checkbox.name",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"name")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"An identifying name for this component.")),Object(c.b)("div",{id:"h2o_wave.types.Checkbox.tooltip",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"tooltip")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"An optional tooltip message displayed when a user clicks the help icon to the right of the component.")),Object(c.b)("div",{id:"h2o_wave.types.Checkbox.trigger",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"trigger")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"True if the form should be submitted when the checkbox value changes.")),Object(c.b)("div",{id:"h2o_wave.types.Checkbox.value",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"value")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"True if selected, False if unselected.")),Object(c.b)("div",{id:"h2o_wave.types.Checkbox.visible",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"visible")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"True if the component should be visible. Defaults to true."))),Object(c.b)("h4",{id:"methods-4"},"Methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"dump-4"},"dump ",Object(c.b)("a",{name:"h2o_wave.types.Checkbox.dump"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"dump"),"(self) \u2011>\xa0Dict"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Returns the contents of this object as a dict."))))))),Object(c.b)("div",{className:"api"},Object(c.b)("h3",{id:"checklist"},"Checklist ",Object(c.b)("a",{name:"h2o_wave.types.Checklist"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"class ",Object(c.b)("span",{class:"ident"},"Checklist"),"(name:\xa0str, label:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, values:\xa0Union[List[str],\xa0NoneType]\xa0=\xa0None, choices:\xa0Union[List[",Object(c.b)("a",{title:"h2o_wave.types.Choice",href:"#h2o_wave.types.Choice"},"Choice"),"],\xa0NoneType]\xa0=\xa0None, trigger:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, visible:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, tooltip:\xa0Union[str,\xa0NoneType]\xa0=\xa0None)"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Create a set of checkboxes. Use this for multi-select scenarios in which a user chooses one or more items from a group of choices that are not mutually exclusive.")),Object(c.b)("h4",{id:"static-methods-5"},"Static methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"load-5"},"load ",Object(c.b)("a",{name:"h2o_wave.types.Checklist.load"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"load"),"(_Checklist__d:\xa0Dict) \u2011>\xa0",Object(c.b)("a",{title:"h2o_wave.types.Checklist",href:"#h2o_wave.types.Checklist"},"Checklist")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Creates an instance of this class using the contents of a dict."))))),Object(c.b)("h4",{id:"instance-variables-5"},"Instance variables"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{id:"h2o_wave.types.Checklist.choices",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"choices")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The choices to be presented.")),Object(c.b)("div",{id:"h2o_wave.types.Checklist.label",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"label")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Text to be displayed above the component.")),Object(c.b)("div",{id:"h2o_wave.types.Checklist.name",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"name")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"An identifying name for this component.")),Object(c.b)("div",{id:"h2o_wave.types.Checklist.tooltip",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"tooltip")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"An optional tooltip message displayed when a user clicks the help icon to the right of the component.")),Object(c.b)("div",{id:"h2o_wave.types.Checklist.trigger",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"trigger")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"True if the form should be submitted when the checklist value changes.")),Object(c.b)("div",{id:"h2o_wave.types.Checklist.values",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"values")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The names of the selected choices.")),Object(c.b)("div",{id:"h2o_wave.types.Checklist.visible",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"visible")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"True if the component should be visible. Defaults to true."))),Object(c.b)("h4",{id:"methods-5"},"Methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"dump-5"},"dump ",Object(c.b)("a",{name:"h2o_wave.types.Checklist.dump"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"dump"),"(self) \u2011>\xa0Dict"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Returns the contents of this object as a dict."))))))),Object(c.b)("div",{className:"api"},Object(c.b)("h3",{id:"choice"},"Choice ",Object(c.b)("a",{name:"h2o_wave.types.Choice"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"class ",Object(c.b)("span",{class:"ident"},"Choice"),"(name:\xa0str, label:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, disabled:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None)"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Create a choice for a checklist, choice group or dropdown.")),Object(c.b)("h4",{id:"static-methods-6"},"Static methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"load-6"},"load ",Object(c.b)("a",{name:"h2o_wave.types.Choice.load"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"load"),"(_Choice__d:\xa0Dict) \u2011>\xa0",Object(c.b)("a",{title:"h2o_wave.types.Choice",href:"#h2o_wave.types.Choice"},"Choice")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Creates an instance of this class using the contents of a dict."))))),Object(c.b)("h4",{id:"instance-variables-6"},"Instance variables"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{id:"h2o_wave.types.Choice.disabled",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"disabled")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"True if the checkbox is disabled.")),Object(c.b)("div",{id:"h2o_wave.types.Choice.label",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"label")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Text to be displayed alongside the component.")),Object(c.b)("div",{id:"h2o_wave.types.Choice.name",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"name")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"An identifying name for this component."))),Object(c.b)("h4",{id:"methods-6"},"Methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"dump-6"},"dump ",Object(c.b)("a",{name:"h2o_wave.types.Choice.dump"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"dump"),"(self) \u2011>\xa0Dict"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Returns the contents of this object as a dict."))))))),Object(c.b)("div",{className:"api"},Object(c.b)("h3",{id:"choicegroup"},"ChoiceGroup ",Object(c.b)("a",{name:"h2o_wave.types.ChoiceGroup"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"class ",Object(c.b)("span",{class:"ident"},"ChoiceGroup"),"(name:\xa0str, label:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, value:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, choices:\xa0Union[List[",Object(c.b)("a",{title:"h2o_wave.types.Choice",href:"#h2o_wave.types.Choice"},"Choice"),"],\xa0NoneType]\xa0=\xa0None, required:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, trigger:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, visible:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, tooltip:\xa0Union[str,\xa0NoneType]\xa0=\xa0None)"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Create a choice group. The choice group component, also known as radio buttons, let users select one option from two or more choices. Each option is represented by one choice group button; a user can select only one choice group in a button group."),Object(c.b)("p",null,"Choice groups emphasize all options equally, and that may draw more attention to the options than necessary. Consider using other components, unless the options deserve extra attention from the user. For example, if the default option is recommended for most users in most situations, use a dropdown instead."),Object(c.b)("p",null,'If there are only two mutually exclusive options, combine them into a single Checkbox or Toggle switch. For example, use a checkbox for "I agree" instead of choice group buttons for "I agree" and "I don\'t agree."')),Object(c.b)("h4",{id:"static-methods-7"},"Static methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"load-7"},"load ",Object(c.b)("a",{name:"h2o_wave.types.ChoiceGroup.load"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"load"),"(_ChoiceGroup__d:\xa0Dict) \u2011>\xa0",Object(c.b)("a",{title:"h2o_wave.types.ChoiceGroup",href:"#h2o_wave.types.ChoiceGroup"},"ChoiceGroup")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Creates an instance of this class using the contents of a dict."))))),Object(c.b)("h4",{id:"instance-variables-7"},"Instance variables"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{id:"h2o_wave.types.ChoiceGroup.choices",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"choices")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The choices to be presented.")),Object(c.b)("div",{id:"h2o_wave.types.ChoiceGroup.label",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"label")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Text to be displayed alongside the component.")),Object(c.b)("div",{id:"h2o_wave.types.ChoiceGroup.name",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"name")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"An identifying name for this component.")),Object(c.b)("div",{id:"h2o_wave.types.ChoiceGroup.required",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"required")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"True if this field is required.")),Object(c.b)("div",{id:"h2o_wave.types.ChoiceGroup.tooltip",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"tooltip")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"An optional tooltip message displayed when a user clicks the help icon to the right of the component.")),Object(c.b)("div",{id:"h2o_wave.types.ChoiceGroup.trigger",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"trigger")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"True if the form should be submitted when the selection changes.")),Object(c.b)("div",{id:"h2o_wave.types.ChoiceGroup.value",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"value")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The name of the selected choice.")),Object(c.b)("div",{id:"h2o_wave.types.ChoiceGroup.visible",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"visible")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"True if the component should be visible. Defaults to true."))),Object(c.b)("h4",{id:"methods-7"},"Methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"dump-7"},"dump ",Object(c.b)("a",{name:"h2o_wave.types.ChoiceGroup.dump"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"dump"),"(self) \u2011>\xa0Dict"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Returns the contents of this object as a dict."))))))),Object(c.b)("div",{className:"api"},Object(c.b)("h3",{id:"colorpicker"},"ColorPicker ",Object(c.b)("a",{name:"h2o_wave.types.ColorPicker"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"class ",Object(c.b)("span",{class:"ident"},"ColorPicker"),"(name:\xa0str, label:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, value:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, choices:\xa0Union[List[str],\xa0NoneType]\xa0=\xa0None, visible:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, tooltip:\xa0Union[str,\xa0NoneType]\xa0=\xa0None)"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Create a color picker."),Object(c.b)("p",null,"A date picker allows a user to pick a color value. If the 'choices' parameter is set, a swatch picker is displayed instead of the standard color picker.")),Object(c.b)("h4",{id:"static-methods-8"},"Static methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"load-8"},"load ",Object(c.b)("a",{name:"h2o_wave.types.ColorPicker.load"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"load"),"(_ColorPicker__d:\xa0Dict) \u2011>\xa0",Object(c.b)("a",{title:"h2o_wave.types.ColorPicker",href:"#h2o_wave.types.ColorPicker"},"ColorPicker")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Creates an instance of this class using the contents of a dict."))))),Object(c.b)("h4",{id:"instance-variables-8"},"Instance variables"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{id:"h2o_wave.types.ColorPicker.choices",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"choices")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"A list of colors (CSS-compatible strings) to limit color choices to.")),Object(c.b)("div",{id:"h2o_wave.types.ColorPicker.label",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"label")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Text to be displayed alongside the component.")),Object(c.b)("div",{id:"h2o_wave.types.ColorPicker.name",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"name")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"An identifying name for this component.")),Object(c.b)("div",{id:"h2o_wave.types.ColorPicker.tooltip",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"tooltip")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"An optional tooltip message displayed when a user clicks the help icon to the right of the component.")),Object(c.b)("div",{id:"h2o_wave.types.ColorPicker.value",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"value")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The selected color (CSS-compatible string)")),Object(c.b)("div",{id:"h2o_wave.types.ColorPicker.visible",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"visible")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"True if the component should be visible. Defaults to true."))),Object(c.b)("h4",{id:"methods-8"},"Methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"dump-8"},"dump ",Object(c.b)("a",{name:"h2o_wave.types.ColorPicker.dump"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"dump"),"(self) \u2011>\xa0Dict"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Returns the contents of this object as a dict."))))))),Object(c.b)("div",{className:"api"},Object(c.b)("h3",{id:"combobox"},"Combobox ",Object(c.b)("a",{name:"h2o_wave.types.Combobox"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"class ",Object(c.b)("span",{class:"ident"},"Combobox"),"(name:\xa0str, label:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, placeholder:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, value:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, choices:\xa0Union[List[str],\xa0NoneType]\xa0=\xa0None, error:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, disabled:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, visible:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, tooltip:\xa0Union[str,\xa0NoneType]\xa0=\xa0None)"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Create a combobox."),Object(c.b)("p",null,"A combobox is a list in which the selected item is always visible, and the others are visible on demand by clicking a drop-down button or by typing in the input. They are used to simplify the design and make a choice within the UI."),Object(c.b)("p",null,"When closed, only the selected item is visible. When users click the drop-down button, all the options become visible. To change the value, users open the list and click another value or use the arrow keys (up and down) to select a new value. When collapsed the user can select a new value by typing.")),Object(c.b)("h4",{id:"static-methods-9"},"Static methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"load-9"},"load ",Object(c.b)("a",{name:"h2o_wave.types.Combobox.load"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"load"),"(_Combobox__d:\xa0Dict) \u2011>\xa0",Object(c.b)("a",{title:"h2o_wave.types.Combobox",href:"#h2o_wave.types.Combobox"},"Combobox")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Creates an instance of this class using the contents of a dict."))))),Object(c.b)("h4",{id:"instance-variables-9"},"Instance variables"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{id:"h2o_wave.types.Combobox.choices",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"choices")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The choices to be presented.")),Object(c.b)("div",{id:"h2o_wave.types.Combobox.disabled",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"disabled")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"True if this field is disabled.")),Object(c.b)("div",{id:"h2o_wave.types.Combobox.error",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"error")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Text to be displayed as an error below the text box.")),Object(c.b)("div",{id:"h2o_wave.types.Combobox.label",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"label")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Text to be displayed alongside the component.")),Object(c.b)("div",{id:"h2o_wave.types.Combobox.name",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"name")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"An identifying name for this component.")),Object(c.b)("div",{id:"h2o_wave.types.Combobox.placeholder",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"placeholder")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"A string that provides a brief hint to the user as to what kind of information is expected in the field.")),Object(c.b)("div",{id:"h2o_wave.types.Combobox.tooltip",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"tooltip")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"An optional tooltip message displayed when a user clicks the help icon to the right of the component.")),Object(c.b)("div",{id:"h2o_wave.types.Combobox.value",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"value")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The name of the selected choice.")),Object(c.b)("div",{id:"h2o_wave.types.Combobox.visible",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"visible")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"True if the component should be visible. Defaults to true."))),Object(c.b)("h4",{id:"methods-9"},"Methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"dump-9"},"dump ",Object(c.b)("a",{name:"h2o_wave.types.Combobox.dump"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"dump"),"(self) \u2011>\xa0Dict"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Returns the contents of this object as a dict."))))))),Object(c.b)("div",{className:"api"},Object(c.b)("h3",{id:"command"},"Command ",Object(c.b)("a",{name:"h2o_wave.types.Command"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"class ",Object(c.b)("span",{class:"ident"},"Command"),"(name:\xa0str, label:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, caption:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, icon:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, items:\xa0Union[List[ForwardRef('",Object(c.b)("a",{title:"h2o_wave.types.Command",href:"#h2o_wave.types.Command"},"Command"),"')],\xa0NoneType]\xa0=\xa0None, data:\xa0Union[str,\xa0NoneType]\xa0=\xa0None)"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Create a command."),Object(c.b)("p",null,"Commands are typically displayed as context menu items or toolbar button.")),Object(c.b)("h4",{id:"static-methods-10"},"Static methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"load-10"},"load ",Object(c.b)("a",{name:"h2o_wave.types.Command.load"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"load"),"(_Command__d:\xa0Dict) \u2011>\xa0",Object(c.b)("a",{title:"h2o_wave.types.Command",href:"#h2o_wave.types.Command"},"Command")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Creates an instance of this class using the contents of a dict."))))),Object(c.b)("h4",{id:"instance-variables-10"},"Instance variables"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{id:"h2o_wave.types.Command.caption",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"caption")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The caption for this command (typically a tooltip).")),Object(c.b)("div",{id:"h2o_wave.types.Command.data",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"data")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Data associated with this command, if any.")),Object(c.b)("div",{id:"h2o_wave.types.Command.icon",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"icon")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The icon to be displayed for this command.")),Object(c.b)("div",{id:"h2o_wave.types.Command.items",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"items")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Sub-commands, if any")),Object(c.b)("div",{id:"h2o_wave.types.Command.label",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"label")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The text displayed for this command.")),Object(c.b)("div",{id:"h2o_wave.types.Command.name",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"name")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"An identifying name for this component. If the name is prefixed with a '#', the command sets the location hash to the name when executed."))),Object(c.b)("h4",{id:"methods-10"},"Methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"dump-10"},"dump ",Object(c.b)("a",{name:"h2o_wave.types.Command.dump"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"dump"),"(self) \u2011>\xa0Dict"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Returns the contents of this object as a dict."))))))),Object(c.b)("div",{className:"api"},Object(c.b)("h3",{id:"component"},"Component ",Object(c.b)("a",{name:"h2o_wave.types.Component"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"class ",Object(c.b)("span",{class:"ident"},"Component"),"(text:\xa0Union[",Object(c.b)("a",{title:"h2o_wave.types.Text",href:"#h2o_wave.types.Text"},"Text"),",\xa0NoneType]\xa0=\xa0None, text_xl:\xa0Union[",Object(c.b)("a",{title:"h2o_wave.types.TextXl",href:"#h2o_wave.types.TextXl"},"TextXl"),",\xa0NoneType]\xa0=\xa0None, text_l:\xa0Union[",Object(c.b)("a",{title:"h2o_wave.types.TextL",href:"#h2o_wave.types.TextL"},"TextL"),",\xa0NoneType]\xa0=\xa0None, text_m:\xa0Union[",Object(c.b)("a",{title:"h2o_wave.types.TextM",href:"#h2o_wave.types.TextM"},"TextM"),",\xa0NoneType]\xa0=\xa0None, text_s:\xa0Union[",Object(c.b)("a",{title:"h2o_wave.types.TextS",href:"#h2o_wave.types.TextS"},"TextS"),",\xa0NoneType]\xa0=\xa0None, text_xs:\xa0Union[",Object(c.b)("a",{title:"h2o_wave.types.TextXs",href:"#h2o_wave.types.TextXs"},"TextXs"),",\xa0NoneType]\xa0=\xa0None, label:\xa0Union[",Object(c.b)("a",{title:"h2o_wave.types.Label",href:"#h2o_wave.types.Label"},"Label"),",\xa0NoneType]\xa0=\xa0None, separator:\xa0Union[",Object(c.b)("a",{title:"h2o_wave.types.Separator",href:"#h2o_wave.types.Separator"},"Separator"),",\xa0NoneType]\xa0=\xa0None, progress:\xa0Union[",Object(c.b)("a",{title:"h2o_wave.types.Progress",href:"#h2o_wave.types.Progress"},"Progress"),",\xa0NoneType]\xa0=\xa0None, message_bar:\xa0Union[",Object(c.b)("a",{title:"h2o_wave.types.MessageBar",href:"#h2o_wave.types.MessageBar"},"MessageBar"),",\xa0NoneType]\xa0=\xa0None, textbox:\xa0Union[",Object(c.b)("a",{title:"h2o_wave.types.Textbox",href:"#h2o_wave.types.Textbox"},"Textbox"),",\xa0NoneType]\xa0=\xa0None, checkbox:\xa0Union[",Object(c.b)("a",{title:"h2o_wave.types.Checkbox",href:"#h2o_wave.types.Checkbox"},"Checkbox"),",\xa0NoneType]\xa0=\xa0None, toggle:\xa0Union[",Object(c.b)("a",{title:"h2o_wave.types.Toggle",href:"#h2o_wave.types.Toggle"},"Toggle"),",\xa0NoneType]\xa0=\xa0None, choice_group:\xa0Union[",Object(c.b)("a",{title:"h2o_wave.types.ChoiceGroup",href:"#h2o_wave.types.ChoiceGroup"},"ChoiceGroup"),",\xa0NoneType]\xa0=\xa0None, checklist:\xa0Union[",Object(c.b)("a",{title:"h2o_wave.types.Checklist",href:"#h2o_wave.types.Checklist"},"Checklist"),",\xa0NoneType]\xa0=\xa0None, dropdown:\xa0Union[",Object(c.b)("a",{title:"h2o_wave.types.Dropdown",href:"#h2o_wave.types.Dropdown"},"Dropdown"),",\xa0NoneType]\xa0=\xa0None, combobox:\xa0Union[",Object(c.b)("a",{title:"h2o_wave.types.Combobox",href:"#h2o_wave.types.Combobox"},"Combobox"),",\xa0NoneType]\xa0=\xa0None, slider:\xa0Union[",Object(c.b)("a",{title:"h2o_wave.types.Slider",href:"#h2o_wave.types.Slider"},"Slider"),",\xa0NoneType]\xa0=\xa0None, spinbox:\xa0Union[",Object(c.b)("a",{title:"h2o_wave.types.Spinbox",href:"#h2o_wave.types.Spinbox"},"Spinbox"),",\xa0NoneType]\xa0=\xa0None, date_picker:\xa0Union[",Object(c.b)("a",{title:"h2o_wave.types.DatePicker",href:"#h2o_wave.types.DatePicker"},"DatePicker"),",\xa0NoneType]\xa0=\xa0None, color_picker:\xa0Union[",Object(c.b)("a",{title:"h2o_wave.types.ColorPicker",href:"#h2o_wave.types.ColorPicker"},"ColorPicker"),",\xa0NoneType]\xa0=\xa0None, button:\xa0Union[",Object(c.b)("a",{title:"h2o_wave.types.Button",href:"#h2o_wave.types.Button"},"Button"),",\xa0NoneType]\xa0=\xa0None, buttons:\xa0Union[",Object(c.b)("a",{title:"h2o_wave.types.Buttons",href:"#h2o_wave.types.Buttons"},"Buttons"),",\xa0NoneType]\xa0=\xa0None, file_upload:\xa0Union[",Object(c.b)("a",{title:"h2o_wave.types.FileUpload",href:"#h2o_wave.types.FileUpload"},"FileUpload"),",\xa0NoneType]\xa0=\xa0None, table:\xa0Union[",Object(c.b)("a",{title:"h2o_wave.types.Table",href:"#h2o_wave.types.Table"},"Table"),",\xa0NoneType]\xa0=\xa0None, link:\xa0Union[",Object(c.b)("a",{title:"h2o_wave.types.Link",href:"#h2o_wave.types.Link"},"Link"),",\xa0NoneType]\xa0=\xa0None, tabs:\xa0Union[",Object(c.b)("a",{title:"h2o_wave.types.Tabs",href:"#h2o_wave.types.Tabs"},"Tabs"),",\xa0NoneType]\xa0=\xa0None, expander:\xa0Union[",Object(c.b)("a",{title:"h2o_wave.types.Expander",href:"#h2o_wave.types.Expander"},"Expander"),",\xa0NoneType]\xa0=\xa0None, frame:\xa0Union[",Object(c.b)("a",{title:"h2o_wave.types.Frame",href:"#h2o_wave.types.Frame"},"Frame"),",\xa0NoneType]\xa0=\xa0None, markup:\xa0Union[",Object(c.b)("a",{title:"h2o_wave.types.Markup",href:"#h2o_wave.types.Markup"},"Markup"),",\xa0NoneType]\xa0=\xa0None, template:\xa0Union[",Object(c.b)("a",{title:"h2o_wave.types.Template",href:"#h2o_wave.types.Template"},"Template"),",\xa0NoneType]\xa0=\xa0None, picker:\xa0Union[",Object(c.b)("a",{title:"h2o_wave.types.Picker",href:"#h2o_wave.types.Picker"},"Picker"),",\xa0NoneType]\xa0=\xa0None, range_slider:\xa0Union[",Object(c.b)("a",{title:"h2o_wave.types.RangeSlider",href:"#h2o_wave.types.RangeSlider"},"RangeSlider"),",\xa0NoneType]\xa0=\xa0None, stepper:\xa0Union[",Object(c.b)("a",{title:"h2o_wave.types.Stepper",href:"#h2o_wave.types.Stepper"},"Stepper"),",\xa0NoneType]\xa0=\xa0None, visualization:\xa0Union[",Object(c.b)("a",{title:"h2o_wave.types.Visualization",href:"#h2o_wave.types.Visualization"},"Visualization"),",\xa0NoneType]\xa0=\xa0None, vega_visualization:\xa0Union[",Object(c.b)("a",{title:"h2o_wave.types.VegaVisualization",href:"#h2o_wave.types.VegaVisualization"},"VegaVisualization"),",\xa0NoneType]\xa0=\xa0None)"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Create a component.")),Object(c.b)("h4",{id:"static-methods-11"},"Static methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"load-11"},"load ",Object(c.b)("a",{name:"h2o_wave.types.Component.load"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"load"),"(_Component__d:\xa0Dict) \u2011>\xa0",Object(c.b)("a",{title:"h2o_wave.types.Component",href:"#h2o_wave.types.Component"},"Component")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Creates an instance of this class using the contents of a dict."))))),Object(c.b)("h4",{id:"instance-variables-11"},"Instance variables"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{id:"h2o_wave.types.Component.button",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"button")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Button.")),Object(c.b)("div",{id:"h2o_wave.types.Component.buttons",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"buttons")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Button set.")),Object(c.b)("div",{id:"h2o_wave.types.Component.checkbox",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"checkbox")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Checkbox.")),Object(c.b)("div",{id:"h2o_wave.types.Component.checklist",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"checklist")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Checklist.")),Object(c.b)("div",{id:"h2o_wave.types.Component.choice_group",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"choice_group")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Choice group.")),Object(c.b)("div",{id:"h2o_wave.types.Component.color_picker",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"color_picker")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Color picker.")),Object(c.b)("div",{id:"h2o_wave.types.Component.combobox",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"combobox")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Combobox.")),Object(c.b)("div",{id:"h2o_wave.types.Component.date_picker",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"date_picker")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Date picker.")),Object(c.b)("div",{id:"h2o_wave.types.Component.dropdown",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"dropdown")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Dropdown.")),Object(c.b)("div",{id:"h2o_wave.types.Component.expander",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"expander")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Expander.")),Object(c.b)("div",{id:"h2o_wave.types.Component.file_upload",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"file_upload")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"File upload.")),Object(c.b)("div",{id:"h2o_wave.types.Component.frame",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"frame")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Frame.")),Object(c.b)("div",{id:"h2o_wave.types.Component.label",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"label")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Label.")),Object(c.b)("div",{id:"h2o_wave.types.Component.link",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"link")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Link.")),Object(c.b)("div",{id:"h2o_wave.types.Component.markup",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"markup")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Markup")),Object(c.b)("div",{id:"h2o_wave.types.Component.message_bar",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"message_bar")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Message bar.")),Object(c.b)("div",{id:"h2o_wave.types.Component.picker",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"picker")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Picker.")),Object(c.b)("div",{id:"h2o_wave.types.Component.progress",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"progress")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Progress bar.")),Object(c.b)("div",{id:"h2o_wave.types.Component.range_slider",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"range_slider")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Range Slider.")),Object(c.b)("div",{id:"h2o_wave.types.Component.separator",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"separator")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Separator.")),Object(c.b)("div",{id:"h2o_wave.types.Component.slider",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"slider")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Slider.")),Object(c.b)("div",{id:"h2o_wave.types.Component.spinbox",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"spinbox")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Spinbox.")),Object(c.b)("div",{id:"h2o_wave.types.Component.stepper",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"stepper")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Stepper.")),Object(c.b)("div",{id:"h2o_wave.types.Component.table",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"table")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Table.")),Object(c.b)("div",{id:"h2o_wave.types.Component.tabs",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"tabs")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Tabs.")),Object(c.b)("div",{id:"h2o_wave.types.Component.template",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"template")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Template")),Object(c.b)("div",{id:"h2o_wave.types.Component.text",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"text")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Text block.")),Object(c.b)("div",{id:"h2o_wave.types.Component.text_l",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"text_l")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Large sized text block.")),Object(c.b)("div",{id:"h2o_wave.types.Component.text_m",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"text_m")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Medium sized text block.")),Object(c.b)("div",{id:"h2o_wave.types.Component.text_s",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"text_s")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Small sized text block.")),Object(c.b)("div",{id:"h2o_wave.types.Component.text_xl",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"text_xl")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Extra-large sized text block.")),Object(c.b)("div",{id:"h2o_wave.types.Component.text_xs",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"text_xs")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Extra-small sized text block.")),Object(c.b)("div",{id:"h2o_wave.types.Component.textbox",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"textbox")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Textbox.")),Object(c.b)("div",{id:"h2o_wave.types.Component.toggle",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"toggle")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Toggle.")),Object(c.b)("div",{id:"h2o_wave.types.Component.vega_visualization",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"vega_visualization")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Vega-lite Visualization.")),Object(c.b)("div",{id:"h2o_wave.types.Component.visualization",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"visualization")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Visualization."))),Object(c.b)("h4",{id:"methods-11"},"Methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"dump-11"},"dump ",Object(c.b)("a",{name:"h2o_wave.types.Component.dump"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"dump"),"(self) \u2011>\xa0Dict"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Returns the contents of this object as a dict."))))))),Object(c.b)("div",{className:"api"},Object(c.b)("h3",{id:"datepicker"},"DatePicker ",Object(c.b)("a",{name:"h2o_wave.types.DatePicker"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"class ",Object(c.b)("span",{class:"ident"},"DatePicker"),"(name:\xa0str, label:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, placeholder:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, value:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, disabled:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, trigger:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, visible:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, tooltip:\xa0Union[str,\xa0NoneType]\xa0=\xa0None)"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Create a date picker."),Object(c.b)("p",null,"A date picker allows a user to pick a date value.")),Object(c.b)("h4",{id:"static-methods-12"},"Static methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"load-12"},"load ",Object(c.b)("a",{name:"h2o_wave.types.DatePicker.load"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"load"),"(_DatePicker__d:\xa0Dict) \u2011>\xa0",Object(c.b)("a",{title:"h2o_wave.types.DatePicker",href:"#h2o_wave.types.DatePicker"},"DatePicker")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Creates an instance of this class using the contents of a dict."))))),Object(c.b)("h4",{id:"instance-variables-12"},"Instance variables"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{id:"h2o_wave.types.DatePicker.disabled",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"disabled")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"True if this field is disabled.")),Object(c.b)("div",{id:"h2o_wave.types.DatePicker.label",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"label")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Text to be displayed alongside the component.")),Object(c.b)("div",{id:"h2o_wave.types.DatePicker.name",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"name")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"An identifying name for this component.")),Object(c.b)("div",{id:"h2o_wave.types.DatePicker.placeholder",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"placeholder")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"A string that provides a brief hint to the user as to what kind of information is expected in the field.")),Object(c.b)("div",{id:"h2o_wave.types.DatePicker.tooltip",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"tooltip")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"An optional tooltip message displayed when a user clicks the help icon to the right of the component.")),Object(c.b)("div",{id:"h2o_wave.types.DatePicker.trigger",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"trigger")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"True if the form should be submitted when the datepicker value changes.")),Object(c.b)("div",{id:"h2o_wave.types.DatePicker.value",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"value")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The date value in YYYY-MM-DD format.")),Object(c.b)("div",{id:"h2o_wave.types.DatePicker.visible",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"visible")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"True if the component should be visible. Defaults to true."))),Object(c.b)("h4",{id:"methods-12"},"Methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"dump-12"},"dump ",Object(c.b)("a",{name:"h2o_wave.types.DatePicker.dump"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"dump"),"(self) \u2011>\xa0Dict"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Returns the contents of this object as a dict."))))))),Object(c.b)("div",{className:"api"},Object(c.b)("h3",{id:"dropdown"},"Dropdown ",Object(c.b)("a",{name:"h2o_wave.types.Dropdown"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"class ",Object(c.b)("span",{class:"ident"},"Dropdown"),"(name:\xa0str, label:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, placeholder:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, value:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, values:\xa0Union[List[str],\xa0NoneType]\xa0=\xa0None, choices:\xa0Union[List[",Object(c.b)("a",{title:"h2o_wave.types.Choice",href:"#h2o_wave.types.Choice"},"Choice"),"],\xa0NoneType]\xa0=\xa0None, required:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, disabled:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, trigger:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, visible:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, tooltip:\xa0Union[str,\xa0NoneType]\xa0=\xa0None)"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Create a dropdown."),Object(c.b)("p",null,"A dropdown is a list in which the selected item is always visible, and the others are visible on demand by clicking a drop-down button. They are used to simplify the design and make a choice within the UI. When closed, only the selected item is visible. When users click the drop-down button, all the options become visible."),Object(c.b)("p",null,"To change the value, users open the list and click another value or use the arrow keys (up and down) to select a new value."),Object(c.b)("p",null,"Note: Use either the 'value' parameter or the 'values' parameter. Setting the 'values' parameter renders a multi-select dropdown.")),Object(c.b)("h4",{id:"static-methods-13"},"Static methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"load-13"},"load ",Object(c.b)("a",{name:"h2o_wave.types.Dropdown.load"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"load"),"(_Dropdown__d:\xa0Dict) \u2011>\xa0",Object(c.b)("a",{title:"h2o_wave.types.Dropdown",href:"#h2o_wave.types.Dropdown"},"Dropdown")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Creates an instance of this class using the contents of a dict."))))),Object(c.b)("h4",{id:"instance-variables-13"},"Instance variables"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{id:"h2o_wave.types.Dropdown.choices",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"choices")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The choices to be presented.")),Object(c.b)("div",{id:"h2o_wave.types.Dropdown.disabled",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"disabled")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"True if this field is disabled.")),Object(c.b)("div",{id:"h2o_wave.types.Dropdown.label",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"label")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Text to be displayed alongside the component.")),Object(c.b)("div",{id:"h2o_wave.types.Dropdown.name",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"name")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"An identifying name for this component.")),Object(c.b)("div",{id:"h2o_wave.types.Dropdown.placeholder",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"placeholder")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"A string that provides a brief hint to the user as to what kind of information is expected in the field.")),Object(c.b)("div",{id:"h2o_wave.types.Dropdown.required",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"required")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"True if this is a required field.")),Object(c.b)("div",{id:"h2o_wave.types.Dropdown.tooltip",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"tooltip")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"An optional tooltip message displayed when a user clicks the help icon to the right of the component.")),Object(c.b)("div",{id:"h2o_wave.types.Dropdown.trigger",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"trigger")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"True if the form should be submitted when the dropdown value changes.")),Object(c.b)("div",{id:"h2o_wave.types.Dropdown.value",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"value")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The name of the selected choice.")),Object(c.b)("div",{id:"h2o_wave.types.Dropdown.values",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"values")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The names of the selected choices. If this parameter is set, multiple selections will be allowed.")),Object(c.b)("div",{id:"h2o_wave.types.Dropdown.visible",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"visible")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"True if the component should be visible. Defaults to true."))),Object(c.b)("h4",{id:"methods-13"},"Methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"dump-13"},"dump ",Object(c.b)("a",{name:"h2o_wave.types.Dropdown.dump"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"dump"),"(self) \u2011>\xa0Dict"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Returns the contents of this object as a dict."))))))),Object(c.b)("div",{className:"api"},Object(c.b)("h3",{id:"expander"},"Expander ",Object(c.b)("a",{name:"h2o_wave.types.Expander"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"class ",Object(c.b)("span",{class:"ident"},"Expander"),"(name:\xa0str, label:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, expanded:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, items:\xa0Union[List[ForwardRef('",Object(c.b)("a",{title:"h2o_wave.types.Component",href:"#h2o_wave.types.Component"},"Component"),"')],\xa0NoneType]\xa0=\xa0None, visible:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None)"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Creates a new expander."),Object(c.b)("p",null,"Expanders can be used to show or hide a group of related components.")),Object(c.b)("h4",{id:"static-methods-14"},"Static methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"load-14"},"load ",Object(c.b)("a",{name:"h2o_wave.types.Expander.load"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"load"),"(_Expander__d:\xa0Dict) \u2011>\xa0",Object(c.b)("a",{title:"h2o_wave.types.Expander",href:"#h2o_wave.types.Expander"},"Expander")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Creates an instance of this class using the contents of a dict."))))),Object(c.b)("h4",{id:"instance-variables-14"},"Instance variables"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{id:"h2o_wave.types.Expander.expanded",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"expanded")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"True if expanded, False if collapsed.")),Object(c.b)("div",{id:"h2o_wave.types.Expander.items",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"items")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"List of components to be hideable by the expander.")),Object(c.b)("div",{id:"h2o_wave.types.Expander.label",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"label")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The text displayed on the expander.")),Object(c.b)("div",{id:"h2o_wave.types.Expander.name",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"name")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"An identifying name for this component.")),Object(c.b)("div",{id:"h2o_wave.types.Expander.visible",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"visible")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"True if the component should be visible. Defaults to true."))),Object(c.b)("h4",{id:"methods-14"},"Methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"dump-14"},"dump ",Object(c.b)("a",{name:"h2o_wave.types.Expander.dump"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"dump"),"(self) \u2011>\xa0Dict"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Returns the contents of this object as a dict."))))))),Object(c.b)("div",{className:"api"},Object(c.b)("h3",{id:"fileupload"},"FileUpload ",Object(c.b)("a",{name:"h2o_wave.types.FileUpload"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"class ",Object(c.b)("span",{class:"ident"},"FileUpload"),"(name:\xa0str, label:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, multiple:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, file_extensions:\xa0Union[List[str],\xa0NoneType]\xa0=\xa0None, max_file_size:\xa0Union[float,\xa0NoneType]\xa0=\xa0None, max_size:\xa0Union[float,\xa0NoneType]\xa0=\xa0None, height:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, visible:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, tooltip:\xa0Union[str,\xa0NoneType]\xa0=\xa0None)"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Create a file upload component. A file upload component allows a user to browse, select and upload one or more files.")),Object(c.b)("h4",{id:"static-methods-15"},"Static methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"load-15"},"load ",Object(c.b)("a",{name:"h2o_wave.types.FileUpload.load"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"load"),"(_FileUpload__d:\xa0Dict) \u2011>\xa0",Object(c.b)("a",{title:"h2o_wave.types.FileUpload",href:"#h2o_wave.types.FileUpload"},"FileUpload")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Creates an instance of this class using the contents of a dict."))))),Object(c.b)("h4",{id:"instance-variables-15"},"Instance variables"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{id:"h2o_wave.types.FileUpload.file_extensions",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"file_extensions")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"List of allowed file extensions, e.g. ",Object(c.b)("code",null,"pdf"),", ",Object(c.b)("code",null,"docx"),", etc.")),Object(c.b)("div",{id:"h2o_wave.types.FileUpload.height",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"height")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The height of the file upload, e.g. '400px', '50%', etc.")),Object(c.b)("div",{id:"h2o_wave.types.FileUpload.label",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"label")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Text to be displayed alongside the component.")),Object(c.b)("div",{id:"h2o_wave.types.FileUpload.max_file_size",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"max_file_size")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Maximum allowed size (Mb) per file. Defaults to no limit.")),Object(c.b)("div",{id:"h2o_wave.types.FileUpload.max_size",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"max_size")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Maximum allowed size (Mb) for all files combined. Defaults to no limit.")),Object(c.b)("div",{id:"h2o_wave.types.FileUpload.multiple",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"multiple")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"True if the component should allow multiple files to be uploaded.")),Object(c.b)("div",{id:"h2o_wave.types.FileUpload.name",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"name")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"An identifying name for this component.")),Object(c.b)("div",{id:"h2o_wave.types.FileUpload.tooltip",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"tooltip")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"An optional tooltip message displayed when a user clicks the help icon to the right of the component.")),Object(c.b)("div",{id:"h2o_wave.types.FileUpload.visible",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"visible")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"True if the component should be visible. Defaults to true."))),Object(c.b)("h4",{id:"methods-15"},"Methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"dump-15"},"dump ",Object(c.b)("a",{name:"h2o_wave.types.FileUpload.dump"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"dump"),"(self) \u2011>\xa0Dict"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Returns the contents of this object as a dict."))))))),Object(c.b)("div",{className:"api"},Object(c.b)("h3",{id:"flexcard"},"FlexCard ",Object(c.b)("a",{name:"h2o_wave.types.FlexCard"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"class ",Object(c.b)("span",{class:"ident"},"FlexCard"),"(box:\xa0str, item_view:\xa0str, item_props:\xa0Union[dict,\xa0str], data:\xa0Union[",Object(c.b)("a",{title:"h2o_wave.core.Data",href:"core#h2o_wave.core.Data"},"Data"),",\xa0str], direction:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, justify:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, align:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, wrap:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, commands:\xa0Union[List[",Object(c.b)("a",{title:"h2o_wave.types.Command",href:"#h2o_wave.types.Command"},"Command"),"],\xa0NoneType]\xa0=\xa0None)"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"EXPERIMENTAL. DO NOT USE. Create a card containing other cards laid out using a one-dimensional model with flexible alignemnt and wrapping capabilities.")),Object(c.b)("h4",{id:"static-methods-16"},"Static methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"load-16"},"load ",Object(c.b)("a",{name:"h2o_wave.types.FlexCard.load"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"load"),"(_FlexCard__d:\xa0Dict) \u2011>\xa0",Object(c.b)("a",{title:"h2o_wave.types.FlexCard",href:"#h2o_wave.types.FlexCard"},"FlexCard")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Creates an instance of this class using the contents of a dict."))))),Object(c.b)("h4",{id:"instance-variables-16"},"Instance variables"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{id:"h2o_wave.types.FlexCard.align",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"align")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Layout strategy for cross axis. One of 'start', 'end', 'center', 'baseline', 'stretch'.")),Object(c.b)("div",{id:"h2o_wave.types.FlexCard.box",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"box")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"A string indicating how to place this component on the page.")),Object(c.b)("div",{id:"h2o_wave.types.FlexCard.commands",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"commands")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Contextual menu commands for this component.")),Object(c.b)("div",{id:"h2o_wave.types.FlexCard.data",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"data")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Data for this card.")),Object(c.b)("div",{id:"h2o_wave.types.FlexCard.direction",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"direction")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Layout direction. One of 'horizontal', 'vertical'.")),Object(c.b)("div",{id:"h2o_wave.types.FlexCard.item_props",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"item_props")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The child card properties.")),Object(c.b)("div",{id:"h2o_wave.types.FlexCard.item_view",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"item_view")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The child card type.")),Object(c.b)("div",{id:"h2o_wave.types.FlexCard.justify",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"justify")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Layout strategy for main axis. One of 'start', 'end', 'center', 'between', 'around'.")),Object(c.b)("div",{id:"h2o_wave.types.FlexCard.wrap",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"wrap")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Wrapping strategy. One of 'start', 'end', 'center', 'between', 'around', 'stretch'."))),Object(c.b)("h4",{id:"methods-16"},"Methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"dump-16"},"dump ",Object(c.b)("a",{name:"h2o_wave.types.FlexCard.dump"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"dump"),"(self) \u2011>\xa0Dict"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Returns the contents of this object as a dict."))))))),Object(c.b)("div",{className:"api"},Object(c.b)("h3",{id:"formcard"},"FormCard ",Object(c.b)("a",{name:"h2o_wave.types.FormCard"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"class ",Object(c.b)("span",{class:"ident"},"FormCard"),"(box:\xa0str, items:\xa0Union[List[",Object(c.b)("a",{title:"h2o_wave.types.Component",href:"#h2o_wave.types.Component"},"Component"),"],\xa0str], commands:\xa0Union[List[",Object(c.b)("a",{title:"h2o_wave.types.Command",href:"#h2o_wave.types.Command"},"Command"),"],\xa0NoneType]\xa0=\xa0None)"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Create a form.")),Object(c.b)("h4",{id:"static-methods-17"},"Static methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"load-17"},"load ",Object(c.b)("a",{name:"h2o_wave.types.FormCard.load"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"load"),"(_FormCard__d:\xa0Dict) \u2011>\xa0",Object(c.b)("a",{title:"h2o_wave.types.FormCard",href:"#h2o_wave.types.FormCard"},"FormCard")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Creates an instance of this class using the contents of a dict."))))),Object(c.b)("h4",{id:"instance-variables-17"},"Instance variables"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{id:"h2o_wave.types.FormCard.box",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"box")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"A string indicating how to place this component on the page.")),Object(c.b)("div",{id:"h2o_wave.types.FormCard.commands",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"commands")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Contextual menu commands for this component.")),Object(c.b)("div",{id:"h2o_wave.types.FormCard.items",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"items")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The components in this form."))),Object(c.b)("h4",{id:"methods-17"},"Methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"dump-17"},"dump ",Object(c.b)("a",{name:"h2o_wave.types.FormCard.dump"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"dump"),"(self) \u2011>\xa0Dict"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Returns the contents of this object as a dict."))))))),Object(c.b)("div",{className:"api"},Object(c.b)("h3",{id:"frame"},"Frame ",Object(c.b)("a",{name:"h2o_wave.types.Frame"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"class ",Object(c.b)("span",{class:"ident"},"Frame"),"(path:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, content:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, width:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, height:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, name:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, visible:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None)"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Create a new inline frame (an ",Object(c.b)("code",null,"iframe"),").")),Object(c.b)("h4",{id:"static-methods-18"},"Static methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"load-18"},"load ",Object(c.b)("a",{name:"h2o_wave.types.Frame.load"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"load"),"(_Frame__d:\xa0Dict) \u2011>\xa0",Object(c.b)("a",{title:"h2o_wave.types.Frame",href:"#h2o_wave.types.Frame"},"Frame")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Creates an instance of this class using the contents of a dict."))))),Object(c.b)("h4",{id:"instance-variables-18"},"Instance variables"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{id:"h2o_wave.types.Frame.content",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"content")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The HTML content of the page. A string containing ",Object(c.b)("code",null,"..."),".")),Object(c.b)("div",{id:"h2o_wave.types.Frame.height",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"height")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The height of the frame, e.g. ",Object(c.b)("code",null,"200px"),", ",Object(c.b)("code",null,"50%"),", etc. Defaults to ",Object(c.b)("code",null,"150px"),".")),Object(c.b)("div",{id:"h2o_wave.types.Frame.name",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"name")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"An identifying name for this component.")),Object(c.b)("div",{id:"h2o_wave.types.Frame.path",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"path")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The path or URL of the web page, e.g. ",Object(c.b)("code",null,"/foo.html")," or ",Object(c.b)("code",null,"http://example.com/foo.html"))),Object(c.b)("div",{id:"h2o_wave.types.Frame.visible",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"visible")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"True if the component should be visible. Defaults to true.")),Object(c.b)("div",{id:"h2o_wave.types.Frame.width",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"width")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The width of the frame, e.g. ",Object(c.b)("code",null,"200px"),", ",Object(c.b)("code",null,"50%"),", etc. Defaults to ",Object(c.b)("code",null,"100%"),"."))),Object(c.b)("h4",{id:"methods-18"},"Methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"dump-18"},"dump ",Object(c.b)("a",{name:"h2o_wave.types.Frame.dump"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"dump"),"(self) \u2011>\xa0Dict"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Returns the contents of this object as a dict."))))))),Object(c.b)("div",{className:"api"},Object(c.b)("h3",{id:"framecard"},"FrameCard ",Object(c.b)("a",{name:"h2o_wave.types.FrameCard"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"class ",Object(c.b)("span",{class:"ident"},"FrameCard"),"(box:\xa0str, title:\xa0str, path:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, content:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, commands:\xa0Union[List[",Object(c.b)("a",{title:"h2o_wave.types.Command",href:"#h2o_wave.types.Command"},"Command"),"],\xa0NoneType]\xa0=\xa0None)"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Render a card containing a HTML page inside an inline frame (an ",Object(c.b)("code",null,"iframe"),")."),Object(c.b)("p",null,"Either a path or content can be provided as arguments.")),Object(c.b)("h4",{id:"static-methods-19"},"Static methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"load-19"},"load ",Object(c.b)("a",{name:"h2o_wave.types.FrameCard.load"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"load"),"(_FrameCard__d:\xa0Dict) \u2011>\xa0",Object(c.b)("a",{title:"h2o_wave.types.FrameCard",href:"#h2o_wave.types.FrameCard"},"FrameCard")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Creates an instance of this class using the contents of a dict."))))),Object(c.b)("h4",{id:"instance-variables-19"},"Instance variables"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{id:"h2o_wave.types.FrameCard.box",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"box")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"A string indicating how to place this component on the page.")),Object(c.b)("div",{id:"h2o_wave.types.FrameCard.commands",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"commands")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Contextual menu commands for this component.")),Object(c.b)("div",{id:"h2o_wave.types.FrameCard.content",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"content")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The HTML content of the page. A string containing ",Object(c.b)("code",null,"..."))),Object(c.b)("div",{id:"h2o_wave.types.FrameCard.path",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"path")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The path or URL of the web page, e.g. ",Object(c.b)("code",null,"/foo.html")," or ",Object(c.b)("code",null,"http://example.com/foo.html"))),Object(c.b)("div",{id:"h2o_wave.types.FrameCard.title",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"title")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The title for this card."))),Object(c.b)("h4",{id:"methods-19"},"Methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"dump-19"},"dump ",Object(c.b)("a",{name:"h2o_wave.types.FrameCard.dump"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"dump"),"(self) \u2011>\xa0Dict"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Returns the contents of this object as a dict."))))))),Object(c.b)("div",{className:"api"},Object(c.b)("h3",{id:"graphicscard"},"GraphicsCard ",Object(c.b)("a",{name:"h2o_wave.types.GraphicsCard"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"class ",Object(c.b)("span",{class:"ident"},"GraphicsCard"),"(box:\xa0str, view_box:\xa0str, stage:\xa0Union[List[dict],\xa0str,\xa0NoneType]\xa0=\xa0None, scene:\xa0Union[",Object(c.b)("a",{title:"h2o_wave.core.Data",href:"core#h2o_wave.core.Data"},"Data"),",\xa0str,\xa0NoneType]\xa0=\xa0None, width:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, height:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, commands:\xa0Union[List[",Object(c.b)("a",{title:"h2o_wave.types.Command",href:"#h2o_wave.types.Command"},"Command"),"],\xa0NoneType]\xa0=\xa0None)"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Create a card for displaying vector graphics.")),Object(c.b)("h4",{id:"static-methods-20"},"Static methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"load-20"},"load ",Object(c.b)("a",{name:"h2o_wave.types.GraphicsCard.load"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"load"),"(_GraphicsCard__d:\xa0Dict) \u2011>\xa0",Object(c.b)("a",{title:"h2o_wave.types.GraphicsCard",href:"#h2o_wave.types.GraphicsCard"},"GraphicsCard")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Creates an instance of this class using the contents of a dict."))))),Object(c.b)("h4",{id:"instance-variables-20"},"Instance variables"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{id:"h2o_wave.types.GraphicsCard.box",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"box")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"A string indicating how to place this component on the page.")),Object(c.b)("div",{id:"h2o_wave.types.GraphicsCard.commands",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"commands")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Contextual menu commands for this component.")),Object(c.b)("div",{id:"h2o_wave.types.GraphicsCard.height",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"height")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The displayed height of the rectangular viewport. (Not the height of its coordinate system.)")),Object(c.b)("div",{id:"h2o_wave.types.GraphicsCard.scene",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"scene")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Foreground layer for rendering dynamic SVG elements.")),Object(c.b)("div",{id:"h2o_wave.types.GraphicsCard.stage",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"stage")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Background layer for rendering static SVG elements. Must be packed to conserve memory.")),Object(c.b)("div",{id:"h2o_wave.types.GraphicsCard.view_box",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"view_box")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The position and dimension of the SVG viewport, in user space. A space-separated list of four numbers: min-x, min-y, width and height. For example, '0 0 400 300'. See: ",Object(c.b)("a",{href:"https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/viewBox"},"https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/viewBox"))),Object(c.b)("div",{id:"h2o_wave.types.GraphicsCard.width",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"width")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The displayed width of the rectangular viewport. (Not the width of its coordinate system.)"))),Object(c.b)("h4",{id:"methods-20"},"Methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"dump-20"},"dump ",Object(c.b)("a",{name:"h2o_wave.types.GraphicsCard.dump"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"dump"),"(self) \u2011>\xa0Dict"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Returns the contents of this object as a dict."))))))),Object(c.b)("div",{className:"api"},Object(c.b)("h3",{id:"gridcard"},"GridCard ",Object(c.b)("a",{name:"h2o_wave.types.GridCard"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"class ",Object(c.b)("span",{class:"ident"},"GridCard"),"(box:\xa0str, title:\xa0str, cells:\xa0Union[",Object(c.b)("a",{title:"h2o_wave.core.Data",href:"core#h2o_wave.core.Data"},"Data"),",\xa0str], data:\xa0Union[",Object(c.b)("a",{title:"h2o_wave.core.Data",href:"core#h2o_wave.core.Data"},"Data"),",\xa0str], commands:\xa0Union[List[",Object(c.b)("a",{title:"h2o_wave.types.Command",href:"#h2o_wave.types.Command"},"Command"),"],\xa0NoneType]\xa0=\xa0None)"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"EXPERIMENTAL. DO NOT USE.")),Object(c.b)("h4",{id:"static-methods-21"},"Static methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"load-21"},"load ",Object(c.b)("a",{name:"h2o_wave.types.GridCard.load"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"load"),"(_GridCard__d:\xa0Dict) \u2011>\xa0",Object(c.b)("a",{title:"h2o_wave.types.GridCard",href:"#h2o_wave.types.GridCard"},"GridCard")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Creates an instance of this class using the contents of a dict."))))),Object(c.b)("h4",{id:"instance-variables-21"},"Instance variables"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{id:"h2o_wave.types.GridCard.box",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"box")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"A string indicating how to place this component on the page.")),Object(c.b)("div",{id:"h2o_wave.types.GridCard.cells",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"cells")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"EXPERIMENTAL. DO NOT USE.")),Object(c.b)("div",{id:"h2o_wave.types.GridCard.commands",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"commands")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Contextual menu commands for this component.")),Object(c.b)("div",{id:"h2o_wave.types.GridCard.data",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"data")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"EXPERIMENTAL. DO NOT USE.")),Object(c.b)("div",{id:"h2o_wave.types.GridCard.title",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"title")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"EXPERIMENTAL. DO NOT USE."))),Object(c.b)("h4",{id:"methods-21"},"Methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"dump-21"},"dump ",Object(c.b)("a",{name:"h2o_wave.types.GridCard.dump"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"dump"),"(self) \u2011>\xa0Dict"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Returns the contents of this object as a dict."))))))),Object(c.b)("div",{className:"api"},Object(c.b)("h3",{id:"headercard"},"HeaderCard ",Object(c.b)("a",{name:"h2o_wave.types.HeaderCard"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"class ",Object(c.b)("span",{class:"ident"},"HeaderCard"),"(box:\xa0str, title:\xa0str, subtitle:\xa0str, icon:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, icon_color:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, commands:\xa0Union[List[",Object(c.b)("a",{title:"h2o_wave.types.Command",href:"#h2o_wave.types.Command"},"Command"),"],\xa0NoneType]\xa0=\xa0None)"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Render a card containing a HTML page inside an inline frame (iframe)."),Object(c.b)("p",null,"Either a path or content can be provided as arguments.")),Object(c.b)("h4",{id:"static-methods-22"},"Static methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"load-22"},"load ",Object(c.b)("a",{name:"h2o_wave.types.HeaderCard.load"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"load"),"(_HeaderCard__d:\xa0Dict) \u2011>\xa0",Object(c.b)("a",{title:"h2o_wave.types.HeaderCard",href:"#h2o_wave.types.HeaderCard"},"HeaderCard")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Creates an instance of this class using the contents of a dict."))))),Object(c.b)("h4",{id:"instance-variables-22"},"Instance variables"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{id:"h2o_wave.types.HeaderCard.box",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"box")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"A string indicating how to place this component on the page.")),Object(c.b)("div",{id:"h2o_wave.types.HeaderCard.commands",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"commands")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Contextual menu commands for this component.")),Object(c.b)("div",{id:"h2o_wave.types.HeaderCard.icon",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"icon")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The icon type, displayed to the left.")),Object(c.b)("div",{id:"h2o_wave.types.HeaderCard.icon_color",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"icon_color")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The icon's color.")),Object(c.b)("div",{id:"h2o_wave.types.HeaderCard.subtitle",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"subtitle")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The subtitle, displayed below the title.")),Object(c.b)("div",{id:"h2o_wave.types.HeaderCard.title",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"title")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The title."))),Object(c.b)("h4",{id:"methods-22"},"Methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"dump-22"},"dump ",Object(c.b)("a",{name:"h2o_wave.types.HeaderCard.dump"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"dump"),"(self) \u2011>\xa0Dict"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Returns the contents of this object as a dict."))))))),Object(c.b)("div",{className:"api"},Object(c.b)("h3",{id:"icontablecelltype"},"IconTableCellType ",Object(c.b)("a",{name:"h2o_wave.types.IconTableCellType"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"class ",Object(c.b)("span",{class:"ident"},"IconTableCellType"),"(color:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, name:\xa0Union[str,\xa0NoneType]\xa0=\xa0None)"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Create a cell type that renders a column's cells as icons instead of plain text. If set on a column, the cell value is interpreted as the name of the icon to be displayed.")),Object(c.b)("h4",{id:"static-methods-23"},"Static methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"load-23"},"load ",Object(c.b)("a",{name:"h2o_wave.types.IconTableCellType.load"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"load"),"(_IconTableCellType__d:\xa0Dict) \u2011>\xa0",Object(c.b)("a",{title:"h2o_wave.types.IconTableCellType",href:"#h2o_wave.types.IconTableCellType"},"IconTableCellType")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Creates an instance of this class using the contents of a dict."))))),Object(c.b)("h4",{id:"instance-variables-23"},"Instance variables"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{id:"h2o_wave.types.IconTableCellType.color",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"color")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Icon color.")),Object(c.b)("div",{id:"h2o_wave.types.IconTableCellType.name",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"name")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"An identifying name for this component."))),Object(c.b)("h4",{id:"methods-23"},"Methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"dump-23"},"dump ",Object(c.b)("a",{name:"h2o_wave.types.IconTableCellType.dump"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"dump"),"(self) \u2011>\xa0Dict"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Returns the contents of this object as a dict."))))))),Object(c.b)("div",{className:"api"},Object(c.b)("h3",{id:"imagecard"},"ImageCard ",Object(c.b)("a",{name:"h2o_wave.types.ImageCard"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"class ",Object(c.b)("span",{class:"ident"},"ImageCard"),"(box:\xa0str, title:\xa0str, type:\xa0str, image:\xa0str, data:\xa0Union[dict,\xa0str,\xa0NoneType]\xa0=\xa0None, commands:\xa0Union[List[",Object(c.b)("a",{title:"h2o_wave.types.Command",href:"#h2o_wave.types.Command"},"Command"),"],\xa0NoneType]\xa0=\xa0None)"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Create a card that displays a base64-encoded image.")),Object(c.b)("h4",{id:"static-methods-24"},"Static methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"load-24"},"load ",Object(c.b)("a",{name:"h2o_wave.types.ImageCard.load"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"load"),"(_ImageCard__d:\xa0Dict) \u2011>\xa0",Object(c.b)("a",{title:"h2o_wave.types.ImageCard",href:"#h2o_wave.types.ImageCard"},"ImageCard")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Creates an instance of this class using the contents of a dict."))))),Object(c.b)("h4",{id:"instance-variables-24"},"Instance variables"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{id:"h2o_wave.types.ImageCard.box",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"box")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"A string indicating how to place this component on the page.")),Object(c.b)("div",{id:"h2o_wave.types.ImageCard.commands",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"commands")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Contextual menu commands for this component.")),Object(c.b)("div",{id:"h2o_wave.types.ImageCard.data",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"data")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Data for this card.")),Object(c.b)("div",{id:"h2o_wave.types.ImageCard.image",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"image")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Image data, base64-encoded.")),Object(c.b)("div",{id:"h2o_wave.types.ImageCard.title",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"title")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The card's title.")),Object(c.b)("div",{id:"h2o_wave.types.ImageCard.type",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"type")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The image MIME subtype. One of ",Object(c.b)("code",null,"apng"),", ",Object(c.b)("code",null,"bmp"),", ",Object(c.b)("code",null,"gif"),", ",Object(c.b)("code",null,"x-icon"),", ",Object(c.b)("code",null,"jpeg"),", ",Object(c.b)("code",null,"png"),", ",Object(c.b)("code",null,"webp"),"."))),Object(c.b)("h4",{id:"methods-24"},"Methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"dump-24"},"dump ",Object(c.b)("a",{name:"h2o_wave.types.ImageCard.dump"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"dump"),"(self) \u2011>\xa0Dict"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Returns the contents of this object as a dict."))))))),Object(c.b)("div",{className:"api"},Object(c.b)("h3",{id:"label"},"Label ",Object(c.b)("a",{name:"h2o_wave.types.Label"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"class ",Object(c.b)("span",{class:"ident"},"Label"),"(label:\xa0str, required:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, disabled:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, visible:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, tooltip:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, name:\xa0Union[str,\xa0NoneType]\xa0=\xa0None)"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Create a label."),Object(c.b)("p",null,"Labels give a name or title to a component or group of components. Labels should be in close proximity to the component or group they are paired with. Some components, such as textboxes, dropdowns, or toggles, already have labels incorporated, but other components may optionally add a Label if it helps inform the user of the component\u2019s purpose.")),Object(c.b)("h4",{id:"static-methods-25"},"Static methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"load-25"},"load ",Object(c.b)("a",{name:"h2o_wave.types.Label.load"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"load"),"(_Label__d:\xa0Dict) \u2011>\xa0",Object(c.b)("a",{title:"h2o_wave.types.Label",href:"#h2o_wave.types.Label"},"Label")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Creates an instance of this class using the contents of a dict."))))),Object(c.b)("h4",{id:"instance-variables-25"},"Instance variables"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{id:"h2o_wave.types.Label.disabled",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"disabled")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"True if the label should be disabled.")),Object(c.b)("div",{id:"h2o_wave.types.Label.label",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"label")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The text displayed on the label.")),Object(c.b)("div",{id:"h2o_wave.types.Label.name",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"name")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"An identifying name for this component.")),Object(c.b)("div",{id:"h2o_wave.types.Label.required",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"required")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"True if the field is required.")),Object(c.b)("div",{id:"h2o_wave.types.Label.tooltip",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"tooltip")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"An optional tooltip message displayed when a user clicks the help icon to the right of the component.")),Object(c.b)("div",{id:"h2o_wave.types.Label.visible",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"visible")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"True if the component should be visible. Defaults to true."))),Object(c.b)("h4",{id:"methods-25"},"Methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"dump-25"},"dump ",Object(c.b)("a",{name:"h2o_wave.types.Label.dump"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"dump"),"(self) \u2011>\xa0Dict"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Returns the contents of this object as a dict."))))))),Object(c.b)("div",{className:"api"},Object(c.b)("h3",{id:"largebarstatcard"},"LargeBarStatCard ",Object(c.b)("a",{name:"h2o_wave.types.LargeBarStatCard"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"class ",Object(c.b)("span",{class:"ident"},"LargeBarStatCard"),"(box:\xa0str, title:\xa0str, caption:\xa0str, value:\xa0str, aux_value:\xa0str, value_caption:\xa0str, aux_value_caption:\xa0str, progress:\xa0float, plot_color:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, data:\xa0Union[dict,\xa0str,\xa0NoneType]\xa0=\xa0None, commands:\xa0Union[List[",Object(c.b)("a",{title:"h2o_wave.types.Command",href:"#h2o_wave.types.Command"},"Command"),"],\xa0NoneType]\xa0=\xa0None)"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Create a large captioned card displaying a primary value, an auxiliary value and a progress bar, with captions for each value.")),Object(c.b)("h4",{id:"static-methods-26"},"Static methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"load-26"},"load ",Object(c.b)("a",{name:"h2o_wave.types.LargeBarStatCard.load"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"load"),"(_LargeBarStatCard__d:\xa0Dict) \u2011>\xa0",Object(c.b)("a",{title:"h2o_wave.types.LargeBarStatCard",href:"#h2o_wave.types.LargeBarStatCard"},"LargeBarStatCard")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Creates an instance of this class using the contents of a dict."))))),Object(c.b)("h4",{id:"instance-variables-26"},"Instance variables"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{id:"h2o_wave.types.LargeBarStatCard.aux_value",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"aux_value")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The auxiliary value, typically a target value.")),Object(c.b)("div",{id:"h2o_wave.types.LargeBarStatCard.aux_value_caption",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"aux_value_caption")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The caption displayed below the auxiliary value.")),Object(c.b)("div",{id:"h2o_wave.types.LargeBarStatCard.box",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"box")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"A string indicating how to place this component on the page.")),Object(c.b)("div",{id:"h2o_wave.types.LargeBarStatCard.caption",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"caption")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The card's caption.")),Object(c.b)("div",{id:"h2o_wave.types.LargeBarStatCard.commands",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"commands")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Contextual menu commands for this component.")),Object(c.b)("div",{id:"h2o_wave.types.LargeBarStatCard.data",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"data")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Data for this card.")),Object(c.b)("div",{id:"h2o_wave.types.LargeBarStatCard.plot_color",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"plot_color")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The color of the progress bar.")),Object(c.b)("div",{id:"h2o_wave.types.LargeBarStatCard.progress",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"progress")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The value of the progress bar, between 0 and 1.")),Object(c.b)("div",{id:"h2o_wave.types.LargeBarStatCard.title",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"title")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The card's title.")),Object(c.b)("div",{id:"h2o_wave.types.LargeBarStatCard.value",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"value")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The primary value displayed.")),Object(c.b)("div",{id:"h2o_wave.types.LargeBarStatCard.value_caption",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"value_caption")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The caption displayed below the primary value."))),Object(c.b)("h4",{id:"methods-26"},"Methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"dump-26"},"dump ",Object(c.b)("a",{name:"h2o_wave.types.LargeBarStatCard.dump"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"dump"),"(self) \u2011>\xa0Dict"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Returns the contents of this object as a dict."))))))),Object(c.b)("div",{className:"api"},Object(c.b)("h3",{id:"largestatcard"},"LargeStatCard ",Object(c.b)("a",{name:"h2o_wave.types.LargeStatCard"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"class ",Object(c.b)("span",{class:"ident"},"LargeStatCard"),"(box:\xa0str, title:\xa0str, value:\xa0str, aux_value:\xa0str, caption:\xa0str, data:\xa0Union[dict,\xa0str,\xa0NoneType]\xa0=\xa0None, commands:\xa0Union[List[",Object(c.b)("a",{title:"h2o_wave.types.Command",href:"#h2o_wave.types.Command"},"Command"),"],\xa0NoneType]\xa0=\xa0None)"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Create a stat card displaying a primary value, an auxiliary value and a caption.")),Object(c.b)("h4",{id:"static-methods-27"},"Static methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"load-27"},"load ",Object(c.b)("a",{name:"h2o_wave.types.LargeStatCard.load"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"load"),"(_LargeStatCard__d:\xa0Dict) \u2011>\xa0",Object(c.b)("a",{title:"h2o_wave.types.LargeStatCard",href:"#h2o_wave.types.LargeStatCard"},"LargeStatCard")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Creates an instance of this class using the contents of a dict."))))),Object(c.b)("h4",{id:"instance-variables-27"},"Instance variables"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{id:"h2o_wave.types.LargeStatCard.aux_value",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"aux_value")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The auxiliary value displayed next to the primary value.")),Object(c.b)("div",{id:"h2o_wave.types.LargeStatCard.box",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"box")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"A string indicating how to place this component on the page.")),Object(c.b)("div",{id:"h2o_wave.types.LargeStatCard.caption",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"caption")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The caption displayed below the primary value.")),Object(c.b)("div",{id:"h2o_wave.types.LargeStatCard.commands",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"commands")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Contextual menu commands for this component.")),Object(c.b)("div",{id:"h2o_wave.types.LargeStatCard.data",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"data")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Data for this card.")),Object(c.b)("div",{id:"h2o_wave.types.LargeStatCard.title",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"title")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The card's title.")),Object(c.b)("div",{id:"h2o_wave.types.LargeStatCard.value",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"value")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The primary value displayed."))),Object(c.b)("h4",{id:"methods-27"},"Methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"dump-27"},"dump ",Object(c.b)("a",{name:"h2o_wave.types.LargeStatCard.dump"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"dump"),"(self) \u2011>\xa0Dict"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Returns the contents of this object as a dict."))))))),Object(c.b)("div",{className:"api"},Object(c.b)("h3",{id:"link"},"Link ",Object(c.b)("a",{name:"h2o_wave.types.Link"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"class ",Object(c.b)("span",{class:"ident"},"Link"),"(label:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, path:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, disabled:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, download:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, button:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, visible:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, tooltip:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, name:\xa0Union[str,\xa0NoneType]\xa0=\xa0None)"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Create a hyperlink."),Object(c.b)("p",null,"Hyperlinks can be internal or external. Internal hyperlinks have paths that begin with a ",Object(c.b)("code",null,"/")," and point to URLs within the Q UI. All other kinds of paths are treated as external hyperlinks.")),Object(c.b)("h4",{id:"static-methods-28"},"Static methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"load-28"},"load ",Object(c.b)("a",{name:"h2o_wave.types.Link.load"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"load"),"(_Link__d:\xa0Dict) \u2011>\xa0",Object(c.b)("a",{title:"h2o_wave.types.Link",href:"#h2o_wave.types.Link"},"Link")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Creates an instance of this class using the contents of a dict."))))),Object(c.b)("h4",{id:"instance-variables-28"},"Instance variables"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{id:"h2o_wave.types.Link.button",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"button")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"True if the link should be rendered as a button.")),Object(c.b)("div",{id:"h2o_wave.types.Link.disabled",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"disabled")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"True if the link should be disabled.")),Object(c.b)("div",{id:"h2o_wave.types.Link.download",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"download")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"True if the link should be used for file download.")),Object(c.b)("div",{id:"h2o_wave.types.Link.label",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"label")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The text to be displayed. If blank, the ",Object(c.b)("code",null,"path")," is used as the label.")),Object(c.b)("div",{id:"h2o_wave.types.Link.name",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"name")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"An identifying name for this component.")),Object(c.b)("div",{id:"h2o_wave.types.Link.path",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"path")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The path or URL to link to.")),Object(c.b)("div",{id:"h2o_wave.types.Link.tooltip",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"tooltip")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"An optional tooltip message displayed when a user clicks the help icon to the right of the component.")),Object(c.b)("div",{id:"h2o_wave.types.Link.visible",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"visible")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"True if the component should be visible. Defaults to true."))),Object(c.b)("h4",{id:"methods-28"},"Methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"dump-28"},"dump ",Object(c.b)("a",{name:"h2o_wave.types.Link.dump"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"dump"),"(self) \u2011>\xa0Dict"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Returns the contents of this object as a dict."))))))),Object(c.b)("div",{className:"api"},Object(c.b)("h3",{id:"listcard"},"ListCard ",Object(c.b)("a",{name:"h2o_wave.types.ListCard"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"class ",Object(c.b)("span",{class:"ident"},"ListCard"),"(box:\xa0str, title:\xa0str, item_view:\xa0str, item_props:\xa0Union[dict,\xa0str], data:\xa0Union[",Object(c.b)("a",{title:"h2o_wave.core.Data",href:"core#h2o_wave.core.Data"},"Data"),",\xa0str], commands:\xa0Union[List[",Object(c.b)("a",{title:"h2o_wave.types.Command",href:"#h2o_wave.types.Command"},"Command"),"],\xa0NoneType]\xa0=\xa0None)"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"EXPERIMENTAL. DO NOT USE. Create a card containing other cards laid out in the form of a list (vertically, top-to-bottom).")),Object(c.b)("h4",{id:"static-methods-29"},"Static methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"load-29"},"load ",Object(c.b)("a",{name:"h2o_wave.types.ListCard.load"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"load"),"(_ListCard__d:\xa0Dict) \u2011>\xa0",Object(c.b)("a",{title:"h2o_wave.types.ListCard",href:"#h2o_wave.types.ListCard"},"ListCard")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Creates an instance of this class using the contents of a dict."))))),Object(c.b)("h4",{id:"instance-variables-29"},"Instance variables"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{id:"h2o_wave.types.ListCard.box",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"box")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"A string indicating how to place this component on the page.")),Object(c.b)("div",{id:"h2o_wave.types.ListCard.commands",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"commands")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Contextual menu commands for this component.")),Object(c.b)("div",{id:"h2o_wave.types.ListCard.data",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"data")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Data for this card.")),Object(c.b)("div",{id:"h2o_wave.types.ListCard.item_props",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"item_props")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The child card properties.")),Object(c.b)("div",{id:"h2o_wave.types.ListCard.item_view",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"item_view")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The child card type.")),Object(c.b)("div",{id:"h2o_wave.types.ListCard.title",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"title")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The title for this card."))),Object(c.b)("h4",{id:"methods-29"},"Methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"dump-29"},"dump ",Object(c.b)("a",{name:"h2o_wave.types.ListCard.dump"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"dump"),"(self) \u2011>\xa0Dict"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Returns the contents of this object as a dict."))))))),Object(c.b)("div",{className:"api"},Object(c.b)("h3",{id:"listitem1card"},"ListItem1Card ",Object(c.b)("a",{name:"h2o_wave.types.ListItem1Card"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"class ",Object(c.b)("span",{class:"ident"},"ListItem1Card"),"(box:\xa0str, title:\xa0str, caption:\xa0str, value:\xa0str, aux_value:\xa0str, data:\xa0Union[dict,\xa0str], commands:\xa0Union[List[",Object(c.b)("a",{title:"h2o_wave.types.Command",href:"#h2o_wave.types.Command"},"Command"),"],\xa0NoneType]\xa0=\xa0None)"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"EXPERIMENTAL. DO NOT USE.")),Object(c.b)("h4",{id:"static-methods-30"},"Static methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"load-30"},"load ",Object(c.b)("a",{name:"h2o_wave.types.ListItem1Card.load"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"load"),"(_ListItem1Card__d:\xa0Dict) \u2011>\xa0",Object(c.b)("a",{title:"h2o_wave.types.ListItem1Card",href:"#h2o_wave.types.ListItem1Card"},"ListItem1Card")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Creates an instance of this class using the contents of a dict."))))),Object(c.b)("h4",{id:"instance-variables-30"},"Instance variables"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{id:"h2o_wave.types.ListItem1Card.aux_value",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"aux_value")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"EXPERIMENTAL. DO NOT USE.")),Object(c.b)("div",{id:"h2o_wave.types.ListItem1Card.box",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"box")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"A string indicating how to place this component on the page.")),Object(c.b)("div",{id:"h2o_wave.types.ListItem1Card.caption",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"caption")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"EXPERIMENTAL. DO NOT USE.")),Object(c.b)("div",{id:"h2o_wave.types.ListItem1Card.commands",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"commands")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Contextual menu commands for this component.")),Object(c.b)("div",{id:"h2o_wave.types.ListItem1Card.data",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"data")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"EXPERIMENTAL. DO NOT USE.")),Object(c.b)("div",{id:"h2o_wave.types.ListItem1Card.title",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"title")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"EXPERIMENTAL. DO NOT USE.")),Object(c.b)("div",{id:"h2o_wave.types.ListItem1Card.value",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"value")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"EXPERIMENTAL. DO NOT USE."))),Object(c.b)("h4",{id:"methods-30"},"Methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"dump-30"},"dump ",Object(c.b)("a",{name:"h2o_wave.types.ListItem1Card.dump"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"dump"),"(self) \u2011>\xa0Dict"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Returns the contents of this object as a dict."))))))),Object(c.b)("div",{className:"api"},Object(c.b)("h3",{id:"mark"},"Mark ",Object(c.b)("a",{name:"h2o_wave.types.Mark"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"class ",Object(c.b)("span",{class:"ident"},"Mark"),"(coord:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, type:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, x:\xa0Union[str,\xa0float,\xa0int,\xa0NoneType]\xa0=\xa0None, x0:\xa0Union[str,\xa0float,\xa0int,\xa0NoneType]\xa0=\xa0None, x1:\xa0Union[str,\xa0float,\xa0int,\xa0NoneType]\xa0=\xa0None, x2:\xa0Union[str,\xa0float,\xa0int,\xa0NoneType]\xa0=\xa0None, x_min:\xa0Union[float,\xa0NoneType]\xa0=\xa0None, x_max:\xa0Union[float,\xa0NoneType]\xa0=\xa0None, x_nice:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, x_scale:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, x_title:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, y:\xa0Union[str,\xa0float,\xa0int,\xa0NoneType]\xa0=\xa0None, y0:\xa0Union[str,\xa0float,\xa0int,\xa0NoneType]\xa0=\xa0None, y1:\xa0Union[str,\xa0float,\xa0int,\xa0NoneType]\xa0=\xa0None, y2:\xa0Union[str,\xa0float,\xa0int,\xa0NoneType]\xa0=\xa0None, y_min:\xa0Union[float,\xa0NoneType]\xa0=\xa0None, y_max:\xa0Union[float,\xa0NoneType]\xa0=\xa0None, y_nice:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, y_scale:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, y_title:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, color:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, color_range:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, color_domain:\xa0Union[List[str],\xa0NoneType]\xa0=\xa0None, shape:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, shape_range:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, size:\xa0Union[str,\xa0float,\xa0int,\xa0NoneType]\xa0=\xa0None, size_range:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, stack:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, dodge:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, curve:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, fill_color:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, fill_opacity:\xa0Union[float,\xa0NoneType]\xa0=\xa0None, stroke_color:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, stroke_opacity:\xa0Union[float,\xa0NoneType]\xa0=\xa0None, stroke_size:\xa0Union[float,\xa0NoneType]\xa0=\xa0None, stroke_dash:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, label:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, label_offset:\xa0Union[float,\xa0NoneType]\xa0=\xa0None, label_offset_x:\xa0Union[float,\xa0NoneType]\xa0=\xa0None, label_offset_y:\xa0Union[float,\xa0NoneType]\xa0=\xa0None, label_rotation:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, label_position:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, label_overlap:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, label_fill_color:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, label_fill_opacity:\xa0Union[float,\xa0NoneType]\xa0=\xa0None, label_stroke_color:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, label_stroke_opacity:\xa0Union[float,\xa0NoneType]\xa0=\xa0None, label_stroke_size:\xa0Union[float,\xa0NoneType]\xa0=\xa0None, label_font_size:\xa0Union[float,\xa0NoneType]\xa0=\xa0None, label_font_weight:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, label_line_height:\xa0Union[float,\xa0NoneType]\xa0=\xa0None, label_align:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, ref_stroke_color:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, ref_stroke_opacity:\xa0Union[float,\xa0NoneType]\xa0=\xa0None, ref_stroke_size:\xa0Union[float,\xa0NoneType]\xa0=\xa0None, ref_stroke_dash:\xa0Union[str,\xa0NoneType]\xa0=\xa0None)"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Create a specification for a layer of graphical marks such as bars, lines, points for a plot. A plot can contain multiple such layers of marks.")),Object(c.b)("h4",{id:"static-methods-31"},"Static methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"load-31"},"load ",Object(c.b)("a",{name:"h2o_wave.types.Mark.load"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"load"),"(_Mark__d:\xa0Dict) \u2011>\xa0",Object(c.b)("a",{title:"h2o_wave.types.Mark",href:"#h2o_wave.types.Mark"},"Mark")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Creates an instance of this class using the contents of a dict."))))),Object(c.b)("h4",{id:"instance-variables-31"},"Instance variables"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{id:"h2o_wave.types.Mark.color",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"color")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Mark color field or value.")),Object(c.b)("div",{id:"h2o_wave.types.Mark.color_domain",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"color_domain")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The unique values in the data (labels or categories or classes) to map colors to, e.g. ",Object(c.b)("code",null,"['high', 'medium', 'low']"),". If this is not provided, the unique values are automatically inferred from the ",Object(c.b)("code",null,"color")," attribute.")),Object(c.b)("div",{id:"h2o_wave.types.Mark.color_range",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"color_range")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Mark color range for multi-series plots. A string containing space-separated colors, e.g. ",Object(c.b)("code",null,"'#fee8c8 #fdbb84 #e34a33'"))),Object(c.b)("div",{id:"h2o_wave.types.Mark.coord",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"coord")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Coordinate system. ",Object(c.b)("code",null,"rect")," is synonymous to ",Object(c.b)("code",null,"cartesian"),". ",Object(c.b)("code",null,"theta")," is transposed ",Object(c.b)("code",null,"polar"),". One of 'rect', 'cartesian', 'polar', 'theta', 'helix'.")),Object(c.b)("div",{id:"h2o_wave.types.Mark.curve",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"curve")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Curve type for ",Object(c.b)("code",null,"line")," and ",Object(c.b)("code",null,"area")," mark types. One of 'none', 'smooth', 'step-before', 'step', 'step-after'.")),Object(c.b)("div",{id:"h2o_wave.types.Mark.dodge",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"dodge")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Field to dodge marks by, or 'auto' to infer.")),Object(c.b)("div",{id:"h2o_wave.types.Mark.fill_color",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"fill_color")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Mark fill color.")),Object(c.b)("div",{id:"h2o_wave.types.Mark.fill_opacity",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"fill_opacity")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Mark fill opacity.")),Object(c.b)("div",{id:"h2o_wave.types.Mark.label",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"label")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Label field or value.")),Object(c.b)("div",{id:"h2o_wave.types.Mark.label_align",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"label_align")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Label text alignment. One of 'left', 'right', 'center', 'start', 'end'.")),Object(c.b)("div",{id:"h2o_wave.types.Mark.label_fill_color",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"label_fill_color")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Label fill color.")),Object(c.b)("div",{id:"h2o_wave.types.Mark.label_fill_opacity",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"label_fill_opacity")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Label fill opacity.")),Object(c.b)("div",{id:"h2o_wave.types.Mark.label_font_size",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"label_font_size")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Label font size.")),Object(c.b)("div",{id:"h2o_wave.types.Mark.label_font_weight",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"label_font_weight")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Label font weight.")),Object(c.b)("div",{id:"h2o_wave.types.Mark.label_line_height",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"label_line_height")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Label line height.")),Object(c.b)("div",{id:"h2o_wave.types.Mark.label_offset",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"label_offset")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Distance between label and mark.")),Object(c.b)("div",{id:"h2o_wave.types.Mark.label_offset_x",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"label_offset_x")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Horizontal distance between label and mark.")),Object(c.b)("div",{id:"h2o_wave.types.Mark.label_offset_y",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"label_offset_y")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Vertical distance between label and mark.")),Object(c.b)("div",{id:"h2o_wave.types.Mark.label_overlap",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"label_overlap")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Strategy to use if labels overlap. One of 'hide', 'overlap', 'constrain'.")),Object(c.b)("div",{id:"h2o_wave.types.Mark.label_position",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"label_position")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Label position relative to the mark. One of 'top', 'bottom', 'middle', 'left', 'right'.")),Object(c.b)("div",{id:"h2o_wave.types.Mark.label_rotation",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"label_rotation")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Label rotation angle, in degrees, or 'none' to disable automatic rotation. The default behavior is 'auto' for automatic rotation.")),Object(c.b)("div",{id:"h2o_wave.types.Mark.label_stroke_color",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"label_stroke_color")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Label stroke color.")),Object(c.b)("div",{id:"h2o_wave.types.Mark.label_stroke_opacity",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"label_stroke_opacity")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Label stroke opacity.")),Object(c.b)("div",{id:"h2o_wave.types.Mark.label_stroke_size",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"label_stroke_size")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Label stroke size (line width or pen thickness).")),Object(c.b)("div",{id:"h2o_wave.types.Mark.ref_stroke_color",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"ref_stroke_color")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Reference line stroke color.")),Object(c.b)("div",{id:"h2o_wave.types.Mark.ref_stroke_dash",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"ref_stroke_dash")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Reference line stroke dash style. A string containing space-separated integers that specify distances to alternately draw a line and a gap (in coordinate space units). If the number of elements in the array is odd, the elements of the array get copied and concatenated. For example, [5, 15, 25] will become [5, 15, 25, 5, 15, 25].")),Object(c.b)("div",{id:"h2o_wave.types.Mark.ref_stroke_opacity",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"ref_stroke_opacity")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Reference line stroke opacity.")),Object(c.b)("div",{id:"h2o_wave.types.Mark.ref_stroke_size",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"ref_stroke_size")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Reference line stroke size (line width or pen thickness).")),Object(c.b)("div",{id:"h2o_wave.types.Mark.shape",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"shape")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Mark shape field or value for ",Object(c.b)("code",null,"point")," mark types. Possible values are 'circle', 'square', 'bowtie', 'diamond', 'hexagon', 'triangle', 'triangle-down', 'cross', 'tick', 'plus', 'hyphen', 'line'.")),Object(c.b)("div",{id:"h2o_wave.types.Mark.shape_range",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"shape_range")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Mark shape range for multi-series plots using ",Object(c.b)("code",null,"point")," mark types. A string containing space-separated shapes, e.g. ",Object(c.b)("code",null,"'circle square diamond'"))),Object(c.b)("div",{id:"h2o_wave.types.Mark.size",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"size")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Mark size field or value.")),Object(c.b)("div",{id:"h2o_wave.types.Mark.size_range",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"size_range")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Mark size range. A string containing space-separated integers, e.g. ",Object(c.b)("code",null,"'4 30'"))),Object(c.b)("div",{id:"h2o_wave.types.Mark.stack",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"stack")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Field to stack marks by, or 'auto' to infer.")),Object(c.b)("div",{id:"h2o_wave.types.Mark.stroke_color",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"stroke_color")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Mark stroke color.")),Object(c.b)("div",{id:"h2o_wave.types.Mark.stroke_dash",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"stroke_dash")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Mark stroke dash style. A string containing space-separated integers that specify distances to alternately draw a line and a gap (in coordinate space units). If the number of elements in the array is odd, the elements of the array get copied and concatenated. For example, [5, 15, 25] will become [5, 15, 25, 5, 15, 25].")),Object(c.b)("div",{id:"h2o_wave.types.Mark.stroke_opacity",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"stroke_opacity")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Mark stroke opacity.")),Object(c.b)("div",{id:"h2o_wave.types.Mark.stroke_size",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"stroke_size")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Mark stroke size.")),Object(c.b)("div",{id:"h2o_wave.types.Mark.type",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"type")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Graphical geometry. One of 'interval', 'line', 'path', 'point', 'area', 'polygon', 'schema', 'edge', 'heatmap'.")),Object(c.b)("div",{id:"h2o_wave.types.Mark.x",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"x")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"X field or value.")),Object(c.b)("div",{id:"h2o_wave.types.Mark.x0",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"x0")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"X base field or value.")),Object(c.b)("div",{id:"h2o_wave.types.Mark.x1",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"x1")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"X bin lower bound field or value. For histograms.")),Object(c.b)("div",{id:"h2o_wave.types.Mark.x2",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"x2")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"X bin upper bound field or value. For histograms.")),Object(c.b)("div",{id:"h2o_wave.types.Mark.x_max",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"x_max")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"X axis scale maximum.")),Object(c.b)("div",{id:"h2o_wave.types.Mark.x_min",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"x_min")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"X axis scale minimum.")),Object(c.b)("div",{id:"h2o_wave.types.Mark.x_nice",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"x_nice")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Whether to nice X axis scale ticks.")),Object(c.b)("div",{id:"h2o_wave.types.Mark.x_scale",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"x_scale")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"X axis scale type. One of 'linear', 'cat', 'category', 'identity', 'log', 'pow', 'time', 'timeCat', 'quantize', 'quantile'.")),Object(c.b)("div",{id:"h2o_wave.types.Mark.x_title",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"x_title")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"X axis title.")),Object(c.b)("div",{id:"h2o_wave.types.Mark.y",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"y")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Y field or value.")),Object(c.b)("div",{id:"h2o_wave.types.Mark.y0",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"y0")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Y base field or value.")),Object(c.b)("div",{id:"h2o_wave.types.Mark.y1",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"y1")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Y bin lower bound field or value. For histograms.")),Object(c.b)("div",{id:"h2o_wave.types.Mark.y2",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"y2")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Y bin upper bound field or value. For histograms.")),Object(c.b)("div",{id:"h2o_wave.types.Mark.y_max",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"y_max")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Y axis scale maximum.")),Object(c.b)("div",{id:"h2o_wave.types.Mark.y_min",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"y_min")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Y axis scale minimum.")),Object(c.b)("div",{id:"h2o_wave.types.Mark.y_nice",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"y_nice")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Whether to nice Y axis scale ticks.")),Object(c.b)("div",{id:"h2o_wave.types.Mark.y_scale",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"y_scale")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Y axis scale type. One of 'linear', 'cat', 'category', 'identity', 'log', 'pow', 'time', 'timeCat', 'quantize', 'quantile'.")),Object(c.b)("div",{id:"h2o_wave.types.Mark.y_title",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"y_title")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Y axis title."))),Object(c.b)("h4",{id:"methods-31"},"Methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"dump-31"},"dump ",Object(c.b)("a",{name:"h2o_wave.types.Mark.dump"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"dump"),"(self) \u2011>\xa0Dict"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Returns the contents of this object as a dict."))))))),Object(c.b)("div",{className:"api"},Object(c.b)("h3",{id:"markdowncard"},"MarkdownCard ",Object(c.b)("a",{name:"h2o_wave.types.MarkdownCard"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"class ",Object(c.b)("span",{class:"ident"},"MarkdownCard"),"(box:\xa0str, title:\xa0str, content:\xa0str, data:\xa0Union[dict,\xa0str,\xa0NoneType]\xa0=\xa0None, commands:\xa0Union[List[",Object(c.b)("a",{title:"h2o_wave.types.Command",href:"#h2o_wave.types.Command"},"Command"),"],\xa0NoneType]\xa0=\xa0None)"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Create a card that renders Markdown content."),Object(c.b)("p",null,"Github-flavored markdown is supported. HTML markup is allowed in markdown content. URLs, if found, are displayed as hyperlinks. Copyright, reserved, trademark, quotes, etc. are replaced with language-neutral symbols.")),Object(c.b)("h4",{id:"static-methods-32"},"Static methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"load-32"},"load ",Object(c.b)("a",{name:"h2o_wave.types.MarkdownCard.load"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"load"),"(_MarkdownCard__d:\xa0Dict) \u2011>\xa0",Object(c.b)("a",{title:"h2o_wave.types.MarkdownCard",href:"#h2o_wave.types.MarkdownCard"},"MarkdownCard")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Creates an instance of this class using the contents of a dict."))))),Object(c.b)("h4",{id:"instance-variables-32"},"Instance variables"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{id:"h2o_wave.types.MarkdownCard.box",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"box")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"A string indicating how to place this component on the page.")),Object(c.b)("div",{id:"h2o_wave.types.MarkdownCard.commands",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"commands")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Contextual menu commands for this component.")),Object(c.b)("div",{id:"h2o_wave.types.MarkdownCard.content",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"content")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The markdown content. Supports Github Flavored Markdown (GFM): ",Object(c.b)("a",{href:"https://guides.github.com/features/mastering-markdown/"},"https://guides.github.com/features/mastering-markdown/"))),Object(c.b)("div",{id:"h2o_wave.types.MarkdownCard.data",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"data")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Additional data for the card.")),Object(c.b)("div",{id:"h2o_wave.types.MarkdownCard.title",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"title")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The title for this card."))),Object(c.b)("h4",{id:"methods-32"},"Methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"dump-32"},"dump ",Object(c.b)("a",{name:"h2o_wave.types.MarkdownCard.dump"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"dump"),"(self) \u2011>\xa0Dict"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Returns the contents of this object as a dict."))))))),Object(c.b)("div",{className:"api"},Object(c.b)("h3",{id:"markup"},"Markup ",Object(c.b)("a",{name:"h2o_wave.types.Markup"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"class ",Object(c.b)("span",{class:"ident"},"Markup"),"(content:\xa0str, name:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, visible:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None)"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Render HTML content.")),Object(c.b)("h4",{id:"static-methods-33"},"Static methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"load-33"},"load ",Object(c.b)("a",{name:"h2o_wave.types.Markup.load"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"load"),"(_Markup__d:\xa0Dict) \u2011>\xa0",Object(c.b)("a",{title:"h2o_wave.types.Markup",href:"#h2o_wave.types.Markup"},"Markup")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Creates an instance of this class using the contents of a dict."))))),Object(c.b)("h4",{id:"instance-variables-33"},"Instance variables"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{id:"h2o_wave.types.Markup.content",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"content")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The HTML content.")),Object(c.b)("div",{id:"h2o_wave.types.Markup.name",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"name")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"An identifying name for this component.")),Object(c.b)("div",{id:"h2o_wave.types.Markup.visible",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"visible")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"True if the component should be visible. Defaults to true."))),Object(c.b)("h4",{id:"methods-33"},"Methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"dump-33"},"dump ",Object(c.b)("a",{name:"h2o_wave.types.Markup.dump"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"dump"),"(self) \u2011>\xa0Dict"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Returns the contents of this object as a dict."))))))),Object(c.b)("div",{className:"api"},Object(c.b)("h3",{id:"markupcard"},"MarkupCard ",Object(c.b)("a",{name:"h2o_wave.types.MarkupCard"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"class ",Object(c.b)("span",{class:"ident"},"MarkupCard"),"(box:\xa0str, title:\xa0str, content:\xa0str, commands:\xa0Union[List[",Object(c.b)("a",{title:"h2o_wave.types.Command",href:"#h2o_wave.types.Command"},"Command"),"],\xa0NoneType]\xa0=\xa0None)"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Render HTML content.")),Object(c.b)("h4",{id:"static-methods-34"},"Static methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"load-34"},"load ",Object(c.b)("a",{name:"h2o_wave.types.MarkupCard.load"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"load"),"(_MarkupCard__d:\xa0Dict) \u2011>\xa0",Object(c.b)("a",{title:"h2o_wave.types.MarkupCard",href:"#h2o_wave.types.MarkupCard"},"MarkupCard")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Creates an instance of this class using the contents of a dict."))))),Object(c.b)("h4",{id:"instance-variables-34"},"Instance variables"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{id:"h2o_wave.types.MarkupCard.box",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"box")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"A string indicating how to place this component on the page.")),Object(c.b)("div",{id:"h2o_wave.types.MarkupCard.commands",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"commands")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Contextual menu commands for this component.")),Object(c.b)("div",{id:"h2o_wave.types.MarkupCard.content",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"content")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The HTML content.")),Object(c.b)("div",{id:"h2o_wave.types.MarkupCard.title",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"title")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The title for this card."))),Object(c.b)("h4",{id:"methods-34"},"Methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"dump-34"},"dump ",Object(c.b)("a",{name:"h2o_wave.types.MarkupCard.dump"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"dump"),"(self) \u2011>\xa0Dict"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Returns the contents of this object as a dict."))))))),Object(c.b)("div",{className:"api"},Object(c.b)("h3",{id:"messagebar"},"MessageBar ",Object(c.b)("a",{name:"h2o_wave.types.MessageBar"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"class ",Object(c.b)("span",{class:"ident"},"MessageBar"),"(type:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, text:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, name:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, visible:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None)"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Create a message bar."),Object(c.b)("p",null,"A message bar is an area at the top of a primary view that displays relevant status information. You can use a message bar to tell the user about a situation that does not require their immediate attention and therefore does not need to block other activities.")),Object(c.b)("h4",{id:"static-methods-35"},"Static methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"load-35"},"load ",Object(c.b)("a",{name:"h2o_wave.types.MessageBar.load"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"load"),"(_MessageBar__d:\xa0Dict) \u2011>\xa0",Object(c.b)("a",{title:"h2o_wave.types.MessageBar",href:"#h2o_wave.types.MessageBar"},"MessageBar")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Creates an instance of this class using the contents of a dict."))))),Object(c.b)("h4",{id:"instance-variables-35"},"Instance variables"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{id:"h2o_wave.types.MessageBar.name",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"name")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"An identifying name for this component.")),Object(c.b)("div",{id:"h2o_wave.types.MessageBar.text",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"text")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The text displayed on the message bar.")),Object(c.b)("div",{id:"h2o_wave.types.MessageBar.type",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"type")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The icon and color of the message bar. One of 'info', 'error', 'warning', 'success', 'danger', 'blocked'.")),Object(c.b)("div",{id:"h2o_wave.types.MessageBar.visible",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"visible")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"True if the component should be visible. Defaults to true."))),Object(c.b)("h4",{id:"methods-35"},"Methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"dump-35"},"dump ",Object(c.b)("a",{name:"h2o_wave.types.MessageBar.dump"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"dump"),"(self) \u2011>\xa0Dict"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Returns the contents of this object as a dict."))))))),Object(c.b)("div",{className:"api"},Object(c.b)("h3",{id:"metacard"},"MetaCard ",Object(c.b)("a",{name:"h2o_wave.types.MetaCard"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"class ",Object(c.b)("span",{class:"ident"},"MetaCard"),"(box:\xa0str, title:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, refresh:\xa0Union[int,\xa0NoneType]\xa0=\xa0None, notification:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, redirect:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, icon:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, commands:\xa0Union[List[",Object(c.b)("a",{title:"h2o_wave.types.Command",href:"#h2o_wave.types.Command"},"Command"),"],\xa0NoneType]\xa0=\xa0None)"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Represents page-global state."),Object(c.b)("p",null,"This card is invisible. It is used to control attributes of the active page.")),Object(c.b)("h4",{id:"static-methods-36"},"Static methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"load-36"},"load ",Object(c.b)("a",{name:"h2o_wave.types.MetaCard.load"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"load"),"(_MetaCard__d:\xa0Dict) \u2011>\xa0",Object(c.b)("a",{title:"h2o_wave.types.MetaCard",href:"#h2o_wave.types.MetaCard"},"MetaCard")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Creates an instance of this class using the contents of a dict."))))),Object(c.b)("h4",{id:"instance-variables-36"},"Instance variables"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{id:"h2o_wave.types.MetaCard.box",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"box")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"A string indicating how to place this component on the page.")),Object(c.b)("div",{id:"h2o_wave.types.MetaCard.commands",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"commands")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Contextual menu commands for this component.")),Object(c.b)("div",{id:"h2o_wave.types.MetaCard.icon",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"icon")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Shortcut icon path. Preferably a ",Object(c.b)("code",null,".png")," file (",Object(c.b)("code",null,".ico")," files may not work in mobile browsers).")),Object(c.b)("div",{id:"h2o_wave.types.MetaCard.notification",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"notification")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Display a desktop notification to the user.")),Object(c.b)("div",{id:"h2o_wave.types.MetaCard.redirect",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"redirect")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Redirect the page to a new URL.")),Object(c.b)("div",{id:"h2o_wave.types.MetaCard.refresh",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"refresh")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Refresh rate in seconds. A value of 0 turns off live-updates. Values != 0 are currently ignored (reserved for future use).")),Object(c.b)("div",{id:"h2o_wave.types.MetaCard.title",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"title")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The title of the page."))),Object(c.b)("h4",{id:"methods-36"},"Methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"dump-36"},"dump ",Object(c.b)("a",{name:"h2o_wave.types.MetaCard.dump"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"dump"),"(self) \u2011>\xa0Dict"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Returns the contents of this object as a dict."))))))),Object(c.b)("div",{className:"api"},Object(c.b)("h3",{id:"navcard"},"NavCard ",Object(c.b)("a",{name:"h2o_wave.types.NavCard"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"class ",Object(c.b)("span",{class:"ident"},"NavCard"),"(box:\xa0str, items:\xa0List[",Object(c.b)("a",{title:"h2o_wave.types.NavGroup",href:"#h2o_wave.types.NavGroup"},"NavGroup"),"], commands:\xa0Union[List[",Object(c.b)("a",{title:"h2o_wave.types.Command",href:"#h2o_wave.types.Command"},"Command"),"],\xa0NoneType]\xa0=\xa0None)"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Create a card containing a navigation pane.")),Object(c.b)("h4",{id:"static-methods-37"},"Static methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"load-37"},"load ",Object(c.b)("a",{name:"h2o_wave.types.NavCard.load"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"load"),"(_NavCard__d:\xa0Dict) \u2011>\xa0",Object(c.b)("a",{title:"h2o_wave.types.NavCard",href:"#h2o_wave.types.NavCard"},"NavCard")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Creates an instance of this class using the contents of a dict."))))),Object(c.b)("h4",{id:"instance-variables-37"},"Instance variables"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{id:"h2o_wave.types.NavCard.box",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"box")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"A string indicating how to place this component on the page.")),Object(c.b)("div",{id:"h2o_wave.types.NavCard.commands",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"commands")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Contextual menu commands for this component.")),Object(c.b)("div",{id:"h2o_wave.types.NavCard.items",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"items")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The navigation groups contained in this pane."))),Object(c.b)("h4",{id:"methods-37"},"Methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"dump-37"},"dump ",Object(c.b)("a",{name:"h2o_wave.types.NavCard.dump"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"dump"),"(self) \u2011>\xa0Dict"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Returns the contents of this object as a dict."))))))),Object(c.b)("div",{className:"api"},Object(c.b)("h3",{id:"navgroup"},"NavGroup ",Object(c.b)("a",{name:"h2o_wave.types.NavGroup"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"class ",Object(c.b)("span",{class:"ident"},"NavGroup"),"(label:\xa0str, items:\xa0List[",Object(c.b)("a",{title:"h2o_wave.types.NavItem",href:"#h2o_wave.types.NavItem"},"NavItem"),"])"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Create a group of navigation items.")),Object(c.b)("h4",{id:"static-methods-38"},"Static methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"load-38"},"load ",Object(c.b)("a",{name:"h2o_wave.types.NavGroup.load"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"load"),"(_NavGroup__d:\xa0Dict) \u2011>\xa0",Object(c.b)("a",{title:"h2o_wave.types.NavGroup",href:"#h2o_wave.types.NavGroup"},"NavGroup")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Creates an instance of this class using the contents of a dict."))))),Object(c.b)("h4",{id:"instance-variables-38"},"Instance variables"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{id:"h2o_wave.types.NavGroup.items",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"items")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The navigation items contained in this group.")),Object(c.b)("div",{id:"h2o_wave.types.NavGroup.label",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"label")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The label to display for this group."))),Object(c.b)("h4",{id:"methods-38"},"Methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"dump-38"},"dump ",Object(c.b)("a",{name:"h2o_wave.types.NavGroup.dump"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"dump"),"(self) \u2011>\xa0Dict"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Returns the contents of this object as a dict."))))))),Object(c.b)("div",{className:"api"},Object(c.b)("h3",{id:"navitem"},"NavItem ",Object(c.b)("a",{name:"h2o_wave.types.NavItem"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"class ",Object(c.b)("span",{class:"ident"},"NavItem"),"(name:\xa0str, label:\xa0str)"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Create a navigation item.")),Object(c.b)("h4",{id:"static-methods-39"},"Static methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"load-39"},"load ",Object(c.b)("a",{name:"h2o_wave.types.NavItem.load"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"load"),"(_NavItem__d:\xa0Dict) \u2011>\xa0",Object(c.b)("a",{title:"h2o_wave.types.NavItem",href:"#h2o_wave.types.NavItem"},"NavItem")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Creates an instance of this class using the contents of a dict."))))),Object(c.b)("h4",{id:"instance-variables-39"},"Instance variables"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{id:"h2o_wave.types.NavItem.label",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"label")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The label to display.")),Object(c.b)("div",{id:"h2o_wave.types.NavItem.name",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"name")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The name of this item. Prefix the name with a '#' to trigger hash-change navigation."))),Object(c.b)("h4",{id:"methods-39"},"Methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"dump-39"},"dump ",Object(c.b)("a",{name:"h2o_wave.types.NavItem.dump"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"dump"),"(self) \u2011>\xa0Dict"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Returns the contents of this object as a dict."))))))),Object(c.b)("div",{className:"api"},Object(c.b)("h3",{id:"picker"},"Picker ",Object(c.b)("a",{name:"h2o_wave.types.Picker"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"class ",Object(c.b)("span",{class:"ident"},"Picker"),"(name:\xa0str, choices:\xa0List[",Object(c.b)("a",{title:"h2o_wave.types.Choice",href:"#h2o_wave.types.Choice"},"Choice"),"], label:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, values:\xa0Union[List[str],\xa0NoneType]\xa0=\xa0None, max_choices:\xa0Union[int,\xa0NoneType]\xa0=\xa0None, disabled:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, visible:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, tooltip:\xa0Union[str,\xa0NoneType]\xa0=\xa0None)"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Create a picker. Pickers are used to select one or more choices, such as tags or files, from a list. Use a picker to allow the user to quickly search for or manage a few tags or files.")),Object(c.b)("h4",{id:"static-methods-40"},"Static methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"load-40"},"load ",Object(c.b)("a",{name:"h2o_wave.types.Picker.load"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"load"),"(_Picker__d:\xa0Dict) \u2011>\xa0",Object(c.b)("a",{title:"h2o_wave.types.Picker",href:"#h2o_wave.types.Picker"},"Picker")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Creates an instance of this class using the contents of a dict."))))),Object(c.b)("h4",{id:"instance-variables-40"},"Instance variables"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{id:"h2o_wave.types.Picker.choices",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"choices")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The choices to be presented.")),Object(c.b)("div",{id:"h2o_wave.types.Picker.disabled",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"disabled")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Controls whether the picker should be disabled or not.")),Object(c.b)("div",{id:"h2o_wave.types.Picker.label",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"label")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Text to be displayed above the component.")),Object(c.b)("div",{id:"h2o_wave.types.Picker.max_choices",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"max_choices")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Maximum number of selectable choices. Defaults to no limit.")),Object(c.b)("div",{id:"h2o_wave.types.Picker.name",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"name")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"An identifying name for this component.")),Object(c.b)("div",{id:"h2o_wave.types.Picker.tooltip",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"tooltip")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"An optional tooltip message displayed when a user clicks the help icon to the right of the component.")),Object(c.b)("div",{id:"h2o_wave.types.Picker.values",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"values")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The names of the selected choices.")),Object(c.b)("div",{id:"h2o_wave.types.Picker.visible",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"visible")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"True if the component should be visible. Defaults to true."))),Object(c.b)("h4",{id:"methods-40"},"Methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"dump-40"},"dump ",Object(c.b)("a",{name:"h2o_wave.types.Picker.dump"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"dump"),"(self) \u2011>\xa0Dict"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Returns the contents of this object as a dict."))))))),Object(c.b)("div",{className:"api"},Object(c.b)("h3",{id:"pixelartcard"},"PixelArtCard ",Object(c.b)("a",{name:"h2o_wave.types.PixelArtCard"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"class ",Object(c.b)("span",{class:"ident"},"PixelArtCard"),"(box:\xa0str, title:\xa0str, data:\xa0Union[dict,\xa0str], commands:\xa0Union[List[",Object(c.b)("a",{title:"h2o_wave.types.Command",href:"#h2o_wave.types.Command"},"Command"),"],\xa0NoneType]\xa0=\xa0None)"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Create a card displaying a collaborative Pixel art tool, just for kicks.")),Object(c.b)("h4",{id:"static-methods-41"},"Static methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"load-41"},"load ",Object(c.b)("a",{name:"h2o_wave.types.PixelArtCard.load"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"load"),"(_PixelArtCard__d:\xa0Dict) \u2011>\xa0",Object(c.b)("a",{title:"h2o_wave.types.PixelArtCard",href:"#h2o_wave.types.PixelArtCard"},"PixelArtCard")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Creates an instance of this class using the contents of a dict."))))),Object(c.b)("h4",{id:"instance-variables-41"},"Instance variables"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{id:"h2o_wave.types.PixelArtCard.box",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"box")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"A string indicating how to place this component on the page.")),Object(c.b)("div",{id:"h2o_wave.types.PixelArtCard.commands",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"commands")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Contextual menu commands for this component.")),Object(c.b)("div",{id:"h2o_wave.types.PixelArtCard.data",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"data")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The data for this card.")),Object(c.b)("div",{id:"h2o_wave.types.PixelArtCard.title",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"title")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The title for this card."))),Object(c.b)("h4",{id:"methods-41"},"Methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"dump-41"},"dump ",Object(c.b)("a",{name:"h2o_wave.types.PixelArtCard.dump"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"dump"),"(self) \u2011>\xa0Dict"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Returns the contents of this object as a dict."))))))),Object(c.b)("div",{className:"api"},Object(c.b)("h3",{id:"plot"},"Plot ",Object(c.b)("a",{name:"h2o_wave.types.Plot"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"class ",Object(c.b)("span",{class:"ident"},"Plot"),"(marks:\xa0List[",Object(c.b)("a",{title:"h2o_wave.types.Mark",href:"#h2o_wave.types.Mark"},"Mark"),"])"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Create a plot. A plot is composed of one or more graphical mark layers.")),Object(c.b)("h4",{id:"static-methods-42"},"Static methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"load-42"},"load ",Object(c.b)("a",{name:"h2o_wave.types.Plot.load"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"load"),"(_Plot__d:\xa0Dict) \u2011>\xa0",Object(c.b)("a",{title:"h2o_wave.types.Plot",href:"#h2o_wave.types.Plot"},"Plot")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Creates an instance of this class using the contents of a dict."))))),Object(c.b)("h4",{id:"instance-variables-42"},"Instance variables"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{id:"h2o_wave.types.Plot.marks",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"marks")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The graphical mark layers contained in this plot."))),Object(c.b)("h4",{id:"methods-42"},"Methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"dump-42"},"dump ",Object(c.b)("a",{name:"h2o_wave.types.Plot.dump"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"dump"),"(self) \u2011>\xa0Dict"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Returns the contents of this object as a dict."))))))),Object(c.b)("div",{className:"api"},Object(c.b)("h3",{id:"plotcard"},"PlotCard ",Object(c.b)("a",{name:"h2o_wave.types.PlotCard"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"class ",Object(c.b)("span",{class:"ident"},"PlotCard"),"(box:\xa0str, title:\xa0str, data:\xa0Union[dict,\xa0str], plot:\xa0",Object(c.b)("a",{title:"h2o_wave.types.Plot",href:"#h2o_wave.types.Plot"},"Plot"),", commands:\xa0Union[List[",Object(c.b)("a",{title:"h2o_wave.types.Command",href:"#h2o_wave.types.Command"},"Command"),"],\xa0NoneType]\xa0=\xa0None)"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Create a card displaying a plot.")),Object(c.b)("h4",{id:"static-methods-43"},"Static methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"load-43"},"load ",Object(c.b)("a",{name:"h2o_wave.types.PlotCard.load"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"load"),"(_PlotCard__d:\xa0Dict) \u2011>\xa0",Object(c.b)("a",{title:"h2o_wave.types.PlotCard",href:"#h2o_wave.types.PlotCard"},"PlotCard")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Creates an instance of this class using the contents of a dict."))))),Object(c.b)("h4",{id:"instance-variables-43"},"Instance variables"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{id:"h2o_wave.types.PlotCard.box",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"box")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"A string indicating how to place this component on the page.")),Object(c.b)("div",{id:"h2o_wave.types.PlotCard.commands",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"commands")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Contextual menu commands for this component.")),Object(c.b)("div",{id:"h2o_wave.types.PlotCard.data",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"data")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Data for this card.")),Object(c.b)("div",{id:"h2o_wave.types.PlotCard.plot",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"plot")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The plot to be displayed in this card.")),Object(c.b)("div",{id:"h2o_wave.types.PlotCard.title",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"title")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The title for this card."))),Object(c.b)("h4",{id:"methods-43"},"Methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"dump-43"},"dump ",Object(c.b)("a",{name:"h2o_wave.types.PlotCard.dump"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"dump"),"(self) \u2011>\xa0Dict"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Returns the contents of this object as a dict."))))))),Object(c.b)("div",{className:"api"},Object(c.b)("h3",{id:"progress"},"Progress ",Object(c.b)("a",{name:"h2o_wave.types.Progress"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"class ",Object(c.b)("span",{class:"ident"},"Progress"),"(label:\xa0str, caption:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, value:\xa0Union[float,\xa0NoneType]\xa0=\xa0None, visible:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, tooltip:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, name:\xa0Union[str,\xa0NoneType]\xa0=\xa0None)"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Create a progress bar."),Object(c.b)("p",null,"Progress bars are used to show the completion status of an operation lasting more than 2 seconds. If the state of progress cannot be determined, do not set a value. Progress bars feature a bar showing total units to completion, and total units finished. The label appears above the bar, and the caption appears below. The label should tell someone exactly what the operation is doing."),Object(c.b)("p",null,"Examples of formatting include: [Object] is being [operation name], or [Object] is being [operation name] to [destination name] or [Object] is being [operation name] from [source name] to [destination name]"),Object(c.b)("p",null,"Status text is generally in units elapsed and total units. Real-world examples include copying files to a storage location, saving edits to a file, and more. Use units that are informative and relevant to give the best idea to users of how long the operation will take to complete. Avoid time units as they are rarely accurate enough to be trustworthy. Also, combine steps of a complex operation into one total bar to avoid \u201crewinding\u201d the bar. Instead change the label to reflect the change if necessary. Bars moving backwards reduce confidence in the service.")),Object(c.b)("h4",{id:"static-methods-44"},"Static methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"load-44"},"load ",Object(c.b)("a",{name:"h2o_wave.types.Progress.load"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"load"),"(_Progress__d:\xa0Dict) \u2011>\xa0",Object(c.b)("a",{title:"h2o_wave.types.Progress",href:"#h2o_wave.types.Progress"},"Progress")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Creates an instance of this class using the contents of a dict."))))),Object(c.b)("h4",{id:"instance-variables-44"},"Instance variables"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{id:"h2o_wave.types.Progress.caption",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"caption")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The text displayed below the bar.")),Object(c.b)("div",{id:"h2o_wave.types.Progress.label",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"label")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The text displayed above the bar.")),Object(c.b)("div",{id:"h2o_wave.types.Progress.name",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"name")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"An identifying name for this component.")),Object(c.b)("div",{id:"h2o_wave.types.Progress.tooltip",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"tooltip")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"An optional tooltip message displayed when a user clicks the help icon to the right of the component.")),Object(c.b)("div",{id:"h2o_wave.types.Progress.value",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"value")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The progress, between 0.0 and 1.0, or -1 (default) if indeterminate.")),Object(c.b)("div",{id:"h2o_wave.types.Progress.visible",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"visible")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"True if the component should be visible. Defaults to true."))),Object(c.b)("h4",{id:"methods-44"},"Methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"dump-44"},"dump ",Object(c.b)("a",{name:"h2o_wave.types.Progress.dump"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"dump"),"(self) \u2011>\xa0Dict"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Returns the contents of this object as a dict."))))))),Object(c.b)("div",{className:"api"},Object(c.b)("h3",{id:"progresstablecelltype"},"ProgressTableCellType ",Object(c.b)("a",{name:"h2o_wave.types.ProgressTableCellType"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"class ",Object(c.b)("span",{class:"ident"},"ProgressTableCellType"),"(color:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, name:\xa0Union[str,\xa0NoneType]\xa0=\xa0None)"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Create a cell type that renders a column's cells as progress bars instead of plain text. If set on a column, the cell value must be between 0.0 and 1.0.")),Object(c.b)("h4",{id:"static-methods-45"},"Static methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"load-45"},"load ",Object(c.b)("a",{name:"h2o_wave.types.ProgressTableCellType.load"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"load"),"(_ProgressTableCellType__d:\xa0Dict) \u2011>\xa0",Object(c.b)("a",{title:"h2o_wave.types.ProgressTableCellType",href:"#h2o_wave.types.ProgressTableCellType"},"ProgressTableCellType")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Creates an instance of this class using the contents of a dict."))))),Object(c.b)("h4",{id:"instance-variables-45"},"Instance variables"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{id:"h2o_wave.types.ProgressTableCellType.color",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"color")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Color of the progress arc.")),Object(c.b)("div",{id:"h2o_wave.types.ProgressTableCellType.name",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"name")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"An identifying name for this component."))),Object(c.b)("h4",{id:"methods-45"},"Methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"dump-45"},"dump ",Object(c.b)("a",{name:"h2o_wave.types.ProgressTableCellType.dump"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"dump"),"(self) \u2011>\xa0Dict"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Returns the contents of this object as a dict."))))))),Object(c.b)("div",{className:"api"},Object(c.b)("h3",{id:"rangeslider"},"RangeSlider ",Object(c.b)("a",{name:"h2o_wave.types.RangeSlider"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"class ",Object(c.b)("span",{class:"ident"},"RangeSlider"),"(name:\xa0str, label:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, min:\xa0Union[float,\xa0NoneType]\xa0=\xa0None, max:\xa0Union[float,\xa0NoneType]\xa0=\xa0None, step:\xa0Union[float,\xa0NoneType]\xa0=\xa0None, min_value:\xa0Union[float,\xa0NoneType]\xa0=\xa0None, max_value:\xa0Union[float,\xa0NoneType]\xa0=\xa0None, disabled:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, trigger:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, visible:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, tooltip:\xa0Union[str,\xa0NoneType]\xa0=\xa0None)"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Create a range slider."),Object(c.b)("p",null,"A range slider is an element used to select a value range. It provides a visual indication of adjustable content, as well as the current setting in the total range of content. It is displayed as a horizontal track with options on either side. Knobs or levers are dragged to one end or the other to make the choice, indicating the current max and min value.")),Object(c.b)("h4",{id:"static-methods-46"},"Static methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"load-46"},"load ",Object(c.b)("a",{name:"h2o_wave.types.RangeSlider.load"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"load"),"(_RangeSlider__d:\xa0Dict) \u2011>\xa0",Object(c.b)("a",{title:"h2o_wave.types.RangeSlider",href:"#h2o_wave.types.RangeSlider"},"RangeSlider")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Creates an instance of this class using the contents of a dict."))))),Object(c.b)("h4",{id:"instance-variables-46"},"Instance variables"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{id:"h2o_wave.types.RangeSlider.disabled",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"disabled")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"True if this field is disabled.")),Object(c.b)("div",{id:"h2o_wave.types.RangeSlider.label",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"label")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Text to be displayed alongside the component.")),Object(c.b)("div",{id:"h2o_wave.types.RangeSlider.max",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"max")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The maximum value of the slider. Defaults to 100.")),Object(c.b)("div",{id:"h2o_wave.types.RangeSlider.max_value",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"max_value")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The upper bound of the selected range.")),Object(c.b)("div",{id:"h2o_wave.types.RangeSlider.min",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"min")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The minimum value of the slider. Defaults to 0.")),Object(c.b)("div",{id:"h2o_wave.types.RangeSlider.min_value",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"min_value")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The lower bound of the selected range.")),Object(c.b)("div",{id:"h2o_wave.types.RangeSlider.name",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"name")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"An identifying name for this component.")),Object(c.b)("div",{id:"h2o_wave.types.RangeSlider.step",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"step")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The difference between two adjacent values of the slider.")),Object(c.b)("div",{id:"h2o_wave.types.RangeSlider.tooltip",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"tooltip")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"An optional tooltip message displayed when a user clicks the help icon to the right of the component.")),Object(c.b)("div",{id:"h2o_wave.types.RangeSlider.trigger",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"trigger")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"True if the form should be submitted when the slider value changes.")),Object(c.b)("div",{id:"h2o_wave.types.RangeSlider.visible",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"visible")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"True if the component should be visible. Defaults to true."))),Object(c.b)("h4",{id:"methods-46"},"Methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"dump-46"},"dump ",Object(c.b)("a",{name:"h2o_wave.types.RangeSlider.dump"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"dump"),"(self) \u2011>\xa0Dict"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Returns the contents of this object as a dict."))))))),Object(c.b)("div",{className:"api"},Object(c.b)("h3",{id:"repeatcard"},"RepeatCard ",Object(c.b)("a",{name:"h2o_wave.types.RepeatCard"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"class ",Object(c.b)("span",{class:"ident"},"RepeatCard"),"(box:\xa0str, item_view:\xa0str, item_props:\xa0Union[dict,\xa0str], data:\xa0Union[",Object(c.b)("a",{title:"h2o_wave.core.Data",href:"core#h2o_wave.core.Data"},"Data"),",\xa0str], commands:\xa0Union[List[",Object(c.b)("a",{title:"h2o_wave.types.Command",href:"#h2o_wave.types.Command"},"Command"),"],\xa0NoneType]\xa0=\xa0None)"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"EXPERIMENTAL. DO NOT USE. Create a card containing other cards.")),Object(c.b)("h4",{id:"static-methods-47"},"Static methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"load-47"},"load ",Object(c.b)("a",{name:"h2o_wave.types.RepeatCard.load"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"load"),"(_RepeatCard__d:\xa0Dict) \u2011>\xa0",Object(c.b)("a",{title:"h2o_wave.types.RepeatCard",href:"#h2o_wave.types.RepeatCard"},"RepeatCard")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Creates an instance of this class using the contents of a dict."))))),Object(c.b)("h4",{id:"instance-variables-47"},"Instance variables"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{id:"h2o_wave.types.RepeatCard.box",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"box")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"A string indicating how to place this component on the page.")),Object(c.b)("div",{id:"h2o_wave.types.RepeatCard.commands",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"commands")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Contextual menu commands for this component.")),Object(c.b)("div",{id:"h2o_wave.types.RepeatCard.data",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"data")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Data for this card.")),Object(c.b)("div",{id:"h2o_wave.types.RepeatCard.item_props",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"item_props")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The child card properties.")),Object(c.b)("div",{id:"h2o_wave.types.RepeatCard.item_view",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"item_view")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"EXPERIMENTAL. DO NOT USE."))),Object(c.b)("h4",{id:"methods-47"},"Methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"dump-47"},"dump ",Object(c.b)("a",{name:"h2o_wave.types.RepeatCard.dump"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"dump"),"(self) \u2011>\xa0Dict"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Returns the contents of this object as a dict."))))))),Object(c.b)("div",{className:"api"},Object(c.b)("h3",{id:"separator"},"Separator ",Object(c.b)("a",{name:"h2o_wave.types.Separator"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"class ",Object(c.b)("span",{class:"ident"},"Separator"),"(label:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, name:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, visible:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None)"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Create a separator."),Object(c.b)("p",null,"A separator visually separates content into groups.")),Object(c.b)("h4",{id:"static-methods-48"},"Static methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"load-48"},"load ",Object(c.b)("a",{name:"h2o_wave.types.Separator.load"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"load"),"(_Separator__d:\xa0Dict) \u2011>\xa0",Object(c.b)("a",{title:"h2o_wave.types.Separator",href:"#h2o_wave.types.Separator"},"Separator")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Creates an instance of this class using the contents of a dict."))))),Object(c.b)("h4",{id:"instance-variables-48"},"Instance variables"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{id:"h2o_wave.types.Separator.label",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"label")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The text displayed on the separator.")),Object(c.b)("div",{id:"h2o_wave.types.Separator.name",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"name")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"An identifying name for this component.")),Object(c.b)("div",{id:"h2o_wave.types.Separator.visible",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"visible")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"True if the component should be visible. Defaults to true."))),Object(c.b)("h4",{id:"methods-48"},"Methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"dump-48"},"dump ",Object(c.b)("a",{name:"h2o_wave.types.Separator.dump"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"dump"),"(self) \u2011>\xa0Dict"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Returns the contents of this object as a dict."))))))),Object(c.b)("div",{className:"api"},Object(c.b)("h3",{id:"slider"},"Slider ",Object(c.b)("a",{name:"h2o_wave.types.Slider"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"class ",Object(c.b)("span",{class:"ident"},"Slider"),"(name:\xa0str, label:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, min:\xa0Union[float,\xa0NoneType]\xa0=\xa0None, max:\xa0Union[float,\xa0NoneType]\xa0=\xa0None, step:\xa0Union[float,\xa0NoneType]\xa0=\xa0None, value:\xa0Union[float,\xa0NoneType]\xa0=\xa0None, disabled:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, trigger:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, visible:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, tooltip:\xa0Union[str,\xa0NoneType]\xa0=\xa0None)"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Create a slider."),Object(c.b)("p",null,"A slider is an element used to set a value. It provides a visual indication of adjustable content, as well as the current setting in the total range of content. It is displayed as a horizontal track with options on either side. A knob or lever is dragged to one end or the other to make the choice, indicating the current value. Marks on the slider bar can show values and users can choose where they want to drag the knob or lever to set the value."),Object(c.b)("p",null,"A slider is a good choice when you know that users think of the value as a relative quantity, not a numeric value. For example, users think about setting their audio volume to low or medium \u2014 not about setting the value to two or five."),Object(c.b)("p",null,"The default value of the slider will be zero or be constrained to the min and max values. The min will be returned if the value is set under the min and the max will be returned if set higher than the max value.")),Object(c.b)("h4",{id:"static-methods-49"},"Static methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"load-49"},"load ",Object(c.b)("a",{name:"h2o_wave.types.Slider.load"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"load"),"(_Slider__d:\xa0Dict) \u2011>\xa0",Object(c.b)("a",{title:"h2o_wave.types.Slider",href:"#h2o_wave.types.Slider"},"Slider")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Creates an instance of this class using the contents of a dict."))))),Object(c.b)("h4",{id:"instance-variables-49"},"Instance variables"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{id:"h2o_wave.types.Slider.disabled",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"disabled")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"True if this field is disabled.")),Object(c.b)("div",{id:"h2o_wave.types.Slider.label",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"label")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Text to be displayed alongside the component.")),Object(c.b)("div",{id:"h2o_wave.types.Slider.max",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"max")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The maximum value of the slider.")),Object(c.b)("div",{id:"h2o_wave.types.Slider.min",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"min")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The minimum value of the slider.")),Object(c.b)("div",{id:"h2o_wave.types.Slider.name",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"name")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"An identifying name for this component.")),Object(c.b)("div",{id:"h2o_wave.types.Slider.step",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"step")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The difference between two adjacent values of the slider.")),Object(c.b)("div",{id:"h2o_wave.types.Slider.tooltip",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"tooltip")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"An optional tooltip message displayed when a user clicks the help icon to the right of the component.")),Object(c.b)("div",{id:"h2o_wave.types.Slider.trigger",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"trigger")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"True if the form should be submitted when the slider value changes.")),Object(c.b)("div",{id:"h2o_wave.types.Slider.value",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"value")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The current value of the slider.")),Object(c.b)("div",{id:"h2o_wave.types.Slider.visible",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"visible")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"True if the component should be visible. Defaults to true."))),Object(c.b)("h4",{id:"methods-49"},"Methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"dump-49"},"dump ",Object(c.b)("a",{name:"h2o_wave.types.Slider.dump"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"dump"),"(self) \u2011>\xa0Dict"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Returns the contents of this object as a dict."))))))),Object(c.b)("div",{className:"api"},Object(c.b)("h3",{id:"smallseriesstatcard"},"SmallSeriesStatCard ",Object(c.b)("a",{name:"h2o_wave.types.SmallSeriesStatCard"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"class ",Object(c.b)("span",{class:"ident"},"SmallSeriesStatCard"),"(box:\xa0str, title:\xa0str, value:\xa0str, plot_data:\xa0Union[",Object(c.b)("a",{title:"h2o_wave.core.Data",href:"core#h2o_wave.core.Data"},"Data"),",\xa0str], plot_value:\xa0str, plot_zero_value:\xa0Union[float,\xa0NoneType]\xa0=\xa0None, plot_category:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, plot_type:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, plot_curve:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, plot_color:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, data:\xa0Union[dict,\xa0str,\xa0NoneType]\xa0=\xa0None, commands:\xa0Union[List[",Object(c.b)("a",{title:"h2o_wave.types.Command",href:"#h2o_wave.types.Command"},"Command"),"],\xa0NoneType]\xa0=\xa0None)"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Create a small stat card displaying a primary value and a series plot.")),Object(c.b)("h4",{id:"static-methods-50"},"Static methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"load-50"},"load ",Object(c.b)("a",{name:"h2o_wave.types.SmallSeriesStatCard.load"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"load"),"(_SmallSeriesStatCard__d:\xa0Dict) \u2011>\xa0",Object(c.b)("a",{title:"h2o_wave.types.SmallSeriesStatCard",href:"#h2o_wave.types.SmallSeriesStatCard"},"SmallSeriesStatCard")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Creates an instance of this class using the contents of a dict."))))),Object(c.b)("h4",{id:"instance-variables-50"},"Instance variables"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{id:"h2o_wave.types.SmallSeriesStatCard.box",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"box")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"A string indicating how to place this component on the page.")),Object(c.b)("div",{id:"h2o_wave.types.SmallSeriesStatCard.commands",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"commands")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Contextual menu commands for this component.")),Object(c.b)("div",{id:"h2o_wave.types.SmallSeriesStatCard.data",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"data")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Data for this card.")),Object(c.b)("div",{id:"h2o_wave.types.SmallSeriesStatCard.plot_category",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"plot_category")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The data field to use for x-axis values (ignored if ",Object(c.b)("code",null,"plot_type")," is ",Object(c.b)("code",null,"area"),"; must be provided if ",Object(c.b)("code",null,"plot_type")," is ",Object(c.b)("code",null,"interval"),"). Defaults to 'x'.")),Object(c.b)("div",{id:"h2o_wave.types.SmallSeriesStatCard.plot_color",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"plot_color")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The plot's color.")),Object(c.b)("div",{id:"h2o_wave.types.SmallSeriesStatCard.plot_curve",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"plot_curve")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The plot's curve style. Defaults to ",Object(c.b)("code",null,"linear"),". One of 'linear', 'smooth', 'step', 'step-after', 'step-before'.")),Object(c.b)("div",{id:"h2o_wave.types.SmallSeriesStatCard.plot_data",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"plot_data")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The plot's data.")),Object(c.b)("div",{id:"h2o_wave.types.SmallSeriesStatCard.plot_type",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"plot_type")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The type of plot. Defaults to ",Object(c.b)("code",null,"area"),". One of 'area', 'interval'.")),Object(c.b)("div",{id:"h2o_wave.types.SmallSeriesStatCard.plot_value",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"plot_value")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The data field to use for y-axis values.")),Object(c.b)("div",{id:"h2o_wave.types.SmallSeriesStatCard.plot_zero_value",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"plot_zero_value")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The base value to use for each y-axis mark. Set this to ",Object(c.b)("code",null,"0")," if you want to pin the x-axis at ",Object(c.b)("code",null,"y=0"),". If not provided, the minimum value from the data is used.")),Object(c.b)("div",{id:"h2o_wave.types.SmallSeriesStatCard.title",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"title")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The card's title.")),Object(c.b)("div",{id:"h2o_wave.types.SmallSeriesStatCard.value",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"value")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The primary value displayed."))),Object(c.b)("h4",{id:"methods-50"},"Methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"dump-50"},"dump ",Object(c.b)("a",{name:"h2o_wave.types.SmallSeriesStatCard.dump"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"dump"),"(self) \u2011>\xa0Dict"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Returns the contents of this object as a dict."))))))),Object(c.b)("div",{className:"api"},Object(c.b)("h3",{id:"smallstatcard"},"SmallStatCard ",Object(c.b)("a",{name:"h2o_wave.types.SmallStatCard"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"class ",Object(c.b)("span",{class:"ident"},"SmallStatCard"),"(box:\xa0str, title:\xa0str, value:\xa0str, data:\xa0Union[dict,\xa0str,\xa0NoneType]\xa0=\xa0None, commands:\xa0Union[List[",Object(c.b)("a",{title:"h2o_wave.types.Command",href:"#h2o_wave.types.Command"},"Command"),"],\xa0NoneType]\xa0=\xa0None)"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Create a stat card displaying a single value.")),Object(c.b)("h4",{id:"static-methods-51"},"Static methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"load-51"},"load ",Object(c.b)("a",{name:"h2o_wave.types.SmallStatCard.load"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"load"),"(_SmallStatCard__d:\xa0Dict) \u2011>\xa0",Object(c.b)("a",{title:"h2o_wave.types.SmallStatCard",href:"#h2o_wave.types.SmallStatCard"},"SmallStatCard")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Creates an instance of this class using the contents of a dict."))))),Object(c.b)("h4",{id:"instance-variables-51"},"Instance variables"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{id:"h2o_wave.types.SmallStatCard.box",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"box")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"A string indicating how to place this component on the page.")),Object(c.b)("div",{id:"h2o_wave.types.SmallStatCard.commands",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"commands")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Contextual menu commands for this component.")),Object(c.b)("div",{id:"h2o_wave.types.SmallStatCard.data",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"data")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Data for this card.")),Object(c.b)("div",{id:"h2o_wave.types.SmallStatCard.title",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"title")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The card's title.")),Object(c.b)("div",{id:"h2o_wave.types.SmallStatCard.value",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"value")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The primary value displayed."))),Object(c.b)("h4",{id:"methods-51"},"Methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"dump-51"},"dump ",Object(c.b)("a",{name:"h2o_wave.types.SmallStatCard.dump"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"dump"),"(self) \u2011>\xa0Dict"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Returns the contents of this object as a dict."))))))),Object(c.b)("div",{className:"api"},Object(c.b)("h3",{id:"spinbox"},"Spinbox ",Object(c.b)("a",{name:"h2o_wave.types.Spinbox"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"class ",Object(c.b)("span",{class:"ident"},"Spinbox"),"(name:\xa0str, label:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, min:\xa0Union[float,\xa0NoneType]\xa0=\xa0None, max:\xa0Union[float,\xa0NoneType]\xa0=\xa0None, step:\xa0Union[float,\xa0NoneType]\xa0=\xa0None, value:\xa0Union[float,\xa0NoneType]\xa0=\xa0None, disabled:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, visible:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, tooltip:\xa0Union[str,\xa0NoneType]\xa0=\xa0None)"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Create a spinbox."),Object(c.b)("p",null,"A spinbox allows the user to incrementally adjust a value in small steps. It is mainly used for numeric values, but other values are supported too.")),Object(c.b)("h4",{id:"static-methods-52"},"Static methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"load-52"},"load ",Object(c.b)("a",{name:"h2o_wave.types.Spinbox.load"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"load"),"(_Spinbox__d:\xa0Dict) \u2011>\xa0",Object(c.b)("a",{title:"h2o_wave.types.Spinbox",href:"#h2o_wave.types.Spinbox"},"Spinbox")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Creates an instance of this class using the contents of a dict."))))),Object(c.b)("h4",{id:"instance-variables-52"},"Instance variables"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{id:"h2o_wave.types.Spinbox.disabled",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"disabled")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"True if this field is disabled.")),Object(c.b)("div",{id:"h2o_wave.types.Spinbox.label",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"label")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Text to be displayed alongside the component.")),Object(c.b)("div",{id:"h2o_wave.types.Spinbox.max",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"max")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The maximum value of the spinbox.")),Object(c.b)("div",{id:"h2o_wave.types.Spinbox.min",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"min")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The minimum value of the spinbox.")),Object(c.b)("div",{id:"h2o_wave.types.Spinbox.name",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"name")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"An identifying name for this component.")),Object(c.b)("div",{id:"h2o_wave.types.Spinbox.step",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"step")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The difference between two adjacent values of the spinbox.")),Object(c.b)("div",{id:"h2o_wave.types.Spinbox.tooltip",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"tooltip")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"An optional tooltip message displayed when a user clicks the help icon to the right of the component.")),Object(c.b)("div",{id:"h2o_wave.types.Spinbox.value",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"value")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The current value of the spinbox.")),Object(c.b)("div",{id:"h2o_wave.types.Spinbox.visible",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"visible")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"True if the component should be visible. Defaults to true."))),Object(c.b)("h4",{id:"methods-52"},"Methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"dump-52"},"dump ",Object(c.b)("a",{name:"h2o_wave.types.Spinbox.dump"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"dump"),"(self) \u2011>\xa0Dict"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Returns the contents of this object as a dict."))))))),Object(c.b)("div",{className:"api"},Object(c.b)("h3",{id:"step"},"Step ",Object(c.b)("a",{name:"h2o_wave.types.Step"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"class ",Object(c.b)("span",{class:"ident"},"Step"),"(label:\xa0str, icon:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, done:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None)"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Create a step for a stepper.")),Object(c.b)("h4",{id:"static-methods-53"},"Static methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"load-53"},"load ",Object(c.b)("a",{name:"h2o_wave.types.Step.load"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"load"),"(_Step__d:\xa0Dict) \u2011>\xa0",Object(c.b)("a",{title:"h2o_wave.types.Step",href:"#h2o_wave.types.Step"},"Step")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Creates an instance of this class using the contents of a dict."))))),Object(c.b)("h4",{id:"instance-variables-53"},"Instance variables"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{id:"h2o_wave.types.Step.done",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"done")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Indicates whether this step has already been completed.")),Object(c.b)("div",{id:"h2o_wave.types.Step.icon",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"icon")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Icon to be displayed.")),Object(c.b)("div",{id:"h2o_wave.types.Step.label",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"label")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Text displayed below icon."))),Object(c.b)("h4",{id:"methods-53"},"Methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"dump-53"},"dump ",Object(c.b)("a",{name:"h2o_wave.types.Step.dump"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"dump"),"(self) \u2011>\xa0Dict"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Returns the contents of this object as a dict."))))))),Object(c.b)("div",{className:"api"},Object(c.b)("h3",{id:"stepper"},"Stepper ",Object(c.b)("a",{name:"h2o_wave.types.Stepper"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"class ",Object(c.b)("span",{class:"ident"},"Stepper"),"(name:\xa0str, items:\xa0List[",Object(c.b)("a",{title:"h2o_wave.types.Step",href:"#h2o_wave.types.Step"},"Step"),"], visible:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, tooltip:\xa0Union[str,\xa0NoneType]\xa0=\xa0None)"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Create a component that displays a sequence of steps in a process. The steps keep users informed about where they are in the process and how much is left to complete.")),Object(c.b)("h4",{id:"static-methods-54"},"Static methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"load-54"},"load ",Object(c.b)("a",{name:"h2o_wave.types.Stepper.load"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"load"),"(_Stepper__d:\xa0Dict) \u2011>\xa0",Object(c.b)("a",{title:"h2o_wave.types.Stepper",href:"#h2o_wave.types.Stepper"},"Stepper")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Creates an instance of this class using the contents of a dict."))))),Object(c.b)("h4",{id:"instance-variables-54"},"Instance variables"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{id:"h2o_wave.types.Stepper.items",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"items")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The sequence of steps to be displayed.")),Object(c.b)("div",{id:"h2o_wave.types.Stepper.name",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"name")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"An identifying name for this component.")),Object(c.b)("div",{id:"h2o_wave.types.Stepper.tooltip",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"tooltip")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"An optional tooltip message displayed when a user clicks the help icon to the right of the component.")),Object(c.b)("div",{id:"h2o_wave.types.Stepper.visible",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"visible")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"True if the component should be visible. Defaults to true."))),Object(c.b)("h4",{id:"methods-54"},"Methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"dump-54"},"dump ",Object(c.b)("a",{name:"h2o_wave.types.Stepper.dump"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"dump"),"(self) \u2011>\xa0Dict"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Returns the contents of this object as a dict."))))))),Object(c.b)("div",{className:"api"},Object(c.b)("h3",{id:"tab"},"Tab ",Object(c.b)("a",{name:"h2o_wave.types.Tab"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"class ",Object(c.b)("span",{class:"ident"},"Tab"),"(name:\xa0str, label:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, icon:\xa0Union[str,\xa0NoneType]\xa0=\xa0None)"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Create a tab.")),Object(c.b)("h4",{id:"static-methods-55"},"Static methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"load-55"},"load ",Object(c.b)("a",{name:"h2o_wave.types.Tab.load"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"load"),"(_Tab__d:\xa0Dict) \u2011>\xa0",Object(c.b)("a",{title:"h2o_wave.types.Tab",href:"#h2o_wave.types.Tab"},"Tab")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Creates an instance of this class using the contents of a dict."))))),Object(c.b)("h4",{id:"instance-variables-55"},"Instance variables"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{id:"h2o_wave.types.Tab.icon",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"icon")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The icon displayed on the tab.")),Object(c.b)("div",{id:"h2o_wave.types.Tab.label",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"label")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The text displayed on the tab.")),Object(c.b)("div",{id:"h2o_wave.types.Tab.name",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"name")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"An identifying name for this component."))),Object(c.b)("h4",{id:"methods-55"},"Methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"dump-55"},"dump ",Object(c.b)("a",{name:"h2o_wave.types.Tab.dump"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"dump"),"(self) \u2011>\xa0Dict"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Returns the contents of this object as a dict."))))))),Object(c.b)("div",{className:"api"},Object(c.b)("h3",{id:"tabcard"},"TabCard ",Object(c.b)("a",{name:"h2o_wave.types.TabCard"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"class ",Object(c.b)("span",{class:"ident"},"TabCard"),"(box:\xa0str, items:\xa0List[",Object(c.b)("a",{title:"h2o_wave.types.Tab",href:"#h2o_wave.types.Tab"},"Tab"),"], value:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, link:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, commands:\xa0Union[List[",Object(c.b)("a",{title:"h2o_wave.types.Command",href:"#h2o_wave.types.Command"},"Command"),"],\xa0NoneType]\xa0=\xa0None)"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Create a card containing tabs for navigation.")),Object(c.b)("h4",{id:"static-methods-56"},"Static methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"load-56"},"load ",Object(c.b)("a",{name:"h2o_wave.types.TabCard.load"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"load"),"(_TabCard__d:\xa0Dict) \u2011>\xa0",Object(c.b)("a",{title:"h2o_wave.types.TabCard",href:"#h2o_wave.types.TabCard"},"TabCard")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Creates an instance of this class using the contents of a dict."))))),Object(c.b)("h4",{id:"instance-variables-56"},"Instance variables"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{id:"h2o_wave.types.TabCard.box",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"box")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"A string indicating how to place this component on the page.")),Object(c.b)("div",{id:"h2o_wave.types.TabCard.commands",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"commands")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Contextual menu commands for this component.")),Object(c.b)("div",{id:"h2o_wave.types.TabCard.items",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"items")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Items to render.")),Object(c.b)("div",{id:"h2o_wave.types.TabCard.link",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"link")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"True if tabs should be rendered as links and not a standard tab.")),Object(c.b)("div",{id:"h2o_wave.types.TabCard.value",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"value")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The name of the tab to select."))),Object(c.b)("h4",{id:"methods-56"},"Methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"dump-56"},"dump ",Object(c.b)("a",{name:"h2o_wave.types.TabCard.dump"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"dump"),"(self) \u2011>\xa0Dict"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Returns the contents of this object as a dict."))))))),Object(c.b)("div",{className:"api"},Object(c.b)("h3",{id:"table"},"Table ",Object(c.b)("a",{name:"h2o_wave.types.Table"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"class ",Object(c.b)("span",{class:"ident"},"Table"),"(name:\xa0str, columns:\xa0List[",Object(c.b)("a",{title:"h2o_wave.types.TableColumn",href:"#h2o_wave.types.TableColumn"},"TableColumn"),"], rows:\xa0List[",Object(c.b)("a",{title:"h2o_wave.types.TableRow",href:"#h2o_wave.types.TableRow"},"TableRow"),"], multiple:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, groupable:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, downloadable:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, resettable:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, height:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, values:\xa0Union[List[str],\xa0NoneType]\xa0=\xa0None, visible:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, tooltip:\xa0Union[str,\xa0NoneType]\xa0=\xa0None)"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Create an interactive table."),Object(c.b)("p",null,"This table differs from a markdown table in that it supports clicking or selecting rows. If you simply want to display a non-interactive table of information, use a markdown table."),Object(c.b)("p",null,"If ",Object(c.b)("code",null,"multiple")," is set to False (default), each row in the table is clickable. When a row is clicked, the form is submitted automatically, and ",Object(c.b)("code",null,"q.args.table_name")," is set to ",Object(c.b)("code",null,"[row_name]"),", where ",Object(c.b)("code",null,"table_name")," is the ",Object(c.b)("code",null,"name")," of the table, and ",Object(c.b)("code",null,"row_name")," is the ",Object(c.b)("code",null,"name")," of the row that was clicked on."),Object(c.b)("p",null,"If ",Object(c.b)("code",null,"multiple")," is set to True, each row in the table is selectable. A row can be selected by clicking on it. Multiple rows can be selected either by shift+clicking or using marquee selection. When the form is submitted,",Object(c.b)("code",null,"q.args.table_name")," is set to ",Object(c.b)("code",null,"[row1_name, row2_name, \u2026]")," where ",Object(c.b)("code",null,"table_name")," is the ",Object(c.b)("code",null,"name")," of the table, and ",Object(c.b)("code",null,"row1_name"),", ",Object(c.b)("code",null,"row2_name")," are the ",Object(c.b)("code",null,"name")," of the rows that were selected. Note that if ",Object(c.b)("code",null,"multiple")," is set to True, the form is not submitted automatically, and one or more buttons are required in the form to trigger submission.")),Object(c.b)("h4",{id:"static-methods-57"},"Static methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"load-57"},"load ",Object(c.b)("a",{name:"h2o_wave.types.Table.load"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"load"),"(_Table__d:\xa0Dict) \u2011>\xa0",Object(c.b)("a",{title:"h2o_wave.types.Table",href:"#h2o_wave.types.Table"},"Table")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Creates an instance of this class using the contents of a dict."))))),Object(c.b)("h4",{id:"instance-variables-57"},"Instance variables"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{id:"h2o_wave.types.Table.columns",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"columns")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The columns in this table.")),Object(c.b)("div",{id:"h2o_wave.types.Table.downloadable",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"downloadable")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Indicates whether the contents of this table can be downloaded and saved as a CSV file. Defaults to False.")),Object(c.b)("div",{id:"h2o_wave.types.Table.groupable",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"groupable")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"True to allow group by feature.")),Object(c.b)("div",{id:"h2o_wave.types.Table.height",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"height")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The height of the table, e.g. '400px', '50%', etc.")),Object(c.b)("div",{id:"h2o_wave.types.Table.multiple",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"multiple")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"True to allow multiple rows to be selected.")),Object(c.b)("div",{id:"h2o_wave.types.Table.name",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"name")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"An identifying name for this component.")),Object(c.b)("div",{id:"h2o_wave.types.Table.resettable",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"resettable")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Indicates whether a Reset button should be displayed to reset search / filter / group-by values to their defaults. Defaults to False.")),Object(c.b)("div",{id:"h2o_wave.types.Table.rows",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"rows")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The rows in this table.")),Object(c.b)("div",{id:"h2o_wave.types.Table.tooltip",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"tooltip")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"An optional tooltip message displayed when a user clicks the help icon to the right of the component.")),Object(c.b)("div",{id:"h2o_wave.types.Table.values",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"values")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The names of the selected rows. If this parameter is set, multiple selections will be allowed (",Object(c.b)("code",null,"multiple")," is assumed to be ",Object(c.b)("code",null,"True"),").")),Object(c.b)("div",{id:"h2o_wave.types.Table.visible",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"visible")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"True if the component should be visible. Defaults to true."))),Object(c.b)("h4",{id:"methods-57"},"Methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"dump-57"},"dump ",Object(c.b)("a",{name:"h2o_wave.types.Table.dump"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"dump"),"(self) \u2011>\xa0Dict"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Returns the contents of this object as a dict."))))))),Object(c.b)("div",{className:"api"},Object(c.b)("h3",{id:"tablecelltype"},"TableCellType ",Object(c.b)("a",{name:"h2o_wave.types.TableCellType"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"class ",Object(c.b)("span",{class:"ident"},"TableCellType"),"(progress:\xa0Union[",Object(c.b)("a",{title:"h2o_wave.types.ProgressTableCellType",href:"#h2o_wave.types.ProgressTableCellType"},"ProgressTableCellType"),",\xa0NoneType]\xa0=\xa0None, icon:\xa0Union[",Object(c.b)("a",{title:"h2o_wave.types.IconTableCellType",href:"#h2o_wave.types.IconTableCellType"},"IconTableCellType"),",\xa0NoneType]\xa0=\xa0None)"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Defines cell content to be rendered instead of a simple text.")),Object(c.b)("h4",{id:"static-methods-58"},"Static methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"load-58"},"load ",Object(c.b)("a",{name:"h2o_wave.types.TableCellType.load"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"load"),"(_TableCellType__d:\xa0Dict) \u2011>\xa0",Object(c.b)("a",{title:"h2o_wave.types.TableCellType",href:"#h2o_wave.types.TableCellType"},"TableCellType")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Creates an instance of this class using the contents of a dict."))))),Object(c.b)("h4",{id:"instance-variables-58"},"Instance variables"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{id:"h2o_wave.types.TableCellType.icon",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"icon")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"No documentation available.")),Object(c.b)("div",{id:"h2o_wave.types.TableCellType.progress",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"progress")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"No documentation available."))),Object(c.b)("h4",{id:"methods-58"},"Methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"dump-58"},"dump ",Object(c.b)("a",{name:"h2o_wave.types.TableCellType.dump"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"dump"),"(self) \u2011>\xa0Dict"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Returns the contents of this object as a dict."))))))),Object(c.b)("div",{className:"api"},Object(c.b)("h3",{id:"tablecolumn"},"TableColumn ",Object(c.b)("a",{name:"h2o_wave.types.TableColumn"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"class ",Object(c.b)("span",{class:"ident"},"TableColumn"),"(name:\xa0str, label:\xa0str, min_width:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, max_width:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, sortable:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, searchable:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, filterable:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, link:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, cell_type:\xa0Union[",Object(c.b)("a",{title:"h2o_wave.types.TableCellType",href:"#h2o_wave.types.TableCellType"},"TableCellType"),",\xa0NoneType]\xa0=\xa0None)"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Create a table column.")),Object(c.b)("h4",{id:"static-methods-59"},"Static methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"load-59"},"load ",Object(c.b)("a",{name:"h2o_wave.types.TableColumn.load"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"load"),"(_TableColumn__d:\xa0Dict) \u2011>\xa0",Object(c.b)("a",{title:"h2o_wave.types.TableColumn",href:"#h2o_wave.types.TableColumn"},"TableColumn")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Creates an instance of this class using the contents of a dict."))))),Object(c.b)("h4",{id:"instance-variables-59"},"Instance variables"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{id:"h2o_wave.types.TableColumn.cell_type",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"cell_type")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Defines how to render each cell in this column. Defaults to plain text.")),Object(c.b)("div",{id:"h2o_wave.types.TableColumn.filterable",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"filterable")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Indicates whether the contents of this column are displayed as filters in a dropdown.")),Object(c.b)("div",{id:"h2o_wave.types.TableColumn.label",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"label")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The text displayed on the column header.")),Object(c.b)("div",{id:"h2o_wave.types.TableColumn.link",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"link")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Indicates whether each cell in this column should be displayed as a clickable link.")),Object(c.b)("div",{id:"h2o_wave.types.TableColumn.max_width",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"max_width")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The maximum width of this column, e.g. '100px'. Only ",Object(c.b)("code",null,"px")," units are supported at this time.")),Object(c.b)("div",{id:"h2o_wave.types.TableColumn.min_width",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"min_width")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The minimum width of this column, e.g. '50px'. Only ",Object(c.b)("code",null,"px")," units are supported at this time.")),Object(c.b)("div",{id:"h2o_wave.types.TableColumn.name",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"name")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"An identifying name for this column.")),Object(c.b)("div",{id:"h2o_wave.types.TableColumn.searchable",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"searchable")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Indicates whether the contents of this column can be searched through. Enables a search box for the table if true.")),Object(c.b)("div",{id:"h2o_wave.types.TableColumn.sortable",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"sortable")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Indicates whether the column is sortable."))),Object(c.b)("h4",{id:"methods-59"},"Methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"dump-59"},"dump ",Object(c.b)("a",{name:"h2o_wave.types.TableColumn.dump"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"dump"),"(self) \u2011>\xa0Dict"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Returns the contents of this object as a dict."))))))),Object(c.b)("div",{className:"api"},Object(c.b)("h3",{id:"tablerow"},"TableRow ",Object(c.b)("a",{name:"h2o_wave.types.TableRow"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"class ",Object(c.b)("span",{class:"ident"},"TableRow"),"(name:\xa0str, cells:\xa0List[str])"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Create a table row.")),Object(c.b)("h4",{id:"static-methods-60"},"Static methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"load-60"},"load ",Object(c.b)("a",{name:"h2o_wave.types.TableRow.load"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"load"),"(_TableRow__d:\xa0Dict) \u2011>\xa0",Object(c.b)("a",{title:"h2o_wave.types.TableRow",href:"#h2o_wave.types.TableRow"},"TableRow")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Creates an instance of this class using the contents of a dict."))))),Object(c.b)("h4",{id:"instance-variables-60"},"Instance variables"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{id:"h2o_wave.types.TableRow.cells",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"cells")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The cells in this row (displayed left to right).")),Object(c.b)("div",{id:"h2o_wave.types.TableRow.name",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"name")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"An identifying name for this row."))),Object(c.b)("h4",{id:"methods-60"},"Methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"dump-60"},"dump ",Object(c.b)("a",{name:"h2o_wave.types.TableRow.dump"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"dump"),"(self) \u2011>\xa0Dict"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Returns the contents of this object as a dict."))))))),Object(c.b)("div",{className:"api"},Object(c.b)("h3",{id:"tabs"},"Tabs ",Object(c.b)("a",{name:"h2o_wave.types.Tabs"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"class ",Object(c.b)("span",{class:"ident"},"Tabs"),"(name:\xa0str, value:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, items:\xa0Union[List[",Object(c.b)("a",{title:"h2o_wave.types.Tab",href:"#h2o_wave.types.Tab"},"Tab"),"],\xa0NoneType]\xa0=\xa0None, visible:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None)"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Create a tab bar.")),Object(c.b)("h4",{id:"static-methods-61"},"Static methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"load-61"},"load ",Object(c.b)("a",{name:"h2o_wave.types.Tabs.load"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"load"),"(_Tabs__d:\xa0Dict) \u2011>\xa0",Object(c.b)("a",{title:"h2o_wave.types.Tabs",href:"#h2o_wave.types.Tabs"},"Tabs")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Creates an instance of this class using the contents of a dict."))))),Object(c.b)("h4",{id:"instance-variables-61"},"Instance variables"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{id:"h2o_wave.types.Tabs.items",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"items")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The tabs in this tab bar.")),Object(c.b)("div",{id:"h2o_wave.types.Tabs.name",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"name")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"An identifying name for this component.")),Object(c.b)("div",{id:"h2o_wave.types.Tabs.value",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"value")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The name of the tab to select.")),Object(c.b)("div",{id:"h2o_wave.types.Tabs.visible",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"visible")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"True if the component should be visible. Defaults to true."))),Object(c.b)("h4",{id:"methods-61"},"Methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"dump-61"},"dump ",Object(c.b)("a",{name:"h2o_wave.types.Tabs.dump"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"dump"),"(self) \u2011>\xa0Dict"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Returns the contents of this object as a dict."))))))),Object(c.b)("div",{className:"api"},Object(c.b)("h3",{id:"tallgaugestatcard"},"TallGaugeStatCard ",Object(c.b)("a",{name:"h2o_wave.types.TallGaugeStatCard"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"class ",Object(c.b)("span",{class:"ident"},"TallGaugeStatCard"),"(box:\xa0str, title:\xa0str, value:\xa0str, aux_value:\xa0str, progress:\xa0float, plot_color:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, data:\xa0Union[dict,\xa0str,\xa0NoneType]\xa0=\xa0None, commands:\xa0Union[List[",Object(c.b)("a",{title:"h2o_wave.types.Command",href:"#h2o_wave.types.Command"},"Command"),"],\xa0NoneType]\xa0=\xa0None)"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Create a tall stat card displaying a primary value, an auxiliary value and a progress gauge.")),Object(c.b)("h4",{id:"static-methods-62"},"Static methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"load-62"},"load ",Object(c.b)("a",{name:"h2o_wave.types.TallGaugeStatCard.load"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"load"),"(_TallGaugeStatCard__d:\xa0Dict) \u2011>\xa0",Object(c.b)("a",{title:"h2o_wave.types.TallGaugeStatCard",href:"#h2o_wave.types.TallGaugeStatCard"},"TallGaugeStatCard")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Creates an instance of this class using the contents of a dict."))))),Object(c.b)("h4",{id:"instance-variables-62"},"Instance variables"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{id:"h2o_wave.types.TallGaugeStatCard.aux_value",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"aux_value")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The auxiliary value displayed next to the primary value.")),Object(c.b)("div",{id:"h2o_wave.types.TallGaugeStatCard.box",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"box")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"A string indicating how to place this component on the page.")),Object(c.b)("div",{id:"h2o_wave.types.TallGaugeStatCard.commands",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"commands")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Contextual menu commands for this component.")),Object(c.b)("div",{id:"h2o_wave.types.TallGaugeStatCard.data",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"data")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Data for this card.")),Object(c.b)("div",{id:"h2o_wave.types.TallGaugeStatCard.plot_color",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"plot_color")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The color of the progress gauge.")),Object(c.b)("div",{id:"h2o_wave.types.TallGaugeStatCard.progress",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"progress")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The value of the progress gauge, between 0 and 1.")),Object(c.b)("div",{id:"h2o_wave.types.TallGaugeStatCard.title",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"title")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The card's title.")),Object(c.b)("div",{id:"h2o_wave.types.TallGaugeStatCard.value",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"value")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The primary value displayed."))),Object(c.b)("h4",{id:"methods-62"},"Methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"dump-62"},"dump ",Object(c.b)("a",{name:"h2o_wave.types.TallGaugeStatCard.dump"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"dump"),"(self) \u2011>\xa0Dict"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Returns the contents of this object as a dict."))))))),Object(c.b)("div",{className:"api"},Object(c.b)("h3",{id:"tallseriesstatcard"},"TallSeriesStatCard ",Object(c.b)("a",{name:"h2o_wave.types.TallSeriesStatCard"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"class ",Object(c.b)("span",{class:"ident"},"TallSeriesStatCard"),"(box:\xa0str, title:\xa0str, value:\xa0str, aux_value:\xa0str, plot_data:\xa0Union[",Object(c.b)("a",{title:"h2o_wave.core.Data",href:"core#h2o_wave.core.Data"},"Data"),",\xa0str], plot_value:\xa0str, plot_zero_value:\xa0Union[float,\xa0NoneType]\xa0=\xa0None, plot_category:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, plot_type:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, plot_curve:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, plot_color:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, data:\xa0Union[dict,\xa0str,\xa0NoneType]\xa0=\xa0None, commands:\xa0Union[List[",Object(c.b)("a",{title:"h2o_wave.types.Command",href:"#h2o_wave.types.Command"},"Command"),"],\xa0NoneType]\xa0=\xa0None)"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Create a tall stat card displaying a primary value, an auxiliary value and a series plot.")),Object(c.b)("h4",{id:"static-methods-63"},"Static methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"load-63"},"load ",Object(c.b)("a",{name:"h2o_wave.types.TallSeriesStatCard.load"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"load"),"(_TallSeriesStatCard__d:\xa0Dict) \u2011>\xa0",Object(c.b)("a",{title:"h2o_wave.types.TallSeriesStatCard",href:"#h2o_wave.types.TallSeriesStatCard"},"TallSeriesStatCard")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Creates an instance of this class using the contents of a dict."))))),Object(c.b)("h4",{id:"instance-variables-63"},"Instance variables"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{id:"h2o_wave.types.TallSeriesStatCard.aux_value",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"aux_value")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The auxiliary value displayed below the primary value.")),Object(c.b)("div",{id:"h2o_wave.types.TallSeriesStatCard.box",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"box")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"A string indicating how to place this component on the page.")),Object(c.b)("div",{id:"h2o_wave.types.TallSeriesStatCard.commands",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"commands")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Contextual menu commands for this component.")),Object(c.b)("div",{id:"h2o_wave.types.TallSeriesStatCard.data",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"data")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Data for this card.")),Object(c.b)("div",{id:"h2o_wave.types.TallSeriesStatCard.plot_category",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"plot_category")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The data field to use for x-axis values (ignored if ",Object(c.b)("code",null,"plot_type")," is ",Object(c.b)("code",null,"area"),"; must be provided if ",Object(c.b)("code",null,"plot_type")," is ",Object(c.b)("code",null,"interval"),"). Defaults to 'x'.")),Object(c.b)("div",{id:"h2o_wave.types.TallSeriesStatCard.plot_color",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"plot_color")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The plot's color.")),Object(c.b)("div",{id:"h2o_wave.types.TallSeriesStatCard.plot_curve",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"plot_curve")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The plot's curve style. Defaults to ",Object(c.b)("code",null,"linear"),". One of 'linear', 'smooth', 'step', 'step-after', 'step-before'.")),Object(c.b)("div",{id:"h2o_wave.types.TallSeriesStatCard.plot_data",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"plot_data")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The plot's data.")),Object(c.b)("div",{id:"h2o_wave.types.TallSeriesStatCard.plot_type",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"plot_type")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The type of plot. Defaults to ",Object(c.b)("code",null,"area"),". One of 'area', 'interval'.")),Object(c.b)("div",{id:"h2o_wave.types.TallSeriesStatCard.plot_value",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"plot_value")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The data field to use for y-axis values.")),Object(c.b)("div",{id:"h2o_wave.types.TallSeriesStatCard.plot_zero_value",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"plot_zero_value")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The base value to use for each y-axis mark. Set this to ",Object(c.b)("code",null,"0")," if you want to pin the x-axis at ",Object(c.b)("code",null,"y=0"),". If not provided, the minimum value from the data is used.")),Object(c.b)("div",{id:"h2o_wave.types.TallSeriesStatCard.title",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"title")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The card's title.")),Object(c.b)("div",{id:"h2o_wave.types.TallSeriesStatCard.value",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"value")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The primary value displayed."))),Object(c.b)("h4",{id:"methods-63"},"Methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"dump-63"},"dump ",Object(c.b)("a",{name:"h2o_wave.types.TallSeriesStatCard.dump"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"dump"),"(self) \u2011>\xa0Dict"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Returns the contents of this object as a dict."))))))),Object(c.b)("div",{className:"api"},Object(c.b)("h3",{id:"template"},"Template ",Object(c.b)("a",{name:"h2o_wave.types.Template"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"class ",Object(c.b)("span",{class:"ident"},"Template"),"(content:\xa0str, data:\xa0Union[dict,\xa0str,\xa0NoneType]\xa0=\xa0None, name:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, visible:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None)"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Render dynamic content using an HTML template.")),Object(c.b)("h4",{id:"static-methods-64"},"Static methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"load-64"},"load ",Object(c.b)("a",{name:"h2o_wave.types.Template.load"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"load"),"(_Template__d:\xa0Dict) \u2011>\xa0",Object(c.b)("a",{title:"h2o_wave.types.Template",href:"#h2o_wave.types.Template"},"Template")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Creates an instance of this class using the contents of a dict."))))),Object(c.b)("h4",{id:"instance-variables-64"},"Instance variables"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{id:"h2o_wave.types.Template.content",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"content")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The Handlebars template. ",Object(c.b)("a",{href:"https://handlebarsjs.com/guide/"},"https://handlebarsjs.com/guide/"))),Object(c.b)("div",{id:"h2o_wave.types.Template.data",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"data")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Data for the Handlebars template")),Object(c.b)("div",{id:"h2o_wave.types.Template.name",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"name")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"An identifying name for this component.")),Object(c.b)("div",{id:"h2o_wave.types.Template.visible",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"visible")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"True if the component should be visible. Defaults to true."))),Object(c.b)("h4",{id:"methods-64"},"Methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"dump-64"},"dump ",Object(c.b)("a",{name:"h2o_wave.types.Template.dump"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"dump"),"(self) \u2011>\xa0Dict"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Returns the contents of this object as a dict."))))))),Object(c.b)("div",{className:"api"},Object(c.b)("h3",{id:"templatecard"},"TemplateCard ",Object(c.b)("a",{name:"h2o_wave.types.TemplateCard"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"class ",Object(c.b)("span",{class:"ident"},"TemplateCard"),"(box:\xa0str, title:\xa0str, content:\xa0str, data:\xa0Union[dict,\xa0str,\xa0NoneType]\xa0=\xa0None, commands:\xa0Union[List[",Object(c.b)("a",{title:"h2o_wave.types.Command",href:"#h2o_wave.types.Command"},"Command"),"],\xa0NoneType]\xa0=\xa0None)"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Render dynamic content using an HTML template.")),Object(c.b)("h4",{id:"static-methods-65"},"Static methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"load-65"},"load ",Object(c.b)("a",{name:"h2o_wave.types.TemplateCard.load"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"load"),"(_TemplateCard__d:\xa0Dict) \u2011>\xa0",Object(c.b)("a",{title:"h2o_wave.types.TemplateCard",href:"#h2o_wave.types.TemplateCard"},"TemplateCard")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Creates an instance of this class using the contents of a dict."))))),Object(c.b)("h4",{id:"instance-variables-65"},"Instance variables"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{id:"h2o_wave.types.TemplateCard.box",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"box")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"A string indicating how to place this component on the page.")),Object(c.b)("div",{id:"h2o_wave.types.TemplateCard.commands",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"commands")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Contextual menu commands for this component.")),Object(c.b)("div",{id:"h2o_wave.types.TemplateCard.content",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"content")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The Handlebars template. ",Object(c.b)("a",{href:"https://handlebarsjs.com/guide/"},"https://handlebarsjs.com/guide/"))),Object(c.b)("div",{id:"h2o_wave.types.TemplateCard.data",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"data")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Data for the Handlebars template.")),Object(c.b)("div",{id:"h2o_wave.types.TemplateCard.title",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"title")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The title for this card."))),Object(c.b)("h4",{id:"methods-65"},"Methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"dump-65"},"dump ",Object(c.b)("a",{name:"h2o_wave.types.TemplateCard.dump"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"dump"),"(self) \u2011>\xa0Dict"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Returns the contents of this object as a dict."))))))),Object(c.b)("div",{className:"api"},Object(c.b)("h3",{id:"text"},"Text ",Object(c.b)("a",{name:"h2o_wave.types.Text"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"class ",Object(c.b)("span",{class:"ident"},"Text"),"(content:\xa0str, size:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, visible:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, tooltip:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, name:\xa0Union[str,\xa0NoneType]\xa0=\xa0None)"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Create text content.")),Object(c.b)("h4",{id:"static-methods-66"},"Static methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"load-66"},"load ",Object(c.b)("a",{name:"h2o_wave.types.Text.load"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"load"),"(_Text__d:\xa0Dict) \u2011>\xa0",Object(c.b)("a",{title:"h2o_wave.types.Text",href:"#h2o_wave.types.Text"},"Text")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Creates an instance of this class using the contents of a dict."))))),Object(c.b)("h4",{id:"instance-variables-66"},"Instance variables"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{id:"h2o_wave.types.Text.content",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"content")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The text content.")),Object(c.b)("div",{id:"h2o_wave.types.Text.name",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"name")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"An identifying name for this component.")),Object(c.b)("div",{id:"h2o_wave.types.Text.size",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"size")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The font size of the text content. One of 'xl', 'l', 'm', 's', 'xs'.")),Object(c.b)("div",{id:"h2o_wave.types.Text.tooltip",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"tooltip")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Tooltip message.")),Object(c.b)("div",{id:"h2o_wave.types.Text.visible",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"visible")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"True if the component should be visible. Defaults to true."))),Object(c.b)("h4",{id:"methods-66"},"Methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"dump-66"},"dump ",Object(c.b)("a",{name:"h2o_wave.types.Text.dump"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"dump"),"(self) \u2011>\xa0Dict"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Returns the contents of this object as a dict."))))))),Object(c.b)("div",{className:"api"},Object(c.b)("h3",{id:"textl"},"TextL ",Object(c.b)("a",{name:"h2o_wave.types.TextL"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"class ",Object(c.b)("span",{class:"ident"},"TextL"),"(content:\xa0str, visible:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, tooltip:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, commands:\xa0Union[List[",Object(c.b)("a",{title:"h2o_wave.types.Command",href:"#h2o_wave.types.Command"},"Command"),"],\xa0NoneType]\xa0=\xa0None, name:\xa0Union[str,\xa0NoneType]\xa0=\xa0None)"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Create large sized text content.")),Object(c.b)("h4",{id:"static-methods-67"},"Static methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"load-67"},"load ",Object(c.b)("a",{name:"h2o_wave.types.TextL.load"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"load"),"(_TextL__d:\xa0Dict) \u2011>\xa0",Object(c.b)("a",{title:"h2o_wave.types.TextL",href:"#h2o_wave.types.TextL"},"TextL")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Creates an instance of this class using the contents of a dict."))))),Object(c.b)("h4",{id:"instance-variables-67"},"Instance variables"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{id:"h2o_wave.types.TextL.commands",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"commands")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Contextual menu commands for this component.")),Object(c.b)("div",{id:"h2o_wave.types.TextL.content",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"content")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The text content.")),Object(c.b)("div",{id:"h2o_wave.types.TextL.name",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"name")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"An identifying name for this component.")),Object(c.b)("div",{id:"h2o_wave.types.TextL.tooltip",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"tooltip")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Tooltip message.")),Object(c.b)("div",{id:"h2o_wave.types.TextL.visible",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"visible")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"True if the component should be visible. Defaults to true."))),Object(c.b)("h4",{id:"methods-67"},"Methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"dump-67"},"dump ",Object(c.b)("a",{name:"h2o_wave.types.TextL.dump"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"dump"),"(self) \u2011>\xa0Dict"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Returns the contents of this object as a dict."))))))),Object(c.b)("div",{className:"api"},Object(c.b)("h3",{id:"textm"},"TextM ",Object(c.b)("a",{name:"h2o_wave.types.TextM"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"class ",Object(c.b)("span",{class:"ident"},"TextM"),"(content:\xa0str, visible:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, tooltip:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, name:\xa0Union[str,\xa0NoneType]\xa0=\xa0None)"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Create medium sized text content.")),Object(c.b)("h4",{id:"static-methods-68"},"Static methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"load-68"},"load ",Object(c.b)("a",{name:"h2o_wave.types.TextM.load"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"load"),"(_TextM__d:\xa0Dict) \u2011>\xa0",Object(c.b)("a",{title:"h2o_wave.types.TextM",href:"#h2o_wave.types.TextM"},"TextM")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Creates an instance of this class using the contents of a dict."))))),Object(c.b)("h4",{id:"instance-variables-68"},"Instance variables"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{id:"h2o_wave.types.TextM.content",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"content")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The text content.")),Object(c.b)("div",{id:"h2o_wave.types.TextM.name",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"name")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"An identifying name for this component.")),Object(c.b)("div",{id:"h2o_wave.types.TextM.tooltip",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"tooltip")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Tooltip message.")),Object(c.b)("div",{id:"h2o_wave.types.TextM.visible",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"visible")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"True if the component should be visible. Defaults to true."))),Object(c.b)("h4",{id:"methods-68"},"Methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"dump-68"},"dump ",Object(c.b)("a",{name:"h2o_wave.types.TextM.dump"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"dump"),"(self) \u2011>\xa0Dict"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Returns the contents of this object as a dict."))))))),Object(c.b)("div",{className:"api"},Object(c.b)("h3",{id:"texts"},"TextS ",Object(c.b)("a",{name:"h2o_wave.types.TextS"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"class ",Object(c.b)("span",{class:"ident"},"TextS"),"(content:\xa0str, visible:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, tooltip:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, name:\xa0Union[str,\xa0NoneType]\xa0=\xa0None)"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Create small sized text content.")),Object(c.b)("h4",{id:"static-methods-69"},"Static methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"load-69"},"load ",Object(c.b)("a",{name:"h2o_wave.types.TextS.load"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"load"),"(_TextS__d:\xa0Dict) \u2011>\xa0",Object(c.b)("a",{title:"h2o_wave.types.TextS",href:"#h2o_wave.types.TextS"},"TextS")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Creates an instance of this class using the contents of a dict."))))),Object(c.b)("h4",{id:"instance-variables-69"},"Instance variables"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{id:"h2o_wave.types.TextS.content",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"content")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The text content.")),Object(c.b)("div",{id:"h2o_wave.types.TextS.name",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"name")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"An identifying name for this component.")),Object(c.b)("div",{id:"h2o_wave.types.TextS.tooltip",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"tooltip")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Tooltip message.")),Object(c.b)("div",{id:"h2o_wave.types.TextS.visible",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"visible")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"True if the component should be visible. Defaults to true."))),Object(c.b)("h4",{id:"methods-69"},"Methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"dump-69"},"dump ",Object(c.b)("a",{name:"h2o_wave.types.TextS.dump"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"dump"),"(self) \u2011>\xa0Dict"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Returns the contents of this object as a dict."))))))),Object(c.b)("div",{className:"api"},Object(c.b)("h3",{id:"textxl"},"TextXl ",Object(c.b)("a",{name:"h2o_wave.types.TextXl"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"class ",Object(c.b)("span",{class:"ident"},"TextXl"),"(content:\xa0str, visible:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, tooltip:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, commands:\xa0Union[List[",Object(c.b)("a",{title:"h2o_wave.types.Command",href:"#h2o_wave.types.Command"},"Command"),"],\xa0NoneType]\xa0=\xa0None, name:\xa0Union[str,\xa0NoneType]\xa0=\xa0None)"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Create extra-large sized text content.")),Object(c.b)("h4",{id:"static-methods-70"},"Static methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"load-70"},"load ",Object(c.b)("a",{name:"h2o_wave.types.TextXl.load"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"load"),"(_TextXl__d:\xa0Dict) \u2011>\xa0",Object(c.b)("a",{title:"h2o_wave.types.TextXl",href:"#h2o_wave.types.TextXl"},"TextXl")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Creates an instance of this class using the contents of a dict."))))),Object(c.b)("h4",{id:"instance-variables-70"},"Instance variables"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{id:"h2o_wave.types.TextXl.commands",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"commands")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Contextual menu commands for this component.")),Object(c.b)("div",{id:"h2o_wave.types.TextXl.content",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"content")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The text content.")),Object(c.b)("div",{id:"h2o_wave.types.TextXl.name",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"name")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"An identifying name for this component.")),Object(c.b)("div",{id:"h2o_wave.types.TextXl.tooltip",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"tooltip")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Tooltip message.")),Object(c.b)("div",{id:"h2o_wave.types.TextXl.visible",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"visible")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"True if the component should be visible. Defaults to true."))),Object(c.b)("h4",{id:"methods-70"},"Methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"dump-70"},"dump ",Object(c.b)("a",{name:"h2o_wave.types.TextXl.dump"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"dump"),"(self) \u2011>\xa0Dict"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Returns the contents of this object as a dict."))))))),Object(c.b)("div",{className:"api"},Object(c.b)("h3",{id:"textxs"},"TextXs ",Object(c.b)("a",{name:"h2o_wave.types.TextXs"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"class ",Object(c.b)("span",{class:"ident"},"TextXs"),"(content:\xa0str, visible:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, tooltip:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, name:\xa0Union[str,\xa0NoneType]\xa0=\xa0None)"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Create extra-small sized text content.")),Object(c.b)("h4",{id:"static-methods-71"},"Static methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"load-71"},"load ",Object(c.b)("a",{name:"h2o_wave.types.TextXs.load"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"load"),"(_TextXs__d:\xa0Dict) \u2011>\xa0",Object(c.b)("a",{title:"h2o_wave.types.TextXs",href:"#h2o_wave.types.TextXs"},"TextXs")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Creates an instance of this class using the contents of a dict."))))),Object(c.b)("h4",{id:"instance-variables-71"},"Instance variables"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{id:"h2o_wave.types.TextXs.content",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"content")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The text content.")),Object(c.b)("div",{id:"h2o_wave.types.TextXs.name",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"name")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"An identifying name for this component.")),Object(c.b)("div",{id:"h2o_wave.types.TextXs.tooltip",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"tooltip")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Tooltip message.")),Object(c.b)("div",{id:"h2o_wave.types.TextXs.visible",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"visible")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"True if the component should be visible. Defaults to true."))),Object(c.b)("h4",{id:"methods-71"},"Methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"dump-71"},"dump ",Object(c.b)("a",{name:"h2o_wave.types.TextXs.dump"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"dump"),"(self) \u2011>\xa0Dict"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Returns the contents of this object as a dict."))))))),Object(c.b)("div",{className:"api"},Object(c.b)("h3",{id:"textbox"},"Textbox ",Object(c.b)("a",{name:"h2o_wave.types.Textbox"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"class ",Object(c.b)("span",{class:"ident"},"Textbox"),"(name:\xa0str, label:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, placeholder:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, value:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, mask:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, icon:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, prefix:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, suffix:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, error:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, required:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, disabled:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, readonly:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, multiline:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, password:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, trigger:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, visible:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, tooltip:\xa0Union[str,\xa0NoneType]\xa0=\xa0None)"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Create a text box."),Object(c.b)("p",null,"The text box component enables a user to type text into an app. It's typically used to capture a single line of text, but can be configured to capture multiple lines of text. The text displays on the screen in a simple, uniform format.")),Object(c.b)("h4",{id:"static-methods-72"},"Static methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"load-72"},"load ",Object(c.b)("a",{name:"h2o_wave.types.Textbox.load"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"load"),"(_Textbox__d:\xa0Dict) \u2011>\xa0",Object(c.b)("a",{title:"h2o_wave.types.Textbox",href:"#h2o_wave.types.Textbox"},"Textbox")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Creates an instance of this class using the contents of a dict."))))),Object(c.b)("h4",{id:"instance-variables-72"},"Instance variables"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{id:"h2o_wave.types.Textbox.disabled",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"disabled")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"True if the text box is disabled.")),Object(c.b)("div",{id:"h2o_wave.types.Textbox.error",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"error")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Text to be displayed as an error below the text box.")),Object(c.b)("div",{id:"h2o_wave.types.Textbox.icon",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"icon")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Icon displayed in the far right end of the text field.")),Object(c.b)("div",{id:"h2o_wave.types.Textbox.label",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"label")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The text displayed above the field.")),Object(c.b)("div",{id:"h2o_wave.types.Textbox.mask",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"mask")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The masking string that defines the mask's behavior. A backslash will escape any character. Special format characters are: '9': [0-9] 'a': [a-zA-Z] '*': [a-zA-Z0-9].")),Object(c.b)("div",{id:"h2o_wave.types.Textbox.multiline",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"multiline")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"True if the text box should allow multi-line text entry.")),Object(c.b)("div",{id:"h2o_wave.types.Textbox.name",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"name")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"An identifying name for this component.")),Object(c.b)("div",{id:"h2o_wave.types.Textbox.password",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"password")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"True if the text box should hide text content.")),Object(c.b)("div",{id:"h2o_wave.types.Textbox.placeholder",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"placeholder")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"A string that provides a brief hint to the user as to what kind of information is expected in the field. It should be a word or short phrase that demonstrates the expected type of data, rather than an explanatory message.")),Object(c.b)("div",{id:"h2o_wave.types.Textbox.prefix",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"prefix")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Text to be displayed before the text box contents.")),Object(c.b)("div",{id:"h2o_wave.types.Textbox.readonly",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"readonly")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"True if the text box is a read-only field.")),Object(c.b)("div",{id:"h2o_wave.types.Textbox.required",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"required")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"True if the text box is a required field.")),Object(c.b)("div",{id:"h2o_wave.types.Textbox.suffix",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"suffix")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Text to be displayed after the text box contents.")),Object(c.b)("div",{id:"h2o_wave.types.Textbox.tooltip",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"tooltip")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"An optional tooltip message displayed when a user clicks the help icon to the right of the component.")),Object(c.b)("div",{id:"h2o_wave.types.Textbox.trigger",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"trigger")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"True if the form should be submitted when the text value changes.")),Object(c.b)("div",{id:"h2o_wave.types.Textbox.value",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"value")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Text to be displayed inside the text box.")),Object(c.b)("div",{id:"h2o_wave.types.Textbox.visible",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"visible")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"True if the component should be visible. Defaults to true."))),Object(c.b)("h4",{id:"methods-72"},"Methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"dump-72"},"dump ",Object(c.b)("a",{name:"h2o_wave.types.Textbox.dump"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"dump"),"(self) \u2011>\xa0Dict"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Returns the contents of this object as a dict."))))))),Object(c.b)("div",{className:"api"},Object(c.b)("h3",{id:"toggle"},"Toggle ",Object(c.b)("a",{name:"h2o_wave.types.Toggle"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"class ",Object(c.b)("span",{class:"ident"},"Toggle"),"(name:\xa0str, label:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, value:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, disabled:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, trigger:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, visible:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, tooltip:\xa0Union[str,\xa0NoneType]\xa0=\xa0None)"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Create a toggle. Toggles represent a physical switch that allows users to turn things on or off. Use toggles to present users with two mutually exclusive options (like on/off), where choosing an option results in an immediate action."),Object(c.b)("p",null,"Use a toggle for binary operations that take effect right after the user flips the Toggle. For example, use a Toggle to turn services or hardware components on or off. In other words, if a physical switch would work for the action, a Toggle is probably the best component to use.")),Object(c.b)("h4",{id:"static-methods-73"},"Static methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"load-73"},"load ",Object(c.b)("a",{name:"h2o_wave.types.Toggle.load"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"load"),"(_Toggle__d:\xa0Dict) \u2011>\xa0",Object(c.b)("a",{title:"h2o_wave.types.Toggle",href:"#h2o_wave.types.Toggle"},"Toggle")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Creates an instance of this class using the contents of a dict."))))),Object(c.b)("h4",{id:"instance-variables-73"},"Instance variables"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{id:"h2o_wave.types.Toggle.disabled",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"disabled")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"True if the checkbox is disabled.")),Object(c.b)("div",{id:"h2o_wave.types.Toggle.label",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"label")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Text to be displayed alongside the component.")),Object(c.b)("div",{id:"h2o_wave.types.Toggle.name",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"name")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"An identifying name for this component.")),Object(c.b)("div",{id:"h2o_wave.types.Toggle.tooltip",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"tooltip")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"An optional tooltip message displayed when a user clicks the help icon to the right of the component.")),Object(c.b)("div",{id:"h2o_wave.types.Toggle.trigger",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"trigger")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"True if the form should be submitted when the toggle value changes.")),Object(c.b)("div",{id:"h2o_wave.types.Toggle.value",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"value")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"True if selected, False if unselected.")),Object(c.b)("div",{id:"h2o_wave.types.Toggle.visible",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"visible")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"True if the component should be visible. Defaults to true."))),Object(c.b)("h4",{id:"methods-73"},"Methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"dump-73"},"dump ",Object(c.b)("a",{name:"h2o_wave.types.Toggle.dump"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"dump"),"(self) \u2011>\xa0Dict"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Returns the contents of this object as a dict."))))))),Object(c.b)("div",{className:"api"},Object(c.b)("h3",{id:"toolbarcard"},"ToolbarCard ",Object(c.b)("a",{name:"h2o_wave.types.ToolbarCard"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"class ",Object(c.b)("span",{class:"ident"},"ToolbarCard"),"(box:\xa0str, items:\xa0List[",Object(c.b)("a",{title:"h2o_wave.types.Command",href:"#h2o_wave.types.Command"},"Command"),"], secondary_items:\xa0Union[List[",Object(c.b)("a",{title:"h2o_wave.types.Command",href:"#h2o_wave.types.Command"},"Command"),"],\xa0NoneType]\xa0=\xa0None, overflow_items:\xa0Union[List[",Object(c.b)("a",{title:"h2o_wave.types.Command",href:"#h2o_wave.types.Command"},"Command"),"],\xa0NoneType]\xa0=\xa0None, commands:\xa0Union[List[",Object(c.b)("a",{title:"h2o_wave.types.Command",href:"#h2o_wave.types.Command"},"Command"),"],\xa0NoneType]\xa0=\xa0None)"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Create a card containing a toolbar.")),Object(c.b)("h4",{id:"static-methods-74"},"Static methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"load-74"},"load ",Object(c.b)("a",{name:"h2o_wave.types.ToolbarCard.load"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"load"),"(_ToolbarCard__d:\xa0Dict) \u2011>\xa0",Object(c.b)("a",{title:"h2o_wave.types.ToolbarCard",href:"#h2o_wave.types.ToolbarCard"},"ToolbarCard")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Creates an instance of this class using the contents of a dict."))))),Object(c.b)("h4",{id:"instance-variables-74"},"Instance variables"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{id:"h2o_wave.types.ToolbarCard.box",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"box")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"A string indicating how to place this component on the page.")),Object(c.b)("div",{id:"h2o_wave.types.ToolbarCard.commands",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"commands")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Contextual menu commands for this component.")),Object(c.b)("div",{id:"h2o_wave.types.ToolbarCard.items",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"items")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Items to render.")),Object(c.b)("div",{id:"h2o_wave.types.ToolbarCard.overflow_items",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"overflow_items")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Items to render in an overflow menu.")),Object(c.b)("div",{id:"h2o_wave.types.ToolbarCard.secondary_items",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"secondary_items")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Items to render on the right side (or left, in RTL)."))),Object(c.b)("h4",{id:"methods-74"},"Methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"dump-74"},"dump ",Object(c.b)("a",{name:"h2o_wave.types.ToolbarCard.dump"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"dump"),"(self) \u2011>\xa0Dict"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Returns the contents of this object as a dict."))))))),Object(c.b)("div",{className:"api"},Object(c.b)("h3",{id:"vegacard"},"VegaCard ",Object(c.b)("a",{name:"h2o_wave.types.VegaCard"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"class ",Object(c.b)("span",{class:"ident"},"VegaCard"),"(box:\xa0str, title:\xa0str, specification:\xa0str, data:\xa0Union[dict,\xa0str,\xa0NoneType]\xa0=\xa0None, commands:\xa0Union[List[",Object(c.b)("a",{title:"h2o_wave.types.Command",href:"#h2o_wave.types.Command"},"Command"),"],\xa0NoneType]\xa0=\xa0None)"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Create a card containing a Vega-lite plot.")),Object(c.b)("h4",{id:"static-methods-75"},"Static methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"load-75"},"load ",Object(c.b)("a",{name:"h2o_wave.types.VegaCard.load"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"load"),"(_VegaCard__d:\xa0Dict) \u2011>\xa0",Object(c.b)("a",{title:"h2o_wave.types.VegaCard",href:"#h2o_wave.types.VegaCard"},"VegaCard")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Creates an instance of this class using the contents of a dict."))))),Object(c.b)("h4",{id:"instance-variables-75"},"Instance variables"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{id:"h2o_wave.types.VegaCard.box",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"box")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"A string indicating how to place this component on the page.")),Object(c.b)("div",{id:"h2o_wave.types.VegaCard.commands",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"commands")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Contextual menu commands for this component.")),Object(c.b)("div",{id:"h2o_wave.types.VegaCard.data",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"data")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Data for the plot, if any.")),Object(c.b)("div",{id:"h2o_wave.types.VegaCard.specification",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"specification")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The Vega-lite specification.")),Object(c.b)("div",{id:"h2o_wave.types.VegaCard.title",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"title")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The title of this card."))),Object(c.b)("h4",{id:"methods-75"},"Methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"dump-75"},"dump ",Object(c.b)("a",{name:"h2o_wave.types.VegaCard.dump"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"dump"),"(self) \u2011>\xa0Dict"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Returns the contents of this object as a dict."))))))),Object(c.b)("div",{className:"api"},Object(c.b)("h3",{id:"vegavisualization"},"VegaVisualization ",Object(c.b)("a",{name:"h2o_wave.types.VegaVisualization"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"class ",Object(c.b)("span",{class:"ident"},"VegaVisualization"),"(specification:\xa0str, data:\xa0Union[dict,\xa0str,\xa0NoneType]\xa0=\xa0None, width:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, height:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, name:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, visible:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None)"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Create a Vega-lite plot for display inside a form.")),Object(c.b)("h4",{id:"static-methods-76"},"Static methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"load-76"},"load ",Object(c.b)("a",{name:"h2o_wave.types.VegaVisualization.load"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"load"),"(_VegaVisualization__d:\xa0Dict) \u2011>\xa0",Object(c.b)("a",{title:"h2o_wave.types.VegaVisualization",href:"#h2o_wave.types.VegaVisualization"},"VegaVisualization")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Creates an instance of this class using the contents of a dict."))))),Object(c.b)("h4",{id:"instance-variables-76"},"Instance variables"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{id:"h2o_wave.types.VegaVisualization.data",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"data")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Data for the plot, if any.")),Object(c.b)("div",{id:"h2o_wave.types.VegaVisualization.height",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"height")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The height of the visualization. Defaults to 300px.")),Object(c.b)("div",{id:"h2o_wave.types.VegaVisualization.name",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"name")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"An identifying name for this component.")),Object(c.b)("div",{id:"h2o_wave.types.VegaVisualization.specification",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"specification")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The Vega-lite specification.")),Object(c.b)("div",{id:"h2o_wave.types.VegaVisualization.visible",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"visible")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"True if the component should be visible. Defaults to true.")),Object(c.b)("div",{id:"h2o_wave.types.VegaVisualization.width",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"width")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The width of the visualization. Defaults to 100%."))),Object(c.b)("h4",{id:"methods-76"},"Methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"dump-76"},"dump ",Object(c.b)("a",{name:"h2o_wave.types.VegaVisualization.dump"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"dump"),"(self) \u2011>\xa0Dict"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Returns the contents of this object as a dict."))))))),Object(c.b)("div",{className:"api"},Object(c.b)("h3",{id:"visualization"},"Visualization ",Object(c.b)("a",{name:"h2o_wave.types.Visualization"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"class ",Object(c.b)("span",{class:"ident"},"Visualization"),"(plot:\xa0",Object(c.b)("a",{title:"h2o_wave.types.Plot",href:"#h2o_wave.types.Plot"},"Plot"),", data:\xa0Union[dict,\xa0str], width:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, height:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, name:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, visible:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None)"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Create a visualization for display inside a form.")),Object(c.b)("h4",{id:"static-methods-77"},"Static methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"load-77"},"load ",Object(c.b)("a",{name:"h2o_wave.types.Visualization.load"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"load"),"(_Visualization__d:\xa0Dict) \u2011>\xa0",Object(c.b)("a",{title:"h2o_wave.types.Visualization",href:"#h2o_wave.types.Visualization"},"Visualization")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Creates an instance of this class using the contents of a dict."))))),Object(c.b)("h4",{id:"instance-variables-77"},"Instance variables"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{id:"h2o_wave.types.Visualization.data",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"data")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Data for this visualization.")),Object(c.b)("div",{id:"h2o_wave.types.Visualization.height",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"height")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The hight of the visualization. Defaults to 300px.")),Object(c.b)("div",{id:"h2o_wave.types.Visualization.name",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"name")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"An identifying name for this component.")),Object(c.b)("div",{id:"h2o_wave.types.Visualization.plot",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"plot")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The plot to be rendered in this visualization.")),Object(c.b)("div",{id:"h2o_wave.types.Visualization.visible",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"visible")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"True if the component should be visible. Defaults to true.")),Object(c.b)("div",{id:"h2o_wave.types.Visualization.width",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"width")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The width of the visualization. Defaults to 100%."))),Object(c.b)("h4",{id:"methods-77"},"Methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"dump-77"},"dump ",Object(c.b)("a",{name:"h2o_wave.types.Visualization.dump"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"dump"),"(self) \u2011>\xa0Dict"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Returns the contents of this object as a dict."))))))),Object(c.b)("div",{className:"api"},Object(c.b)("h3",{id:"widebarstatcard"},"WideBarStatCard ",Object(c.b)("a",{name:"h2o_wave.types.WideBarStatCard"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"class ",Object(c.b)("span",{class:"ident"},"WideBarStatCard"),"(box:\xa0str, title:\xa0str, value:\xa0str, aux_value:\xa0str, progress:\xa0float, plot_color:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, data:\xa0Union[dict,\xa0str,\xa0NoneType]\xa0=\xa0None, commands:\xa0Union[List[",Object(c.b)("a",{title:"h2o_wave.types.Command",href:"#h2o_wave.types.Command"},"Command"),"],\xa0NoneType]\xa0=\xa0None)"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Create a wide stat card displaying a primary value, an auxiliary value and a progress bar.")),Object(c.b)("h4",{id:"static-methods-78"},"Static methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"load-78"},"load ",Object(c.b)("a",{name:"h2o_wave.types.WideBarStatCard.load"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"load"),"(_WideBarStatCard__d:\xa0Dict) \u2011>\xa0",Object(c.b)("a",{title:"h2o_wave.types.WideBarStatCard",href:"#h2o_wave.types.WideBarStatCard"},"WideBarStatCard")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Creates an instance of this class using the contents of a dict."))))),Object(c.b)("h4",{id:"instance-variables-78"},"Instance variables"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{id:"h2o_wave.types.WideBarStatCard.aux_value",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"aux_value")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The auxiliary value displayed next to the primary value.")),Object(c.b)("div",{id:"h2o_wave.types.WideBarStatCard.box",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"box")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"A string indicating how to place this component on the page.")),Object(c.b)("div",{id:"h2o_wave.types.WideBarStatCard.commands",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"commands")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Contextual menu commands for this component.")),Object(c.b)("div",{id:"h2o_wave.types.WideBarStatCard.data",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"data")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Data for this card.")),Object(c.b)("div",{id:"h2o_wave.types.WideBarStatCard.plot_color",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"plot_color")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The color of the progress bar.")),Object(c.b)("div",{id:"h2o_wave.types.WideBarStatCard.progress",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"progress")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The value of the progress bar, between 0 and 1.")),Object(c.b)("div",{id:"h2o_wave.types.WideBarStatCard.title",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"title")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The card's title.")),Object(c.b)("div",{id:"h2o_wave.types.WideBarStatCard.value",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"value")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The primary value displayed."))),Object(c.b)("h4",{id:"methods-78"},"Methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"dump-78"},"dump ",Object(c.b)("a",{name:"h2o_wave.types.WideBarStatCard.dump"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"dump"),"(self) \u2011>\xa0Dict"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Returns the contents of this object as a dict."))))))),Object(c.b)("div",{className:"api"},Object(c.b)("h3",{id:"widegaugestatcard"},"WideGaugeStatCard ",Object(c.b)("a",{name:"h2o_wave.types.WideGaugeStatCard"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"class ",Object(c.b)("span",{class:"ident"},"WideGaugeStatCard"),"(box:\xa0str, title:\xa0str, value:\xa0str, aux_value:\xa0str, progress:\xa0float, plot_color:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, data:\xa0Union[dict,\xa0str,\xa0NoneType]\xa0=\xa0None, commands:\xa0Union[List[",Object(c.b)("a",{title:"h2o_wave.types.Command",href:"#h2o_wave.types.Command"},"Command"),"],\xa0NoneType]\xa0=\xa0None)"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Create a wide stat card displaying a primary value, an auxiliary value and a progress gauge.")),Object(c.b)("h4",{id:"static-methods-79"},"Static methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"load-79"},"load ",Object(c.b)("a",{name:"h2o_wave.types.WideGaugeStatCard.load"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"load"),"(_WideGaugeStatCard__d:\xa0Dict) \u2011>\xa0",Object(c.b)("a",{title:"h2o_wave.types.WideGaugeStatCard",href:"#h2o_wave.types.WideGaugeStatCard"},"WideGaugeStatCard")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Creates an instance of this class using the contents of a dict."))))),Object(c.b)("h4",{id:"instance-variables-79"},"Instance variables"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{id:"h2o_wave.types.WideGaugeStatCard.aux_value",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"aux_value")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The auxiliary value displayed next to the primary value.")),Object(c.b)("div",{id:"h2o_wave.types.WideGaugeStatCard.box",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"box")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"A string indicating how to place this component on the page.")),Object(c.b)("div",{id:"h2o_wave.types.WideGaugeStatCard.commands",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"commands")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Contextual menu commands for this component.")),Object(c.b)("div",{id:"h2o_wave.types.WideGaugeStatCard.data",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"data")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Data for this card.")),Object(c.b)("div",{id:"h2o_wave.types.WideGaugeStatCard.plot_color",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"plot_color")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The color of the progress gauge.")),Object(c.b)("div",{id:"h2o_wave.types.WideGaugeStatCard.progress",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"progress")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The value of the progress gauge, between 0 and 1.")),Object(c.b)("div",{id:"h2o_wave.types.WideGaugeStatCard.title",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"title")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The card's title.")),Object(c.b)("div",{id:"h2o_wave.types.WideGaugeStatCard.value",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"value")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The primary value displayed."))),Object(c.b)("h4",{id:"methods-79"},"Methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"dump-79"},"dump ",Object(c.b)("a",{name:"h2o_wave.types.WideGaugeStatCard.dump"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"dump"),"(self) \u2011>\xa0Dict"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Returns the contents of this object as a dict."))))))),Object(c.b)("div",{className:"api"},Object(c.b)("h3",{id:"wideseriesstatcard"},"WideSeriesStatCard ",Object(c.b)("a",{name:"h2o_wave.types.WideSeriesStatCard"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"class ",Object(c.b)("span",{class:"ident"},"WideSeriesStatCard"),"(box:\xa0str, title:\xa0str, value:\xa0str, aux_value:\xa0str, plot_data:\xa0Union[",Object(c.b)("a",{title:"h2o_wave.core.Data",href:"core#h2o_wave.core.Data"},"Data"),",\xa0str], plot_value:\xa0str, plot_zero_value:\xa0Union[float,\xa0NoneType]\xa0=\xa0None, plot_category:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, plot_type:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, plot_curve:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, plot_color:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, data:\xa0Union[dict,\xa0str,\xa0NoneType]\xa0=\xa0None, commands:\xa0Union[List[",Object(c.b)("a",{title:"h2o_wave.types.Command",href:"#h2o_wave.types.Command"},"Command"),"],\xa0NoneType]\xa0=\xa0None)"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Create a wide stat card displaying a primary value, an auxiliary value and a series plot.")),Object(c.b)("h4",{id:"static-methods-80"},"Static methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"load-80"},"load ",Object(c.b)("a",{name:"h2o_wave.types.WideSeriesStatCard.load"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"load"),"(_WideSeriesStatCard__d:\xa0Dict) \u2011>\xa0",Object(c.b)("a",{title:"h2o_wave.types.WideSeriesStatCard",href:"#h2o_wave.types.WideSeriesStatCard"},"WideSeriesStatCard")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Creates an instance of this class using the contents of a dict."))))),Object(c.b)("h4",{id:"instance-variables-80"},"Instance variables"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{id:"h2o_wave.types.WideSeriesStatCard.aux_value",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"aux_value")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The auxiliary value displayed below the primary value.")),Object(c.b)("div",{id:"h2o_wave.types.WideSeriesStatCard.box",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"box")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"A string indicating how to place this component on the page.")),Object(c.b)("div",{id:"h2o_wave.types.WideSeriesStatCard.commands",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"commands")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Contextual menu commands for this component.")),Object(c.b)("div",{id:"h2o_wave.types.WideSeriesStatCard.data",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"data")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Data for this card.")),Object(c.b)("div",{id:"h2o_wave.types.WideSeriesStatCard.plot_category",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"plot_category")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The data field to use for x-axis values (ignored if ",Object(c.b)("code",null,"plot_type")," is ",Object(c.b)("code",null,"area"),"; must be provided if ",Object(c.b)("code",null,"plot_type")," is ",Object(c.b)("code",null,"interval"),"). Defaults to 'x'.")),Object(c.b)("div",{id:"h2o_wave.types.WideSeriesStatCard.plot_color",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"plot_color")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The plot's color.")),Object(c.b)("div",{id:"h2o_wave.types.WideSeriesStatCard.plot_curve",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"plot_curve")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The plot's curve style. Defaults to ",Object(c.b)("code",null,"linear"),". One of 'linear', 'smooth', 'step', 'step-after', 'step-before'.")),Object(c.b)("div",{id:"h2o_wave.types.WideSeriesStatCard.plot_data",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"plot_data")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The plot's data.")),Object(c.b)("div",{id:"h2o_wave.types.WideSeriesStatCard.plot_type",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"plot_type")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The type of plot. Defaults to ",Object(c.b)("code",null,"area"),". One of 'area', 'interval'.")),Object(c.b)("div",{id:"h2o_wave.types.WideSeriesStatCard.plot_value",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"plot_value")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The data field to use for y-axis values.")),Object(c.b)("div",{id:"h2o_wave.types.WideSeriesStatCard.plot_zero_value",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"plot_zero_value")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The base value to use for each y-axis mark. Set this to ",Object(c.b)("code",null,"0")," if you want to pin the x-axis at ",Object(c.b)("code",null,"y=0"),". If not provided, the minimum value from the data is used.")),Object(c.b)("div",{id:"h2o_wave.types.WideSeriesStatCard.title",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"title")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The card's title.")),Object(c.b)("div",{id:"h2o_wave.types.WideSeriesStatCard.value",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"value")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"The primary value displayed."))),Object(c.b)("h4",{id:"methods-80"},"Methods"),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api"},Object(c.b)("h4",{id:"dump-80"},"dump ",Object(c.b)("a",{name:"h2o_wave.types.WideSeriesStatCard.dump"})),Object(c.b)("div",{className:"api__body"},Object(c.b)("div",{className:"api__signature"},"def ",Object(c.b)("span",{class:"ident"},"dump"),"(self) \u2011>\xa0Dict"),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Returns the contents of this object as a dict."))))))))}l.isMDXComponent=!0},292:function(e,a,t){"use strict";t.d(a,"a",(function(){return p})),t.d(a,"b",(function(){return m}));var s=t(0),i=t.n(s);function c(e,a,t){return a in e?Object.defineProperty(e,a,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[a]=t,e}function b(e,a){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var s=Object.getOwnPropertySymbols(e);a&&(s=s.filter((function(a){return Object.getOwnPropertyDescriptor(e,a).enumerable}))),t.push.apply(t,s)}return t}function n(e){for(var a=1;a=0||(i[t]=e[t]);return i}(e,a);if(Object.getOwnPropertySymbols){var c=Object.getOwnPropertySymbols(e);for(s=0;s=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(i[t]=e[t])}return i}var d=i.a.createContext({}),l=function(e){var a=i.a.useContext(d),t=a;return e&&(t="function"==typeof e?e(a):n(n({},a),e)),t},p=function(e){var a=l(e.components);return i.a.createElement(d.Provider,{value:a},e.children)},r={inlineCode:"code",wrapper:function(e){var a=e.children;return i.a.createElement(i.a.Fragment,{},a)}},_=i.a.forwardRef((function(e,a){var t=e.components,s=e.mdxType,c=e.originalType,b=e.parentName,d=o(e,["components","mdxType","originalType","parentName"]),p=l(t),_=s,m=p["".concat(b,".").concat(_)]||p[_]||r[_]||c;return t?i.a.createElement(m,n(n({ref:a},d),{},{components:t})):i.a.createElement(m,n({ref:a},d))}));function m(e,a){var t=arguments,s=a&&a.mdxType;if("string"==typeof e||s){var c=t.length,b=new Array(c);b[0]=_;var n={};for(var o in a)hasOwnProperty.call(a,o)&&(n[o]=a[o]);n.originalType=e,n.mdxType="string"==typeof e?e:s,b[1]=n;for(var d=2;d=0||(a[t]=e[t]);return a}(e,r);if(Object.getOwnPropertySymbols){var c=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(a[t]=e[t])}return a}var m=a.a.createContext({}),p=function(e){var r=a.a.useContext(m),t=r;return e&&(t="function"==typeof e?e(r):s(s({},r),e)),t},f=function(e){var r=p(e.components);return a.a.createElement(m.Provider,{value:r},e.children)},d={inlineCode:"code",wrapper:function(e){var r=e.children;return a.a.createElement(a.a.Fragment,{},r)}},l=a.a.forwardRef((function(e,r){var t=e.components,n=e.mdxType,c=e.originalType,o=e.parentName,m=u(e,["components","mdxType","originalType","parentName"]),f=p(t),l=n,b=f["".concat(o,".").concat(l)]||f[l]||d[l]||c;return t?a.a.createElement(b,s(s({ref:r},m),{},{components:t})):a.a.createElement(b,s({ref:r},m))}));function b(e,r){var t=arguments,n=r&&r.mdxType;if("string"==typeof e||n){var c=t.length,o=new Array(c);o[0]=l;var s={};for(var u in r)hasOwnProperty.call(r,u)&&(s[u]=r[u]);s.originalType=e,s.mdxType="string"==typeof e?e:n,o[1]=s;for(var m=2;m=0||(a[t]=e[t]);return a}(e,r);if(Object.getOwnPropertySymbols){var c=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(a[t]=e[t])}return a}var m=a.a.createContext({}),p=function(e){var r=a.a.useContext(m),t=r;return e&&(t="function"==typeof e?e(r):s(s({},r),e)),t},f=function(e){var r=p(e.components);return a.a.createElement(m.Provider,{value:r},e.children)},d={inlineCode:"code",wrapper:function(e){var r=e.children;return a.a.createElement(a.a.Fragment,{},r)}},l=a.a.forwardRef((function(e,r){var t=e.components,n=e.mdxType,c=e.originalType,o=e.parentName,m=u(e,["components","mdxType","originalType","parentName"]),f=p(t),l=n,b=f["".concat(o,".").concat(l)]||f[l]||d[l]||c;return t?a.a.createElement(b,s(s({ref:r},m),{},{components:t})):a.a.createElement(b,s({ref:r},m))}));function b(e,r){var t=arguments,n=r&&r.mdxType;if("string"==typeof e||n){var c=t.length,o=new Array(c);o[0]=l;var s={};for(var u in r)hasOwnProperty.call(r,u)&&(s[u]=r[u]);s.originalType=e,s.mdxType="string"==typeof e?e:n,o[1]=s;for(var m=2;m=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var u=o.a.createContext({}),s=function(e){var t=o.a.useContext(u),n=t;return e&&(n="function"==typeof e?e(t):l(l({},t),e)),n},p=function(e){var t=s(e.components);return o.a.createElement(u.Provider,{value:t},e.children)},g={inlineCode:"code",wrapper:function(e){var t=e.children;return o.a.createElement(o.a.Fragment,{},t)}},d=o.a.forwardRef((function(e,t){var n=e.components,r=e.mdxType,a=e.originalType,c=e.parentName,u=i(e,["components","mdxType","originalType","parentName"]),p=s(n),d=r,m=p["".concat(c,".").concat(d)]||p[d]||g[d]||a;return n?o.a.createElement(m,l(l({ref:t},u),{},{components:n})):o.a.createElement(m,l({ref:t},u))}));function m(e,t){var n=arguments,r=t&&t.mdxType;if("string"==typeof e||r){var a=n.length,c=new Array(a);c[0]=d;var l={};for(var i in t)hasOwnProperty.call(t,i)&&(l[i]=t[i]);l.originalType=e,l.mdxType="string"==typeof e?e:r,c[1]=l;for(var u=2;u=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var s=o.a.createContext({}),u=function(e){var t=o.a.useContext(s),n=t;return e&&(n="function"==typeof e?e(t):c(c({},t),e)),n},p=function(e){var t=u(e.components);return o.a.createElement(s.Provider,{value:t},e.children)},g={inlineCode:"code",wrapper:function(e){var t=e.children;return o.a.createElement(o.a.Fragment,{},t)}},d=o.a.forwardRef((function(e,t){var n=e.components,r=e.mdxType,a=e.originalType,l=e.parentName,s=i(e,["components","mdxType","originalType","parentName"]),p=u(n),d=r,m=p["".concat(l,".").concat(d)]||p[d]||g[d]||a;return n?o.a.createElement(m,c(c({ref:t},s),{},{components:n})):o.a.createElement(m,c({ref:t},s))}));function m(e,t){var n=arguments,r=t&&t.mdxType;if("string"==typeof e||r){var a=n.length,l=new Array(a);l[0]=d;var c={};for(var i in t)hasOwnProperty.call(t,i)&&(c[i]=t[i]);c.originalType=e,c.mdxType="string"==typeof e?e:r,l[1]=c;for(var s=2;s=0||(r[n]=e[n]);return r}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(a=0;a=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(r[n]=e[n])}return r}var u=r.a.createContext({}),p=function(e){var t=r.a.useContext(u),n=t;return e&&(n="function"==typeof e?e(t):o(o({},t),e)),n},s=function(e){var t=p(e.components);return r.a.createElement(u.Provider,{value:t},e.children)},m={inlineCode:"code",wrapper:function(e){var t=e.children;return r.a.createElement(r.a.Fragment,{},t)}},f=r.a.forwardRef((function(e,t){var n=e.components,a=e.mdxType,i=e.originalType,c=e.parentName,u=l(e,["components","mdxType","originalType","parentName"]),s=p(n),f=a,d=s["".concat(c,".").concat(f)]||s[f]||m[f]||i;return n?r.a.createElement(d,o(o({ref:t},u),{},{components:n})):r.a.createElement(d,o({ref:t},u))}));function d(e,t){var n=arguments,a=t&&t.mdxType;if("string"==typeof e||a){var i=n.length,c=new Array(i);c[0]=f;var o={};for(var l in t)hasOwnProperty.call(t,l)&&(o[l]=t[l]);o.originalType=e,o.mdxType="string"==typeof e?e:a,c[1]=o;for(var u=2;u=0||(r[n]=e[n]);return r}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(a=0;a=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(r[n]=e[n])}return r}var u=r.a.createContext({}),p=function(e){var t=r.a.useContext(u),n=t;return e&&(n="function"==typeof e?e(t):o(o({},t),e)),n},s=function(e){var t=p(e.components);return r.a.createElement(u.Provider,{value:t},e.children)},m={inlineCode:"code",wrapper:function(e){var t=e.children;return r.a.createElement(r.a.Fragment,{},t)}},f=r.a.forwardRef((function(e,t){var n=e.components,a=e.mdxType,i=e.originalType,c=e.parentName,u=l(e,["components","mdxType","originalType","parentName"]),s=p(n),f=a,d=s["".concat(c,".").concat(f)]||s[f]||m[f]||i;return n?r.a.createElement(d,o(o({ref:t},u),{},{components:n})):r.a.createElement(d,o({ref:t},u))}));function d(e,t){var n=arguments,a=t&&t.mdxType;if("string"==typeof e||a){var i=n.length,c=new Array(i);c[0]=f;var o={};for(var l in t)hasOwnProperty.call(t,l)&&(o[l]=t[l]);o.originalType=e,o.mdxType="string"==typeof e?e:a,c[1]=o;for(var u=2;u=0||(a[n]=e[n]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(a[n]=e[n])}return a}var p=a.a.createContext({}),s=function(e){var t=a.a.useContext(p),n=t;return e&&(n="function"==typeof e?e(t):l(l({},t),e)),n},u=function(e){var t=s(e.components);return a.a.createElement(p.Provider,{value:t},e.children)},m={inlineCode:"code",wrapper:function(e){var t=e.children;return a.a.createElement(a.a.Fragment,{},t)}},d=a.a.forwardRef((function(e,t){var n=e.components,r=e.mdxType,o=e.originalType,i=e.parentName,p=c(e,["components","mdxType","originalType","parentName"]),u=s(n),d=r,f=u["".concat(i,".").concat(d)]||u[d]||m[d]||o;return n?a.a.createElement(f,l(l({ref:t},p),{},{components:n})):a.a.createElement(f,l({ref:t},p))}));function f(e,t){var n=arguments,r=t&&t.mdxType;if("string"==typeof e||r){var o=n.length,i=new Array(o);i[0]=d;var l={};for(var c in t)hasOwnProperty.call(t,c)&&(l[c]=t[c]);l.originalType=e,l.mdxType="string"==typeof e?e:r,i[1]=l;for(var p=2;p=0||(a[n]=e[n]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(a[n]=e[n])}return a}var p=a.a.createContext({}),s=function(e){var t=a.a.useContext(p),n=t;return e&&(n="function"==typeof e?e(t):l(l({},t),e)),n},u=function(e){var t=s(e.components);return a.a.createElement(p.Provider,{value:t},e.children)},m={inlineCode:"code",wrapper:function(e){var t=e.children;return a.a.createElement(a.a.Fragment,{},t)}},d=a.a.forwardRef((function(e,t){var n=e.components,r=e.mdxType,o=e.originalType,i=e.parentName,p=c(e,["components","mdxType","originalType","parentName"]),u=s(n),d=r,f=u["".concat(i,".").concat(d)]||u[d]||m[d]||o;return n?a.a.createElement(f,l(l({ref:t},p),{},{components:n})):a.a.createElement(f,l({ref:t},p))}));function f(e,t){var n=arguments,r=t&&t.mdxType;if("string"==typeof e||r){var o=n.length,i=new Array(o);i[0]=d;var l={};for(var c in t)hasOwnProperty.call(t,c)&&(l[c]=t[c]);l.originalType=e,l.mdxType="string"==typeof e?e:r,i[1]=l;for(var p=2;p=0||(r[o]=e[o]);return r}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,o)&&(r[o]=e[o])}return r}var c=r.a.createContext({}),u=function(e){var t=r.a.useContext(c),o=t;return e&&(o="function"==typeof e?e(t):i(i({},t),e)),o},l=function(e){var t=u(e.components);return r.a.createElement(c.Provider,{value:t},e.children)},p={inlineCode:"code",wrapper:function(e){var t=e.children;return r.a.createElement(r.a.Fragment,{},t)}},A=r.a.forwardRef((function(e,t){var o=e.components,n=e.mdxType,a=e.originalType,d=e.parentName,c=s(e,["components","mdxType","originalType","parentName"]),l=u(o),A=n,f=l["".concat(d,".").concat(A)]||l[A]||p[A]||a;return o?r.a.createElement(f,i(i({ref:t},c),{},{components:o})):r.a.createElement(f,i({ref:t},c))}));function f(e,t){var o=arguments,n=t&&t.mdxType;if("string"==typeof e||n){var a=o.length,d=new Array(a);d[0]=A;var i={};for(var s in t)hasOwnProperty.call(t,s)&&(i[s]=t[s]);i.originalType=e,i.mdxType="string"==typeof e?e:n,d[1]=i;for(var c=2;c=0||(r[o]=e[o]);return r}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,o)&&(r[o]=e[o])}return r}var c=r.a.createContext({}),l=function(e){var t=r.a.useContext(c),o=t;return e&&(o="function"==typeof e?e(t):i(i({},t),e)),o},u=function(e){var t=l(e.components);return r.a.createElement(c.Provider,{value:t},e.children)},A={inlineCode:"code",wrapper:function(e){var t=e.children;return r.a.createElement(r.a.Fragment,{},t)}},p=r.a.forwardRef((function(e,t){var o=e.components,n=e.mdxType,a=e.originalType,d=e.parentName,c=s(e,["components","mdxType","originalType","parentName"]),u=l(o),p=n,f=u["".concat(d,".").concat(p)]||u[p]||A[p]||a;return o?r.a.createElement(f,i(i({ref:t},c),{},{components:o})):r.a.createElement(f,i({ref:t},c))}));function f(e,t){var o=arguments,n=t&&t.mdxType;if("string"==typeof e||n){var a=o.length,d=new Array(a);d[0]=p;var i={};for(var s in t)hasOwnProperty.call(t,s)&&(i[s]=t[s]);i.originalType=e,i.mdxType="string"==typeof e?e:n,d[1]=i;for(var c=2;c=0||(a[n]=e[n]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(a[n]=e[n])}return a}var c=a.a.createContext({}),s=function(e){var t=a.a.useContext(c),n=t;return e&&(n="function"==typeof e?e(t):l(l({},t),e)),n},u=function(e){var t=s(e.components);return a.a.createElement(c.Provider,{value:t},e.children)},d={inlineCode:"code",wrapper:function(e){var t=e.children;return a.a.createElement(a.a.Fragment,{},t)}},m=a.a.forwardRef((function(e,t){var n=e.components,r=e.mdxType,o=e.originalType,i=e.parentName,c=p(e,["components","mdxType","originalType","parentName"]),u=s(n),m=r,f=u["".concat(i,".").concat(m)]||u[m]||d[m]||o;return n?a.a.createElement(f,l(l({ref:t},c),{},{components:n})):a.a.createElement(f,l({ref:t},c))}));function f(e,t){var n=arguments,r=t&&t.mdxType;if("string"==typeof e||r){var o=n.length,i=new Array(o);i[0]=m;var l={};for(var p in t)hasOwnProperty.call(t,p)&&(l[p]=t[p]);l.originalType=e,l.mdxType="string"==typeof e?e:r,i[1]=l;for(var c=2;c=0||(a[n]=e[n]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(a[n]=e[n])}return a}var c=a.a.createContext({}),s=function(e){var t=a.a.useContext(c),n=t;return e&&(n="function"==typeof e?e(t):l(l({},t),e)),n},u=function(e){var t=s(e.components);return a.a.createElement(c.Provider,{value:t},e.children)},d={inlineCode:"code",wrapper:function(e){var t=e.children;return a.a.createElement(a.a.Fragment,{},t)}},m=a.a.forwardRef((function(e,t){var n=e.components,r=e.mdxType,o=e.originalType,i=e.parentName,c=p(e,["components","mdxType","originalType","parentName"]),u=s(n),m=r,f=u["".concat(i,".").concat(m)]||u[m]||d[m]||o;return n?a.a.createElement(f,l(l({ref:t},c),{},{components:n})):a.a.createElement(f,l({ref:t},c))}));function f(e,t){var n=arguments,r=t&&t.mdxType;if("string"==typeof e||r){var o=n.length,i=new Array(o);i[0]=m;var l={};for(var p in t)hasOwnProperty.call(t,p)&&(l[p]=t[p]);l.originalType=e,l.mdxType="string"==typeof e?e:r,i[1]=l;for(var c=2;c 0:\n form = q.page['example']\n form.items = items\n else:\n q.page['example'] = ui.form_card(box='1 1 12 10', items=items)\n\n await q.page.save()\n\n\nlisten('/demo', serve, mode='multicast')\n")))}l.isMDXComponent=!0},290:function(e,t,n){"use strict";n.d(t,"a",(function(){return p})),n.d(t,"b",(function(){return b}));var r=n(0),a=n.n(r);function o(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function c(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function i(e){for(var t=1;t=0||(a[n]=e[n]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(a[n]=e[n])}return a}var u=a.a.createContext({}),l=function(e){var t=a.a.useContext(u),n=t;return e&&(n="function"==typeof e?e(t):i(i({},t),e)),n},p=function(e){var t=l(e.components);return a.a.createElement(u.Provider,{value:t},e.children)},m={inlineCode:"code",wrapper:function(e){var t=e.children;return a.a.createElement(a.a.Fragment,{},t)}},d=a.a.forwardRef((function(e,t){var n=e.components,r=e.mdxType,o=e.originalType,c=e.parentName,u=s(e,["components","mdxType","originalType","parentName"]),p=l(n),d=r,b=p["".concat(c,".").concat(d)]||p[d]||m[d]||o;return n?a.a.createElement(b,i(i({ref:t},u),{},{components:n})):a.a.createElement(b,i({ref:t},u))}));function b(e,t){var n=arguments,r=t&&t.mdxType;if("string"==typeof e||r){var o=n.length,c=new Array(o);c[0]=d;var i={};for(var s in t)hasOwnProperty.call(t,s)&&(i[s]=t[s]);i.originalType=e,i.mdxType="string"==typeof e?e:r,c[1]=i;for(var u=2;u 0:\n form = q.page['example']\n form.items = items\n else:\n q.page['example'] = ui.form_card(box='1 1 12 10', items=items)\n\n await q.page.save()\n")))}l.isMDXComponent=!0},292:function(e,t,n){"use strict";n.d(t,"a",(function(){return p})),n.d(t,"b",(function(){return b}));var r=n(0),a=n.n(r);function o(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function c(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function i(e){for(var t=1;t=0||(a[n]=e[n]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(a[n]=e[n])}return a}var u=a.a.createContext({}),l=function(e){var t=a.a.useContext(u),n=t;return e&&(n="function"==typeof e?e(t):i(i({},t),e)),n},p=function(e){var t=l(e.components);return a.a.createElement(u.Provider,{value:t},e.children)},m={inlineCode:"code",wrapper:function(e){var t=e.children;return a.a.createElement(a.a.Fragment,{},t)}},d=a.a.forwardRef((function(e,t){var n=e.components,r=e.mdxType,o=e.originalType,c=e.parentName,u=s(e,["components","mdxType","originalType","parentName"]),p=l(n),d=r,b=p["".concat(c,".").concat(d)]||p[d]||m[d]||o;return n?a.a.createElement(b,i(i({ref:t},u),{},{components:n})):a.a.createElement(b,i({ref:t},u))}));function b(e,t){var n=arguments,r=t&&t.mdxType;if("string"==typeof e||r){var o=n.length,c=new Array(o);c[0]=d;var i={};for(var s in t)hasOwnProperty.call(t,s)&&(i[s]=t[s]);i.originalType=e,i.mdxType="string"==typeof e?e:r,c[1]=i;for(var u=2;u=0||(r[n]=e[n]);return r}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(i=0;i=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(r[n]=e[n])}return r}var u=r.a.createContext({}),l=function(e){var t=r.a.useContext(u),n=t;return e&&(n="function"==typeof e?e(t):p(p({},t),e)),n},s=function(e){var t=l(e.components);return r.a.createElement(u.Provider,{value:t},e.children)},m={inlineCode:"code",wrapper:function(e){var t=e.children;return r.a.createElement(r.a.Fragment,{},t)}},b=r.a.forwardRef((function(e,t){var n=e.components,i=e.mdxType,a=e.originalType,o=e.parentName,u=c(e,["components","mdxType","originalType","parentName"]),s=l(n),b=i,f=s["".concat(o,".").concat(b)]||s[b]||m[b]||a;return n?r.a.createElement(f,p(p({ref:t},u),{},{components:n})):r.a.createElement(f,p({ref:t},u))}));function f(e,t){var n=arguments,i=t&&t.mdxType;if("string"==typeof e||i){var a=n.length,o=new Array(a);o[0]=b;var p={};for(var c in t)hasOwnProperty.call(t,c)&&(p[c]=t[c]);p.originalType=e,p.mdxType="string"==typeof e?e:i,o[1]=p;for(var u=2;u=0||(r[n]=e[n]);return r}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(i=0;i=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(r[n]=e[n])}return r}var u=r.a.createContext({}),l=function(e){var t=r.a.useContext(u),n=t;return e&&(n="function"==typeof e?e(t):p(p({},t),e)),n},s=function(e){var t=l(e.components);return r.a.createElement(u.Provider,{value:t},e.children)},m={inlineCode:"code",wrapper:function(e){var t=e.children;return r.a.createElement(r.a.Fragment,{},t)}},b=r.a.forwardRef((function(e,t){var n=e.components,i=e.mdxType,a=e.originalType,o=e.parentName,u=c(e,["components","mdxType","originalType","parentName"]),s=l(n),b=i,f=s["".concat(o,".").concat(b)]||s[b]||m[b]||a;return n?r.a.createElement(f,p(p({ref:t},u),{},{components:n})):r.a.createElement(f,p({ref:t},u))}));function f(e,t){var n=arguments,i=t&&t.mdxType;if("string"==typeof e||i){var a=n.length,o=new Array(a);o[0]=b;var p={};for(var c in t)hasOwnProperty.call(t,c)&&(p[c]=t[c]);p.originalType=e,p.mdxType="string"==typeof e?e:i,o[1]=p;for(var u=2;u=0||(o[r]=e[r]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(o[r]=e[r])}return o}var l=o.a.createContext({}),s=function(e){var t=o.a.useContext(l),r=t;return e&&(r="function"==typeof e?e(t):u(u({},t),e)),r},p=function(e){var t=s(e.components);return o.a.createElement(l.Provider,{value:t},e.children)},m={inlineCode:"code",wrapper:function(e){var t=e.children;return o.a.createElement(o.a.Fragment,{},t)}},f=o.a.forwardRef((function(e,t){var r=e.components,n=e.mdxType,a=e.originalType,i=e.parentName,l=c(e,["components","mdxType","originalType","parentName"]),p=s(r),f=n,b=p["".concat(i,".").concat(f)]||p[f]||m[f]||a;return r?o.a.createElement(b,u(u({ref:t},l),{},{components:r})):o.a.createElement(b,u({ref:t},l))}));function b(e,t){var r=arguments,n=t&&t.mdxType;if("string"==typeof e||n){var a=r.length,i=new Array(a);i[0]=f;var u={};for(var c in t)hasOwnProperty.call(t,c)&&(u[c]=t[c]);u.originalType=e,u.mdxType="string"==typeof e?e:n,i[1]=u;for(var l=2;l=0||(d[t]=A[t]);return d}(A,e);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(A);for(a=0;a=0||Object.prototype.propertyIsEnumerable.call(A,t)&&(d[t]=A[t])}return d}var b=d.a.createContext({}),f=function(A){var e=d.a.useContext(b),t=e;return A&&(t="function"==typeof A?A(e):u(u({},e),A)),t},r=function(A){var e=f(A.components);return d.a.createElement(b.Provider,{value:e},A.children)},n={inlineCode:"code",wrapper:function(A){var e=A.children;return d.a.createElement(d.a.Fragment,{},e)}},c=d.a.forwardRef((function(A,e){var t=A.components,a=A.mdxType,i=A.originalType,l=A.parentName,b=s(A,["components","mdxType","originalType","parentName"]),r=f(t),c=a,I=r["".concat(l,".").concat(c)]||r[c]||n[c]||i;return t?d.a.createElement(I,u(u({ref:e},b),{},{components:t})):d.a.createElement(I,u({ref:e},b))}));function I(A,e){var t=arguments,a=e&&e.mdxType;if("string"==typeof A||a){var i=t.length,l=new Array(i);l[0]=c;var u={};for(var s in e)hasOwnProperty.call(e,s)&&(u[s]=e[s]);u.originalType=A,u.mdxType="string"==typeof A?A:a,l[1]=u;for(var b=2;b=0||(i[t]=A[t]);return i}(A,e);if(Object.getOwnPropertySymbols){var d=Object.getOwnPropertySymbols(A);for(a=0;a=0||Object.prototype.propertyIsEnumerable.call(A,t)&&(i[t]=A[t])}return i}var s=i.a.createContext({}),f=function(A){var e=i.a.useContext(s),t=e;return A&&(t="function"==typeof A?A(e):l(l({},e),A)),t},r=function(A){var e=f(A.components);return i.a.createElement(s.Provider,{value:e},A.children)},n={inlineCode:"code",wrapper:function(A){var e=A.children;return i.a.createElement(i.a.Fragment,{},e)}},I=i.a.forwardRef((function(A,e){var t=A.components,a=A.mdxType,d=A.originalType,u=A.parentName,s=b(A,["components","mdxType","originalType","parentName"]),r=f(t),I=a,E=r["".concat(u,".").concat(I)]||r[I]||n[I]||d;return t?i.a.createElement(E,l(l({ref:e},s),{},{components:t})):i.a.createElement(E,l({ref:e},s))}));function E(A,e){var t=arguments,a=e&&e.mdxType;if("string"==typeof A||a){var d=t.length,u=new Array(d);u[0]=I;var l={};for(var b in e)hasOwnProperty.call(e,b)&&(l[b]=e[b]);l.originalType=A,l.mdxType="string"==typeof A?A:a,u[1]=l;for(var s=2;s - - - - - -Hello | H2O Wave - - - - - - - - - - -
      -
      - - - - - - - - - - \ No newline at end of file diff --git a/docs/blog/hola/index.html b/docs/blog/hola/index.html deleted file mode 100644 index 77056b3656..0000000000 --- a/docs/blog/hola/index.html +++ /dev/null @@ -1,29 +0,0 @@ - - - - - - -Hola | H2O Wave - - - - - - - - - - -
      -

      Hola

      Gao Wei

      Gao Wei

      Docusaurus Core Team

      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet

      - - - - - - - - - - \ No newline at end of file diff --git a/docs/blog/index.html b/docs/blog/index.html index d6f14ae645..e119034f09 100644 --- a/docs/blog/index.html +++ b/docs/blog/index.html @@ -5,31 +5,27 @@ Blog | H2O Wave - - - - - - - - - - - + + + + + + + + +
      -

      Welcome

      Yangshun Tay

      Yangshun Tay

      Front End Engineer @ Facebook

      Blog features are powered by the blog plugin. Simply add files to the blog directory. It supports tags as well!

      Delete the whole directory if you don't want the blog features. As simple as that!

      Hola

      Gao Wei

      Gao Wei

      Docusaurus Core Team

      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet

      - - - - - - - - - - - +
      + + + + + + + + + \ No newline at end of file diff --git a/docs/blog/release-0.9.0/index.html b/docs/blog/release-0.9.0/index.html new file mode 100644 index 0000000000..38426289c7 --- /dev/null +++ b/docs/blog/release-0.9.0/index.html @@ -0,0 +1,34 @@ + + + + + + +Introducing Live Reload | H2O Wave + + + + + + + + + + +
      +

      Introducing Live Reload

      Prithvi Prabhu

      Prithvi Prabhu

      Chief of Technology @ H2O.ai

      Today, we're excited to announce H2O Wave v0.9.0, with a new wave CLI, live-reload, improved performance, background tasks and ASGI compatibility.



      Among other changes, the Wave server executable wave is now called waved (as in wave daemon), and the h2o-wave Python package ships with a new CLI named wave.

      No more listening

      listen() has been deprecated in favor of @app. Wave apps are now one line shorter.

      Old way

      In versions <= v0.8.0, a skeleton app looked like this:

      foo.py
      from h2o_wave import listen, Q
      +
      async def serve(q: Q):
      pass
      +
      listen('/demo', serve)

      The above app could be run like this:

      (venv) $ python foo.py

      New way

      In versions v0.9.0+, a skeleton app looks like this:

      foo.py
      from h2o_wave import main, app, Q
      +
      @app('/demo')
      async def serve(q: Q):
      pass

      Notably:

      1. listen(route) has been replaced by an @app(route) decorator on the serve() function.
      2. main needs to be imported into the file (but you don't have to do anything with the symbol main other than simply import it).

      The above app can be run using wave run, built into the new wave command line interface.

      (venv) $ wave run foo

      Live reload

      The wave run command runs your app using live-reload, which means you can view your changes live as you code, without having to refresh your browser manually.

      (venv) $ wave run foo

      To run your app without live-reload, simply pass --no-reload:

      (venv) $ wave run --no-reload foo

      Improved performance

      Both the Wave server and application communication architecture has undergone significant performance and concurrency improvements across the board. Apps should now feel lighter, quicker, and more responsive under concurrent or increased load.

      The changes in v0.9 brings us closer to a v1.0 release. v1.0 will include the ability to increase the number of worker processes to scale apps, while preserving the simplicity of the Wave API.

      The Wave Tour (tour.py) is now quicker and more reliable:

      tour

      Background tasks

      The API now provides the ability to run blocking calls in the background to improve app responsiveness. The query context q now has two lightweight wrappers over asyncio.run_in_executor(): q.run() and q.exec()

      Here is an example of a function that blocks:

      import time
      +
      def blocking_function(seconds) -> str:
      time.sleep(seconds) # Blocks!
      return f'Done!'

      To call the above function from an app, don't do this:

      @app('/demo')
      async def serve(q: Q):
      # ...
      message = blocking_function(42)
      # ...

      Instead, do this:

      @app('/demo')
      async def serve(q: Q):
      # ...
      message = await q.run(blocking_function, 42)
      # ...

      q.run() runs the blocking function in the background, in-process.

      Depending on your use case, you might want to use a separate process pool or thread pool from Python's multiprocessing library, like this:

      import concurrent.futures
      +
      @app('/demo')
      async def serve(q: Q):
      # ...
      with concurrent.futures.ThreadPoolExecutor() as pool:
      message = await q.exec(pool, blocking_function, 42)
      # ...

      q.exec() accepts a custom process pool or thread pool to run the blocking function.

      ASGI compatibility

      Wave apps are now ASGI-compatible, based on Uvicorn / Starlette, a high-performance Python server.

      You can run Wave apps behind any ASGI server, like uvicorn, gunicorn, daphne, hypercorn, etc.

      To run your app using an ASGI server like uvicorn, append :main to the app argument:

      (venv) $ uvicorn foo:main

      Download

      Get the release here. Check out the release notes for more details.

      We look forward to continuing our collaboration with the community and hearing your feedback as we further improve and expand the H2O Wave platform.

      We’d like to thank the entire Wave team and the community for all of the contributions to this work!

      + + + + + + + + + + \ No newline at end of file diff --git a/docs/blog/tags/docusaurus/index.html b/docs/blog/tags/docusaurus/index.html deleted file mode 100644 index 5be44c98c7..0000000000 --- a/docs/blog/tags/docusaurus/index.html +++ /dev/null @@ -1,35 +0,0 @@ - - - - - - -Posts tagged "docusaurus" | H2O Wave - - - - - - - - - - - - - -
      -

      3 posts tagged with "docusaurus"

      View All Tags

      Welcome

      Yangshun Tay

      Yangshun Tay

      Front End Engineer @ Facebook

      Blog features are powered by the blog plugin. Simply add files to the blog directory. It supports tags as well!

      Delete the whole directory if you don't want the blog features. As simple as that!

      Hola

      Gao Wei

      Gao Wei

      Docusaurus Core Team

      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet

      - - - - - - - - - - - - - \ No newline at end of file diff --git a/docs/blog/tags/facebook/index.html b/docs/blog/tags/facebook/index.html deleted file mode 100644 index f74d591bc3..0000000000 --- a/docs/blog/tags/facebook/index.html +++ /dev/null @@ -1,31 +0,0 @@ - - - - - - -Posts tagged "facebook" | H2O Wave - - - - - - - - - - - -
      -

      1 post tagged with "facebook"

      View All Tags

      Welcome

      Yangshun Tay

      Yangshun Tay

      Front End Engineer @ Facebook

      Blog features are powered by the blog plugin. Simply add files to the blog directory. It supports tags as well!

      Delete the whole directory if you don't want the blog features. As simple as that!

      - - - - - - - - - - - \ No newline at end of file diff --git a/docs/blog/tags/hello/index.html b/docs/blog/tags/hello/index.html deleted file mode 100644 index 58573753ad..0000000000 --- a/docs/blog/tags/hello/index.html +++ /dev/null @@ -1,33 +0,0 @@ - - - - - - -Posts tagged "hello" | H2O Wave - - - - - - - - - - - - -
      -

      2 posts tagged with "hello"

      View All Tags

      Welcome

      Yangshun Tay

      Yangshun Tay

      Front End Engineer @ Facebook

      Blog features are powered by the blog plugin. Simply add files to the blog directory. It supports tags as well!

      Delete the whole directory if you don't want the blog features. As simple as that!

      - - - - - - - - - - - - \ No newline at end of file diff --git a/docs/blog/tags/hola/index.html b/docs/blog/tags/hola/index.html deleted file mode 100644 index eafed0d29d..0000000000 --- a/docs/blog/tags/hola/index.html +++ /dev/null @@ -1,31 +0,0 @@ - - - - - - -Posts tagged "hola" | H2O Wave - - - - - - - - - - - -
      -

      1 post tagged with "hola"

      View All Tags

      Hola

      Gao Wei

      Gao Wei

      Docusaurus Core Team

      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet

      - - - - - - - - - - - \ No newline at end of file diff --git a/docs/blog/tags/index.html b/docs/blog/tags/index.html index 496ceca57c..e5caccdbd8 100644 --- a/docs/blog/tags/index.html +++ b/docs/blog/tags/index.html @@ -5,23 +5,23 @@ Tags | H2O Wave - - - - - - - + + + + + + +
      -

      Tags

      - - - - - - - +

      Tags

      + + + + + + + \ No newline at end of file diff --git a/docs/blog/tags/release/index.html b/docs/blog/tags/release/index.html new file mode 100644 index 0000000000..f6a294291f --- /dev/null +++ b/docs/blog/tags/release/index.html @@ -0,0 +1,31 @@ + + + + + + +Posts tagged "release" | H2O Wave + + + + + + + + + + + +
      +

      1 post tagged with "release"

      View All Tags
      + + + + + + + + + + + \ No newline at end of file diff --git a/docs/blog/welcome/index.html b/docs/blog/welcome/index.html deleted file mode 100644 index 0bde3d55ff..0000000000 --- a/docs/blog/welcome/index.html +++ /dev/null @@ -1,29 +0,0 @@ - - - - - - -Welcome | H2O Wave - - - - - - - - - - -
      -

      Welcome

      Yangshun Tay

      Yangshun Tay

      Front End Engineer @ Facebook

      Blog features are powered by the blog plugin. Simply add files to the blog directory. It supports tags as well!

      Delete the whole directory if you don't want the blog features. As simple as that!

      - - - - - - - - - - \ No newline at end of file diff --git a/docs/c07c3c71.c8e15b94.js b/docs/c07c3c71.61abccad.js similarity index 96% rename from docs/c07c3c71.c8e15b94.js rename to docs/c07c3c71.61abccad.js index 4d4b7c6530..0fe5f43a49 100644 --- a/docs/c07c3c71.c8e15b94.js +++ b/docs/c07c3c71.61abccad.js @@ -1 +1 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[175],{228:function(e,r,n){"use strict";n.r(r),n.d(r,"frontMatter",(function(){return o})),n.d(r,"metadata",(function(){return i})),n.d(r,"rightToc",(function(){return c})),n.d(r,"default",(function(){return p}));var t=n(2),a=n(6),u=(n(0),n(290)),o={title:"Breadcrumbs"},i={unversionedId:"examples/breadcrumbs",id:"examples/breadcrumbs",isDocsHomePage:!1,title:"Breadcrumbs",description:"Breadcrumbs should be used as a navigational aid in your app or site.",source:"@site/docs/examples/breadcrumbs.md",slug:"/examples/breadcrumbs",permalink:"/wave/docs/examples/breadcrumbs",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/examples/breadcrumbs.md",version:"current",sidebar:"someSidebar",previous:{title:"Tabs / Navigation",permalink:"/wave/docs/examples/tab-delete"},next:{title:"Header",permalink:"/wave/docs/examples/header"}},c=[],s={rightToc:c};function p(e){var r=e.components,o=Object(a.a)(e,["components"]);return Object(u.b)("wrapper",Object(t.a)({},s,o,{components:r,mdxType:"MDXLayout"}),Object(u.b)("p",null,"Breadcrumbs should be used as a navigational aid in your app or site.\nThey indicate the current page\u2019s location within a hierarchy and help\nthe user understand where they are in relation to the rest of that hierarchy.\nThey also afford one-click access to higher levels of that hierarchy.\nBreadcrumbs are typically placed, in horizontal form, under the masthead\nor navigation of an experience, above the primary content area."),Object(u.b)("div",{className:"cover",style:{backgroundImage:"url("+n(440).default+")"}}),Object(u.b)("pre",null,Object(u.b)("code",Object(t.a)({parentName:"pre"},{className:"language-py"}),"from h2o_wave import site, ui\n\npage = site['/demo']\n\npage['breadcrumbs'] = ui.breadcrumbs_card(\n box='1 1 4 -1',\n items=[\n ui.breadcrumb(name='#menu1', label='Menu 1'),\n ui.breadcrumb(name='#menu2', label='Menu 2'),\n ui.breadcrumb(name='#menu3', label='Menu 3'),\n ],\n)\n\npage.save()\n")))}p.isMDXComponent=!0},290:function(e,r,n){"use strict";n.d(r,"a",(function(){return l})),n.d(r,"b",(function(){return m}));var t=n(0),a=n.n(t);function u(e,r,n){return r in e?Object.defineProperty(e,r,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[r]=n,e}function o(e,r){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var t=Object.getOwnPropertySymbols(e);r&&(t=t.filter((function(r){return Object.getOwnPropertyDescriptor(e,r).enumerable}))),n.push.apply(n,t)}return n}function i(e){for(var r=1;r=0||(a[n]=e[n]);return a}(e,r);if(Object.getOwnPropertySymbols){var u=Object.getOwnPropertySymbols(e);for(t=0;t=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(a[n]=e[n])}return a}var s=a.a.createContext({}),p=function(e){var r=a.a.useContext(s),n=r;return e&&(n="function"==typeof e?e(r):i(i({},r),e)),n},l=function(e){var r=p(e.components);return a.a.createElement(s.Provider,{value:r},e.children)},d={inlineCode:"code",wrapper:function(e){var r=e.children;return a.a.createElement(a.a.Fragment,{},r)}},b=a.a.forwardRef((function(e,r){var n=e.components,t=e.mdxType,u=e.originalType,o=e.parentName,s=c(e,["components","mdxType","originalType","parentName"]),l=p(n),b=t,m=l["".concat(o,".").concat(b)]||l[b]||d[b]||u;return n?a.a.createElement(m,i(i({ref:r},s),{},{components:n})):a.a.createElement(m,i({ref:r},s))}));function m(e,r){var n=arguments,t=r&&r.mdxType;if("string"==typeof e||t){var u=n.length,o=new Array(u);o[0]=b;var i={};for(var c in r)hasOwnProperty.call(r,c)&&(i[c]=r[c]);i.originalType=e,i.mdxType="string"==typeof e?e:t,o[1]=i;for(var s=2;s=0||(a[n]=e[n]);return a}(e,r);if(Object.getOwnPropertySymbols){var u=Object.getOwnPropertySymbols(e);for(t=0;t=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(a[n]=e[n])}return a}var s=a.a.createContext({}),p=function(e){var r=a.a.useContext(s),n=r;return e&&(n="function"==typeof e?e(r):i(i({},r),e)),n},l=function(e){var r=p(e.components);return a.a.createElement(s.Provider,{value:r},e.children)},d={inlineCode:"code",wrapper:function(e){var r=e.children;return a.a.createElement(a.a.Fragment,{},r)}},b=a.a.forwardRef((function(e,r){var n=e.components,t=e.mdxType,u=e.originalType,o=e.parentName,s=c(e,["components","mdxType","originalType","parentName"]),l=p(n),b=t,m=l["".concat(o,".").concat(b)]||l[b]||d[b]||u;return n?a.a.createElement(m,i(i({ref:r},s),{},{components:n})):a.a.createElement(m,i({ref:r},s))}));function m(e,r){var n=arguments,t=r&&r.mdxType;if("string"==typeof e||t){var u=n.length,o=new Array(u);o[0]=b;var i={};for(var c in r)hasOwnProperty.call(r,c)&&(i[c]=r[c]);i.originalType=e,i.mdxType="string"==typeof e?e:t,o[1]=i;for(var s=2;s=0||(a[n]=e[n]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(a[n]=e[n])}return a}var p=a.a.createContext({}),s=function(e){var t=a.a.useContext(p),n=t;return e&&(n="function"==typeof e?e(t):l(l({},t),e)),n},u=function(e){var t=s(e.components);return a.a.createElement(p.Provider,{value:t},e.children)},m={inlineCode:"code",wrapper:function(e){var t=e.children;return a.a.createElement(a.a.Fragment,{},t)}},f=a.a.forwardRef((function(e,t){var n=e.components,r=e.mdxType,o=e.originalType,i=e.parentName,p=c(e,["components","mdxType","originalType","parentName"]),u=s(n),f=r,d=u["".concat(i,".").concat(f)]||u[f]||m[f]||o;return n?a.a.createElement(d,l(l({ref:t},p),{},{components:n})):a.a.createElement(d,l({ref:t},p))}));function d(e,t){var n=arguments,r=t&&t.mdxType;if("string"==typeof e||r){var o=n.length,i=new Array(o);i[0]=f;var l={};for(var c in t)hasOwnProperty.call(t,c)&&(l[c]=t[c]);l.originalType=e,l.mdxType="string"==typeof e?e:r,i[1]=l;for(var p=2;p=0||(a[n]=e[n]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(a[n]=e[n])}return a}var p=a.a.createContext({}),s=function(e){var t=a.a.useContext(p),n=t;return e&&(n="function"==typeof e?e(t):l(l({},t),e)),n},u=function(e){var t=s(e.components);return a.a.createElement(p.Provider,{value:t},e.children)},m={inlineCode:"code",wrapper:function(e){var t=e.children;return a.a.createElement(a.a.Fragment,{},t)}},f=a.a.forwardRef((function(e,t){var n=e.components,r=e.mdxType,o=e.originalType,i=e.parentName,p=c(e,["components","mdxType","originalType","parentName"]),u=s(n),f=r,d=u["".concat(i,".").concat(f)]||u[f]||m[f]||o;return n?a.a.createElement(d,l(l({ref:t},p),{},{components:n})):a.a.createElement(d,l({ref:t},p))}));function d(e,t){var n=arguments,r=t&&t.mdxType;if("string"==typeof e||r){var o=n.length,i=new Array(o);i[0]=f;var l={};for(var c in t)hasOwnProperty.call(t,c)&&(l[c]=t[c]);l.originalType=e,l.mdxType="string"==typeof e?e:r,i[1]=l;for(var p=2;p 0.5 else 'BoxMultiplySolid'),\n notifications=('Off' if random.random() > 0.5 else 'On')) for i in range(100)\n]\n\n# Create columns for our issue table.\ncolumns = [\n ui.table_column(name='text', label='Issue', searchable=True),\n ui.table_column(name='status', label='Status'),\n ui.table_column(name='notifications', label='Notifications'),\n ui.table_column(name='done', label='Done', cell_type=ui.icon_table_cell_type()),\n ui.table_column(name='views', label='Views'),\n ui.table_column(name='progress', label='Progress', cell_type=ui.progress_table_cell_type()),\n]\n\n\nasync def serve(q: Q):\n q.page['form'] = ui.form_card(box='1 1 -1 11', items=[\n ui.table(\n name='issues',\n columns=columns,\n rows=[ui.table_row(\n name=issue.id,\n cells=[issue.text, issue.status, issue.notifications, issue.icon, str(issue.views), issue.progress]) for\n issue in issues],\n )\n ])\n await q.page.save()\n\n\nlisten('/demo', serve)\n")))}u.isMDXComponent=!0},290:function(e,n,t){"use strict";t.d(n,"a",(function(){return p})),t.d(n,"b",(function(){return b}));var r=t(0),a=t.n(r);function s(e,n,t){return n in e?Object.defineProperty(e,n,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[n]=t,e}function o(e,n){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);n&&(r=r.filter((function(n){return Object.getOwnPropertyDescriptor(e,n).enumerable}))),t.push.apply(t,r)}return t}function i(e){for(var n=1;n=0||(a[t]=e[t]);return a}(e,n);if(Object.getOwnPropertySymbols){var s=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(a[t]=e[t])}return a}var c=a.a.createContext({}),u=function(e){var n=a.a.useContext(c),t=n;return e&&(t="function"==typeof e?e(n):i(i({},n),e)),t},p=function(e){var n=u(e.components);return a.a.createElement(c.Provider,{value:n},e.children)},f={inlineCode:"code",wrapper:function(e){var n=e.children;return a.a.createElement(a.a.Fragment,{},n)}},m=a.a.forwardRef((function(e,n){var t=e.components,r=e.mdxType,s=e.originalType,o=e.parentName,c=l(e,["components","mdxType","originalType","parentName"]),p=u(t),m=r,b=p["".concat(o,".").concat(m)]||p[m]||f[m]||s;return t?a.a.createElement(b,i(i({ref:n},c),{},{components:t})):a.a.createElement(b,i({ref:n},c))}));function b(e,n){var t=arguments,r=n&&n.mdxType;if("string"==typeof e||r){var s=t.length,o=new Array(s);o[0]=m;var i={};for(var l in n)hasOwnProperty.call(n,l)&&(i[l]=n[l]);i.originalType=e,i.mdxType="string"==typeof e?e:r,o[1]=i;for(var c=2;c 0.5 else 'BoxMultiplySolid'),\n notifications=('Off' if random.random() > 0.5 else 'On')) for i in range(100)\n]\n\n# Create columns for our issue table.\ncolumns = [\n ui.table_column(name='text', label='Issue', searchable=True),\n ui.table_column(name='status', label='Status'),\n ui.table_column(name='notifications', label='Notifications'),\n ui.table_column(name='done', label='Done', cell_type=ui.icon_table_cell_type()),\n ui.table_column(name='views', label='Views'),\n ui.table_column(name='progress', label='Progress', cell_type=ui.progress_table_cell_type()),\n]\n\n\n@app('/demo')\nasync def serve(q: Q):\n q.page['form'] = ui.form_card(box='1 1 -1 11', items=[\n ui.table(\n name='issues',\n columns=columns,\n rows=[ui.table_row(\n name=issue.id,\n cells=[issue.text, issue.status, issue.notifications, issue.icon, str(issue.views), issue.progress]) for\n issue in issues],\n )\n ])\n await q.page.save()\n")))}u.isMDXComponent=!0},292:function(e,n,t){"use strict";t.d(n,"a",(function(){return p})),t.d(n,"b",(function(){return b}));var r=t(0),a=t.n(r);function s(e,n,t){return n in e?Object.defineProperty(e,n,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[n]=t,e}function o(e,n){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);n&&(r=r.filter((function(n){return Object.getOwnPropertyDescriptor(e,n).enumerable}))),t.push.apply(t,r)}return t}function i(e){for(var n=1;n=0||(a[t]=e[t]);return a}(e,n);if(Object.getOwnPropertySymbols){var s=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(a[t]=e[t])}return a}var c=a.a.createContext({}),u=function(e){var n=a.a.useContext(c),t=n;return e&&(t="function"==typeof e?e(n):i(i({},n),e)),t},p=function(e){var n=u(e.components);return a.a.createElement(c.Provider,{value:n},e.children)},f={inlineCode:"code",wrapper:function(e){var n=e.children;return a.a.createElement(a.a.Fragment,{},n)}},m=a.a.forwardRef((function(e,n){var t=e.components,r=e.mdxType,s=e.originalType,o=e.parentName,c=l(e,["components","mdxType","originalType","parentName"]),p=u(t),m=r,b=p["".concat(o,".").concat(m)]||p[m]||f[m]||s;return t?a.a.createElement(b,i(i({ref:n},c),{},{components:t})):a.a.createElement(b,i({ref:n},c))}));function b(e,n){var t=arguments,r=n&&n.mdxType;if("string"==typeof e||r){var s=t.length,o=new Array(s);o[0]=m;var i={};for(var l in n)hasOwnProperty.call(n,l)&&(i[l]=n[l]);i.originalType=e,i.mdxType="string"==typeof e?e:r,o[1]=i;for(var c=2;c=0||(r[t]=e[t]);return r}(e,n);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(a=0;a=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(r[t]=e[t])}return r}var s=r.a.createContext({}),c=function(e){var n=r.a.useContext(s),t=n;return e&&(t="function"==typeof e?e(n):i(i({},n),e)),t},u=function(e){var n=c(e.components);return r.a.createElement(s.Provider,{value:n},e.children)},d={inlineCode:"code",wrapper:function(e){var n=e.children;return r.a.createElement(r.a.Fragment,{},n)}},m=r.a.forwardRef((function(e,n){var t=e.components,a=e.mdxType,o=e.originalType,l=e.parentName,s=p(e,["components","mdxType","originalType","parentName"]),u=c(t),m=a,f=u["".concat(l,".").concat(m)]||u[m]||d[m]||o;return t?r.a.createElement(f,i(i({ref:n},s),{},{components:t})):r.a.createElement(f,i({ref:n},s))}));function f(e,n){var t=arguments,a=n&&n.mdxType;if("string"==typeof e||a){var o=t.length,l=new Array(o);l[0]=m;var i={};for(var p in n)hasOwnProperty.call(n,p)&&(i[p]=n[p]);i.originalType=e,i.mdxType="string"==typeof e?e:a,l[1]=i;for(var s=2;s=0||(r[t]=e[t]);return r}(e,n);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(a=0;a=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(r[t]=e[t])}return r}var p=r.a.createContext({}),c=function(e){var n=r.a.useContext(p),t=n;return e&&(t="function"==typeof e?e(n):i(i({},n),e)),t},u=function(e){var n=c(e.components);return r.a.createElement(p.Provider,{value:n},e.children)},d={inlineCode:"code",wrapper:function(e){var n=e.children;return r.a.createElement(r.a.Fragment,{},n)}},m=r.a.forwardRef((function(e,n){var t=e.components,a=e.mdxType,o=e.originalType,l=e.parentName,p=s(e,["components","mdxType","originalType","parentName"]),u=c(t),m=a,f=u["".concat(l,".").concat(m)]||u[m]||d[m]||o;return t?r.a.createElement(f,i(i({ref:n},p),{},{components:t})):r.a.createElement(f,i({ref:n},p))}));function f(e,n){var t=arguments,a=n&&n.mdxType;if("string"==typeof e||a){var o=t.length,l=new Array(o);l[0]=m;var i={};for(var s in n)hasOwnProperty.call(n,s)&&(i[s]=n[s]);i.originalType=e,i.mdxType="string"==typeof e?e:a,l[1]=i;for(var p=2;p=0||(n[a]=A[a]);return n}(A,e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(A);for(t=0;t=0||Object.prototype.propertyIsEnumerable.call(A,a)&&(n[a]=A[a])}return n}var l=n.a.createContext({}),p=function(A){var e=n.a.useContext(l),a=e;return A&&(a="function"==typeof A?A(e):i(i({},e),A)),a},b=function(A){var e=p(A.components);return n.a.createElement(l.Provider,{value:e},A.children)},v={inlineCode:"code",wrapper:function(A){var e=A.children;return n.a.createElement(n.a.Fragment,{},e)}},f=n.a.forwardRef((function(A,e){var a=A.components,t=A.mdxType,r=A.originalType,o=A.parentName,l=u(A,["components","mdxType","originalType","parentName"]),b=p(a),f=t,m=b["".concat(o,".").concat(f)]||b[f]||v[f]||r;return a?n.a.createElement(m,i(i({ref:e},l),{},{components:a})):n.a.createElement(m,i({ref:e},l))}));function m(A,e){var a=arguments,t=e&&e.mdxType;if("string"==typeof A||t){var r=a.length,o=new Array(r);o[0]=f;var i={};for(var u in e)hasOwnProperty.call(e,u)&&(i[u]=e[u]);i.originalType=A,i.mdxType="string"==typeof A?A:t,o[1]=i;for(var l=2;l=0||(n[a]=A[a]);return n}(A,e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(A);for(t=0;t=0||Object.prototype.propertyIsEnumerable.call(A,a)&&(n[a]=A[a])}return n}var l=n.a.createContext({}),p=function(A){var e=n.a.useContext(l),a=e;return A&&(a="function"==typeof A?A(e):i(i({},e),A)),a},b=function(A){var e=p(A.components);return n.a.createElement(l.Provider,{value:e},A.children)},v={inlineCode:"code",wrapper:function(A){var e=A.children;return n.a.createElement(n.a.Fragment,{},e)}},f=n.a.forwardRef((function(A,e){var a=A.components,t=A.mdxType,r=A.originalType,o=A.parentName,l=u(A,["components","mdxType","originalType","parentName"]),b=p(a),f=t,m=b["".concat(o,".").concat(f)]||b[f]||v[f]||r;return a?n.a.createElement(m,i(i({ref:e},l),{},{components:a})):n.a.createElement(m,i({ref:e},l))}));function m(A,e){var a=arguments,t=e&&e.mdxType;if("string"==typeof A||t){var r=a.length,o=new Array(r);o[0]=f;var i={};for(var u in e)hasOwnProperty.call(e,u)&&(i[u]=e[u]);i.originalType=A,i.mdxType="string"==typeof A?A:t,o[1]=i;for(var l=2;l=0||(o[r]=e[r]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(o[r]=e[r])}return o}var c=o.a.createContext({}),u=function(e){var t=o.a.useContext(c),r=t;return e&&(r="function"==typeof e?e(t):i(i({},t),e)),r},s=function(e){var t=u(e.components);return o.a.createElement(c.Provider,{value:t},e.children)},m={inlineCode:"code",wrapper:function(e){var t=e.children;return o.a.createElement(o.a.Fragment,{},t)}},d=o.a.forwardRef((function(e,t){var r=e.components,n=e.mdxType,a=e.originalType,p=e.parentName,c=l(e,["components","mdxType","originalType","parentName"]),s=u(r),d=n,f=s["".concat(p,".").concat(d)]||s[d]||m[d]||a;return r?o.a.createElement(f,i(i({ref:t},c),{},{components:r})):o.a.createElement(f,i({ref:t},c))}));function f(e,t){var r=arguments,n=t&&t.mdxType;if("string"==typeof e||n){var a=r.length,p=new Array(a);p[0]=d;var i={};for(var l in t)hasOwnProperty.call(t,l)&&(i[l]=t[l]);i.originalType=e,i.mdxType="string"==typeof e?e:n,p[1]=i;for(var c=2;c=0||(o[r]=e[r]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(o[r]=e[r])}return o}var c=o.a.createContext({}),u=function(e){var t=o.a.useContext(c),r=t;return e&&(r="function"==typeof e?e(t):i(i({},t),e)),r},s=function(e){var t=u(e.components);return o.a.createElement(c.Provider,{value:t},e.children)},m={inlineCode:"code",wrapper:function(e){var t=e.children;return o.a.createElement(o.a.Fragment,{},t)}},d=o.a.forwardRef((function(e,t){var r=e.components,n=e.mdxType,a=e.originalType,p=e.parentName,c=l(e,["components","mdxType","originalType","parentName"]),s=u(r),d=n,f=s["".concat(p,".").concat(d)]||s[d]||m[d]||a;return r?o.a.createElement(f,i(i({ref:t},c),{},{components:r})):o.a.createElement(f,i({ref:t},c))}));function f(e,t){var r=arguments,n=t&&t.mdxType;if("string"==typeof e||n){var a=r.length,p=new Array(a);p[0]=d;var i={};for(var l in t)hasOwnProperty.call(t,l)&&(i[l]=t[l]);i.originalType=e,i.mdxType="string"==typeof e?e:n,p[1]=i;for(var c=2;c"},l.a.createElement("header",{className:Object(r.a)("hero hero--primary",d.a.heroBanner)},l.a.createElement("div",{className:"container"},l.a.createElement("h1",{className:"hero__title"},"Realtime Web Apps and Dashboards for Python"),l.a.createElement("p",{className:"hero__subtitle"},t.tagline),l.a.createElement("div",{className:d.a.buttons},l.a.createElement(c.a,{className:Object(r.a)("button button--outline button--secondary button--lg",d.a.getStarted),to:Object(m.a)("docs/getting-started")},"Get Started")))),l.a.createElement("main",null,p&&p.length>0&&l.a.createElement("section",{className:d.a.features},l.a.createElement("div",{className:"container"},l.a.createElement("div",{className:"row"},p.map(((e,t)=>l.a.createElement(f,Object(n.a)({key:t},e)))))))))}}}]); \ No newline at end of file +(window.webpackJsonp=window.webpackJsonp||[]).push([[182],{235:function(e,t,a){"use strict";a.r(t);var n=a(2),i=a(0),l=a.n(i),r=a(294),o=a(297),c=a(295),s=a(293),m=a(296),u=a(236),d=a.n(u);const p=[{title:"Know Python?",icon:"fab fa-python",description:l.a.createElement(l.a.Fragment,null,"No HTML, CSS, Javascript skills required. Build rich, interactive web apps using pure Python.")},{title:"Realtime Sync",icon:"fas fa-stopwatch",description:l.a.createElement(l.a.Fragment,null,"Broadcast live information, visualizations and graphics using Wave's low-latency realtime server.")},{title:"Collaborative Content",icon:"fas fa-users",description:l.a.createElement(l.a.Fragment,null,"Instant control over every connected web browser using a simple and intuitive programming model.")},{title:"Develop Quickly",icon:"fas fa-laptop-code",description:l.a.createElement(l.a.Fragment,null,"Preview your app live as you code. Dramatically reduce the time and effort to build web apps.")},{title:"Deploy Instantly",icon:"fas fa-upload",description:l.a.createElement(l.a.Fragment,null,"Easily share your apps with end-users, get feedback, improve and iterate.")},{title:"Run Anywhere",icon:"fas fa-terminal",description:l.a.createElement(l.a.Fragment,null,"~10MB static executables for Linux, Windows, OSX, BSD, Solaris on AMD64, 386, ARM, PPC. Run it on a RPi Zero for great good!")}];function f({icon:e,title:t,description:a}){return l.a.createElement("div",{className:Object(r.a)("col col--4",d.a.feature)},l.a.createElement("div",null,l.a.createElement("i",{class:e})),l.a.createElement("h3",null,t),l.a.createElement("p",null,a))}t.default=function(){const e=Object(s.a)(),{siteConfig:t={}}=e;return l.a.createElement(o.a,{title:"Hello from "+t.title,description:"Description will go into a meta tag in "},l.a.createElement("header",{className:Object(r.a)("hero hero--primary",d.a.heroBanner)},l.a.createElement("div",{className:"container"},l.a.createElement("h1",{className:"hero__title"},"Realtime Web Apps and Dashboards for Python"),l.a.createElement("p",{className:"hero__subtitle"},t.tagline),l.a.createElement("div",{className:d.a.buttons},l.a.createElement(c.a,{className:Object(r.a)("button button--outline button--secondary button--lg",d.a.getStarted),to:Object(m.a)("docs/getting-started")},"Get Started")))),l.a.createElement("main",null,p&&p.length>0&&l.a.createElement("section",{className:d.a.features},l.a.createElement("div",{className:"container"},l.a.createElement("div",{className:"row"},p.map(((e,t)=>l.a.createElement(f,Object(n.a)({key:t},e)))))))))}}}]); \ No newline at end of file diff --git a/docs/c641a4e8.56e47608.js b/docs/c641a4e8.437ff80d.js similarity index 96% rename from docs/c641a4e8.56e47608.js rename to docs/c641a4e8.437ff80d.js index 3622030614..779f536030 100644 --- a/docs/c641a4e8.56e47608.js +++ b/docs/c641a4e8.437ff80d.js @@ -1 +1 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[182],{236:function(e,r,t){"use strict";t.r(r),t.d(r,"frontMatter",(function(){return i})),t.d(r,"metadata",(function(){return p})),t.d(r,"rightToc",(function(){return c})),t.d(r,"default",(function(){return l}));var n=t(2),a=t(6),o=(t(0),t(290)),i={title:"Form / Progress / Updating"},p={unversionedId:"examples/progress-update",id:"examples/progress-update",isDocsHomePage:!1,title:"Form / Progress / Updating",description:"Update a progress bar's completion status periodically.",source:"@site/docs/examples/progress-update.md",slug:"/examples/progress-update",permalink:"/wave/docs/examples/progress-update",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/examples/progress-update.md",version:"current",sidebar:"someSidebar",previous:{title:"Form / Progress",permalink:"/wave/docs/examples/progress"},next:{title:"Form / Message Bar",permalink:"/wave/docs/examples/message-bar"}},c=[],s={rightToc:c};function l(e){var r=e.components,i=Object(a.a)(e,["components"]);return Object(o.b)("wrapper",Object(n.a)({},s,i,{components:r,mdxType:"MDXLayout"}),Object(o.b)("p",null,"Update a progress bar's completion status periodically."),Object(o.b)("div",{className:"cover",style:{backgroundImage:"url("+t(426).default+")"}}),Object(o.b)("pre",null,Object(o.b)("code",Object(n.a)({parentName:"pre"},{className:"language-py"}),"import time\n\nfrom h2o_wave import site, ui\n\npage = site['/demo']\n\npage['example'] = ui.form_card(\n box='1 1 4 -1',\n items=[\n ui.progress(label='Basic Progress'),\n ]\n)\npage.save()\n\nfor i in range(1, 11):\n time.sleep(1)\n page['example'].items = [\n ui.progress(label='Basic Progress', caption=f'{i * 10}% complete', value=i / 10),\n ]\n\n # This will work, too:\n # page['example'].items[0].progress.value = i/10\n\n page.save()\n")))}l.isMDXComponent=!0},290:function(e,r,t){"use strict";t.d(r,"a",(function(){return u})),t.d(r,"b",(function(){return v}));var n=t(0),a=t.n(n);function o(e,r,t){return r in e?Object.defineProperty(e,r,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[r]=t,e}function i(e,r){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);r&&(n=n.filter((function(r){return Object.getOwnPropertyDescriptor(e,r).enumerable}))),t.push.apply(t,n)}return t}function p(e){for(var r=1;r=0||(a[t]=e[t]);return a}(e,r);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(a[t]=e[t])}return a}var s=a.a.createContext({}),l=function(e){var r=a.a.useContext(s),t=r;return e&&(t="function"==typeof e?e(r):p(p({},r),e)),t},u=function(e){var r=l(e.components);return a.a.createElement(s.Provider,{value:r},e.children)},m={inlineCode:"code",wrapper:function(e){var r=e.children;return a.a.createElement(a.a.Fragment,{},r)}},f=a.a.forwardRef((function(e,r){var t=e.components,n=e.mdxType,o=e.originalType,i=e.parentName,s=c(e,["components","mdxType","originalType","parentName"]),u=l(t),f=n,v=u["".concat(i,".").concat(f)]||u[f]||m[f]||o;return t?a.a.createElement(v,p(p({ref:r},s),{},{components:t})):a.a.createElement(v,p({ref:r},s))}));function v(e,r){var t=arguments,n=r&&r.mdxType;if("string"==typeof e||n){var o=t.length,i=new Array(o);i[0]=f;var p={};for(var c in r)hasOwnProperty.call(r,c)&&(p[c]=r[c]);p.originalType=e,p.mdxType="string"==typeof e?e:n,i[1]=p;for(var s=2;s=0||(a[t]=e[t]);return a}(e,r);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(a[t]=e[t])}return a}var s=a.a.createContext({}),l=function(e){var r=a.a.useContext(s),t=r;return e&&(t="function"==typeof e?e(r):p(p({},r),e)),t},u=function(e){var r=l(e.components);return a.a.createElement(s.Provider,{value:r},e.children)},m={inlineCode:"code",wrapper:function(e){var r=e.children;return a.a.createElement(a.a.Fragment,{},r)}},f=a.a.forwardRef((function(e,r){var t=e.components,n=e.mdxType,o=e.originalType,i=e.parentName,s=c(e,["components","mdxType","originalType","parentName"]),u=l(t),f=n,v=u["".concat(i,".").concat(f)]||u[f]||m[f]||o;return t?a.a.createElement(v,p(p({ref:r},s),{},{components:t})):a.a.createElement(v,p({ref:r},s))}));function v(e,r){var t=arguments,n=r&&r.mdxType;if("string"==typeof e||n){var o=t.length,i=new Array(o);i[0]=f;var p={};for(var c in r)hasOwnProperty.call(r,c)&&(p[c]=r[c]);p.originalType=e,p.mdxType="string"==typeof e?e:n,i[1]=p;for(var s=2;s=0||(a[r]=e[r]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(a[r]=e[r])}return a}var l=a.a.createContext({}),s=function(e){var t=a.a.useContext(l),r=t;return e&&(r="function"==typeof e?e(t):i(i({},t),e)),r},u=function(e){var t=s(e.components);return a.a.createElement(l.Provider,{value:t},e.children)},d={inlineCode:"code",wrapper:function(e){var t=e.children;return a.a.createElement(a.a.Fragment,{},t)}},f=a.a.forwardRef((function(e,t){var r=e.components,n=e.mdxType,o=e.originalType,c=e.parentName,l=p(e,["components","mdxType","originalType","parentName"]),u=s(r),f=n,m=u["".concat(c,".").concat(f)]||u[f]||d[f]||o;return r?a.a.createElement(m,i(i({ref:t},l),{},{components:r})):a.a.createElement(m,i({ref:t},l))}));function m(e,t){var r=arguments,n=t&&t.mdxType;if("string"==typeof e||n){var o=r.length,c=new Array(o);c[0]=f;var i={};for(var p in t)hasOwnProperty.call(t,p)&&(i[p]=t[p]);i.originalType=e,i.mdxType="string"==typeof e?e:n,c[1]=i;for(var l=2;l=0||(a[r]=e[r]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(a[r]=e[r])}return a}var l=a.a.createContext({}),s=function(e){var t=a.a.useContext(l),r=t;return e&&(r="function"==typeof e?e(t):i(i({},t),e)),r},u=function(e){var t=s(e.components);return a.a.createElement(l.Provider,{value:t},e.children)},d={inlineCode:"code",wrapper:function(e){var t=e.children;return a.a.createElement(a.a.Fragment,{},t)}},f=a.a.forwardRef((function(e,t){var r=e.components,n=e.mdxType,o=e.originalType,c=e.parentName,l=p(e,["components","mdxType","originalType","parentName"]),u=s(r),f=n,m=u["".concat(c,".").concat(f)]||u[f]||d[f]||o;return r?a.a.createElement(m,i(i({ref:t},l),{},{components:r})):a.a.createElement(m,i({ref:t},l))}));function m(e,t){var r=arguments,n=t&&t.mdxType;if("string"==typeof e||n){var o=r.length,c=new Array(o);c[0]=f;var i={};for(var p in t)hasOwnProperty.call(t,p)&&(i[p]=t[p]);i.originalType=e,i.mdxType="string"==typeof e?e:n,c[1]=i;for(var l=2;l=0||(o[r]=e[r]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(o[r]=e[r])}return o}var l=o.a.createContext({}),s=function(e){var t=o.a.useContext(l),r=t;return e&&(r="function"==typeof e?e(t):c(c({},t),e)),r},u=function(e){var t=s(e.components);return o.a.createElement(l.Provider,{value:t},e.children)},m={inlineCode:"code",wrapper:function(e){var t=e.children;return o.a.createElement(o.a.Fragment,{},t)}},f=o.a.forwardRef((function(e,t){var r=e.components,n=e.mdxType,a=e.originalType,p=e.parentName,l=i(e,["components","mdxType","originalType","parentName"]),u=s(r),f=n,d=u["".concat(p,".").concat(f)]||u[f]||m[f]||a;return r?o.a.createElement(d,c(c({ref:t},l),{},{components:r})):o.a.createElement(d,c({ref:t},l))}));function d(e,t){var r=arguments,n=t&&t.mdxType;if("string"==typeof e||n){var a=r.length,p=new Array(a);p[0]=f;var c={};for(var i in t)hasOwnProperty.call(t,i)&&(c[i]=t[i]);c.originalType=e,c.mdxType="string"==typeof e?e:n,p[1]=c;for(var l=2;l=0||(o[r]=e[r]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(o[r]=e[r])}return o}var l=o.a.createContext({}),s=function(e){var t=o.a.useContext(l),r=t;return e&&(r="function"==typeof e?e(t):c(c({},t),e)),r},u=function(e){var t=s(e.components);return o.a.createElement(l.Provider,{value:t},e.children)},m={inlineCode:"code",wrapper:function(e){var t=e.children;return o.a.createElement(o.a.Fragment,{},t)}},f=o.a.forwardRef((function(e,t){var r=e.components,n=e.mdxType,a=e.originalType,p=e.parentName,l=i(e,["components","mdxType","originalType","parentName"]),u=s(r),f=n,d=u["".concat(p,".").concat(f)]||u[f]||m[f]||a;return r?o.a.createElement(d,c(c({ref:t},l),{},{components:r})):o.a.createElement(d,c({ref:t},l))}));function d(e,t){var r=arguments,n=t&&t.mdxType;if("string"==typeof e||n){var a=r.length,p=new Array(a);p[0]=f;var c={};for(var i in t)hasOwnProperty.call(t,i)&&(c[i]=t[i]);c.originalType=e,c.mdxType="string"==typeof e?e:n,p[1]=c;for(var l=2;l=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var p=o.a.createContext({}),s=function(e){var t=o.a.useContext(p),n=t;return e&&(n="function"==typeof e?e(t):c(c({},t),e)),n},u=function(e){var t=s(e.components);return o.a.createElement(p.Provider,{value:t},e.children)},m={inlineCode:"code",wrapper:function(e){var t=e.children;return o.a.createElement(o.a.Fragment,{},t)}},f=o.a.forwardRef((function(e,t){var n=e.components,r=e.mdxType,a=e.originalType,i=e.parentName,p=l(e,["components","mdxType","originalType","parentName"]),u=s(n),f=r,d=u["".concat(i,".").concat(f)]||u[f]||m[f]||a;return n?o.a.createElement(d,c(c({ref:t},p),{},{components:n})):o.a.createElement(d,c({ref:t},p))}));function d(e,t){var n=arguments,r=t&&t.mdxType;if("string"==typeof e||r){var a=n.length,i=new Array(a);i[0]=f;var c={};for(var l in t)hasOwnProperty.call(t,l)&&(c[l]=t[l]);c.originalType=e,c.mdxType="string"==typeof e?e:r,i[1]=c;for(var p=2;p=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var p=o.a.createContext({}),s=function(e){var t=o.a.useContext(p),n=t;return e&&(n="function"==typeof e?e(t):c(c({},t),e)),n},u=function(e){var t=s(e.components);return o.a.createElement(p.Provider,{value:t},e.children)},m={inlineCode:"code",wrapper:function(e){var t=e.children;return o.a.createElement(o.a.Fragment,{},t)}},f=o.a.forwardRef((function(e,t){var n=e.components,r=e.mdxType,a=e.originalType,i=e.parentName,p=l(e,["components","mdxType","originalType","parentName"]),u=s(n),f=r,d=u["".concat(i,".").concat(f)]||u[f]||m[f]||a;return n?o.a.createElement(d,c(c({ref:t},p),{},{components:n})):o.a.createElement(d,c({ref:t},p))}));function d(e,t){var n=arguments,r=t&&t.mdxType;if("string"==typeof e||r){var a=n.length,i=new Array(a);i[0]=f;var c={};for(var l in t)hasOwnProperty.call(t,l)&&(c[l]=t[l]);c.originalType=e,c.mdxType="string"==typeof e?e:r,i[1]=c;for(var p=2;p=0||(r[n]=e[n]);return r}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(a=0;a=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(r[n]=e[n])}return r}var c=r.a.createContext({}),p=function(e){var t=r.a.useContext(c),n=t;return e&&(n="function"==typeof e?e(t):s(s({},t),e)),n},d=function(e){var t=p(e.components);return r.a.createElement(c.Provider,{value:t},e.children)},u={inlineCode:"code",wrapper:function(e){var t=e.children;return r.a.createElement(r.a.Fragment,{},t)}},m=r.a.forwardRef((function(e,t){var n=e.components,a=e.mdxType,i=e.originalType,o=e.parentName,c=l(e,["components","mdxType","originalType","parentName"]),d=p(n),m=a,b=d["".concat(o,".").concat(m)]||d[m]||u[m]||i;return n?r.a.createElement(b,s(s({ref:t},c),{},{components:n})):r.a.createElement(b,s({ref:t},c))}));function b(e,t){var n=arguments,a=t&&t.mdxType;if("string"==typeof e||a){var i=n.length,o=new Array(i);o[0]=m;var s={};for(var l in t)hasOwnProperty.call(t,l)&&(s[l]=t[l]);s.originalType=e,s.mdxType="string"==typeof e?e:a,o[1]=s;for(var c=2;c=0||(r[n]=e[n]);return r}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(a=0;a=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(r[n]=e[n])}return r}var c=r.a.createContext({}),p=function(e){var t=r.a.useContext(c),n=t;return e&&(n="function"==typeof e?e(t):s(s({},t),e)),n},d=function(e){var t=p(e.components);return r.a.createElement(c.Provider,{value:t},e.children)},u={inlineCode:"code",wrapper:function(e){var t=e.children;return r.a.createElement(r.a.Fragment,{},t)}},m=r.a.forwardRef((function(e,t){var n=e.components,a=e.mdxType,i=e.originalType,o=e.parentName,c=l(e,["components","mdxType","originalType","parentName"]),d=p(n),m=a,b=d["".concat(o,".").concat(m)]||d[m]||u[m]||i;return n?r.a.createElement(b,s(s({ref:t},c),{},{components:n})):r.a.createElement(b,s({ref:t},c))}));function b(e,t){var n=arguments,a=t&&t.mdxType;if("string"==typeof e||a){var i=n.length,o=new Array(i);o[0]=m;var s={};for(var l in t)hasOwnProperty.call(t,l)&&(s[l]=t[l]);s.originalType=e,s.mdxType="string"==typeof e?e:a,o[1]=s;for(var c=2;c=0||(a[t]=e[t]);return a}(e,r);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(a[t]=e[t])}return a}var c=a.a.createContext({}),u=function(e){var r=a.a.useContext(c),t=r;return e&&(t="function"==typeof e?e(r):s(s({},r),e)),t},p=function(e){var r=u(e.components);return a.a.createElement(c.Provider,{value:r},e.children)},d={inlineCode:"code",wrapper:function(e){var r=e.children;return a.a.createElement(a.a.Fragment,{},r)}},m=a.a.forwardRef((function(e,r){var t=e.components,n=e.mdxType,i=e.originalType,o=e.parentName,c=l(e,["components","mdxType","originalType","parentName"]),p=u(t),m=n,f=p["".concat(o,".").concat(m)]||p[m]||d[m]||i;return t?a.a.createElement(f,s(s({ref:r},c),{},{components:t})):a.a.createElement(f,s({ref:r},c))}));function f(e,r){var t=arguments,n=r&&r.mdxType;if("string"==typeof e||n){var i=t.length,o=new Array(i);o[0]=m;var s={};for(var l in r)hasOwnProperty.call(r,l)&&(s[l]=r[l]);s.originalType=e,s.mdxType="string"==typeof e?e:n,o[1]=s;for(var c=2;c=0||(a[t]=e[t]);return a}(e,r);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(a[t]=e[t])}return a}var c=a.a.createContext({}),u=function(e){var r=a.a.useContext(c),t=r;return e&&(t="function"==typeof e?e(r):s(s({},r),e)),t},p=function(e){var r=u(e.components);return a.a.createElement(c.Provider,{value:r},e.children)},d={inlineCode:"code",wrapper:function(e){var r=e.children;return a.a.createElement(a.a.Fragment,{},r)}},m=a.a.forwardRef((function(e,r){var t=e.components,n=e.mdxType,i=e.originalType,o=e.parentName,c=l(e,["components","mdxType","originalType","parentName"]),p=u(t),m=n,f=p["".concat(o,".").concat(m)]||p[m]||d[m]||i;return t?a.a.createElement(f,s(s({ref:r},c),{},{components:t})):a.a.createElement(f,s({ref:r},c))}));function f(e,r){var t=arguments,n=r&&r.mdxType;if("string"==typeof e||n){var i=t.length,o=new Array(i);o[0]=m;var s={};for(var l in r)hasOwnProperty.call(r,l)&&(s[l]=r[l]);s.originalType=e,s.mdxType="string"==typeof e?e:n,o[1]=s;for(var c=2;c=0||(a[n]=e[n]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(a[n]=e[n])}return a}var u=a.a.createContext({}),s=function(e){var t=a.a.useContext(u),n=t;return e&&(n="function"==typeof e?e(t):c(c({},t),e)),n},d=function(e){var t=s(e.components);return a.a.createElement(u.Provider,{value:t},e.children)},l={inlineCode:"code",wrapper:function(e){var t=e.children;return a.a.createElement(a.a.Fragment,{},t)}},m=a.a.forwardRef((function(e,t){var n=e.components,r=e.mdxType,o=e.originalType,i=e.parentName,u=p(e,["components","mdxType","originalType","parentName"]),d=s(n),m=r,g=d["".concat(i,".").concat(m)]||d[m]||l[m]||o;return n?a.a.createElement(g,c(c({ref:t},u),{},{components:n})):a.a.createElement(g,c({ref:t},u))}));function g(e,t){var n=arguments,r=t&&t.mdxType;if("string"==typeof e||r){var o=n.length,i=new Array(o);i[0]=m;var c={};for(var p in t)hasOwnProperty.call(t,p)&&(c[p]=t[p]);c.originalType=e,c.mdxType="string"==typeof e?e:r,i[1]=c;for(var u=2;u=0||(a[t]=e[t]);return a}(e,r);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(a[t]=e[t])}return a}var s=a.a.createContext({}),u=function(e){var r=a.a.useContext(s),t=r;return e&&(t="function"==typeof e?e(r):p(p({},r),e)),t},l=function(e){var r=u(e.components);return a.a.createElement(s.Provider,{value:r},e.children)},m={inlineCode:"code",wrapper:function(e){var r=e.children;return a.a.createElement(a.a.Fragment,{},r)}},f=a.a.forwardRef((function(e,r){var t=e.components,n=e.mdxType,o=e.originalType,i=e.parentName,s=c(e,["components","mdxType","originalType","parentName"]),l=u(t),f=n,b=l["".concat(i,".").concat(f)]||l[f]||m[f]||o;return t?a.a.createElement(b,p(p({ref:r},s),{},{components:t})):a.a.createElement(b,p({ref:r},s))}));function b(e,r){var t=arguments,n=r&&r.mdxType;if("string"==typeof e||n){var o=t.length,i=new Array(o);i[0]=f;var p={};for(var c in r)hasOwnProperty.call(r,c)&&(p[c]=r[c]);p.originalType=e,p.mdxType="string"==typeof e?e:n,i[1]=p;for(var s=2;s=0||(a[t]=e[t]);return a}(e,r);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(a[t]=e[t])}return a}var s=a.a.createContext({}),u=function(e){var r=a.a.useContext(s),t=r;return e&&(t="function"==typeof e?e(r):p(p({},r),e)),t},l=function(e){var r=u(e.components);return a.a.createElement(s.Provider,{value:r},e.children)},m={inlineCode:"code",wrapper:function(e){var r=e.children;return a.a.createElement(a.a.Fragment,{},r)}},f=a.a.forwardRef((function(e,r){var t=e.components,n=e.mdxType,o=e.originalType,i=e.parentName,s=c(e,["components","mdxType","originalType","parentName"]),l=u(t),f=n,b=l["".concat(i,".").concat(f)]||l[f]||m[f]||o;return t?a.a.createElement(b,p(p({ref:r},s),{},{components:t})):a.a.createElement(b,p({ref:r},s))}));function b(e,r){var t=arguments,n=r&&r.mdxType;if("string"==typeof e||n){var o=t.length,i=new Array(o);i[0]=f;var p={};for(var c in r)hasOwnProperty.call(r,c)&&(p[c]=r[c]);p.originalType=e,p.mdxType="string"==typeof e?e:n,i[1]=p;for(var s=2;s{let n,r;function c(){const c=function(){let e=0,t=null;for(n=document.getElementsByClassName("anchor");e=0&&i<=a&&(t=l),e+=1}return t}();if(c){let a=0,n=!1;for(r=document.getElementsByClassName(e);a{document.removeEventListener("scroll",c),document.removeEventListener("resize",c)}}))},r=a(46),c=a.n(r);const s="table-of-contents__link";function o({headings:e,isChild:t}){return e.length?l.a.createElement("ul",{className:t?"":"table-of-contents table-of-contents__left-border"},e.map((e=>l.a.createElement("li",{key:e.id},l.a.createElement("a",{href:"#"+e.id,className:s,dangerouslySetInnerHTML:{__html:e.value}}),l.a.createElement(o,{isChild:!0,headings:e.children}))))):null}t.a=function({headings:e}){return i(s,"table-of-contents__link--active",100),l.a.createElement("div",{className:c.a.tableOfContents},l.a.createElement(o,{headings:e}))}}}]); \ No newline at end of file +(window.webpackJsonp=window.webpackJsonp||[]).push([[191],{291:function(e,t,a){"use strict";a.r(t);var n=a(0),l=a.n(n),i=a(297),r=a(369),c=a(295);var s=function(e){const{nextItem:t,prevItem:a}=e;return l.a.createElement("nav",{className:"pagination-nav","aria-label":"Blog post page navigation"},l.a.createElement("div",{className:"pagination-nav__item"},a&&l.a.createElement(c.a,{className:"pagination-nav__link",to:a.permalink},l.a.createElement("div",{className:"pagination-nav__sublabel"},"Newer Post"),l.a.createElement("div",{className:"pagination-nav__label"},"\xab ",a.title))),l.a.createElement("div",{className:"pagination-nav__item pagination-nav__item--next"},t&&l.a.createElement(c.a,{className:"pagination-nav__link",to:t.permalink},l.a.createElement("div",{className:"pagination-nav__sublabel"},"Older Post"),l.a.createElement("div",{className:"pagination-nav__label"},t.title," \xbb"))))},o=a(473);t.default=function(e){const{content:t}=e,{frontMatter:a,metadata:n}=t,{title:c,description:m,nextItem:d,prevItem:v,editUrl:g}=n,{hide_table_of_contents:u}=a;return l.a.createElement(i.a,{title:c,description:m},t&&l.a.createElement("div",{className:"container margin-vert--lg"},l.a.createElement("div",{className:"row"},l.a.createElement("div",{className:"col col--8 col--offset-2"},l.a.createElement(r.a,{frontMatter:a,metadata:n,isBlogPostPage:!0},l.a.createElement(t,null)),l.a.createElement("div",null,g&&l.a.createElement("a",{href:g,target:"_blank",rel:"noreferrer noopener"},l.a.createElement("svg",{fill:"currentColor",height:"1.2em",width:"1.2em",preserveAspectRatio:"xMidYMid meet",viewBox:"0 0 40 40",style:{marginRight:"0.3em",verticalAlign:"sub"}},l.a.createElement("g",null,l.a.createElement("path",{d:"m34.5 11.7l-3 3.1-6.3-6.3 3.1-3q0.5-0.5 1.2-0.5t1.1 0.5l3.9 3.9q0.5 0.4 0.5 1.1t-0.5 1.2z m-29.5 17.1l18.4-18.5 6.3 6.3-18.4 18.4h-6.3v-6.2z"}))),"Edit this page")),(d||v)&&l.a.createElement("div",{className:"margin-vert--xl"},l.a.createElement(s,{nextItem:d,prevItem:v}))),!u&&t.rightToc&&l.a.createElement("div",{className:"col col--2"},l.a.createElement(o.a,{headings:t.rightToc})))))}},473:function(e,t,a){"use strict";var n=a(0),l=a.n(n);var i=function(e,t,a){const[l,i]=Object(n.useState)(void 0);Object(n.useEffect)((()=>{let n,r;function c(){const c=function(){let e=0,t=null;for(n=document.getElementsByClassName("anchor");e=0&&i<=a&&(t=l),e+=1}return t}();if(c){let a=0,n=!1;for(r=document.getElementsByClassName(e);a{document.removeEventListener("scroll",c),document.removeEventListener("resize",c)}}))},r=a(46),c=a.n(r);const s="table-of-contents__link";function o({headings:e,isChild:t}){return e.length?l.a.createElement("ul",{className:t?"":"table-of-contents table-of-contents__left-border"},e.map((e=>l.a.createElement("li",{key:e.id},l.a.createElement("a",{href:"#"+e.id,className:s,dangerouslySetInnerHTML:{__html:e.value}}),l.a.createElement(o,{isChild:!0,headings:e.children}))))):null}t.a=function({headings:e}){return i(s,"table-of-contents__link--active",100),l.a.createElement("div",{className:c.a.tableOfContents},l.a.createElement(o,{headings:e}))}}}]); \ No newline at end of file diff --git a/docs/cd329814.7a492562.js b/docs/cd329814.ee103b68.js similarity index 92% rename from docs/cd329814.7a492562.js rename to docs/cd329814.ee103b68.js index 7c39e748ef..191c83d928 100644 --- a/docs/cd329814.7a492562.js +++ b/docs/cd329814.ee103b68.js @@ -1 +1 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[190],{243:function(e,t,r){"use strict";r.r(t),r.d(t,"frontMatter",(function(){return c})),r.d(t,"metadata",(function(){return i})),r.d(t,"rightToc",(function(){return l})),r.d(t,"default",(function(){return s}));var n=r(2),a=r(6),o=(r(0),r(290)),c={title:"Plot / Interval / Stacked / Transpose"},i={unversionedId:"examples/plot-interval-stacked-transpose",id:"examples/plot-interval-stacked-transpose",isDocsHomePage:!1,title:"Plot / Interval / Stacked / Transpose",description:"Make a stacked bar plot.",source:"@site/docs/examples/plot-interval-stacked-transpose.md",slug:"/examples/plot-interval-stacked-transpose",permalink:"/wave/docs/examples/plot-interval-stacked-transpose",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/examples/plot-interval-stacked-transpose.md",version:"current",sidebar:"someSidebar",previous:{title:"Plot / Interval / Stacked",permalink:"/wave/docs/examples/plot-interval-stacked"},next:{title:"Plot / Interval / Stacked / Grouped",permalink:"/wave/docs/examples/plot-interval-stacked-grouped"}},l=[],p={rightToc:l};function s(e){var t=e.components,c=Object(a.a)(e,["components"]);return Object(o.b)("wrapper",Object(n.a)({},p,c,{components:t,mdxType:"MDXLayout"}),Object(o.b)("p",null,"Make a stacked bar plot."),Object(o.b)("div",{className:"cover",style:{backgroundImage:"url("+r(444).default+")"}}),Object(o.b)("pre",null,Object(o.b)("code",Object(n.a)({parentName:"pre"},{className:"language-py"}),"from synth import FakeMultiCategoricalSeries\nfrom h2o_wave import site, data, ui\n\npage = site['/demo']\n\nn = 10\nk = 5\nf = FakeMultiCategoricalSeries(groups=k)\nv = page.add('example', ui.plot_card(\n box='1 1 4 5',\n title='Intervals, stacked',\n data=data('country product price', n * k),\n plot=ui.plot([ui.mark(type='interval', x='=price', y='=product', color='=country', stack='auto', y_min=0)])\n))\n\nv.data = [(g, t, x) for x in [f.next() for _ in range(n)] for g, t, x, dx in x]\n\npage.save()\n")))}s.isMDXComponent=!0},290:function(e,t,r){"use strict";r.d(t,"a",(function(){return u})),r.d(t,"b",(function(){return m}));var n=r(0),a=r.n(n);function o(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function c(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),r.push.apply(r,n)}return r}function i(e){for(var t=1;t=0||(a[r]=e[r]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(a[r]=e[r])}return a}var p=a.a.createContext({}),s=function(e){var t=a.a.useContext(p),r=t;return e&&(r="function"==typeof e?e(t):i(i({},t),e)),r},u=function(e){var t=s(e.components);return a.a.createElement(p.Provider,{value:t},e.children)},d={inlineCode:"code",wrapper:function(e){var t=e.children;return a.a.createElement(a.a.Fragment,{},t)}},f=a.a.forwardRef((function(e,t){var r=e.components,n=e.mdxType,o=e.originalType,c=e.parentName,p=l(e,["components","mdxType","originalType","parentName"]),u=s(r),f=n,m=u["".concat(c,".").concat(f)]||u[f]||d[f]||o;return r?a.a.createElement(m,i(i({ref:t},p),{},{components:r})):a.a.createElement(m,i({ref:t},p))}));function m(e,t){var r=arguments,n=t&&t.mdxType;if("string"==typeof e||n){var o=r.length,c=new Array(o);c[0]=f;var i={};for(var l in t)hasOwnProperty.call(t,l)&&(i[l]=t[l]);i.originalType=e,i.mdxType="string"==typeof e?e:n,c[1]=i;for(var p=2;p=0||(a[r]=e[r]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(a[r]=e[r])}return a}var p=a.a.createContext({}),s=function(e){var t=a.a.useContext(p),r=t;return e&&(r="function"==typeof e?e(t):i(i({},t),e)),r},u=function(e){var t=s(e.components);return a.a.createElement(p.Provider,{value:t},e.children)},d={inlineCode:"code",wrapper:function(e){var t=e.children;return a.a.createElement(a.a.Fragment,{},t)}},f=a.a.forwardRef((function(e,t){var r=e.components,n=e.mdxType,o=e.originalType,c=e.parentName,p=l(e,["components","mdxType","originalType","parentName"]),u=s(r),f=n,m=u["".concat(c,".").concat(f)]||u[f]||d[f]||o;return r?a.a.createElement(m,i(i({ref:t},p),{},{components:r})):a.a.createElement(m,i({ref:t},p))}));function m(e,t){var r=arguments,n=t&&t.mdxType;if("string"==typeof e||n){var o=r.length,c=new Array(o);c[0]=f;var i={};for(var l in t)hasOwnProperty.call(t,l)&&(i[l]=t[l]);i.originalType=e,i.mdxType="string"==typeof e?e:n,c[1]=i;for(var p=2;p=0||(a[t]=e[t]);return a}(e,n);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(a[t]=e[t])}return a}var c=a.a.createContext({}),u=function(e){var n=a.a.useContext(c),t=n;return e&&(t="function"==typeof e?e(n):l(l({},n),e)),t},s=function(e){var n=u(e.components);return a.a.createElement(c.Provider,{value:n},e.children)},m={inlineCode:"code",wrapper:function(e){var n=e.children;return a.a.createElement(a.a.Fragment,{},n)}},d=a.a.forwardRef((function(e,n){var t=e.components,r=e.mdxType,o=e.originalType,i=e.parentName,c=p(e,["components","mdxType","originalType","parentName"]),s=u(t),d=r,f=s["".concat(i,".").concat(d)]||s[d]||m[d]||o;return t?a.a.createElement(f,l(l({ref:n},c),{},{components:t})):a.a.createElement(f,l({ref:n},c))}));function f(e,n){var t=arguments,r=n&&n.mdxType;if("string"==typeof e||r){var o=t.length,i=new Array(o);i[0]=d;var l={};for(var p in n)hasOwnProperty.call(n,p)&&(l[p]=n[p]);l.originalType=e,l.mdxType="string"==typeof e?e:r,i[1]=l;for(var c=2;c=0||(a[t]=e[t]);return a}(e,n);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(a[t]=e[t])}return a}var c=a.a.createContext({}),u=function(e){var n=a.a.useContext(c),t=n;return e&&(t="function"==typeof e?e(n):l(l({},n),e)),t},p=function(e){var n=u(e.components);return a.a.createElement(c.Provider,{value:n},e.children)},m={inlineCode:"code",wrapper:function(e){var n=e.children;return a.a.createElement(a.a.Fragment,{},n)}},d=a.a.forwardRef((function(e,n){var t=e.components,r=e.mdxType,o=e.originalType,i=e.parentName,c=s(e,["components","mdxType","originalType","parentName"]),p=u(t),d=r,f=p["".concat(i,".").concat(d)]||p[d]||m[d]||o;return t?a.a.createElement(f,l(l({ref:n},c),{},{components:t})):a.a.createElement(f,l({ref:n},c))}));function f(e,n){var t=arguments,r=n&&n.mdxType;if("string"==typeof e||r){var o=t.length,i=new Array(o);i[0]=d;var l={};for(var s in n)hasOwnProperty.call(n,s)&&(l[s]=n[s]);l.originalType=e,l.mdxType="string"==typeof e?e:r,i[1]=l;for(var c=2;c=0||(a[n]=e[n]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(a[n]=e[n])}return a}var p=a.a.createContext({}),s=function(e){var t=a.a.useContext(p),n=t;return e&&(n="function"==typeof e?e(t):l(l({},t),e)),n},u=function(e){var t=s(e.components);return a.a.createElement(p.Provider,{value:t},e.children)},m={inlineCode:"code",wrapper:function(e){var t=e.children;return a.a.createElement(a.a.Fragment,{},t)}},f=a.a.forwardRef((function(e,t){var n=e.components,r=e.mdxType,o=e.originalType,i=e.parentName,p=c(e,["components","mdxType","originalType","parentName"]),u=s(n),f=r,d=u["".concat(i,".").concat(f)]||u[f]||m[f]||o;return n?a.a.createElement(d,l(l({ref:t},p),{},{components:n})):a.a.createElement(d,l({ref:t},p))}));function d(e,t){var n=arguments,r=t&&t.mdxType;if("string"==typeof e||r){var o=n.length,i=new Array(o);i[0]=f;var l={};for(var c in t)hasOwnProperty.call(t,c)&&(l[c]=t[c]);l.originalType=e,l.mdxType="string"==typeof e?e:r,i[1]=l;for(var p=2;p=0||(a[n]=e[n]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(a[n]=e[n])}return a}var p=a.a.createContext({}),s=function(e){var t=a.a.useContext(p),n=t;return e&&(n="function"==typeof e?e(t):l(l({},t),e)),n},u=function(e){var t=s(e.components);return a.a.createElement(p.Provider,{value:t},e.children)},m={inlineCode:"code",wrapper:function(e){var t=e.children;return a.a.createElement(a.a.Fragment,{},t)}},f=a.a.forwardRef((function(e,t){var n=e.components,r=e.mdxType,o=e.originalType,i=e.parentName,p=c(e,["components","mdxType","originalType","parentName"]),u=s(n),f=r,d=u["".concat(i,".").concat(f)]||u[f]||m[f]||o;return n?a.a.createElement(d,l(l({ref:t},p),{},{components:n})):a.a.createElement(d,l({ref:t},p))}));function d(e,t){var n=arguments,r=t&&t.mdxType;if("string"==typeof e||r){var o=n.length,i=new Array(o);i[0]=f;var l={};for(var c in t)hasOwnProperty.call(t,c)&&(l[c]=t[c]);l.originalType=e,l.mdxType="string"==typeof e?e:r,i[1]=l;for(var p=2;p=0||(r[i]=e[i]);return r}(e,n);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(t=0;t=0||Object.prototype.propertyIsEnumerable.call(e,i)&&(r[i]=e[i])}return r}var u=r.a.createContext({}),d=function(e){var n=r.a.useContext(u),i=n;return e&&(i="function"==typeof e?e(n):s(s({},n),e)),i},c=function(e){var n=d(e.components);return r.a.createElement(u.Provider,{value:n},e.children)},I={inlineCode:"code",wrapper:function(e){var n=e.children;return r.a.createElement(r.a.Fragment,{},n)}},R=r.a.forwardRef((function(e,n){var i=e.components,t=e.mdxType,a=e.originalType,o=e.parentName,u=f(e,["components","mdxType","originalType","parentName"]),c=d(i),R=t,E=c["".concat(o,".").concat(R)]||c[R]||I[R]||a;return i?r.a.createElement(E,s(s({ref:n},u),{},{components:i})):r.a.createElement(E,s({ref:n},u))}));function E(e,n){var i=arguments,t=n&&n.mdxType;if("string"==typeof e||t){var a=i.length,o=new Array(a);o[0]=R;var s={};for(var f in n)hasOwnProperty.call(n,f)&&(s[f]=n[f]);s.originalType=e,s.mdxType="string"==typeof e?e:t,o[1]=s;for(var u=2;u=0||(r[i]=e[i]);return r}(e,n);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(t=0;t=0||Object.prototype.propertyIsEnumerable.call(e,i)&&(r[i]=e[i])}return r}var u=r.a.createContext({}),d=function(e){var n=r.a.useContext(u),i=n;return e&&(i="function"==typeof e?e(n):s(s({},n),e)),i},c=function(e){var n=d(e.components);return r.a.createElement(u.Provider,{value:n},e.children)},I={inlineCode:"code",wrapper:function(e){var n=e.children;return r.a.createElement(r.a.Fragment,{},n)}},R=r.a.forwardRef((function(e,n){var i=e.components,t=e.mdxType,a=e.originalType,o=e.parentName,u=f(e,["components","mdxType","originalType","parentName"]),c=d(i),R=t,E=c["".concat(o,".").concat(R)]||c[R]||I[R]||a;return i?r.a.createElement(E,s(s({ref:n},u),{},{components:i})):r.a.createElement(E,s({ref:n},u))}));function E(e,n){var i=arguments,t=n&&n.mdxType;if("string"==typeof e||t){var a=i.length,o=new Array(a);o[0]=R;var s={};for(var f in n)hasOwnProperty.call(n,f)&&(s[f]=n[f]);s.originalType=e,s.mdxType="string"==typeof e?e:t,o[1]=s;for(var u=2;u=0||(r[n]=e[n]);return r}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(a=0;a=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(r[n]=e[n])}return r}var l=r.a.createContext({}),b=function(e){var t=r.a.useContext(l),n=t;return e&&(n="function"==typeof e?e(t):p(p({},t),e)),n},s=function(e){var t=b(e.components);return r.a.createElement(l.Provider,{value:t},e.children)},u={inlineCode:"code",wrapper:function(e){var t=e.children;return r.a.createElement(r.a.Fragment,{},t)}},m=r.a.forwardRef((function(e,t){var n=e.components,a=e.mdxType,i=e.originalType,o=e.parentName,l=c(e,["components","mdxType","originalType","parentName"]),s=b(n),m=a,d=s["".concat(o,".").concat(m)]||s[m]||u[m]||i;return n?r.a.createElement(d,p(p({ref:t},l),{},{components:n})):r.a.createElement(d,p({ref:t},l))}));function d(e,t){var n=arguments,a=t&&t.mdxType;if("string"==typeof e||a){var i=n.length,o=new Array(i);o[0]=m;var p={};for(var c in t)hasOwnProperty.call(t,c)&&(p[c]=t[c]);p.originalType=e,p.mdxType="string"==typeof e?e:a,o[1]=p;for(var l=2;l=0||(r[n]=e[n]);return r}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(a=0;a=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(r[n]=e[n])}return r}var p=r.a.createContext({}),s=function(e){var t=r.a.useContext(p),n=t;return e&&(n="function"==typeof e?e(t):c(c({},t),e)),n},b=function(e){var t=s(e.components);return r.a.createElement(p.Provider,{value:t},e.children)},u={inlineCode:"code",wrapper:function(e){var t=e.children;return r.a.createElement(r.a.Fragment,{},t)}},m=r.a.forwardRef((function(e,t){var n=e.components,a=e.mdxType,i=e.originalType,o=e.parentName,p=l(e,["components","mdxType","originalType","parentName"]),b=s(n),m=a,d=b["".concat(o,".").concat(m)]||b[m]||u[m]||i;return n?r.a.createElement(d,c(c({ref:t},p),{},{components:n})):r.a.createElement(d,c({ref:t},p))}));function d(e,t){var n=arguments,a=t&&t.mdxType;if("string"==typeof e||a){var i=n.length,o=new Array(i);o[0]=m;var c={};for(var l in t)hasOwnProperty.call(t,l)&&(c[l]=t[l]);c.originalType=e,c.mdxType="string"==typeof e?e:a,o[1]=c;for(var p=2;p\n{{#each dishes}}\n
    4. {{name}} costs {{price}}
      5. \n{{/each}}\n=0||(a[n]=e[n]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(a[n]=e[n])}return a}var l=a.a.createContext({}),s=function(e){var t=a.a.useContext(l),n=t;return e&&(n="function"==typeof e?e(t):c(c({},t),e)),n},d=function(e){var t=s(e.components);return a.a.createElement(l.Provider,{value:t},e.children)},m={inlineCode:"code",wrapper:function(e){var t=e.children;return a.a.createElement(a.a.Fragment,{},t)}},u=a.a.forwardRef((function(e,t){var n=e.components,r=e.mdxType,o=e.originalType,i=e.parentName,l=p(e,["components","mdxType","originalType","parentName"]),d=s(n),u=r,f=d["".concat(i,".").concat(u)]||d[u]||m[u]||o;return n?a.a.createElement(f,c(c({ref:t},l),{},{components:n})):a.a.createElement(f,c({ref:t},l))}));function f(e,t){var n=arguments,r=t&&t.mdxType;if("string"==typeof e||r){var o=n.length,i=new Array(o);i[0]=u;var c={};for(var p in t)hasOwnProperty.call(t,p)&&(c[p]=t[p]);c.originalType=e,c.mdxType="string"==typeof e?e:r,i[1]=c;for(var l=2;l\n{{#each dishes}}\n
    5. {{name}} costs {{price}}
      6. \n{{/each}}\n=0||(a[n]=e[n]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(a[n]=e[n])}return a}var l=a.a.createContext({}),s=function(e){var t=a.a.useContext(l),n=t;return e&&(n="function"==typeof e?e(t):c(c({},t),e)),n},d=function(e){var t=s(e.components);return a.a.createElement(l.Provider,{value:t},e.children)},m={inlineCode:"code",wrapper:function(e){var t=e.children;return a.a.createElement(a.a.Fragment,{},t)}},u=a.a.forwardRef((function(e,t){var n=e.components,r=e.mdxType,o=e.originalType,i=e.parentName,l=p(e,["components","mdxType","originalType","parentName"]),d=s(n),u=r,f=d["".concat(i,".").concat(u)]||d[u]||m[u]||o;return n?a.a.createElement(f,c(c({ref:t},l),{},{components:n})):a.a.createElement(f,c({ref:t},l))}));function f(e,t){var n=arguments,r=t&&t.mdxType;if("string"==typeof e||r){var o=n.length,i=new Array(o);i[0]=u;var c={};for(var p in t)hasOwnProperty.call(t,p)&&(c[p]=t[p]);c.originalType=e,c.mdxType="string"==typeof e?e:r,i[1]=c;for(var l=2;l=0||(r[a]=e[a]);return r}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,a)&&(r[a]=e[a])}return r}var c=r.a.createContext({}),u=function(e){var t=r.a.useContext(c),a=t;return e&&(a="function"==typeof e?e(t):s(s({},t),e)),a},b=function(e){var t=u(e.components);return r.a.createElement(c.Provider,{value:t},e.children)},p={inlineCode:"code",wrapper:function(e){var t=e.children;return r.a.createElement(r.a.Fragment,{},t)}},d=r.a.forwardRef((function(e,t){var a=e.components,n=e.mdxType,i=e.originalType,o=e.parentName,c=l(e,["components","mdxType","originalType","parentName"]),b=u(a),d=n,m=b["".concat(o,".").concat(d)]||b[d]||p[d]||i;return a?r.a.createElement(m,s(s({ref:t},c),{},{components:a})):r.a.createElement(m,s({ref:t},c))}));function m(e,t){var a=arguments,n=t&&t.mdxType;if("string"==typeof e||n){var i=a.length,o=new Array(i);o[0]=d;var s={};for(var l in t)hasOwnProperty.call(t,l)&&(s[l]=t[l]);s.originalType=e,s.mdxType="string"==typeof e?e:n,o[1]=s;for(var c=2;c=0||(r[a]=e[a]);return r}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,a)&&(r[a]=e[a])}return r}var l=r.a.createContext({}),p=function(e){var t=r.a.useContext(l),a=t;return e&&(a="function"==typeof e?e(t):s(s({},t),e)),a},u=function(e){var t=p(e.components);return r.a.createElement(l.Provider,{value:t},e.children)},b={inlineCode:"code",wrapper:function(e){var t=e.children;return r.a.createElement(r.a.Fragment,{},t)}},d=r.a.forwardRef((function(e,t){var a=e.components,n=e.mdxType,i=e.originalType,o=e.parentName,l=c(e,["components","mdxType","originalType","parentName"]),u=p(a),d=n,m=u["".concat(o,".").concat(d)]||u[d]||b[d]||i;return a?r.a.createElement(m,s(s({ref:t},l),{},{components:a})):r.a.createElement(m,s({ref:t},l))}));function m(e,t){var a=arguments,n=t&&t.mdxType;if("string"==typeof e||n){var i=a.length,o=new Array(i);o[0]=d;var s={};for(var c in t)hasOwnProperty.call(t,c)&&(s[c]=t[c]);s.originalType=e,s.mdxType="string"==typeof e?e:n,o[1]=s;for(var l=2;l=0||(o[r]=e[r]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(o[r]=e[r])}return o}var u=o.a.createContext({}),p=function(e){var t=o.a.useContext(u),r=t;return e&&(r="function"==typeof e?e(t):c(c({},t),e)),r},s=function(e){var t=p(e.components);return o.a.createElement(u.Provider,{value:t},e.children)},b={inlineCode:"code",wrapper:function(e){var t=e.children;return o.a.createElement(o.a.Fragment,{},t)}},f=o.a.forwardRef((function(e,t){var r=e.components,n=e.mdxType,a=e.originalType,l=e.parentName,u=i(e,["components","mdxType","originalType","parentName"]),s=p(r),f=n,m=s["".concat(l,".").concat(f)]||s[f]||b[f]||a;return r?o.a.createElement(m,c(c({ref:t},u),{},{components:r})):o.a.createElement(m,c({ref:t},u))}));function m(e,t){var r=arguments,n=t&&t.mdxType;if("string"==typeof e||n){var a=r.length,l=new Array(a);l[0]=f;var c={};for(var i in t)hasOwnProperty.call(t,i)&&(c[i]=t[i]);c.originalType=e,c.mdxType="string"==typeof e?e:n,l[1]=c;for(var u=2;u=0||(i[n]=e[n]);return i}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(i[n]=e[n])}return i}var u=i.a.createContext({}),p=function(e){var t=i.a.useContext(u),n=t;return e&&(n="function"==typeof e?e(t):o(o({},t),e)),n},c=function(e){var t=p(e.components);return i.a.createElement(u.Provider,{value:t},e.children)},d={inlineCode:"code",wrapper:function(e){var t=e.children;return i.a.createElement(i.a.Fragment,{},t)}},f=i.a.forwardRef((function(e,t){var n=e.components,r=e.mdxType,a=e.originalType,s=e.parentName,u=b(e,["components","mdxType","originalType","parentName"]),c=p(n),f=r,R=c["".concat(s,".").concat(f)]||c[f]||d[f]||a;return n?i.a.createElement(R,o(o({ref:t},u),{},{components:n})):i.a.createElement(R,o({ref:t},u))}));function R(e,t){var n=arguments,r=t&&t.mdxType;if("string"==typeof e||r){var a=n.length,s=new Array(a);s[0]=f;var o={};for(var b in t)hasOwnProperty.call(t,b)&&(o[b]=t[b]);o.originalType=e,o.mdxType="string"==typeof e?e:r,s[1]=o;for(var u=2;u=0||(i[n]=e[n]);return i}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(i[n]=e[n])}return i}var p=i.a.createContext({}),u=function(e){var t=i.a.useContext(p),n=t;return e&&(n="function"==typeof e?e(t):o(o({},t),e)),n},c=function(e){var t=u(e.components);return i.a.createElement(p.Provider,{value:t},e.children)},d={inlineCode:"code",wrapper:function(e){var t=e.children;return i.a.createElement(i.a.Fragment,{},t)}},f=i.a.forwardRef((function(e,t){var n=e.components,r=e.mdxType,a=e.originalType,s=e.parentName,p=b(e,["components","mdxType","originalType","parentName"]),c=u(n),f=r,R=c["".concat(s,".").concat(f)]||c[f]||d[f]||a;return n?i.a.createElement(R,o(o({ref:t},p),{},{components:n})):i.a.createElement(R,o({ref:t},p))}));function R(e,t){var n=arguments,r=t&&t.mdxType;if("string"==typeof e||r){var a=n.length,s=new Array(a);s[0]=f;var o={};for(var b in t)hasOwnProperty.call(t,b)&&(o[b]=t[b]);o.originalType=e,o.mdxType="string"==typeof e?e:r,s[1]=o;for(var p=2;p=0||(a[n]=e[n]);return a}(e,t);if(Object.getOwnPropertySymbols){var s=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(a[n]=e[n])}return a}var c=a.a.createContext({}),u=function(e){var t=a.a.useContext(c),n=t;return e&&(n="function"==typeof e?e(t):i(i({},t),e)),n},p=function(e){var t=u(e.components);return a.a.createElement(c.Provider,{value:t},e.children)},m={inlineCode:"code",wrapper:function(e){var t=e.children;return a.a.createElement(a.a.Fragment,{},t)}},f=a.a.forwardRef((function(e,t){var n=e.components,r=e.mdxType,s=e.originalType,o=e.parentName,c=l(e,["components","mdxType","originalType","parentName"]),p=u(n),f=r,b=p["".concat(o,".").concat(f)]||p[f]||m[f]||s;return n?a.a.createElement(b,i(i({ref:t},c),{},{components:n})):a.a.createElement(b,i({ref:t},c))}));function b(e,t){var n=arguments,r=t&&t.mdxType;if("string"==typeof e||r){var s=n.length,o=new Array(s);o[0]=f;var i={};for(var l in t)hasOwnProperty.call(t,l)&&(i[l]=t[l]);i.originalType=e,i.mdxType="string"==typeof e?e:r,o[1]=i;for(var c=2;c=0||(a[n]=e[n]);return a}(e,t);if(Object.getOwnPropertySymbols){var s=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(a[n]=e[n])}return a}var c=a.a.createContext({}),u=function(e){var t=a.a.useContext(c),n=t;return e&&(n="function"==typeof e?e(t):i(i({},t),e)),n},p=function(e){var t=u(e.components);return a.a.createElement(c.Provider,{value:t},e.children)},m={inlineCode:"code",wrapper:function(e){var t=e.children;return a.a.createElement(a.a.Fragment,{},t)}},f=a.a.forwardRef((function(e,t){var n=e.components,r=e.mdxType,s=e.originalType,o=e.parentName,c=l(e,["components","mdxType","originalType","parentName"]),p=u(n),f=r,b=p["".concat(o,".").concat(f)]||p[f]||m[f]||s;return n?a.a.createElement(b,i(i({ref:t},c),{},{components:n})):a.a.createElement(b,i({ref:t},c))}));function b(e,t){var n=arguments,r=t&&t.mdxType;if("string"==typeof e||r){var s=n.length,o=new Array(s);o[0]=f;var i={};for(var l in t)hasOwnProperty.call(t,l)&&(i[l]=t[l]);i.originalType=e,i.mdxType="string"==typeof e?e:r,o[1]=i;for(var c=2;c=0||(i[n]=e[n]);return i}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(i[n]=e[n])}return i}var p=i.a.createContext({}),s=function(e){var t=i.a.useContext(p),n=t;return e&&(n="function"==typeof e?e(t):c(c({},t),e)),n},u=function(e){var t=s(e.components);return i.a.createElement(p.Provider,{value:t},e.children)},b={inlineCode:"code",wrapper:function(e){var t=e.children;return i.a.createElement(i.a.Fragment,{},t)}},d=i.a.forwardRef((function(e,t){var n=e.components,r=e.mdxType,a=e.originalType,o=e.parentName,p=l(e,["components","mdxType","originalType","parentName"]),u=s(n),d=r,f=u["".concat(o,".").concat(d)]||u[d]||b[d]||a;return n?i.a.createElement(f,c(c({ref:t},p),{},{components:n})):i.a.createElement(f,c({ref:t},p))}));function f(e,t){var n=arguments,r=t&&t.mdxType;if("string"==typeof e||r){var a=n.length,o=new Array(a);o[0]=d;var c={};for(var l in t)hasOwnProperty.call(t,l)&&(c[l]=t[l]);c.originalType=e,c.mdxType="string"==typeof e?e:r,o[1]=c;for(var p=2;p=0||(i[n]=e[n]);return i}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(i[n]=e[n])}return i}var p=i.a.createContext({}),u=function(e){var t=i.a.useContext(p),n=t;return e&&(n="function"==typeof e?e(t):c(c({},t),e)),n},s=function(e){var t=u(e.components);return i.a.createElement(p.Provider,{value:t},e.children)},b={inlineCode:"code",wrapper:function(e){var t=e.children;return i.a.createElement(i.a.Fragment,{},t)}},d=i.a.forwardRef((function(e,t){var n=e.components,r=e.mdxType,a=e.originalType,o=e.parentName,p=l(e,["components","mdxType","originalType","parentName"]),s=u(n),d=r,f=s["".concat(o,".").concat(d)]||s[d]||b[d]||a;return n?i.a.createElement(f,c(c({ref:t},p),{},{components:n})):i.a.createElement(f,c({ref:t},p))}));function f(e,t){var n=arguments,r=t&&t.mdxType;if("string"==typeof e||r){var a=n.length,o=new Array(a);o[0]=d;var c={};for(var l in t)hasOwnProperty.call(t,l)&&(c[l]=t[l]);c.originalType=e,c.mdxType="string"==typeof e?e:r,o[1]=c;for(var p=2;p=0||(n[r]=A[r]);return n}(A,e);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(A);for(t=0;t=0||Object.prototype.propertyIsEnumerable.call(A,r)&&(n[r]=A[r])}return n}var p=n.a.createContext({}),d=function(A){var e=n.a.useContext(p),r=e;return A&&(r="function"==typeof A?A(e):m(m({},e),A)),r},i=function(A){var e=d(A.components);return n.a.createElement(p.Provider,{value:e},A.children)},u={inlineCode:"code",wrapper:function(A){var e=A.children;return n.a.createElement(n.a.Fragment,{},e)}},s=n.a.forwardRef((function(A,e){var r=A.components,t=A.mdxType,a=A.originalType,o=A.parentName,p=c(A,["components","mdxType","originalType","parentName"]),i=d(r),s=t,f=i["".concat(o,".").concat(s)]||i[s]||u[s]||a;return r?n.a.createElement(f,m(m({ref:e},p),{},{components:r})):n.a.createElement(f,m({ref:e},p))}));function f(A,e){var r=arguments,t=e&&e.mdxType;if("string"==typeof A||t){var a=r.length,o=new Array(a);o[0]=s;var m={};for(var c in e)hasOwnProperty.call(e,c)&&(m[c]=e[c]);m.originalType=A,m.mdxType="string"==typeof A?A:t,o[1]=m;for(var p=2;p=0||(n[r]=A[r]);return n}(A,e);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(A);for(t=0;t=0||Object.prototype.propertyIsEnumerable.call(A,r)&&(n[r]=A[r])}return n}var p=n.a.createContext({}),d=function(A){var e=n.a.useContext(p),r=e;return A&&(r="function"==typeof A?A(e):m(m({},e),A)),r},i=function(A){var e=d(A.components);return n.a.createElement(p.Provider,{value:e},A.children)},u={inlineCode:"code",wrapper:function(A){var e=A.children;return n.a.createElement(n.a.Fragment,{},e)}},s=n.a.forwardRef((function(A,e){var r=A.components,t=A.mdxType,a=A.originalType,o=A.parentName,p=c(A,["components","mdxType","originalType","parentName"]),i=d(r),s=t,f=i["".concat(o,".").concat(s)]||i[s]||u[s]||a;return r?n.a.createElement(f,m(m({ref:e},p),{},{components:r})):n.a.createElement(f,m({ref:e},p))}));function f(A,e){var r=arguments,t=e&&e.mdxType;if("string"==typeof A||t){var a=r.length,o=new Array(a);o[0]=s;var m={};for(var c in e)hasOwnProperty.call(e,c)&&(m[c]=e[c]);m.originalType=A,m.mdxType="string"==typeof A?A:t,o[1]=m;for(var p=2;p 0:\n form = q.page['example']\n form.items = items\n else:\n q.page['example'] = ui.form_card(box='1 1 12 10', items=items)\n\n await q.page.save()\n\n\nlisten('/demo', serve, mode='broadcast')\n")))}u.isMDXComponent=!0},290:function(e,t,n){"use strict";n.d(t,"a",(function(){return p})),n.d(t,"b",(function(){return m}));var r=n(0),a=n.n(r);function o(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function c(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function i(e){for(var t=1;t=0||(a[n]=e[n]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(a[n]=e[n])}return a}var s=a.a.createContext({}),u=function(e){var t=a.a.useContext(s),n=t;return e&&(n="function"==typeof e?e(t):i(i({},t),e)),n},p=function(e){var t=u(e.components);return a.a.createElement(s.Provider,{value:t},e.children)},b={inlineCode:"code",wrapper:function(e){var t=e.children;return a.a.createElement(a.a.Fragment,{},t)}},d=a.a.forwardRef((function(e,t){var n=e.components,r=e.mdxType,o=e.originalType,c=e.parentName,s=l(e,["components","mdxType","originalType","parentName"]),p=u(n),d=r,m=p["".concat(c,".").concat(d)]||p[d]||b[d]||o;return n?a.a.createElement(m,i(i({ref:t},s),{},{components:n})):a.a.createElement(m,i({ref:t},s))}));function m(e,t){var n=arguments,r=t&&t.mdxType;if("string"==typeof e||r){var o=n.length,c=new Array(o);c[0]=d;var i={};for(var l in t)hasOwnProperty.call(t,l)&&(i[l]=t[l]);i.originalType=e,i.mdxType="string"==typeof e?e:r,c[1]=i;for(var s=2;s 0:\n form = q.page['example']\n form.items = items\n else:\n q.page['example'] = ui.form_card(box='1 1 12 10', items=items)\n\n await q.page.save()\n")))}u.isMDXComponent=!0},292:function(e,t,n){"use strict";n.d(t,"a",(function(){return p})),n.d(t,"b",(function(){return m}));var r=n(0),a=n.n(r);function o(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function c(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function i(e){for(var t=1;t=0||(a[n]=e[n]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(a[n]=e[n])}return a}var s=a.a.createContext({}),u=function(e){var t=a.a.useContext(s),n=t;return e&&(n="function"==typeof e?e(t):i(i({},t),e)),n},p=function(e){var t=u(e.components);return a.a.createElement(s.Provider,{value:t},e.children)},b={inlineCode:"code",wrapper:function(e){var t=e.children;return a.a.createElement(a.a.Fragment,{},t)}},d=a.a.forwardRef((function(e,t){var n=e.components,r=e.mdxType,o=e.originalType,c=e.parentName,s=l(e,["components","mdxType","originalType","parentName"]),p=u(n),d=r,m=p["".concat(c,".").concat(d)]||p[d]||b[d]||o;return n?a.a.createElement(m,i(i({ref:t},s),{},{components:n})):a.a.createElement(m,i({ref:t},s))}));function m(e,t){var n=arguments,r=t&&t.mdxType;if("string"==typeof e||r){var o=n.length,c=new Array(o);c[0]=d;var i={};for(var l in t)hasOwnProperty.call(t,l)&&(i[l]=t[l]);i.originalType=e,i.mdxType="string"==typeof e?e:r,c[1]=i;for(var s=2;s=0||(a[n]=e[n]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(a[n]=e[n])}return a}var l=a.a.createContext({}),s=function(e){var t=a.a.useContext(l),n=t;return e&&(n="function"==typeof e?e(t):i(i({},t),e)),n},u=function(e){var t=s(e.components);return a.a.createElement(l.Provider,{value:t},e.children)},f={inlineCode:"code",wrapper:function(e){var t=e.children;return a.a.createElement(a.a.Fragment,{},t)}},m=a.a.forwardRef((function(e,t){var n=e.components,r=e.mdxType,o=e.originalType,p=e.parentName,l=c(e,["components","mdxType","originalType","parentName"]),u=s(n),m=r,d=u["".concat(p,".").concat(m)]||u[m]||f[m]||o;return n?a.a.createElement(d,i(i({ref:t},l),{},{components:n})):a.a.createElement(d,i({ref:t},l))}));function d(e,t){var n=arguments,r=t&&t.mdxType;if("string"==typeof e||r){var o=n.length,p=new Array(o);p[0]=m;var i={};for(var c in t)hasOwnProperty.call(t,c)&&(i[c]=t[c]);i.originalType=e,i.mdxType="string"==typeof e?e:r,p[1]=i;for(var l=2;l=0||(a[n]=e[n]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(a[n]=e[n])}return a}var l=a.a.createContext({}),s=function(e){var t=a.a.useContext(l),n=t;return e&&(n="function"==typeof e?e(t):i(i({},t),e)),n},u=function(e){var t=s(e.components);return a.a.createElement(l.Provider,{value:t},e.children)},f={inlineCode:"code",wrapper:function(e){var t=e.children;return a.a.createElement(a.a.Fragment,{},t)}},m=a.a.forwardRef((function(e,t){var n=e.components,r=e.mdxType,o=e.originalType,p=e.parentName,l=c(e,["components","mdxType","originalType","parentName"]),u=s(n),m=r,d=u["".concat(p,".").concat(m)]||u[m]||f[m]||o;return n?a.a.createElement(d,i(i({ref:t},l),{},{components:n})):a.a.createElement(d,i({ref:t},l))}));function d(e,t){var n=arguments,r=t&&t.mdxType;if("string"==typeof e||r){var o=n.length,p=new Array(o);p[0]=m;var i={};for(var c in t)hasOwnProperty.call(t,c)&&(i[c]=t[c]);i.originalType=e,i.mdxType="string"==typeof e?e:r,p[1]=i;for(var l=2;l -_start_q | H2O Wave - - - - - - - - - - - +_start_q | H2O Wave + + + + + + + + + + +
      -

      _start_q

      To start the Wave server, simply open a new terminal window and execute wave (or wave.exe on Windows).

      cd $HOME/wave
      ./wave
      2020/10/15 12:04:40 #
      2020/10/15 12:04:40 # ┌───────────────────┐
      2020/10/15 12:04:40 # │ ┬ ┬┌─┐┬ ┬┌─┐ │
      2020/10/15 12:04:40 # │ │││├─┤└┐┌┘├┤ │
      2020/10/15 12:04:40 # │ └┴┘┴ ┴ └┘ └─┘ │
      2020/10/15 12:04:40 # └───────────────────┘
      2020/10/15 12:04:40 #
      2020/10/15 12:04:40 # {"address":":55555","t":"listen","webroot":"/home/elp/wave/www"}

      The Wave server should now be running at http://localhost:55555.

      Don't close this terminal window!

      To run any Wave app, you need the Wave server up and running at all times. Your web browser communicates with the Wave server, and the Wave server in turn communicates with the Wave app.

      Edit this page
      - - - - - - - - - - - +

      _start_q

      To start the Wave server, simply open a new terminal window and execute waved (or waved.exe on Windows).

      cd $HOME/wave
      ./waved
      2020/10/27 16:16:34 #
      2020/10/27 16:16:34 # ┌─────────────────────────┐
      2020/10/27 16:16:34 # │ ┌ ┌ ┌──┐ ┌ ┌ ┌──┐ │ H2O Wave
      2020/10/27 16:16:34 # │ │ ┌──┘ │──│ │ │ └┐ │ (version) (build)
      2020/10/27 16:16:34 # │ └─┘ ┘ ┘ └──┘ └─┘ │ © 2020 H2O.ai, Inc.
      2020/10/27 16:16:34 # └─────────────────────────┘
      2020/10/27 16:16:34 #
      2020/10/27 16:16:34 # {"address":":55555","t":"listen","webroot":"/home/elp/wave/www"}

      The Wave server should now be running at http://localhost:55555.

      Don't close this terminal window!

      To run any Wave app, you need the Wave server up and running at all times. Your web browser communicates with the Wave server, and the Wave server in turn communicates with the Wave app.

      Edit this page
      + + + + + + + + + + + \ No newline at end of file diff --git a/docs/docs/api/autoreload/index.html b/docs/docs/api/autoreload/index.html index 5d450c381e..5296867ca4 100644 --- a/docs/docs/api/autoreload/index.html +++ b/docs/docs/api/autoreload/index.html @@ -5,29 +5,29 @@ Module h2o_wave.autoreload | H2O Wave - - - - - - - - - - + + + + + + + + + +
      -

      Module h2o_wave.autoreload

      Functions

      add_reload_hook

      def add_reload_hook(fn: Callable[[], NoneType]) ‑> NoneType

      Add a function to be called before reloading the process.

      Note that for open file and socket handles it is generally preferable to set the FD_CLOEXEC flag (using fcntl oros.set_inheritable) instead of using a reload hook to close them.

      main

      def main() ‑> NoneType

      Command-line wrapper to re-run a script whenever its source changes.

      Scripts may be specified by filename or module name::

      python -m h2o_wave -m h2o_wave.test.runtests python -m h2o_wave h2o_wave/test/runtests.py

      Running a script with this wrapper is similar to callingwait() at the end of the script, but this wrapper can catch import-time problems like syntax errors that would otherwise prevent the script from reaching its call to wait().

      rerun

      def rerun(code: Any, glob: Dict[str, Any], loc: Union[Mapping[str, Any], NoneType] = None) ‑> NoneType

      start

      def start(check_time: int = 500) ‑> NoneType

      Begins watching source files for changes.

      wait

      def wait() ‑> NoneType

      Wait for a watched file to change, then restart the process.

      Intended to be used at the end of scripts like unit test runners, to run the tests again after any source file changes (but see also the command-line interface in main())

      watch

      def watch(filename: str) ‑> NoneType

      Add a file to the watch list.

      All imported modules are watched by default.

      Edit this page
      - - - - - - - - - - +

      Module h2o_wave.autoreload

      Functions

      add_reload_hook

      def add_reload_hook(fn: Callable[[], NoneType]) ‑> NoneType

      Add a function to be called before reloading the process.

      Note that for open file and socket handles it is generally preferable to set the FD_CLOEXEC flag (using fcntl oros.set_inheritable) instead of using a reload hook to close them.

      main

      def main() ‑> NoneType

      Command-line wrapper to re-run a script whenever its source changes.

      Scripts may be specified by filename or module name::

      python -m h2o_wave -m h2o_wave.test.runtests python -m h2o_wave h2o_wave/test/runtests.py

      Running a script with this wrapper is similar to callingwait() at the end of the script, but this wrapper can catch import-time problems like syntax errors that would otherwise prevent the script from reaching its call to wait().

      rerun

      def rerun(code: Any, glob: Dict[str, Any], loc: Union[Mapping[str, Any], NoneType] = None) ‑> NoneType

      start

      def start(check_time: int = 500) ‑> NoneType

      Begins watching source files for changes.

      wait

      def wait() ‑> NoneType

      Wait for a watched file to change, then restart the process.

      Intended to be used at the end of scripts like unit test runners, to run the tests again after any source file changes (but see also the command-line interface in main())

      watch

      def watch(filename: str) ‑> NoneType

      Add a file to the watch list.

      All imported modules are watched by default.

      Edit this page
      + + + + + + + + + + \ No newline at end of file diff --git a/docs/docs/api/cli/index.html b/docs/docs/api/cli/index.html new file mode 100644 index 0000000000..09a7b7b97b --- /dev/null +++ b/docs/docs/api/cli/index.html @@ -0,0 +1,33 @@ + + + + + + +Module h2o_wave.cli | H2O Wave + + + + + + + + + + + + +
      +

      Module h2o_wave.cli

      Edit this page
      + + + + + + + + + + + + \ No newline at end of file diff --git a/docs/docs/api/core/index.html b/docs/docs/api/core/index.html index d3d45797f2..181f1779bd 100644 --- a/docs/docs/api/core/index.html +++ b/docs/docs/api/core/index.html @@ -5,29 +5,29 @@ Module h2o_wave.core | H2O Wave - - - - - - - - - - + + + + + + + + + +
      -

      Module h2o_wave.core

      Functions

      clone_expando

      def clone_expando(source: Expando, exclude_keys: Union[list, tuple, NoneType] = None, include_keys: Union[list, tuple, NoneType] = None) ‑> Expando

      Clone an expando instance. Creates a shallow clone.

      Args
      source
      The expando to clone.
      exclude_keys
      Keys to exclude while cloning.
      include_keys
      Keys to include while cloning.
      Returns

      The expando clone.

      configure

      def configure(internal_address: Union[str, NoneType] = None, external_address: Union[str, NoneType] = None, hub_address: Union[str, NoneType] = None, hub_access_key_id: Union[str, NoneType] = None, hub_access_key_secret: Union[str, NoneType] = None)

      Configure networking addresses/credentials before use.

      Args
      internal_address
      The local host:port to listen on.
      external_address
      The remote host:port of this server.
      hub_address
      The host:port of the Q server.
      hub_access_key_id
      The access key ID to use while connecting to the Q server.
      hub_access_key_secret
      The access key secret to use while connecting to the Q server.

      copy_expando

      def copy_expando(source: Expando, target: Expando, exclude_keys: Union[list, tuple, NoneType] = None, include_keys: Union[list, tuple, NoneType] = None) ‑> Expando

      Copy all entries from the source expando instance to the target expando instance.

      Args
      source
      The expando to copy from.
      target
      The expando to copy to.
      exclude_keys
      Keys to exclude while copying.
      include_keys
      Keys to include while copying.
      Returns

      The target expando.

      data

      def data(fields: Union[str, tuple, list], size: int = 0, rows: Union[dict, list, NoneType] = None, columns: Union[dict, list, NoneType] = None, pack=False) ‑> Union[Data, str]

      Create a Data instance for associating data with cards.

      data()(fields, size) creates a placeholder for data and allocates memory on the Q server.

      data()(fields, size, rows) creates a placeholder and initializes it with the provided rows.

      If pack() is True, the size parameter is ignored, and the function returns a packed string representing the data.

      Args
      fields
      The names of the fields (columns names) in the data, either a list or tuple or string containing space-separated names.
      size
      The number of rows to allocate memory for. Positive for fixed buffers, negative for circular buffers and zero for variable length buffers.
      rows
      The rows in this data.
      columns
      The columns in this data.
      pack
      True to return a packed string representing the data instead of a Data placeholder.
      Returns

      Either a Data placeholder or a packed string representing the data.

      expando_to_dict

      def expando_to_dict(e: Expando) ‑> dict

      Extract an expando's underlying dictionary. Any modifications to the dictionary also affect the original expando.

      Args
      e
      The expando instance.
      Returns

      The expando's dictionary.

      marshal

      def marshal(d: Any) ‑> str

      Marshal to JSON.

      Args
      d
      Any object or value.
      Returns

      A string containing the JSON-serialized form.

      pack

      def pack(data: Any) ‑> str

      Pack (compress) the provided value.

      Args
      data
      Any object or value.

      The object or value compressed into a string.

      unmarshal

      def unmarshal(s: str) ‑> Any

      Unmarshal a JSON string.

      Args
      s
      A string containing JSON-serialized data.
      Returns

      The deserialized object or value.

      Classes

      AsyncPage

      class AsyncPage(site: AsyncSite, url: str)

      Represents a reference to a remote Q page. Similar to Page except that this class exposes async methods.

      Args
      site
      The parent site.
      url
      The URL of this page.

      Methods

      load

      async def load(self) ‑> dict

      Retrieve the serialized form of this page from the remote site.

      Returns

      The serialized form of this page

      poll

      async def poll(self) ‑> Q

      EXPERIMENTAL. DO NOT USE.

      pull

      async def pull(self) ‑> Q

      EXPERIMENTAL. DO NOT USE.

      push

      async def push(self)

      DEPRECATED: Use AsyncPage.save() instead.

      save

      async def save(self)

      Save the page. Sends all local changes made to this page to the remote site.

      Ancestors

      Inherited members

      AsyncSite

      class AsyncSite(ws: websockets.server.WebSocketServerProtocol)

      Represents a reference to the remote Q site. Similar to Site except that this class exposes async methods.

      Methods

      download

      async def download(self, url: str, path: str) ‑> str

      Download a file from the site.

      Args
      url
      The URL of the file.
      path
      The local directory or file path to download to. If a directory is provided, the original name of the file is retained.
      Returns

      The path to the downloaded file.

      load

      async def load(self, url) ‑> dict

      Retrieve data at the given URL, typically the serialized form of a page.

      Args
      url
      The URL to read.
      Returns

      The serialized page.

      unload

      async def unload(self, url: str)

      Delete an uploaded file from the site.

      Args
      url
      The URL of the file to delete.

      upload

      async def upload(self, files: List[str]) ‑> List[str]

      Upload local files to the site.

      Args
      files
      A list of file paths of the files to be uploaded..
      Returns

      A list of remote URLs for the uploaded files, in order.

      Data

      class Data(fields: Union[str, tuple, list], size: int = 0, data: Union[dict, list, NoneType] = None)

      Represents a data placeholder. A data placeholder is used to allocate memory on the Q server to store data.

      Args
      fields
      The names of the fields (columns names) in the data, either a list or tuple or string containing space-separated names.
      size
      The number of rows to allocate memory for. Positive for fixed buffers, negative for circular buffers and zero for variable length buffers.
      data
      Initial data. Must be either a key-row dict for variable-length buffers OR a row list for fixed-size and circular buffers.

      Methods

      dump

      def dump(self)

      Expando

      class Expando(args: Union[Dict, NoneType] = None)

      Represents an object whose members (attributes) can be dynamically added and removed at run time.

      Args
      args
      An optional dict of attribute-value pairs to initialize the expando instance with.

      Page

      class Page(site: Site, url: str)

      Represents a reference to a remote Q page.

      Args
      site
      The parent site.
      url
      The URL of this page.

      Methods

      load

      def load(self) ‑> dict

      Retrieve the serialized form of this page from the remote site.

      Returns

      The serialized form of this page

      save

      def save(self)

      Save the page. Sends all local changes made to this page to the remote site.

      sync

      def sync(self)

      DEPRECATED: Use Page.save() instead.

      Ancestors

      Inherited members

      PageBase

      class PageBase(url: str)

      Represents a remote page.

      Args
      url
      The URL of the remote page.

      Methods

      add

      def add(self, key: str, card: Any) ‑> Ref

      Add a card to this page.

      Args
      key
      The card's key. Must uniquely identify the card on the page. Overwrites any other card with the same key.
      card
      A card. Use one of the ui.*_card() to create cards.
      Returns

      A reference to the added card.

      drop

      def drop(self)

      Delete this page from the remote site. Same as del site[url].

      Subclasses

      Ref

      class Ref(page: PageBase, key: str)

      Represents a local reference to an element on a Page. Any changes made to this local reference are tracked and sent to the remote Q server when the page is saved.

      ServiceError

      class ServiceError(*args, **kwargs)

      Common base class for all non-exit exceptions.

      Ancestors

      • builtins.Exception
      • builtins.BaseException

      Site

      class Site

      Represents a reference to the remote Q site. A Site instance is used to obtain references to the site's pages.

      Methods

      download

      def download(self, url: str, path: str) ‑> str

      Download a file from the site.

      Args
      url
      The URL of the file.
      path
      The local directory or file path to download to. If a directory is provided, the original name of the file is retained.
      Returns

      The path to the downloaded file.

      load

      def load(self, url) ‑> dict

      Retrieve data at the given URL, typically the serialized form of a page.

      Args
      url
      The URL to read.
      Returns

      The serialized page.

      unload

      def unload(self, url: str)

      Delete an uploaded file from the site.

      Args
      url
      The URL of the file to delete.

      upload

      def upload(self, files: List[str]) ‑> List[str]

      Upload local files to the site.

      Args
      files
      A list of file paths of the files to be uploaded..
      Returns

      A list of remote URLs for the uploaded files, in order.

      Edit this page
      - - - - - - - - - - +

      Module h2o_wave.core

      Functions

      clone_expando

      def clone_expando(source: Expando, exclude_keys: Union[list, tuple, NoneType] = None, include_keys: Union[list, tuple, NoneType] = None) ‑> Expando

      Clone an expando instance. Creates a shallow clone.

      Args
      source
      The expando to clone.
      exclude_keys
      Keys to exclude while cloning.
      include_keys
      Keys to include while cloning.
      Returns

      The expando clone.

      copy_expando

      def copy_expando(source: Expando, target: Expando, exclude_keys: Union[list, tuple, NoneType] = None, include_keys: Union[list, tuple, NoneType] = None) ‑> Expando

      Copy all entries from the source expando instance to the target expando instance.

      Args
      source
      The expando to copy from.
      target
      The expando to copy to.
      exclude_keys
      Keys to exclude while copying.
      include_keys
      Keys to include while copying.
      Returns

      The target expando.

      data

      def data(fields: Union[str, tuple, list], size: int = 0, rows: Union[dict, list, NoneType] = None, columns: Union[dict, list, NoneType] = None, pack=False) ‑> Union[Data, str]

      Create a Data instance for associating data with cards.

      data()(fields, size) creates a placeholder for data and allocates memory on the Wave server.

      data()(fields, size, rows) creates a placeholder and initializes it with the provided rows.

      If pack() is True, the size parameter is ignored, and the function returns a packed string representing the data.

      Args
      fields
      The names of the fields (columns names) in the data, either a list or tuple or string containing space-separated names.
      size
      The number of rows to allocate memory for. Positive for fixed buffers, negative for circular buffers and zero for variable length buffers.
      rows
      The rows in this data.
      columns
      The columns in this data.
      pack
      True to return a packed string representing the data instead of a Data placeholder.
      Returns

      Either a Data placeholder or a packed string representing the data.

      expando_to_dict

      def expando_to_dict(e: Expando) ‑> dict

      Extract an expando's underlying dictionary. Any modifications to the dictionary also affect the original expando.

      Args
      e
      The expando instance.
      Returns

      The expando's dictionary.

      marshal

      def marshal(d: Any) ‑> str

      Marshal to JSON.

      Args
      d
      Any object or value.
      Returns

      A string containing the JSON-serialized form.

      pack

      def pack(data: Any) ‑> str

      Pack (compress) the provided value.

      Args
      data
      Any object or value.

      The object or value compressed into a string.

      unmarshal

      def unmarshal(s: str) ‑> Any

      Unmarshal a JSON string.

      Args
      s
      A string containing JSON-serialized data.
      Returns

      The deserialized object or value.

      Classes

      AsyncPage

      class AsyncPage(site: AsyncSite, url: str)

      Represents a reference to a remote Wave page. Similar to Page except that this class exposes async methods.

      Args
      site
      The parent site.
      url
      The URL of this page.

      Methods

      load

      async def load(self) ‑> dict

      Retrieve the serialized form of this page from the remote site.

      Returns

      The serialized form of this page

      push

      async def push(self)

      DEPRECATED: Use AsyncPage.save() instead.

      save

      async def save(self)

      Save the page. Sends all local changes made to this page to the remote site.

      Ancestors

      Inherited members

      AsyncSite

      class AsyncSite

      Represents a reference to the remote Wave site. Similar to Site except that this class exposes async methods.

      Methods

      download

      async def download(self, url: str, path: str) ‑> str

      Download a file from the site.

      Args
      url
      The URL of the file.
      path
      The local directory or file path to download to. If a directory is provided, the original name of the file is retained.
      Returns

      The path to the downloaded file.

      load

      async def load(self, url) ‑> dict

      Retrieve data at the given URL, typically the serialized form of a page.

      Args
      url
      The URL to read.
      Returns

      The serialized page.

      unload

      async def unload(self, url: str)

      Delete an uploaded file from the site.

      Args
      url
      The URL of the file to delete.

      upload

      async def upload(self, files: List[str]) ‑> List[str]

      Upload local files to the site.

      Args
      files
      A list of file paths of the files to be uploaded..
      Returns

      A list of remote URLs for the uploaded files, in order.

      Data

      class Data(fields: Union[str, tuple, list], size: int = 0, data: Union[dict, list, NoneType] = None)

      Represents a data placeholder. A data placeholder is used to allocate memory on the Wave server to store data.

      Args
      fields
      The names of the fields (columns names) in the data, either a list or tuple or string containing space-separated names.
      size
      The number of rows to allocate memory for. Positive for fixed buffers, negative for circular buffers and zero for variable length buffers.
      data
      Initial data. Must be either a key-row dict for variable-length buffers OR a row list for fixed-size and circular buffers.

      Methods

      dump

      def dump(self)

      Expando

      class Expando(args: Union[Dict, NoneType] = None)

      Represents an object whose members (attributes) can be dynamically added and removed at run time.

      Args
      args
      An optional dict of attribute-value pairs to initialize the expando instance with.

      Page

      class Page(site: Site, url: str)

      Represents a reference to a remote Wave page.

      Args
      site
      The parent site.
      url
      The URL of this page.

      Methods

      load

      def load(self) ‑> dict

      Retrieve the serialized form of this page from the remote site.

      Returns

      The serialized form of this page

      save

      def save(self)

      Save the page. Sends all local changes made to this page to the remote site.

      sync

      def sync(self)

      DEPRECATED: Use Page.save() instead.

      Ancestors

      Inherited members

      PageBase

      class PageBase(url: str)

      Represents a remote page.

      Args
      url
      The URL of the remote page.

      Methods

      add

      def add(self, key: str, card: Any) ‑> Ref

      Add a card to this page.

      Args
      key
      The card's key. Must uniquely identify the card on the page. Overwrites any other card with the same key.
      card
      A card. Use one of the ui.*_card() to create cards.
      Returns

      A reference to the added card.

      drop

      def drop(self)

      Delete this page from the remote site. Same as del site[url].

      Subclasses

      Ref

      class Ref(page: PageBase, key: str)

      Represents a local reference to an element on a Page. Any changes made to this local reference are tracked and sent to the remote Wave server when the page is saved.

      ServiceError

      class ServiceError(*args, **kwargs)

      Common base class for all non-exit exceptions.

      Ancestors

      • builtins.Exception
      • builtins.BaseException

      Site

      class Site

      Represents a reference to the remote Wave site. A Site instance is used to obtain references to the site's pages.

      Methods

      download

      def download(self, url: str, path: str) ‑> str

      Download a file from the site.

      Args
      url
      The URL of the file.
      path
      The local directory or file path to download to. If a directory is provided, the original name of the file is retained.
      Returns

      The path to the downloaded file.

      load

      def load(self, url) ‑> dict

      Retrieve data at the given URL, typically the serialized form of a page.

      Args
      url
      The URL to read.
      Returns

      The serialized page.

      unload

      def unload(self, url: str)

      Delete an uploaded file from the site.

      Args
      url
      The URL of the file to delete.

      upload

      def upload(self, files: List[str]) ‑> List[str]

      Upload local files to the site.

      Args
      files
      A list of file paths of the files to be uploaded..
      Returns

      A list of remote URLs for the uploaded files, in order.

      Edit this page
      + + + + + + + + + + \ No newline at end of file diff --git a/docs/docs/api/db/index.html b/docs/docs/api/db/index.html index 27eff84c7e..c4d2c9d602 100644 --- a/docs/docs/api/db/index.html +++ b/docs/docs/api/db/index.html @@ -5,29 +5,29 @@ Module h2o_wave.db | H2O Wave - - - - - - - - - - + + + + + + + + + +
      -

      Module h2o_wave.db

      Classes

      TeleDB

      class TeleDB(address: str, key_id: str, key_secret: str)

      Represents a TeleDB database client.

      Create a new client instance.

      Args
      address
      database address
      key_id
      access key id
      key_secret
      access key secret

      TeleDBError

      class TeleDBError(*args, **kwargs)

      Represents a remote exception thrown by the TeleDB database server.

      Ancestors

      • builtins.Exception
      • builtins.BaseException
      Edit this page
      - - - - - - - - - - +

      Module h2o_wave.db

      Classes

      TeleDB

      class TeleDB(address: str, key_id: str, key_secret: str)

      Represents a TeleDB database client.

      Create a new client instance.

      Args
      address
      database address
      key_id
      access key id
      key_secret
      access key secret

      TeleDBError

      class TeleDBError(*args, **kwargs)

      Represents a remote exception thrown by the TeleDB database server.

      Ancestors

      • builtins.Exception
      • builtins.BaseException
      Edit this page
      + + + + + + + + + + \ No newline at end of file diff --git a/docs/docs/api/graphics/index.html b/docs/docs/api/graphics/index.html index 964e7ad1c1..9bdfe0b7ac 100644 --- a/docs/docs/api/graphics/index.html +++ b/docs/docs/api/graphics/index.html @@ -5,29 +5,29 @@ Module h2o_wave.graphics | H2O Wave - - - - - - - - - - + + + + + + + + + +
      -

      Module h2o_wave.graphics

      Functions

      arc

      def arc(r1: float, r2: float, a1: float, a2: float, **kwargs) ‑> Expando

      Draw circular or annular sector, as in a pie or donut chart, centered at (0, 0).

      Args
      r1
      inner radius.
      r2
      outer radius.
      a1
      start angle, in degrees.
      a2
      end angle, in degrees.
      kwargs
      Attributes to use for the initial render. SVG attributes, snake-cased.
      Returns

      Data for the graphical element.

      circle

      def circle(**kwargs) ‑> Expando

      Draw a circle. See https://developer.mozilla.org/en-US/docs/Web/SVG/Element/circle

      Args
      kwargs
      Attributes to use for the initial render. SVG attributes, snake-cased.
      Returns

      Data for the graphical element.

      draw

      def draw(element: Ref, **kwargs) ‑> Ref

      Schedule a redraw of the specified graphical element using the provided attributes.

      Args
      element
      A reference to a graphical element.
      kwargs
      Attributes to use while performing a redraw.
      Returns

      The element reference, without change.

      ellipse

      def ellipse(**kwargs) ‑> Expando

      Draw an ellipse. See https://developer.mozilla.org/en-US/docs/Web/SVG/Element/ellipse

      Args
      kwargs
      Attributes to use for the initial render. SVG attributes, snake-cased.
      Returns

      Data for the graphical element.

      image

      def image(**kwargs) ‑> Expando

      Draw an image. See https://developer.mozilla.org/en-US/docs/Web/SVG/Element/image

      Args
      kwargs
      Attributes to use for the initial render. SVG attributes, snake-cased.
      Returns

      Data for the graphical element.

      line

      def line(**kwargs) ‑> Expando

      Draw a line. See https://developer.mozilla.org/en-US/docs/Web/SVG/Element/line

      Args
      kwargs
      Attributes to use for the initial render. SVG attributes, snake-cased.
      Returns

      Data for the graphical element.

      p

      def p() ‑> Path

      Create a new Path.

      Returns

      A new Path.

      path

      def path(**kwargs) ‑> Expando

      Draw a path. See https://developer.mozilla.org/en-US/docs/Web/SVG/Element/path

      Args
      kwargs
      Attributes to use for the initial render. SVG attributes, snake-cased.
      Returns

      Data for the graphical element.

      polygon

      def polygon(**kwargs) ‑> Expando

      Draw a polygon. See https://developer.mozilla.org/en-US/docs/Web/SVG/Element/polygon

      Args
      kwargs
      Attributes to use for the initial render. SVG attributes, snake-cased.
      Returns

      Data for the graphical element.

      polyline

      def polyline(**kwargs) ‑> Expando

      Draw a polyline. See https://developer.mozilla.org/en-US/docs/Web/SVG/Element/polyline

      Args
      kwargs
      Attributes to use for the initial render. SVG attributes, snake-cased.
      Returns

      Data for the graphical element.

      rect

      def rect(**kwargs) ‑> Expando

      Draw a rectangle. See https://developer.mozilla.org/en-US/docs/Web/SVG/Element/rect

      Args
      kwargs
      Attributes to use for the initial render. SVG attributes, snake-cased.
      Returns

      Data for the graphical element.

      reset

      def reset(element: Ref) ‑> Ref

      Schedule a redraw of the specified graphical element using its original attributes. Calling this function clears any changes performed using the draw() function.

      Args
      element
      A reference to a graphical element.
      Returns

      The element reference, without change.

      scene

      def scene(**kwargs) ‑> Data

      Create a scene. A scene holds graphic elements whose attributes need to be changed dynamically (causing a re-render). The return value must be assigned to the scene() property of a GraphicsCard.

      Args
      kwargs
      Graphical elements to render as part of the scene.
      Returns

      A Data instance.

      spline

      def spline(x: Union[List[Union[float, NoneType]], NoneType] = None, y: Union[List[Union[float, NoneType]], NoneType] = None, x0: Union[List[Union[float, NoneType]], NoneType] = None, y0: Union[List[Union[float, NoneType]], NoneType] = None, curve: Union[str, NoneType] = None, radial: Union[bool, NoneType] = None, **kwargs) ‑> Expando

      Draw a spline.

      If x, y are specified, draws a regular spline.

      If x, y, y0 are specified, draws a horizontal area spline. Sets baseline to zero if y0 is an empty list.

      If x, x0, y are specified, draws a vertical area spline. Sets baseline to zero if x0 is an empty list

      Missing information is rendered as gaps in the spline.

      Args
      x
      x-coordinates.
      y
      y-coordinates.
      x0
      base x-coordinates.
      y0
      base y-coordinates.
      curve
      Interpolation. One of basis, basis-closed, basis-open, cardinal, cardinal-closed, cardinal-open, smooth, smooth-closed, smooth-open, linear, linear-closed, monotone-x, monotone-y, natural, step, step-after, step-before. Defaults to linear.
      radial
      Whether (x, y) should be treated as (angle,radius) or (x0, x, y0, y) should be treated as (start-angle, end-angle, inner-radius, outer-radius).
      kwargs
      Attributes to use for the initial render. SVG attributes, snake-cased.
      Returns

      Data for the graphical element.

      stage

      def stage(**kwargs) ‑> str

      Create a stage. A stage holds static graphics elements that are rendered as part of the background (behind the scene). The return value must be assigned to the stage() property of a GraphicsCard.

      Args
      kwargs
      Graphical elements to render as part of the stage.
      Returns

      Packed data.

      text

      def text(text: str, **kwargs) ‑> Expando

      Draw text. See https://developer.mozilla.org/en-US/docs/Web/SVG/Element/text

      Args
      text
      The text content.
      kwargs
      Attributes to use for the initial render. SVG attributes, snake-cased.
      Returns

      Data for the graphical element.

      turtle

      def turtle(x=0.0, y=0.0, degrees=0.0) ‑> Turtle

      Create a new Turtle.

      Args
      x
      initial position x
      y
      initial position y
      degrees
      initial angle in degrees
      Returns

      A new Turtle.

      type_of

      def type_of(element: Expando) ‑> Union[str, NoneType]

      Get the type of the graphical element.

      Args
      element
      A graphical element.
      Returns

      A string indicating the type of the element, e.g. 'circle', 'line', etc.

      Classes

      Path

      class Path

      A convenience class for drawing SVG paths.

      Methods

      A

      def A(self, rx: float, ry: float, x_axis_rotation: float, large_arc: bool, sweep: bool, x: float, y: float) ‑> Path

      Draws an elliptical arc from the current point to (x, y). The size and orientation of the ellipse are defined by two radii (rx, ry) and an x_axis_rotation, which indicates how the ellipse as a whole is rotated, in degrees, relative to the current coordinate system. The center (cx, cy) of the ellipse is calculated automatically to satisfy the constraints imposed by the other parameters. large_arc and sweep_flagcontribute to the automatic calculations and help determine how the arc is drawn. In absolute coordinates.

      See https://www.w3.org/TR/SVG/paths.html#PathDataEllipticalArcCommands

      Args
      rx
      x-radius
      ry
      y-radius
      x_axis_rotation
      Rotation in degrees.
      large_arc
      Determines if the arc should be greater than or less than 180 degrees.
      sweep
      Determines if the arc should begin moving at positive angles or negative ones.
      x
      x-coordinate
      y
      y-coordinate
      Returns

      The current Path instance.

      C

      def C(self, x1: float, y1: float, x2: float, y2: float, x: float, y: float) ‑> Path

      Draws a cubic Bézier curve from the current point to (x,y) using (x1,y1) as the control point at the beginning of the curve and (x2,y2) as the control point at the end of the curve. In absolute coordinates.

      See https://www.w3.org/TR/SVG/paths.html#PathDataCubicBezierCommands

      Args
      x1
      x-coordinate of first control point
      y1
      y-coordinate of first control point
      x2
      x-coordinate of second control point
      y2
      y-coordinate of second control point
      x
      x-coordinate
      y
      y-coordinate
      Returns

      The current Path instance.

      H

      def H(self, x: float) ‑> Path

      Draws a horizontal line from the current point. In absolute coordinates.

      See https://www.w3.org/TR/SVG/paths.html#PathDataLinetoCommands

      Args
      x
      x-coordinate
      Returns

      The current Path instance.

      L

      def L(self, x: float, y: float) ‑> Path

      Draw a line from the current point to the given (x,y) coordinate which becomes the new current point. In absolute coordinates.

      See https://www.w3.org/TR/SVG/paths.html#PathDataLinetoCommands

      Args
      x
      x-coordinate
      y
      y-coordinate
      Returns

      The current Path instance.

      M

      def M(self, x: float, y: float) ‑> Path

      Start a new sub-path at the given (x,y) coordinates. In absolute coordinates.

      See https://www.w3.org/TR/SVG/paths.html#PathDataMovetoCommands

      Args
      x
      x-coordinate
      y
      y-coordinate
      Returns

      The current Path instance.

      Q

      def Q(self, x1: float, y1: float, x: float, y: float) ‑> Path

      Draws a quadratic Bézier curve from the current point to (x,y) using (x1,y1) as the control point. In absolute coordinates.

      See https://www.w3.org/TR/SVG/paths.html#PathDataQuadraticBezierCommands

      Args
      x1
      x-coordinate of first control point
      y1
      y-coordinate of first control point
      x
      x-coordinate
      y
      y-coordinate
      Returns

      The current Path instance.

      S

      def S(self, x2: float, y2: float, x: float, y: float) ‑> Path

      Draws a cubic Bézier curve from the current point to (x,y). The first control point is assumed to be the reflection of the second control point on the previous command relative to the current point. (x2,y2) is the second control point (i.e., the control point at the end of the curve). In absolute coordinates.

      See https://www.w3.org/TR/SVG/paths.html#PathDataCubicBezierCommands

      Args
      x2
      x-coordinate of second control point
      y2
      y-coordinate of second control point
      x
      x-coordinate
      y
      y-coordinate
      Returns

      The current Path instance.

      T

      def T(self, x: float, y: float) ‑> Path

      Draws a quadratic Bézier curve from the current point to (x,y). The control point is assumed to be the reflection of the control point on the previous command relative to the current point. In absolute coordinates.

      See https://www.w3.org/TR/SVG/paths.html#PathDataQuadraticBezierCommands

      Args
      x
      x-coordinate
      y
      y-coordinate
      Returns

      The current Path instance.

      V

      def V(self, y: float) ‑> Path

      Draws a vertical line from the current point. In absolute coordinates.

      See https://www.w3.org/TR/SVG/paths.html#PathDataLinetoCommands

      Args
      y
      y-coordinate
      Returns

      The current Path instance.

      Z

      def Z(self) ‑> Path

      Close the current subpath by connecting it back to the current subpath's initial point.

      See https://www.w3.org/TR/SVG/paths.html#PathDataClosePathCommand

      Returns

      The current Path instance.

      a

      def a(self, rx: float, ry: float, x_axis_rotation: float, large_arc: bool, sweep: bool, x: float, y: float) ‑> Path

      Draws an elliptical arc from the current point to (x, y). The size and orientation of the ellipse are defined by two radii (rx, ry) and an x_axis_rotation, which indicates how the ellipse as a whole is rotated, in degrees, relative to the current coordinate system. The center (cx, cy) of the ellipse is calculated automatically to satisfy the constraints imposed by the other parameters. large_arc and sweep_flagcontribute to the automatic calculations and help determine how the arc is drawn. In relative coordinates.

      See https://www.w3.org/TR/SVG/paths.html#PathDataEllipticalArcCommands

      Args
      rx
      x-radius
      ry
      y-radius
      x_axis_rotation
      Rotation in degrees.
      large_arc
      Determines if the arc should be greater than or less than 180 degrees.
      sweep
      Determines if the arc should begin moving at positive angles or negative ones.
      x
      x-coordinate
      y
      y-coordinate
      Returns

      The current Path instance.

      c

      def c(self, x1: float, y1: float, x2: float, y2: float, x: float, y: float) ‑> Path

      Draws a cubic Bézier curve from the current point to (x,y) using (x1,y1) as the control point at the beginning of the curve and (x2,y2) as the control point at the end of the curve. In relative coordinates.

      See https://www.w3.org/TR/SVG/paths.html#PathDataCubicBezierCommands

      Args
      x1
      x-coordinate of first control point
      y1
      y-coordinate of first control point
      x2
      x-coordinate of second control point
      y2
      y-coordinate of second control point
      x
      x-coordinate
      y
      y-coordinate
      Returns

      The current Path instance.

      d

      def d(self) ‑> str

      Serialize this path's commands into SVG path data.

      Returns

      The d attribute for a SVG path.

      h

      def h(self, x: float) ‑> Path

      Draws a horizontal line from the current point. In relative coordinates.

      See https://www.w3.org/TR/SVG/paths.html#PathDataLinetoCommands

      Args
      x
      x-coordinate
      Returns

      The current Path instance.

      l

      def l(self, x: float, y: float) ‑> Path

      Draw a line from the current point to the given (x,y) coordinate which becomes the new current point. In relative coordinates.

      See https://www.w3.org/TR/SVG/paths.html#PathDataLinetoCommands

      Args
      x
      x-coordinate
      y
      y-coordinate
      Returns

      The current Path instance.

      m

      def m(self, x: float, y: float) ‑> Path

      Start a new sub-path at the given (x,y) coordinates. In relative coordinates.

      See https://www.w3.org/TR/SVG/paths.html#PathDataMovetoCommands

      Args
      x
      x-coordinate
      y
      y-coordinate
      Returns

      The current Path instance.

      path

      def path(self, **kwargs) ‑> Expando

      A SVG path element representing the commands in this Path instance. Same as calling h2o_wave.graphics.path(d=path.d())

      Args
      kwargs
      Additional attributes for the SVG path element.
      Returns

      A SVG path element.

      q

      def q(self, x1: float, y1: float, x: float, y: float) ‑> Path

      Draws a quadratic Bézier curve from the current point to (x,y) using (x1,y1) as the control point. In relative coordinates.

      See https://www.w3.org/TR/SVG/paths.html#PathDataQuadraticBezierCommands

      Args
      x1
      x-coordinate of first control point
      y1
      y-coordinate of first control point
      x
      x-coordinate
      y
      y-coordinate
      Returns

      The current Path instance.

      s

      def s(self, x2: float, y2: float, x: float, y: float) ‑> Path

      Draws a cubic Bézier curve from the current point to (x,y). The first control point is assumed to be the reflection of the second control point on the previous command relative to the current point. (x2,y2) is the second control point (i.e., the control point at the end of the curve). In relative coordinates.

      See https://www.w3.org/TR/SVG/paths.html#PathDataCubicBezierCommands

      Args
      x2
      x-coordinate of second control point
      y2
      y-coordinate of second control point
      x
      x-coordinate
      y
      y-coordinate
      Returns

      The current Path instance.

      t

      def t(self, x: float, y: float) ‑> Path

      Draws a quadratic Bézier curve from the current point to (x,y). The control point is assumed to be the reflection of the control point on the previous command relative to the current point. In relative coordinates.

      See https://www.w3.org/TR/SVG/paths.html#PathDataQuadraticBezierCommands

      Args
      x
      x-coordinate
      y
      y-coordinate
      Returns

      The current Path instance.

      v

      def v(self, y: float) ‑> Path

      Draws a vertical line from the current point. In relative coordinates.

      See https://www.w3.org/TR/SVG/paths.html#PathDataLinetoCommands

      Args
      y
      y-coordinate
      Returns

      The current Path instance.

      z

      def z(self) ‑> Path

      Close the current subpath by connecting it back to the current subpath's initial point.

      See https://www.w3.org/TR/SVG/paths.html#PathDataClosePathCommand

      Returns

      The current Path instance.

      Turtle

      class Turtle(x=0.0, y=0.0, degrees=0.0)

      A Logo-like Turtle implementation for generating SVG paths. This is not a complete Turtle implementation. Contains a useful subset relevant to generating paths without using trigonometry or mental gymnastics.

      Create a Turtle.

      Args
      x
      initial position x
      y
      initial position y
      degrees
      initial angle in degrees

      Methods

      a

      def a(self, degrees: float = 0) ‑> Turtle

      Set the turtle's orientation.

      Args
      degrees
      angle in degrees
      Returns

      The current turtle instance.

      b

      def b(self, distance: float) ‑> Turtle

      Move backward.

      Args
      distance
      Distance to move by.
      Returns

      The current turtle instance.

      d

      def d(self) ‑> str

      Serialize this turtle's movements into SVG path data.

      Returns

      The d attribute for a SVG path.

      f

      def f(self, distance: float) ‑> Turtle

      Move forward.

      Args
      distance
      Distance to move by.
      Returns

      The current turtle instance.

      l

      def l(self, degrees: float) ‑> Turtle

      Turn left.

      Args
      degrees
      Angle in degrees.
      Returns

      The current turtle instance.

      p

      def p(self, x: float = 0.0, y: float = 0.0) ‑> Turtle

      Set the turtle's position.

      Args
      x
      x-coordinate
      y
      y-coordinate
      Returns

      The current turtle instance.

      path

      def path(self, **kwargs) ‑> Expando

      Create a SVG path element that represents this turtle's movements.

      Args
      kwargs
      Additional attributes for the SVG path element.
      Returns

      A SVG path element.

      pd

      def pd(self) ‑> Turtle

      Pen down.

      Returns

      The current turtle instance.

      pu

      def pu(self, close: bool) ‑> Turtle

      Pen up.

      Args
      close
      Whether to close the current subpath.
      Returns

      The current turtle instance.

      r

      def r(self, degrees: float) ‑> Turtle

      Turn right.

      Args
      degrees
      Angle in degrees.
      Returns

      The current turtle instance.

      Edit this page
      - - - - - - - - - - +

      Module h2o_wave.graphics

      Functions

      arc

      def arc(r1: float, r2: float, a1: float, a2: float, **kwargs) ‑> Expando

      Draw circular or annular sector, as in a pie or donut chart, centered at (0, 0).

      Args
      r1
      inner radius.
      r2
      outer radius.
      a1
      start angle, in degrees.
      a2
      end angle, in degrees.
      kwargs
      Attributes to use for the initial render. SVG attributes, snake-cased.
      Returns

      Data for the graphical element.

      circle

      def circle(**kwargs) ‑> Expando

      Draw a circle. See https://developer.mozilla.org/en-US/docs/Web/SVG/Element/circle

      Args
      kwargs
      Attributes to use for the initial render. SVG attributes, snake-cased.
      Returns

      Data for the graphical element.

      draw

      def draw(element: Ref, **kwargs) ‑> Ref

      Schedule a redraw of the specified graphical element using the provided attributes.

      Args
      element
      A reference to a graphical element.
      kwargs
      Attributes to use while performing a redraw.
      Returns

      The element reference, without change.

      ellipse

      def ellipse(**kwargs) ‑> Expando

      Draw an ellipse. See https://developer.mozilla.org/en-US/docs/Web/SVG/Element/ellipse

      Args
      kwargs
      Attributes to use for the initial render. SVG attributes, snake-cased.
      Returns

      Data for the graphical element.

      image

      def image(**kwargs) ‑> Expando

      Draw an image. See https://developer.mozilla.org/en-US/docs/Web/SVG/Element/image

      Args
      kwargs
      Attributes to use for the initial render. SVG attributes, snake-cased.
      Returns

      Data for the graphical element.

      line

      def line(**kwargs) ‑> Expando

      Draw a line. See https://developer.mozilla.org/en-US/docs/Web/SVG/Element/line

      Args
      kwargs
      Attributes to use for the initial render. SVG attributes, snake-cased.
      Returns

      Data for the graphical element.

      p

      def p() ‑> Path

      Create a new Path.

      Returns

      A new Path.

      path

      def path(**kwargs) ‑> Expando

      Draw a path. See https://developer.mozilla.org/en-US/docs/Web/SVG/Element/path

      Args
      kwargs
      Attributes to use for the initial render. SVG attributes, snake-cased.
      Returns

      Data for the graphical element.

      polygon

      def polygon(**kwargs) ‑> Expando

      Draw a polygon. See https://developer.mozilla.org/en-US/docs/Web/SVG/Element/polygon

      Args
      kwargs
      Attributes to use for the initial render. SVG attributes, snake-cased.
      Returns

      Data for the graphical element.

      polyline

      def polyline(**kwargs) ‑> Expando

      Draw a polyline. See https://developer.mozilla.org/en-US/docs/Web/SVG/Element/polyline

      Args
      kwargs
      Attributes to use for the initial render. SVG attributes, snake-cased.
      Returns

      Data for the graphical element.

      rect

      def rect(**kwargs) ‑> Expando

      Draw a rectangle. See https://developer.mozilla.org/en-US/docs/Web/SVG/Element/rect

      Args
      kwargs
      Attributes to use for the initial render. SVG attributes, snake-cased.
      Returns

      Data for the graphical element.

      reset

      def reset(element: Ref) ‑> Ref

      Schedule a redraw of the specified graphical element using its original attributes. Calling this function clears any changes performed using the draw() function.

      Args
      element
      A reference to a graphical element.
      Returns

      The element reference, without change.

      scene

      def scene(**kwargs) ‑> Data

      Create a scene. A scene holds graphic elements whose attributes need to be changed dynamically (causing a re-render). The return value must be assigned to the scene() property of a GraphicsCard.

      Args
      kwargs
      Graphical elements to render as part of the scene.
      Returns

      A Data instance.

      spline

      def spline(x: Union[List[Union[float, NoneType]], NoneType] = None, y: Union[List[Union[float, NoneType]], NoneType] = None, x0: Union[List[Union[float, NoneType]], NoneType] = None, y0: Union[List[Union[float, NoneType]], NoneType] = None, curve: Union[str, NoneType] = None, radial: Union[bool, NoneType] = None, **kwargs) ‑> Expando

      Draw a spline.

      If x, y are specified, draws a regular spline.

      If x, y, y0 are specified, draws a horizontal area spline. Sets baseline to zero if y0 is an empty list.

      If x, x0, y are specified, draws a vertical area spline. Sets baseline to zero if x0 is an empty list

      Missing information is rendered as gaps in the spline.

      Args
      x
      x-coordinates.
      y
      y-coordinates.
      x0
      base x-coordinates.
      y0
      base y-coordinates.
      curve
      Interpolation. One of basis, basis-closed, basis-open, cardinal, cardinal-closed, cardinal-open, smooth, smooth-closed, smooth-open, linear, linear-closed, monotone-x, monotone-y, natural, step, step-after, step-before. Defaults to linear.
      radial
      Whether (x, y) should be treated as (angle,radius) or (x0, x, y0, y) should be treated as (start-angle, end-angle, inner-radius, outer-radius).
      kwargs
      Attributes to use for the initial render. SVG attributes, snake-cased.
      Returns

      Data for the graphical element.

      stage

      def stage(**kwargs) ‑> str

      Create a stage. A stage holds static graphics elements that are rendered as part of the background (behind the scene). The return value must be assigned to the stage() property of a GraphicsCard.

      Args
      kwargs
      Graphical elements to render as part of the stage.
      Returns

      Packed data.

      text

      def text(text: str, **kwargs) ‑> Expando

      Draw text. See https://developer.mozilla.org/en-US/docs/Web/SVG/Element/text

      Args
      text
      The text content.
      kwargs
      Attributes to use for the initial render. SVG attributes, snake-cased.
      Returns

      Data for the graphical element.

      turtle

      def turtle(x=0.0, y=0.0, degrees=0.0) ‑> Turtle

      Create a new Turtle.

      Args
      x
      initial position x
      y
      initial position y
      degrees
      initial angle in degrees
      Returns

      A new Turtle.

      type_of

      def type_of(element: Expando) ‑> Union[str, NoneType]

      Get the type of the graphical element.

      Args
      element
      A graphical element.
      Returns

      A string indicating the type of the element, e.g. 'circle', 'line', etc.

      Classes

      Path

      class Path

      A convenience class for drawing SVG paths.

      Methods

      A

      def A(self, rx: float, ry: float, x_axis_rotation: float, large_arc: bool, sweep: bool, x: float, y: float) ‑> Path

      Draws an elliptical arc from the current point to (x, y). The size and orientation of the ellipse are defined by two radii (rx, ry) and an x_axis_rotation, which indicates how the ellipse as a whole is rotated, in degrees, relative to the current coordinate system. The center (cx, cy) of the ellipse is calculated automatically to satisfy the constraints imposed by the other parameters. large_arc and sweep_flagcontribute to the automatic calculations and help determine how the arc is drawn. In absolute coordinates.

      See https://www.w3.org/TR/SVG/paths.html#PathDataEllipticalArcCommands

      Args
      rx
      x-radius
      ry
      y-radius
      x_axis_rotation
      Rotation in degrees.
      large_arc
      Determines if the arc should be greater than or less than 180 degrees.
      sweep
      Determines if the arc should begin moving at positive angles or negative ones.
      x
      x-coordinate
      y
      y-coordinate
      Returns

      The current Path instance.

      C

      def C(self, x1: float, y1: float, x2: float, y2: float, x: float, y: float) ‑> Path

      Draws a cubic Bézier curve from the current point to (x,y) using (x1,y1) as the control point at the beginning of the curve and (x2,y2) as the control point at the end of the curve. In absolute coordinates.

      See https://www.w3.org/TR/SVG/paths.html#PathDataCubicBezierCommands

      Args
      x1
      x-coordinate of first control point
      y1
      y-coordinate of first control point
      x2
      x-coordinate of second control point
      y2
      y-coordinate of second control point
      x
      x-coordinate
      y
      y-coordinate
      Returns

      The current Path instance.

      H

      def H(self, x: float) ‑> Path

      Draws a horizontal line from the current point. In absolute coordinates.

      See https://www.w3.org/TR/SVG/paths.html#PathDataLinetoCommands

      Args
      x
      x-coordinate
      Returns

      The current Path instance.

      L

      def L(self, x: float, y: float) ‑> Path

      Draw a line from the current point to the given (x,y) coordinate which becomes the new current point. In absolute coordinates.

      See https://www.w3.org/TR/SVG/paths.html#PathDataLinetoCommands

      Args
      x
      x-coordinate
      y
      y-coordinate
      Returns

      The current Path instance.

      M

      def M(self, x: float, y: float) ‑> Path

      Start a new sub-path at the given (x,y) coordinates. In absolute coordinates.

      See https://www.w3.org/TR/SVG/paths.html#PathDataMovetoCommands

      Args
      x
      x-coordinate
      y
      y-coordinate
      Returns

      The current Path instance.

      Q

      def Q(self, x1: float, y1: float, x: float, y: float) ‑> Path

      Draws a quadratic Bézier curve from the current point to (x,y) using (x1,y1) as the control point. In absolute coordinates.

      See https://www.w3.org/TR/SVG/paths.html#PathDataQuadraticBezierCommands

      Args
      x1
      x-coordinate of first control point
      y1
      y-coordinate of first control point
      x
      x-coordinate
      y
      y-coordinate
      Returns

      The current Path instance.

      S

      def S(self, x2: float, y2: float, x: float, y: float) ‑> Path

      Draws a cubic Bézier curve from the current point to (x,y). The first control point is assumed to be the reflection of the second control point on the previous command relative to the current point. (x2,y2) is the second control point (i.e., the control point at the end of the curve). In absolute coordinates.

      See https://www.w3.org/TR/SVG/paths.html#PathDataCubicBezierCommands

      Args
      x2
      x-coordinate of second control point
      y2
      y-coordinate of second control point
      x
      x-coordinate
      y
      y-coordinate
      Returns

      The current Path instance.

      T

      def T(self, x: float, y: float) ‑> Path

      Draws a quadratic Bézier curve from the current point to (x,y). The control point is assumed to be the reflection of the control point on the previous command relative to the current point. In absolute coordinates.

      See https://www.w3.org/TR/SVG/paths.html#PathDataQuadraticBezierCommands

      Args
      x
      x-coordinate
      y
      y-coordinate
      Returns

      The current Path instance.

      V

      def V(self, y: float) ‑> Path

      Draws a vertical line from the current point. In absolute coordinates.

      See https://www.w3.org/TR/SVG/paths.html#PathDataLinetoCommands

      Args
      y
      y-coordinate
      Returns

      The current Path instance.

      Z

      def Z(self) ‑> Path

      Close the current subpath by connecting it back to the current subpath's initial point.

      See https://www.w3.org/TR/SVG/paths.html#PathDataClosePathCommand

      Returns

      The current Path instance.

      a

      def a(self, rx: float, ry: float, x_axis_rotation: float, large_arc: bool, sweep: bool, x: float, y: float) ‑> Path

      Draws an elliptical arc from the current point to (x, y). The size and orientation of the ellipse are defined by two radii (rx, ry) and an x_axis_rotation, which indicates how the ellipse as a whole is rotated, in degrees, relative to the current coordinate system. The center (cx, cy) of the ellipse is calculated automatically to satisfy the constraints imposed by the other parameters. large_arc and sweep_flagcontribute to the automatic calculations and help determine how the arc is drawn. In relative coordinates.

      See https://www.w3.org/TR/SVG/paths.html#PathDataEllipticalArcCommands

      Args
      rx
      x-radius
      ry
      y-radius
      x_axis_rotation
      Rotation in degrees.
      large_arc
      Determines if the arc should be greater than or less than 180 degrees.
      sweep
      Determines if the arc should begin moving at positive angles or negative ones.
      x
      x-coordinate
      y
      y-coordinate
      Returns

      The current Path instance.

      c

      def c(self, x1: float, y1: float, x2: float, y2: float, x: float, y: float) ‑> Path

      Draws a cubic Bézier curve from the current point to (x,y) using (x1,y1) as the control point at the beginning of the curve and (x2,y2) as the control point at the end of the curve. In relative coordinates.

      See https://www.w3.org/TR/SVG/paths.html#PathDataCubicBezierCommands

      Args
      x1
      x-coordinate of first control point
      y1
      y-coordinate of first control point
      x2
      x-coordinate of second control point
      y2
      y-coordinate of second control point
      x
      x-coordinate
      y
      y-coordinate
      Returns

      The current Path instance.

      d

      def d(self) ‑> str

      Serialize this path's commands into SVG path data.

      Returns

      The d attribute for a SVG path.

      h

      def h(self, x: float) ‑> Path

      Draws a horizontal line from the current point. In relative coordinates.

      See https://www.w3.org/TR/SVG/paths.html#PathDataLinetoCommands

      Args
      x
      x-coordinate
      Returns

      The current Path instance.

      l

      def l(self, x: float, y: float) ‑> Path

      Draw a line from the current point to the given (x,y) coordinate which becomes the new current point. In relative coordinates.

      See https://www.w3.org/TR/SVG/paths.html#PathDataLinetoCommands

      Args
      x
      x-coordinate
      y
      y-coordinate
      Returns

      The current Path instance.

      m

      def m(self, x: float, y: float) ‑> Path

      Start a new sub-path at the given (x,y) coordinates. In relative coordinates.

      See https://www.w3.org/TR/SVG/paths.html#PathDataMovetoCommands

      Args
      x
      x-coordinate
      y
      y-coordinate
      Returns

      The current Path instance.

      path

      def path(self, **kwargs) ‑> Expando

      A SVG path element representing the commands in this Path instance. Same as calling h2o_wave.graphics.path(d=path.d())

      Args
      kwargs
      Additional attributes for the SVG path element.
      Returns

      A SVG path element.

      q

      def q(self, x1: float, y1: float, x: float, y: float) ‑> Path

      Draws a quadratic Bézier curve from the current point to (x,y) using (x1,y1) as the control point. In relative coordinates.

      See https://www.w3.org/TR/SVG/paths.html#PathDataQuadraticBezierCommands

      Args
      x1
      x-coordinate of first control point
      y1
      y-coordinate of first control point
      x
      x-coordinate
      y
      y-coordinate
      Returns

      The current Path instance.

      s

      def s(self, x2: float, y2: float, x: float, y: float) ‑> Path

      Draws a cubic Bézier curve from the current point to (x,y). The first control point is assumed to be the reflection of the second control point on the previous command relative to the current point. (x2,y2) is the second control point (i.e., the control point at the end of the curve). In relative coordinates.

      See https://www.w3.org/TR/SVG/paths.html#PathDataCubicBezierCommands

      Args
      x2
      x-coordinate of second control point
      y2
      y-coordinate of second control point
      x
      x-coordinate
      y
      y-coordinate
      Returns

      The current Path instance.

      t

      def t(self, x: float, y: float) ‑> Path

      Draws a quadratic Bézier curve from the current point to (x,y). The control point is assumed to be the reflection of the control point on the previous command relative to the current point. In relative coordinates.

      See https://www.w3.org/TR/SVG/paths.html#PathDataQuadraticBezierCommands

      Args
      x
      x-coordinate
      y
      y-coordinate
      Returns

      The current Path instance.

      v

      def v(self, y: float) ‑> Path

      Draws a vertical line from the current point. In relative coordinates.

      See https://www.w3.org/TR/SVG/paths.html#PathDataLinetoCommands

      Args
      y
      y-coordinate
      Returns

      The current Path instance.

      z

      def z(self) ‑> Path

      Close the current subpath by connecting it back to the current subpath's initial point.

      See https://www.w3.org/TR/SVG/paths.html#PathDataClosePathCommand

      Returns

      The current Path instance.

      Turtle

      class Turtle(x=0.0, y=0.0, degrees=0.0)

      A Logo-like Turtle implementation for generating SVG paths. This is not a complete Turtle implementation. Contains a useful subset relevant to generating paths without using trigonometry or mental gymnastics.

      Create a Turtle.

      Args
      x
      initial position x
      y
      initial position y
      degrees
      initial angle in degrees

      Methods

      a

      def a(self, degrees: float = 0) ‑> Turtle

      Set the turtle's orientation.

      Args
      degrees
      angle in degrees
      Returns

      The current turtle instance.

      b

      def b(self, distance: float) ‑> Turtle

      Move backward.

      Args
      distance
      Distance to move by.
      Returns

      The current turtle instance.

      d

      def d(self) ‑> str

      Serialize this turtle's movements into SVG path data.

      Returns

      The d attribute for a SVG path.

      f

      def f(self, distance: float) ‑> Turtle

      Move forward.

      Args
      distance
      Distance to move by.
      Returns

      The current turtle instance.

      l

      def l(self, degrees: float) ‑> Turtle

      Turn left.

      Args
      degrees
      Angle in degrees.
      Returns

      The current turtle instance.

      p

      def p(self, x: float = 0.0, y: float = 0.0) ‑> Turtle

      Set the turtle's position.

      Args
      x
      x-coordinate
      y
      y-coordinate
      Returns

      The current turtle instance.

      path

      def path(self, **kwargs) ‑> Expando

      Create a SVG path element that represents this turtle's movements.

      Args
      kwargs
      Additional attributes for the SVG path element.
      Returns

      A SVG path element.

      pd

      def pd(self) ‑> Turtle

      Pen down.

      Returns

      The current turtle instance.

      pu

      def pu(self, close: bool) ‑> Turtle

      Pen up.

      Args
      close
      Whether to close the current subpath.
      Returns

      The current turtle instance.

      r

      def r(self, degrees: float) ‑> Turtle

      Turn right.

      Args
      degrees
      Angle in degrees.
      Returns

      The current turtle instance.

      Edit this page
      + + + + + + + + + + \ No newline at end of file diff --git a/docs/docs/api/index/index.html b/docs/docs/api/index/index.html index 503828b6e2..e9f921554f 100644 --- a/docs/docs/api/index/index.html +++ b/docs/docs/api/index/index.html @@ -5,29 +5,29 @@ Package h2o_wave | H2O Wave - - - - - - - - - - + + + + + + + + + +
      -

      Package h2o_wave

      Python package h2o_wave provides the Python driver for H2O Wave.

      H2O Wave is a lightweight software stack for programming interactive web applications entirely in Python (no HTML/Javascript/CSS) required.

      It is designed to make it fast, fun and easy to build low-latency, realtime, collaborative, web-based applications. It ships batteries-included with a suite of form and data visualization components for rapidly prototyping analytical and decision-support applications.

      Wave's components work in conjunction with the Q relay server that facilitates realtime state synchronization between Python and web browsers.

      Sub-modules

      h2o_wave.autoreload
      h2o_wave.core
      h2o_wave.db
      h2o_wave.graphics
      h2o_wave.server
      h2o_wave.test
      h2o_wave.types
      h2o_wave.ui
      Edit this page
      - - - - - - - - - - +

      Package h2o_wave

      Python package h2o_wave provides the Python driver for H2O Wave.

      H2O Wave is a lightweight software stack for programming interactive web applications entirely in Python (no HTML/Javascript/CSS) required.

      It is designed to make it fast, fun and easy to build low-latency, realtime, collaborative, web-based applications. It ships batteries-included with a suite of form and data visualization components for rapidly prototyping analytical and decision-support applications.

      Wave's components work in conjunction with the Q relay server that facilitates realtime state synchronization between Python and web browsers.

      Sub-modules

      h2o_wave.cli
      h2o_wave.core
      h2o_wave.db
      h2o_wave.graphics
      h2o_wave.server
      h2o_wave.test
      h2o_wave.types
      h2o_wave.ui
      Edit this page
      + + + + + + + + + + \ No newline at end of file diff --git a/docs/docs/api/server/index.html b/docs/docs/api/server/index.html index c31baa976e..e0bd0bd306 100644 --- a/docs/docs/api/server/index.html +++ b/docs/docs/api/server/index.html @@ -5,29 +5,29 @@ Module h2o_wave.server | H2O Wave - - - - - - - - - - + + + + + + + + + +
      -

      Module h2o_wave.server

      Functions

      listen

      def listen(route: str, handle: Callable[[Query], Awaitable[Any]], mode='unicast')

      Launch an application server.

      Args
      route
      The route to listen to. e.g. '/foo' or '/foo/bar/baz'.
      handle
      The handler function.
      mode
      The server mode. One of 'unicast' (default),'multicast' or 'broadcast'.

      Classes

      Auth

      class Auth(username: str, subject: str)

      Represents authentication information for a given query context. Carries valid information only if single sign on is enabled.

      Instance variables

      var subject

      A unique identifier for the user.

      var username

      The username of the user.

      Query

      class Query(site: AsyncSite, mode: str, username: str, client_id: str, route: str, app_state: Expando, user_state: Expando, client_state: Expando, auth: Auth, args: Expando)

      Represents the query context. The query context is passed to the listen() handler function whenever a query arrives from the browser (page load, user interaction events, etc.). The query context contains useful information about the query, including argumentsargs (equivalent to URL query strings) and app-level, user-level and client-level state.

      Instance variables

      var app

      A Expando instance to hold application-specific state.

      var args

      A Expando instance containing the active request.

      var auth

      The username and subject ID of the authenticated user.

      var client

      An Expando instance to hold client-specific state.

      var mode

      The server mode. One of 'unicast' (default),'multicast' or 'broadcast'.

      var page

      A reference to the current page.

      var route

      The route served by the server.

      var site

      A reference to the current site.

      var user

      A Expando instance to hold user-specific state.

      var username

      The username of the user who initiated the active request.

      Methods

      sleep

      async def sleep(self, delay)

      Q

      class Q(site: AsyncSite, mode: str, username: str, client_id: str, route: str, app_state: Expando, user_state: Expando, client_state: Expando, auth: Auth, args: Expando)

      Represents the query context. The query context is passed to the listen() handler function whenever a query arrives from the browser (page load, user interaction events, etc.). The query context contains useful information about the query, including argumentsargs (equivalent to URL query strings) and app-level, user-level and client-level state.

      Instance variables

      var app

      A Expando instance to hold application-specific state.

      var args

      A Expando instance containing the active request.

      var auth

      The username and subject ID of the authenticated user.

      var client

      An Expando instance to hold client-specific state.

      var mode

      The server mode. One of 'unicast' (default),'multicast' or 'broadcast'.

      var page

      A reference to the current page.

      var route

      The route served by the server.

      var site

      A reference to the current site.

      var user

      A Expando instance to hold user-specific state.

      var username

      The username of the user who initiated the active request.

      Methods

      sleep

      async def sleep(self, delay)
      Edit this page
      - - - - - - - - - - +

      Module h2o_wave.server

      Functions

      app

      def app(route: str, mode='unicast')

      listen

      def listen(route: str, handle: Callable[[Query], Awaitable[Any]], mode='unicast')

      Launch an application server.

      Args
      route
      The route to listen to. e.g. '/foo' or '/foo/bar/baz'.
      handle
      The handler function.
      mode
      The server mode. One of 'unicast' (default),'multicast' or 'broadcast'.

      Classes

      Auth

      class Auth(username: str, subject: str)

      Represents authentication information for a given query context. Carries valid information only if single sign on is enabled.

      Instance variables

      var subject

      A unique identifier for the user.

      var username

      The username of the user.

      Query

      class Query(site: AsyncSite, mode: str, username: str, client_id: str, route: str, app_state: Expando, user_state: Expando, client_state: Expando, auth: Auth, args: Expando)

      Represents the query context. The query context is passed to the @app handler function whenever a query arrives from the browser (page load, user interaction events, etc.). The query context contains useful information about the query, including argumentsargs (equivalent to URL query strings) and app-level, user-level and client-level state.

      Instance variables

      var app

      A Expando instance to hold application-specific state.

      var args

      A Expando instance containing the active request.

      var auth

      The username and subject ID of the authenticated user.

      var client

      An Expando instance to hold client-specific state.

      var mode

      The server mode. One of 'unicast' (default),'multicast' or 'broadcast'.

      var page

      A reference to the current page.

      var route

      The route served by the server.

      var site

      A reference to the current site.

      var user

      A Expando instance to hold user-specific state.

      var username

      The username of the user who initiated the active request.

      Methods

      exec

      async def exec(self, executor: Union[concurrent.futures._base.Executor, NoneType], func: Callable, *args: Any, **kwargs: Any) ‑> Any

      Execute a function in the background using the specified executor.

      To execute a function in-process, use q.run().

      Args
      executor
      The executor to be used. If None, executes the function in-process.
      func
      The function to to be called.
      args
      Arguments to be passed to the function.
      kwargs
      Keywords arguments to be passed to the function.
      Returns

      The result of the function call.

      run

      async def run(self, func: Callable, *args: Any, **kwargs: Any) ‑> Any

      Execute a function in the background, in-process.

      Equivalent to calling q.exec() without an executor.

      Args
      func
      The function to to be called.
      args
      Arguments to be passed to the function.
      kwargs
      Keywords arguments to be passed to the function.
      Returns

      The result of the function call.

      sleep

      async def sleep(self, delay: float, result=None) ‑> Any

      Suspend execution for the specified number of seconds. Always use q.sleep() instead of time.sleep() in Wave apps.

      Args
      delay
      Number of seconds to sleep.
      result
      Result to return after delay, if any.
      Returns

      The result argument, if any, as is.

      Q

      class Q(site: AsyncSite, mode: str, username: str, client_id: str, route: str, app_state: Expando, user_state: Expando, client_state: Expando, auth: Auth, args: Expando)

      Represents the query context. The query context is passed to the @app handler function whenever a query arrives from the browser (page load, user interaction events, etc.). The query context contains useful information about the query, including argumentsargs (equivalent to URL query strings) and app-level, user-level and client-level state.

      Instance variables

      var app

      A Expando instance to hold application-specific state.

      var args

      A Expando instance containing the active request.

      var auth

      The username and subject ID of the authenticated user.

      var client

      An Expando instance to hold client-specific state.

      var mode

      The server mode. One of 'unicast' (default),'multicast' or 'broadcast'.

      var page

      A reference to the current page.

      var route

      The route served by the server.

      var site

      A reference to the current site.

      var user

      A Expando instance to hold user-specific state.

      var username

      The username of the user who initiated the active request.

      Methods

      exec

      async def exec(self, executor: Union[concurrent.futures._base.Executor, NoneType], func: Callable, *args: Any, **kwargs: Any) ‑> Any

      Execute a function in the background using the specified executor.

      To execute a function in-process, use q.run().

      Args
      executor
      The executor to be used. If None, executes the function in-process.
      func
      The function to to be called.
      args
      Arguments to be passed to the function.
      kwargs
      Keywords arguments to be passed to the function.
      Returns

      The result of the function call.

      run

      async def run(self, func: Callable, *args: Any, **kwargs: Any) ‑> Any

      Execute a function in the background, in-process.

      Equivalent to calling q.exec() without an executor.

      Args
      func
      The function to to be called.
      args
      Arguments to be passed to the function.
      kwargs
      Keywords arguments to be passed to the function.
      Returns

      The result of the function call.

      sleep

      async def sleep(self, delay: float, result=None) ‑> Any

      Suspend execution for the specified number of seconds. Always use q.sleep() instead of time.sleep() in Wave apps.

      Args
      delay
      Number of seconds to sleep.
      result
      Result to return after delay, if any.
      Returns

      The result argument, if any, as is.

      Edit this page
      + + + + + + + + + + \ No newline at end of file diff --git a/docs/docs/api/test/index.html b/docs/docs/api/test/index.html index 9052268fd4..45fce90890 100644 --- a/docs/docs/api/test/index.html +++ b/docs/docs/api/test/index.html @@ -5,29 +5,29 @@ Module h2o_wave.test | H2O Wave - - - - - - - - - - + + + + + + + + + +
      -

      Module h2o_wave.test

      Functions

      cypress

      def cypress(description: str)

      Classes

      Cypress

      class Cypress

      Represents a Cypress test translator.

      Methods

      run

      def run(self, f)

      Includes all steps from the given test into the current test.

      Args
      f
      A Python function containing Cypress test steps.
      Edit this page
      - - - - - - - - - - +

      Module h2o_wave.test

      Functions

      cypress

      def cypress(description: str)

      Classes

      Cypress

      class Cypress

      Represents a Cypress test translator.

      Methods

      run

      def run(self, f)

      Includes all steps from the given test into the current test.

      Args
      f
      A Python function containing Cypress test steps.
      Edit this page
      + + + + + + + + + + \ No newline at end of file diff --git a/docs/docs/api/types/index.html b/docs/docs/api/types/index.html index 49e96965c5..e3778cf06f 100644 --- a/docs/docs/api/types/index.html +++ b/docs/docs/api/types/index.html @@ -5,29 +5,29 @@ Module h2o_wave.types | H2O Wave - - - - - - - - - - + + + + + + + + + +
      -

      Module h2o_wave.types

      Classes

      Breadcrumb

      class Breadcrumb(name: str, label: str)

      Create a breadcrumb for a BreadcrumbsCard.

      Static methods

      load

      def load(_Breadcrumb__d: Dict) ‑> Breadcrumb

      Creates an instance of this class using the contents of a dict.

      Instance variables

      var label

      The label to display.

      var name

      The name of this item. Prefix the name with a '#' to trigger hash-change navigation.

      Methods

      dump

      def dump(self) ‑> Dict

      Returns the contents of this object as a dict.

      BreadcrumbsCard

      class BreadcrumbsCard(box: str, items: List[Breadcrumb], commands: Union[List[Command], NoneType] = None)

      Create a card containing breadcrumbs. Breadcrumbs should be used as a navigational aid in your app or site. They indicate the current page’s location within a hierarchy and help the user understand where they are in relation to the rest of that hierarchy. They also afford one-click access to higher levels of that hierarchy. Breadcrumbs are typically placed, in horizontal form, under the masthead or navigation of an experience, above the primary content area.

      Static methods

      load

      def load(_BreadcrumbsCard__d: Dict) ‑> BreadcrumbsCard

      Creates an instance of this class using the contents of a dict.

      Instance variables

      var box

      A string indicating how to place this component on the page.

      var commands

      Contextual menu commands for this component.

      var items

      A list of Breadcrumb instances to display. See breadcrumb()

      Methods

      dump

      def dump(self) ‑> Dict

      Returns the contents of this object as a dict.

      Button

      class Button(name: str, label: Union[str, NoneType] = None, caption: Union[str, NoneType] = None, value: Union[str, NoneType] = None, primary: Union[bool, NoneType] = None, disabled: Union[bool, NoneType] = None, link: Union[bool, NoneType] = None, visible: Union[bool, NoneType] = None, tooltip: Union[str, NoneType] = None)

      Create a button.

      Buttons are best used to enable a user to commit a change or complete steps in a task. They are typically found inside forms, dialogs, panels or pages. An example of their usage is confirming the deletion of a file in a confirmation dialog.

      When considering their place in a layout, contemplate the order in which a user will flow through the UI. As an example, in a form, the individual will need to read and interact with the form fields before submitting the form. Therefore, as a general rule, the button should be placed at the bottom of the UI container which holds the related UI elements.

      Buttons may be placed within a "buttons" component which will lay out the buttons horizontally, or used individually and they will be stacked vertically.

      While buttons can technically be used to navigate a user to another part of the experience, this is not recommended unless that navigation is part of an action or their flow.

      Static methods

      load

      def load(_Button__d: Dict) ‑> Button

      Creates an instance of this class using the contents of a dict.

      Instance variables

      var caption

      The caption displayed below the label. Setting a caption renders a compound button.

      var disabled

      True if the button should be disabled.

      var label

      The text displayed on the button.

      var link

      True if the button should be rendered as link text and not a standard button.

      var name

      An identifying name for this component. If the name is prefixed with a '#', the button sets the location hash to the name when clicked.

      var primary

      True if the button should be rendered as the primary button in the set.

      var tooltip

      An optional tooltip message displayed when a user clicks the help icon to the right of the component.

      var value

      A value for this button. If a value is set, it is used for the button's submitted instead of a boolean True.

      var visible

      True if the component should be visible. Defaults to true.

      Methods

      dump

      def dump(self) ‑> Dict

      Returns the contents of this object as a dict.

      Buttons

      class Buttons(items: List[ForwardRef('Component')], justify: Union[str, NoneType] = None, name: Union[str, NoneType] = None, visible: Union[bool, NoneType] = None)

      Create a set of buttons to be layed out horizontally.

      Static methods

      load

      def load(_Buttons__d: Dict) ‑> Buttons

      Creates an instance of this class using the contents of a dict.

      Instance variables

      var items

      The button in this set.

      var justify

      Specifies how to lay out buttons horizontally. One of 'start', 'end', 'center', 'between', 'around'.

      var name

      An identifying name for this component.

      var visible

      True if the component should be visible. Defaults to true.

      Methods

      dump

      def dump(self) ‑> Dict

      Returns the contents of this object as a dict.

      Checkbox

      class Checkbox(name: str, label: Union[str, NoneType] = None, value: Union[bool, NoneType] = None, indeterminate: Union[bool, NoneType] = None, disabled: Union[bool, NoneType] = None, trigger: Union[bool, NoneType] = None, visible: Union[bool, NoneType] = None, tooltip: Union[str, NoneType] = None)

      Create a checkbox.

      A checkbox allows users to switch between two mutually exclusive options (checked or unchecked, on or off) through a single click or tap. It can also be used to indicate a subordinate setting or preference when paired with another component.

      A checkbox is used to select or deselect action items. It can be used for a single item or for a list of multiple items that a user can choose from. The component has two selection states: unselected and selected.

      For a binary choice, the main difference between a checkbox and a toggle switch is that the checkbox is for status and the toggle switch is for action.

      Use multiple checkboxes for multi-select scenarios in which a user chooses one or more items from a group of choices that are not mutually exclusive.

      Static methods

      load

      def load(_Checkbox__d: Dict) ‑> Checkbox

      Creates an instance of this class using the contents of a dict.

      Instance variables

      var disabled

      True if the checkbox is disabled.

      var indeterminate

      True if the selection is indeterminate (neither selected nor unselected).

      var label

      Text to be displayed alongside the checkbox.

      var name

      An identifying name for this component.

      var tooltip

      An optional tooltip message displayed when a user clicks the help icon to the right of the component.

      var trigger

      True if the form should be submitted when the checkbox value changes.

      var value

      True if selected, False if unselected.

      var visible

      True if the component should be visible. Defaults to true.

      Methods

      dump

      def dump(self) ‑> Dict

      Returns the contents of this object as a dict.

      Checklist

      class Checklist(name: str, label: Union[str, NoneType] = None, values: Union[List[str], NoneType] = None, choices: Union[List[Choice], NoneType] = None, trigger: Union[bool, NoneType] = None, visible: Union[bool, NoneType] = None, tooltip: Union[str, NoneType] = None)

      Create a set of checkboxes. Use this for multi-select scenarios in which a user chooses one or more items from a group of choices that are not mutually exclusive.

      Static methods

      load

      def load(_Checklist__d: Dict) ‑> Checklist

      Creates an instance of this class using the contents of a dict.

      Instance variables

      var choices

      The choices to be presented.

      var label

      Text to be displayed above the component.

      var name

      An identifying name for this component.

      var tooltip

      An optional tooltip message displayed when a user clicks the help icon to the right of the component.

      var trigger

      True if the form should be submitted when the checklist value changes.

      var values

      The names of the selected choices.

      var visible

      True if the component should be visible. Defaults to true.

      Methods

      dump

      def dump(self) ‑> Dict

      Returns the contents of this object as a dict.

      Choice

      class Choice(name: str, label: Union[str, NoneType] = None, disabled: Union[bool, NoneType] = None)

      Create a choice for a checklist, choice group or dropdown.

      Static methods

      load

      def load(_Choice__d: Dict) ‑> Choice

      Creates an instance of this class using the contents of a dict.

      Instance variables

      var disabled

      True if the checkbox is disabled.

      var label

      Text to be displayed alongside the component.

      var name

      An identifying name for this component.

      Methods

      dump

      def dump(self) ‑> Dict

      Returns the contents of this object as a dict.

      ChoiceGroup

      class ChoiceGroup(name: str, label: Union[str, NoneType] = None, value: Union[str, NoneType] = None, choices: Union[List[Choice], NoneType] = None, required: Union[bool, NoneType] = None, trigger: Union[bool, NoneType] = None, visible: Union[bool, NoneType] = None, tooltip: Union[str, NoneType] = None)

      Create a choice group. The choice group component, also known as radio buttons, let users select one option from two or more choices. Each option is represented by one choice group button; a user can select only one choice group in a button group.

      Choice groups emphasize all options equally, and that may draw more attention to the options than necessary. Consider using other components, unless the options deserve extra attention from the user. For example, if the default option is recommended for most users in most situations, use a dropdown instead.

      If there are only two mutually exclusive options, combine them into a single Checkbox or Toggle switch. For example, use a checkbox for "I agree" instead of choice group buttons for "I agree" and "I don't agree."

      Static methods

      load

      def load(_ChoiceGroup__d: Dict) ‑> ChoiceGroup

      Creates an instance of this class using the contents of a dict.

      Instance variables

      var choices

      The choices to be presented.

      var label

      Text to be displayed alongside the component.

      var name

      An identifying name for this component.

      var required

      True if this field is required.

      var tooltip

      An optional tooltip message displayed when a user clicks the help icon to the right of the component.

      var trigger

      True if the form should be submitted when the selection changes.

      var value

      The name of the selected choice.

      var visible

      True if the component should be visible. Defaults to true.

      Methods

      dump

      def dump(self) ‑> Dict

      Returns the contents of this object as a dict.

      ColorPicker

      class ColorPicker(name: str, label: Union[str, NoneType] = None, value: Union[str, NoneType] = None, choices: Union[List[str], NoneType] = None, visible: Union[bool, NoneType] = None, tooltip: Union[str, NoneType] = None)

      Create a color picker.

      A date picker allows a user to pick a color value. If the 'choices' parameter is set, a swatch picker is displayed instead of the standard color picker.

      Static methods

      load

      def load(_ColorPicker__d: Dict) ‑> ColorPicker

      Creates an instance of this class using the contents of a dict.

      Instance variables

      var choices

      A list of colors (CSS-compatible strings) to limit color choices to.

      var label

      Text to be displayed alongside the component.

      var name

      An identifying name for this component.

      var tooltip

      An optional tooltip message displayed when a user clicks the help icon to the right of the component.

      var value

      The selected color (CSS-compatible string)

      var visible

      True if the component should be visible. Defaults to true.

      Methods

      dump

      def dump(self) ‑> Dict

      Returns the contents of this object as a dict.

      Combobox

      class Combobox(name: str, label: Union[str, NoneType] = None, placeholder: Union[str, NoneType] = None, value: Union[str, NoneType] = None, choices: Union[List[str], NoneType] = None, error: Union[str, NoneType] = None, disabled: Union[bool, NoneType] = None, visible: Union[bool, NoneType] = None, tooltip: Union[str, NoneType] = None)

      Create a combobox.

      A combobox is a list in which the selected item is always visible, and the others are visible on demand by clicking a drop-down button or by typing in the input. They are used to simplify the design and make a choice within the UI.

      When closed, only the selected item is visible. When users click the drop-down button, all the options become visible. To change the value, users open the list and click another value or use the arrow keys (up and down) to select a new value. When collapsed the user can select a new value by typing.

      Static methods

      load

      def load(_Combobox__d: Dict) ‑> Combobox

      Creates an instance of this class using the contents of a dict.

      Instance variables

      var choices

      The choices to be presented.

      var disabled

      True if this field is disabled.

      var error

      Text to be displayed as an error below the text box.

      var label

      Text to be displayed alongside the component.

      var name

      An identifying name for this component.

      var placeholder

      A string that provides a brief hint to the user as to what kind of information is expected in the field.

      var tooltip

      An optional tooltip message displayed when a user clicks the help icon to the right of the component.

      var value

      The name of the selected choice.

      var visible

      True if the component should be visible. Defaults to true.

      Methods

      dump

      def dump(self) ‑> Dict

      Returns the contents of this object as a dict.

      Command

      class Command(name: str, label: Union[str, NoneType] = None, caption: Union[str, NoneType] = None, icon: Union[str, NoneType] = None, items: Union[List[ForwardRef('Command')], NoneType] = None, data: Union[str, NoneType] = None)

      Create a command.

      Commands are typically displayed as context menu items or toolbar button.

      Static methods

      load

      def load(_Command__d: Dict) ‑> Command

      Creates an instance of this class using the contents of a dict.

      Instance variables

      var caption

      The caption for this command (typically a tooltip).

      var data

      Data associated with this command, if any.

      var icon

      The icon to be displayed for this command.

      var items

      Sub-commands, if any

      var label

      The text displayed for this command.

      var name

      An identifying name for this component. If the name is prefixed with a '#', the command sets the location hash to the name when executed.

      Methods

      dump

      def dump(self) ‑> Dict

      Returns the contents of this object as a dict.

      Component

      class Component(text: Union[Text, NoneType] = None, text_xl: Union[TextXl, NoneType] = None, text_l: Union[TextL, NoneType] = None, text_m: Union[TextM, NoneType] = None, text_s: Union[TextS, NoneType] = None, text_xs: Union[TextXs, NoneType] = None, label: Union[Label, NoneType] = None, separator: Union[Separator, NoneType] = None, progress: Union[Progress, NoneType] = None, message_bar: Union[MessageBar, NoneType] = None, textbox: Union[Textbox, NoneType] = None, checkbox: Union[Checkbox, NoneType] = None, toggle: Union[Toggle, NoneType] = None, choice_group: Union[ChoiceGroup, NoneType] = None, checklist: Union[Checklist, NoneType] = None, dropdown: Union[Dropdown, NoneType] = None, combobox: Union[Combobox, NoneType] = None, slider: Union[Slider, NoneType] = None, spinbox: Union[Spinbox, NoneType] = None, date_picker: Union[DatePicker, NoneType] = None, color_picker: Union[ColorPicker, NoneType] = None, button: Union[Button, NoneType] = None, buttons: Union[Buttons, NoneType] = None, file_upload: Union[FileUpload, NoneType] = None, table: Union[Table, NoneType] = None, link: Union[Link, NoneType] = None, tabs: Union[Tabs, NoneType] = None, expander: Union[Expander, NoneType] = None, frame: Union[Frame, NoneType] = None, markup: Union[Markup, NoneType] = None, template: Union[Template, NoneType] = None, picker: Union[Picker, NoneType] = None, range_slider: Union[RangeSlider, NoneType] = None, stepper: Union[Stepper, NoneType] = None, visualization: Union[Visualization, NoneType] = None, vega_visualization: Union[VegaVisualization, NoneType] = None)

      Create a component.

      Static methods

      load

      def load(_Component__d: Dict) ‑> Component

      Creates an instance of this class using the contents of a dict.

      Instance variables

      var button

      Button.

      var buttons

      Button set.

      var checkbox

      Checkbox.

      var checklist

      Checklist.

      var choice_group

      Choice group.

      var color_picker

      Color picker.

      var combobox

      Combobox.

      var date_picker

      Date picker.

      var dropdown

      Dropdown.

      var expander

      Expander.

      var file_upload

      File upload.

      var frame

      Frame.

      var label

      Label.

      var link

      Link.

      var markup

      Markup

      var message_bar

      Message bar.

      var picker

      Picker.

      var progress

      Progress bar.

      var range_slider

      Range Slider.

      var separator

      Separator.

      var slider

      Slider.

      var spinbox

      Spinbox.

      var stepper

      Stepper.

      var table

      Table.

      var tabs

      Tabs.

      var template

      Template

      var text

      Text block.

      var text_l

      Large sized text block.

      var text_m

      Medium sized text block.

      var text_s

      Small sized text block.

      var text_xl

      Extra-large sized text block.

      var text_xs

      Extra-small sized text block.

      var textbox

      Textbox.

      var toggle

      Toggle.

      var vega_visualization

      Vega-lite Visualization.

      var visualization

      Visualization.

      Methods

      dump

      def dump(self) ‑> Dict

      Returns the contents of this object as a dict.

      DatePicker

      class DatePicker(name: str, label: Union[str, NoneType] = None, placeholder: Union[str, NoneType] = None, value: Union[str, NoneType] = None, disabled: Union[bool, NoneType] = None, trigger: Union[bool, NoneType] = None, visible: Union[bool, NoneType] = None, tooltip: Union[str, NoneType] = None)

      Create a date picker.

      A date picker allows a user to pick a date value.

      Static methods

      load

      def load(_DatePicker__d: Dict) ‑> DatePicker

      Creates an instance of this class using the contents of a dict.

      Instance variables

      var disabled

      True if this field is disabled.

      var label

      Text to be displayed alongside the component.

      var name

      An identifying name for this component.

      var placeholder

      A string that provides a brief hint to the user as to what kind of information is expected in the field.

      var tooltip

      An optional tooltip message displayed when a user clicks the help icon to the right of the component.

      var trigger

      True if the form should be submitted when the datepicker value changes.

      var value

      The date value in YYYY-MM-DD format.

      var visible

      True if the component should be visible. Defaults to true.

      Methods

      dump

      def dump(self) ‑> Dict

      Returns the contents of this object as a dict.

      Dropdown

      class Dropdown(name: str, label: Union[str, NoneType] = None, placeholder: Union[str, NoneType] = None, value: Union[str, NoneType] = None, values: Union[List[str], NoneType] = None, choices: Union[List[Choice], NoneType] = None, required: Union[bool, NoneType] = None, disabled: Union[bool, NoneType] = None, trigger: Union[bool, NoneType] = None, visible: Union[bool, NoneType] = None, tooltip: Union[str, NoneType] = None)

      Create a dropdown.

      A dropdown is a list in which the selected item is always visible, and the others are visible on demand by clicking a drop-down button. They are used to simplify the design and make a choice within the UI. When closed, only the selected item is visible. When users click the drop-down button, all the options become visible.

      To change the value, users open the list and click another value or use the arrow keys (up and down) to select a new value.

      Note: Use either the 'value' parameter or the 'values' parameter. Setting the 'values' parameter renders a multi-select dropdown.

      Static methods

      load

      def load(_Dropdown__d: Dict) ‑> Dropdown

      Creates an instance of this class using the contents of a dict.

      Instance variables

      var choices

      The choices to be presented.

      var disabled

      True if this field is disabled.

      var label

      Text to be displayed alongside the component.

      var name

      An identifying name for this component.

      var placeholder

      A string that provides a brief hint to the user as to what kind of information is expected in the field.

      var required

      True if this is a required field.

      var tooltip

      An optional tooltip message displayed when a user clicks the help icon to the right of the component.

      var trigger

      True if the form should be submitted when the dropdown value changes.

      var value

      The name of the selected choice.

      var values

      The names of the selected choices. If this parameter is set, multiple selections will be allowed.

      var visible

      True if the component should be visible. Defaults to true.

      Methods

      dump

      def dump(self) ‑> Dict

      Returns the contents of this object as a dict.

      Expander

      class Expander(name: str, label: Union[str, NoneType] = None, expanded: Union[bool, NoneType] = None, items: Union[List[ForwardRef('Component')], NoneType] = None, visible: Union[bool, NoneType] = None)

      Creates a new expander.

      Expanders can be used to show or hide a group of related components.

      Static methods

      load

      def load(_Expander__d: Dict) ‑> Expander

      Creates an instance of this class using the contents of a dict.

      Instance variables

      var expanded

      True if expanded, False if collapsed.

      var items

      List of components to be hideable by the expander.

      var label

      The text displayed on the expander.

      var name

      An identifying name for this component.

      var visible

      True if the component should be visible. Defaults to true.

      Methods

      dump

      def dump(self) ‑> Dict

      Returns the contents of this object as a dict.

      FileUpload

      class FileUpload(name: str, label: Union[str, NoneType] = None, multiple: Union[bool, NoneType] = None, file_extensions: Union[List[str], NoneType] = None, max_file_size: Union[float, NoneType] = None, max_size: Union[float, NoneType] = None, height: Union[str, NoneType] = None, visible: Union[bool, NoneType] = None, tooltip: Union[str, NoneType] = None)

      Create a file upload component. A file upload component allows a user to browse, select and upload one or more files.

      Static methods

      load

      def load(_FileUpload__d: Dict) ‑> FileUpload

      Creates an instance of this class using the contents of a dict.

      Instance variables

      var file_extensions

      List of allowed file extensions, e.g. pdf, docx, etc.

      var height

      The height of the file upload, e.g. '400px', '50%', etc.

      var label

      Text to be displayed alongside the component.

      var max_file_size

      Maximum allowed size (Mb) per file. Defaults to no limit.

      var max_size

      Maximum allowed size (Mb) for all files combined. Defaults to no limit.

      var multiple

      True if the component should allow multiple files to be uploaded.

      var name

      An identifying name for this component.

      var tooltip

      An optional tooltip message displayed when a user clicks the help icon to the right of the component.

      var visible

      True if the component should be visible. Defaults to true.

      Methods

      dump

      def dump(self) ‑> Dict

      Returns the contents of this object as a dict.

      FlexCard

      class FlexCard(box: str, item_view: str, item_props: Union[dict, str], data: Union[Data, str], direction: Union[str, NoneType] = None, justify: Union[str, NoneType] = None, align: Union[str, NoneType] = None, wrap: Union[str, NoneType] = None, commands: Union[List[Command], NoneType] = None)

      EXPERIMENTAL. DO NOT USE. Create a card containing other cards laid out using a one-dimensional model with flexible alignemnt and wrapping capabilities.

      Static methods

      load

      def load(_FlexCard__d: Dict) ‑> FlexCard

      Creates an instance of this class using the contents of a dict.

      Instance variables

      var align

      Layout strategy for cross axis. One of 'start', 'end', 'center', 'baseline', 'stretch'.

      var box

      A string indicating how to place this component on the page.

      var commands

      Contextual menu commands for this component.

      var data

      Data for this card.

      var direction

      Layout direction. One of 'horizontal', 'vertical'.

      var item_props

      The child card properties.

      var item_view

      The child card type.

      var justify

      Layout strategy for main axis. One of 'start', 'end', 'center', 'between', 'around'.

      var wrap

      Wrapping strategy. One of 'start', 'end', 'center', 'between', 'around', 'stretch'.

      Methods

      dump

      def dump(self) ‑> Dict

      Returns the contents of this object as a dict.

      FormCard

      class FormCard(box: str, items: Union[List[Component], str], commands: Union[List[Command], NoneType] = None)

      Create a form.

      Static methods

      load

      def load(_FormCard__d: Dict) ‑> FormCard

      Creates an instance of this class using the contents of a dict.

      Instance variables

      var box

      A string indicating how to place this component on the page.

      var commands

      Contextual menu commands for this component.

      var items

      The components in this form.

      Methods

      dump

      def dump(self) ‑> Dict

      Returns the contents of this object as a dict.

      Frame

      class Frame(path: Union[str, NoneType] = None, content: Union[str, NoneType] = None, width: Union[str, NoneType] = None, height: Union[str, NoneType] = None, name: Union[str, NoneType] = None, visible: Union[bool, NoneType] = None)

      Create a new inline frame (an iframe).

      Static methods

      load

      def load(_Frame__d: Dict) ‑> Frame

      Creates an instance of this class using the contents of a dict.

      Instance variables

      var content

      The HTML content of the page. A string containing <html>...</html>.

      var height

      The height of the frame, e.g. 200px, 50%, etc. Defaults to 150px.

      var name

      An identifying name for this component.

      var path

      The path or URL of the web page, e.g. /foo.html or http://example.com/foo.html

      var visible

      True if the component should be visible. Defaults to true.

      var width

      The width of the frame, e.g. 200px, 50%, etc. Defaults to 100%.

      Methods

      dump

      def dump(self) ‑> Dict

      Returns the contents of this object as a dict.

      FrameCard

      class FrameCard(box: str, title: str, path: Union[str, NoneType] = None, content: Union[str, NoneType] = None, commands: Union[List[Command], NoneType] = None)

      Render a card containing a HTML page inside an inline frame (an iframe).

      Either a path or content can be provided as arguments.

      Static methods

      load

      def load(_FrameCard__d: Dict) ‑> FrameCard

      Creates an instance of this class using the contents of a dict.

      Instance variables

      var box

      A string indicating how to place this component on the page.

      var commands

      Contextual menu commands for this component.

      var content

      The HTML content of the page. A string containing <html>...</html>

      var path

      The path or URL of the web page, e.g. /foo.html or http://example.com/foo.html

      var title

      The title for this card.

      Methods

      dump

      def dump(self) ‑> Dict

      Returns the contents of this object as a dict.

      GraphicsCard

      class GraphicsCard(box: str, view_box: str, stage: Union[List[dict], str, NoneType] = None, scene: Union[Data, str, NoneType] = None, width: Union[str, NoneType] = None, height: Union[str, NoneType] = None, commands: Union[List[Command], NoneType] = None)

      Create a card for displaying vector graphics.

      Static methods

      load

      def load(_GraphicsCard__d: Dict) ‑> GraphicsCard

      Creates an instance of this class using the contents of a dict.

      Instance variables

      var box

      A string indicating how to place this component on the page.

      var commands

      Contextual menu commands for this component.

      var height

      The displayed height of the rectangular viewport. (Not the height of its coordinate system.)

      var scene

      Foreground layer for rendering dynamic SVG elements.

      var stage

      Background layer for rendering static SVG elements. Must be packed to conserve memory.

      var view_box

      The position and dimension of the SVG viewport, in user space. A space-separated list of four numbers: min-x, min-y, width and height. For example, '0 0 400 300'. See: https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/viewBox

      var width

      The displayed width of the rectangular viewport. (Not the width of its coordinate system.)

      Methods

      dump

      def dump(self) ‑> Dict

      Returns the contents of this object as a dict.

      GridCard

      class GridCard(box: str, title: str, cells: Union[Data, str], data: Union[Data, str], commands: Union[List[Command], NoneType] = None)

      EXPERIMENTAL. DO NOT USE.

      Static methods

      load

      def load(_GridCard__d: Dict) ‑> GridCard

      Creates an instance of this class using the contents of a dict.

      Instance variables

      var box

      A string indicating how to place this component on the page.

      var cells

      EXPERIMENTAL. DO NOT USE.

      var commands

      Contextual menu commands for this component.

      var data

      EXPERIMENTAL. DO NOT USE.

      var title

      EXPERIMENTAL. DO NOT USE.

      Methods

      dump

      def dump(self) ‑> Dict

      Returns the contents of this object as a dict.

      HeaderCard

      class HeaderCard(box: str, title: str, subtitle: str, icon: Union[str, NoneType] = None, icon_color: Union[str, NoneType] = None, commands: Union[List[Command], NoneType] = None)

      Render a card containing a HTML page inside an inline frame (iframe).

      Either a path or content can be provided as arguments.

      Static methods

      load

      def load(_HeaderCard__d: Dict) ‑> HeaderCard

      Creates an instance of this class using the contents of a dict.

      Instance variables

      var box

      A string indicating how to place this component on the page.

      var commands

      Contextual menu commands for this component.

      var icon

      The icon type, displayed to the left.

      var icon_color

      The icon's color.

      var subtitle

      The subtitle, displayed below the title.

      var title

      The title.

      Methods

      dump

      def dump(self) ‑> Dict

      Returns the contents of this object as a dict.

      IconTableCellType

      class IconTableCellType(color: Union[str, NoneType] = None, name: Union[str, NoneType] = None)

      Create a cell type that renders a column's cells as icons instead of plain text. If set on a column, the cell value is interpreted as the name of the icon to be displayed.

      Static methods

      load

      def load(_IconTableCellType__d: Dict) ‑> IconTableCellType

      Creates an instance of this class using the contents of a dict.

      Instance variables

      var color

      Icon color.

      var name

      An identifying name for this component.

      Methods

      dump

      def dump(self) ‑> Dict

      Returns the contents of this object as a dict.

      ImageCard

      class ImageCard(box: str, title: str, type: str, image: str, data: Union[dict, str, NoneType] = None, commands: Union[List[Command], NoneType] = None)

      Create a card that displays a base64-encoded image.

      Static methods

      load

      def load(_ImageCard__d: Dict) ‑> ImageCard

      Creates an instance of this class using the contents of a dict.

      Instance variables

      var box

      A string indicating how to place this component on the page.

      var commands

      Contextual menu commands for this component.

      var data

      Data for this card.

      var image

      Image data, base64-encoded.

      var title

      The card's title.

      var type

      The image MIME subtype. One of apng, bmp, gif, x-icon, jpeg, png, webp.

      Methods

      dump

      def dump(self) ‑> Dict

      Returns the contents of this object as a dict.

      Label

      class Label(label: str, required: Union[bool, NoneType] = None, disabled: Union[bool, NoneType] = None, visible: Union[bool, NoneType] = None, tooltip: Union[str, NoneType] = None, name: Union[str, NoneType] = None)

      Create a label.

      Labels give a name or title to a component or group of components. Labels should be in close proximity to the component or group they are paired with. Some components, such as textboxes, dropdowns, or toggles, already have labels incorporated, but other components may optionally add a Label if it helps inform the user of the component’s purpose.

      Static methods

      load

      def load(_Label__d: Dict) ‑> Label

      Creates an instance of this class using the contents of a dict.

      Instance variables

      var disabled

      True if the label should be disabled.

      var label

      The text displayed on the label.

      var name

      An identifying name for this component.

      var required

      True if the field is required.

      var tooltip

      An optional tooltip message displayed when a user clicks the help icon to the right of the component.

      var visible

      True if the component should be visible. Defaults to true.

      Methods

      dump

      def dump(self) ‑> Dict

      Returns the contents of this object as a dict.

      LargeBarStatCard

      class LargeBarStatCard(box: str, title: str, caption: str, value: str, aux_value: str, value_caption: str, aux_value_caption: str, progress: float, plot_color: Union[str, NoneType] = None, data: Union[dict, str, NoneType] = None, commands: Union[List[Command], NoneType] = None)

      Create a large captioned card displaying a primary value, an auxiliary value and a progress bar, with captions for each value.

      Static methods

      load

      def load(_LargeBarStatCard__d: Dict) ‑> LargeBarStatCard

      Creates an instance of this class using the contents of a dict.

      Instance variables

      var aux_value

      The auxiliary value, typically a target value.

      var aux_value_caption

      The caption displayed below the auxiliary value.

      var box

      A string indicating how to place this component on the page.

      var caption

      The card's caption.

      var commands

      Contextual menu commands for this component.

      var data

      Data for this card.

      var plot_color

      The color of the progress bar.

      var progress

      The value of the progress bar, between 0 and 1.

      var title

      The card's title.

      var value

      The primary value displayed.

      var value_caption

      The caption displayed below the primary value.

      Methods

      dump

      def dump(self) ‑> Dict

      Returns the contents of this object as a dict.

      LargeStatCard

      class LargeStatCard(box: str, title: str, value: str, aux_value: str, caption: str, data: Union[dict, str, NoneType] = None, commands: Union[List[Command], NoneType] = None)

      Create a stat card displaying a primary value, an auxiliary value and a caption.

      Static methods

      load

      def load(_LargeStatCard__d: Dict) ‑> LargeStatCard

      Creates an instance of this class using the contents of a dict.

      Instance variables

      var aux_value

      The auxiliary value displayed next to the primary value.

      var box

      A string indicating how to place this component on the page.

      var caption

      The caption displayed below the primary value.

      var commands

      Contextual menu commands for this component.

      var data

      Data for this card.

      var title

      The card's title.

      var value

      The primary value displayed.

      Methods

      dump

      def dump(self) ‑> Dict

      Returns the contents of this object as a dict.

      Link

      class Link(label: Union[str, NoneType] = None, path: Union[str, NoneType] = None, disabled: Union[bool, NoneType] = None, download: Union[bool, NoneType] = None, button: Union[bool, NoneType] = None, visible: Union[bool, NoneType] = None, tooltip: Union[str, NoneType] = None, name: Union[str, NoneType] = None)

      Create a hyperlink.

      Hyperlinks can be internal or external. Internal hyperlinks have paths that begin with a / and point to URLs within the Q UI. All other kinds of paths are treated as external hyperlinks.

      Static methods

      load

      def load(_Link__d: Dict) ‑> Link

      Creates an instance of this class using the contents of a dict.

      Instance variables

      var button

      True if the link should be rendered as a button.

      var disabled

      True if the link should be disabled.

      var download

      True if the link should be used for file download.

      var label

      The text to be displayed. If blank, the path is used as the label.

      var name

      An identifying name for this component.

      var path

      The path or URL to link to.

      var tooltip

      An optional tooltip message displayed when a user clicks the help icon to the right of the component.

      var visible

      True if the component should be visible. Defaults to true.

      Methods

      dump

      def dump(self) ‑> Dict

      Returns the contents of this object as a dict.

      ListCard

      class ListCard(box: str, title: str, item_view: str, item_props: Union[dict, str], data: Union[Data, str], commands: Union[List[Command], NoneType] = None)

      EXPERIMENTAL. DO NOT USE. Create a card containing other cards laid out in the form of a list (vertically, top-to-bottom).

      Static methods

      load

      def load(_ListCard__d: Dict) ‑> ListCard

      Creates an instance of this class using the contents of a dict.

      Instance variables

      var box

      A string indicating how to place this component on the page.

      var commands

      Contextual menu commands for this component.

      var data

      Data for this card.

      var item_props

      The child card properties.

      var item_view

      The child card type.

      var title

      The title for this card.

      Methods

      dump

      def dump(self) ‑> Dict

      Returns the contents of this object as a dict.

      ListItem1Card

      class ListItem1Card(box: str, title: str, caption: str, value: str, aux_value: str, data: Union[dict, str], commands: Union[List[Command], NoneType] = None)

      EXPERIMENTAL. DO NOT USE.

      Static methods

      load

      def load(_ListItem1Card__d: Dict) ‑> ListItem1Card

      Creates an instance of this class using the contents of a dict.

      Instance variables

      var aux_value

      EXPERIMENTAL. DO NOT USE.

      var box

      A string indicating how to place this component on the page.

      var caption

      EXPERIMENTAL. DO NOT USE.

      var commands

      Contextual menu commands for this component.

      var data

      EXPERIMENTAL. DO NOT USE.

      var title

      EXPERIMENTAL. DO NOT USE.

      var value

      EXPERIMENTAL. DO NOT USE.

      Methods

      dump

      def dump(self) ‑> Dict

      Returns the contents of this object as a dict.

      Mark

      class Mark(coord: Union[str, NoneType] = None, type: Union[str, NoneType] = None, x: Union[str, float, int, NoneType] = None, x0: Union[str, float, int, NoneType] = None, x1: Union[str, float, int, NoneType] = None, x2: Union[str, float, int, NoneType] = None, x_min: Union[float, NoneType] = None, x_max: Union[float, NoneType] = None, x_nice: Union[bool, NoneType] = None, x_scale: Union[str, NoneType] = None, x_title: Union[str, NoneType] = None, y: Union[str, float, int, NoneType] = None, y0: Union[str, float, int, NoneType] = None, y1: Union[str, float, int, NoneType] = None, y2: Union[str, float, int, NoneType] = None, y_min: Union[float, NoneType] = None, y_max: Union[float, NoneType] = None, y_nice: Union[bool, NoneType] = None, y_scale: Union[str, NoneType] = None, y_title: Union[str, NoneType] = None, color: Union[str, NoneType] = None, color_range: Union[str, NoneType] = None, color_domain: Union[List[str], NoneType] = None, shape: Union[str, NoneType] = None, shape_range: Union[str, NoneType] = None, size: Union[str, float, int, NoneType] = None, size_range: Union[str, NoneType] = None, stack: Union[str, NoneType] = None, dodge: Union[str, NoneType] = None, curve: Union[str, NoneType] = None, fill_color: Union[str, NoneType] = None, fill_opacity: Union[float, NoneType] = None, stroke_color: Union[str, NoneType] = None, stroke_opacity: Union[float, NoneType] = None, stroke_size: Union[float, NoneType] = None, stroke_dash: Union[str, NoneType] = None, label: Union[str, NoneType] = None, label_offset: Union[float, NoneType] = None, label_offset_x: Union[float, NoneType] = None, label_offset_y: Union[float, NoneType] = None, label_rotation: Union[str, NoneType] = None, label_position: Union[str, NoneType] = None, label_overlap: Union[str, NoneType] = None, label_fill_color: Union[str, NoneType] = None, label_fill_opacity: Union[float, NoneType] = None, label_stroke_color: Union[str, NoneType] = None, label_stroke_opacity: Union[float, NoneType] = None, label_stroke_size: Union[float, NoneType] = None, label_font_size: Union[float, NoneType] = None, label_font_weight: Union[str, NoneType] = None, label_line_height: Union[float, NoneType] = None, label_align: Union[str, NoneType] = None, ref_stroke_color: Union[str, NoneType] = None, ref_stroke_opacity: Union[float, NoneType] = None, ref_stroke_size: Union[float, NoneType] = None, ref_stroke_dash: Union[str, NoneType] = None)

      Create a specification for a layer of graphical marks such as bars, lines, points for a plot. A plot can contain multiple such layers of marks.

      Static methods

      load

      def load(_Mark__d: Dict) ‑> Mark

      Creates an instance of this class using the contents of a dict.

      Instance variables

      var color

      Mark color field or value.

      var color_domain

      The unique values in the data (labels or categories or classes) to map colors to, e.g. ['high', 'medium', 'low']. If this is not provided, the unique values are automatically inferred from the color attribute.

      var color_range

      Mark color range for multi-series plots. A string containing space-separated colors, e.g. '#fee8c8 #fdbb84 #e34a33'

      var coord

      Coordinate system. rect is synonymous to cartesian. theta is transposed polar. One of 'rect', 'cartesian', 'polar', 'theta', 'helix'.

      var curve

      Curve type for line and area mark types. One of 'none', 'smooth', 'step-before', 'step', 'step-after'.

      var dodge

      Field to dodge marks by, or 'auto' to infer.

      var fill_color

      Mark fill color.

      var fill_opacity

      Mark fill opacity.

      var label

      Label field or value.

      var label_align

      Label text alignment. One of 'left', 'right', 'center', 'start', 'end'.

      var label_fill_color

      Label fill color.

      var label_fill_opacity

      Label fill opacity.

      var label_font_size

      Label font size.

      var label_font_weight

      Label font weight.

      var label_line_height

      Label line height.

      var label_offset

      Distance between label and mark.

      var label_offset_x

      Horizontal distance between label and mark.

      var label_offset_y

      Vertical distance between label and mark.

      var label_overlap

      Strategy to use if labels overlap. One of 'hide', 'overlap', 'constrain'.

      var label_position

      Label position relative to the mark. One of 'top', 'bottom', 'middle', 'left', 'right'.

      var label_rotation

      Label rotation angle, in degrees, or 'none' to disable automatic rotation. The default behavior is 'auto' for automatic rotation.

      var label_stroke_color

      Label stroke color.

      var label_stroke_opacity

      Label stroke opacity.

      var label_stroke_size

      Label stroke size (line width or pen thickness).

      var ref_stroke_color

      Reference line stroke color.

      var ref_stroke_dash

      Reference line stroke dash style. A string containing space-separated integers that specify distances to alternately draw a line and a gap (in coordinate space units). If the number of elements in the array is odd, the elements of the array get copied and concatenated. For example, [5, 15, 25] will become [5, 15, 25, 5, 15, 25].

      var ref_stroke_opacity

      Reference line stroke opacity.

      var ref_stroke_size

      Reference line stroke size (line width or pen thickness).

      var shape

      Mark shape field or value for point mark types. Possible values are 'circle', 'square', 'bowtie', 'diamond', 'hexagon', 'triangle', 'triangle-down', 'cross', 'tick', 'plus', 'hyphen', 'line'.

      var shape_range

      Mark shape range for multi-series plots using point mark types. A string containing space-separated shapes, e.g. 'circle square diamond'

      var size

      Mark size field or value.

      var size_range

      Mark size range. A string containing space-separated integers, e.g. '4 30'

      var stack

      Field to stack marks by, or 'auto' to infer.

      var stroke_color

      Mark stroke color.

      var stroke_dash

      Mark stroke dash style. A string containing space-separated integers that specify distances to alternately draw a line and a gap (in coordinate space units). If the number of elements in the array is odd, the elements of the array get copied and concatenated. For example, [5, 15, 25] will become [5, 15, 25, 5, 15, 25].

      var stroke_opacity

      Mark stroke opacity.

      var stroke_size

      Mark stroke size.

      var type

      Graphical geometry. One of 'interval', 'line', 'path', 'point', 'area', 'polygon', 'schema', 'edge', 'heatmap'.

      var x

      X field or value.

      var x0

      X base field or value.

      var x1

      X bin lower bound field or value. For histograms.

      var x2

      X bin upper bound field or value. For histograms.

      var x_max

      X axis scale maximum.

      var x_min

      X axis scale minimum.

      var x_nice

      Whether to nice X axis scale ticks.

      var x_scale

      X axis scale type. One of 'linear', 'cat', 'category', 'identity', 'log', 'pow', 'time', 'timeCat', 'quantize', 'quantile'.

      var x_title

      X axis title.

      var y

      Y field or value.

      var y0

      Y base field or value.

      var y1

      Y bin lower bound field or value. For histograms.

      var y2

      Y bin upper bound field or value. For histograms.

      var y_max

      Y axis scale maximum.

      var y_min

      Y axis scale minimum.

      var y_nice

      Whether to nice Y axis scale ticks.

      var y_scale

      Y axis scale type. One of 'linear', 'cat', 'category', 'identity', 'log', 'pow', 'time', 'timeCat', 'quantize', 'quantile'.

      var y_title

      Y axis title.

      Methods

      dump

      def dump(self) ‑> Dict

      Returns the contents of this object as a dict.

      MarkdownCard

      class MarkdownCard(box: str, title: str, content: str, data: Union[dict, str, NoneType] = None, commands: Union[List[Command], NoneType] = None)

      Create a card that renders Markdown content.

      Github-flavored markdown is supported. HTML markup is allowed in markdown content. URLs, if found, are displayed as hyperlinks. Copyright, reserved, trademark, quotes, etc. are replaced with language-neutral symbols.

      Static methods

      load

      def load(_MarkdownCard__d: Dict) ‑> MarkdownCard

      Creates an instance of this class using the contents of a dict.

      Instance variables

      var box

      A string indicating how to place this component on the page.

      var commands

      Contextual menu commands for this component.

      var content

      The markdown content. Supports Github Flavored Markdown (GFM): https://guides.github.com/features/mastering-markdown/

      var data

      Additional data for the card.

      var title

      The title for this card.

      Methods

      dump

      def dump(self) ‑> Dict

      Returns the contents of this object as a dict.

      Markup

      class Markup(content: str, name: Union[str, NoneType] = None, visible: Union[bool, NoneType] = None)

      Render HTML content.

      Static methods

      load

      def load(_Markup__d: Dict) ‑> Markup

      Creates an instance of this class using the contents of a dict.

      Instance variables

      var content

      The HTML content.

      var name

      An identifying name for this component.

      var visible

      True if the component should be visible. Defaults to true.

      Methods

      dump

      def dump(self) ‑> Dict

      Returns the contents of this object as a dict.

      MarkupCard

      class MarkupCard(box: str, title: str, content: str, commands: Union[List[Command], NoneType] = None)

      Render HTML content.

      Static methods

      load

      def load(_MarkupCard__d: Dict) ‑> MarkupCard

      Creates an instance of this class using the contents of a dict.

      Instance variables

      var box

      A string indicating how to place this component on the page.

      var commands

      Contextual menu commands for this component.

      var content

      The HTML content.

      var title

      The title for this card.

      Methods

      dump

      def dump(self) ‑> Dict

      Returns the contents of this object as a dict.

      MessageBar

      class MessageBar(type: Union[str, NoneType] = None, text: Union[str, NoneType] = None, name: Union[str, NoneType] = None, visible: Union[bool, NoneType] = None)

      Create a message bar.

      A message bar is an area at the top of a primary view that displays relevant status information. You can use a message bar to tell the user about a situation that does not require their immediate attention and therefore does not need to block other activities.

      Static methods

      load

      def load(_MessageBar__d: Dict) ‑> MessageBar

      Creates an instance of this class using the contents of a dict.

      Instance variables

      var name

      An identifying name for this component.

      var text

      The text displayed on the message bar.

      var type

      The icon and color of the message bar. One of 'info', 'error', 'warning', 'success', 'danger', 'blocked'.

      var visible

      True if the component should be visible. Defaults to true.

      Methods

      dump

      def dump(self) ‑> Dict

      Returns the contents of this object as a dict.

      MetaCard

      class MetaCard(box: str, title: Union[str, NoneType] = None, refresh: Union[int, NoneType] = None, notification: Union[str, NoneType] = None, redirect: Union[str, NoneType] = None, commands: Union[List[Command], NoneType] = None)

      Represents page-global state.

      This card is invisible. It is used to control attributes of the active page.

      Static methods

      load

      def load(_MetaCard__d: Dict) ‑> MetaCard

      Creates an instance of this class using the contents of a dict.

      Instance variables

      var box

      A string indicating how to place this component on the page.

      var commands

      Contextual menu commands for this component.

      var notification

      Display a desktop notification to the user.

      var redirect

      Redirect the page to a new URL.

      var refresh

      Refresh rate in seconds. A value of 0 turns off live-updates. Values != 0 are currently ignored (reserved for future use).

      var title

      The title of the page.

      Methods

      dump

      def dump(self) ‑> Dict

      Returns the contents of this object as a dict.

      NavCard

      class NavCard(box: str, items: List[NavGroup], commands: Union[List[Command], NoneType] = None)

      Create a card containing a navigation pane.

      Static methods

      load

      def load(_NavCard__d: Dict) ‑> NavCard

      Creates an instance of this class using the contents of a dict.

      Instance variables

      var box

      A string indicating how to place this component on the page.

      var commands

      Contextual menu commands for this component.

      var items

      The navigation groups contained in this pane.

      Methods

      dump

      def dump(self) ‑> Dict

      Returns the contents of this object as a dict.

      NavGroup

      class NavGroup(label: str, items: List[NavItem])

      Create a group of navigation items.

      Static methods

      load

      def load(_NavGroup__d: Dict) ‑> NavGroup

      Creates an instance of this class using the contents of a dict.

      Instance variables

      var items

      The navigation items contained in this group.

      var label

      The label to display for this group.

      Methods

      dump

      def dump(self) ‑> Dict

      Returns the contents of this object as a dict.

      NavItem

      class NavItem(name: str, label: str)

      Create a navigation item.

      Static methods

      load

      def load(_NavItem__d: Dict) ‑> NavItem

      Creates an instance of this class using the contents of a dict.

      Instance variables

      var label

      The label to display.

      var name

      The name of this item. Prefix the name with a '#' to trigger hash-change navigation.

      Methods

      dump

      def dump(self) ‑> Dict

      Returns the contents of this object as a dict.

      Picker

      class Picker(name: str, choices: List[Choice], label: Union[str, NoneType] = None, values: Union[List[str], NoneType] = None, max_choices: Union[int, NoneType] = None, disabled: Union[bool, NoneType] = None, visible: Union[bool, NoneType] = None, tooltip: Union[str, NoneType] = None)

      Create a picker. Pickers are used to select one or more choices, such as tags or files, from a list. Use a picker to allow the user to quickly search for or manage a few tags or files.

      Static methods

      load

      def load(_Picker__d: Dict) ‑> Picker

      Creates an instance of this class using the contents of a dict.

      Instance variables

      var choices

      The choices to be presented.

      var disabled

      Controls whether the picker should be disabled or not.

      var label

      Text to be displayed above the component.

      var max_choices

      Maximum number of selectable choices. Defaults to no limit.

      var name

      An identifying name for this component.

      var tooltip

      An optional tooltip message displayed when a user clicks the help icon to the right of the component.

      var values

      The names of the selected choices.

      var visible

      True if the component should be visible. Defaults to true.

      Methods

      dump

      def dump(self) ‑> Dict

      Returns the contents of this object as a dict.

      PixelArtCard

      class PixelArtCard(box: str, title: str, data: Union[dict, str], commands: Union[List[Command], NoneType] = None)

      Create a card displaying a collaborative Pixel art tool, just for kicks.

      Static methods

      load

      def load(_PixelArtCard__d: Dict) ‑> PixelArtCard

      Creates an instance of this class using the contents of a dict.

      Instance variables

      var box

      A string indicating how to place this component on the page.

      var commands

      Contextual menu commands for this component.

      var data

      The data for this card.

      var title

      The title for this card.

      Methods

      dump

      def dump(self) ‑> Dict

      Returns the contents of this object as a dict.

      Plot

      class Plot(marks: List[Mark])

      Create a plot. A plot is composed of one or more graphical mark layers.

      Static methods

      load

      def load(_Plot__d: Dict) ‑> Plot

      Creates an instance of this class using the contents of a dict.

      Instance variables

      var marks

      The graphical mark layers contained in this plot.

      Methods

      dump

      def dump(self) ‑> Dict

      Returns the contents of this object as a dict.

      PlotCard

      class PlotCard(box: str, title: str, data: Union[dict, str], plot: Plot, commands: Union[List[Command], NoneType] = None)

      Create a card displaying a plot.

      Static methods

      load

      def load(_PlotCard__d: Dict) ‑> PlotCard

      Creates an instance of this class using the contents of a dict.

      Instance variables

      var box

      A string indicating how to place this component on the page.

      var commands

      Contextual menu commands for this component.

      var data

      Data for this card.

      var plot

      The plot to be displayed in this card.

      var title

      The title for this card.

      Methods

      dump

      def dump(self) ‑> Dict

      Returns the contents of this object as a dict.

      Progress

      class Progress(label: str, caption: Union[str, NoneType] = None, value: Union[float, NoneType] = None, visible: Union[bool, NoneType] = None, tooltip: Union[str, NoneType] = None, name: Union[str, NoneType] = None)

      Create a progress bar.

      Progress bars are used to show the completion status of an operation lasting more than 2 seconds. If the state of progress cannot be determined, do not set a value. Progress bars feature a bar showing total units to completion, and total units finished. The label appears above the bar, and the caption appears below. The label should tell someone exactly what the operation is doing.

      Examples of formatting include: [Object] is being [operation name], or [Object] is being [operation name] to [destination name] or [Object] is being [operation name] from [source name] to [destination name]

      Status text is generally in units elapsed and total units. Real-world examples include copying files to a storage location, saving edits to a file, and more. Use units that are informative and relevant to give the best idea to users of how long the operation will take to complete. Avoid time units as they are rarely accurate enough to be trustworthy. Also, combine steps of a complex operation into one total bar to avoid “rewinding” the bar. Instead change the label to reflect the change if necessary. Bars moving backwards reduce confidence in the service.

      Static methods

      load

      def load(_Progress__d: Dict) ‑> Progress

      Creates an instance of this class using the contents of a dict.

      Instance variables

      var caption

      The text displayed below the bar.

      var label

      The text displayed above the bar.

      var name

      An identifying name for this component.

      var tooltip

      An optional tooltip message displayed when a user clicks the help icon to the right of the component.

      var value

      The progress, between 0.0 and 1.0, or -1 (default) if indeterminate.

      var visible

      True if the component should be visible. Defaults to true.

      Methods

      dump

      def dump(self) ‑> Dict

      Returns the contents of this object as a dict.

      ProgressTableCellType

      class ProgressTableCellType(color: Union[str, NoneType] = None, name: Union[str, NoneType] = None)

      Create a cell type that renders a column's cells as progress bars instead of plain text. If set on a column, the cell value must be between 0.0 and 1.0.

      Static methods

      load

      def load(_ProgressTableCellType__d: Dict) ‑> ProgressTableCellType

      Creates an instance of this class using the contents of a dict.

      Instance variables

      var color

      Color of the progress arc.

      var name

      An identifying name for this component.

      Methods

      dump

      def dump(self) ‑> Dict

      Returns the contents of this object as a dict.

      RangeSlider

      class RangeSlider(name: str, label: Union[str, NoneType] = None, min: Union[float, NoneType] = None, max: Union[float, NoneType] = None, step: Union[float, NoneType] = None, min_value: Union[float, NoneType] = None, max_value: Union[float, NoneType] = None, disabled: Union[bool, NoneType] = None, trigger: Union[bool, NoneType] = None, visible: Union[bool, NoneType] = None, tooltip: Union[str, NoneType] = None)

      Create a range slider.

      A range slider is an element used to select a value range. It provides a visual indication of adjustable content, as well as the current setting in the total range of content. It is displayed as a horizontal track with options on either side. Knobs or levers are dragged to one end or the other to make the choice, indicating the current max and min value.

      Static methods

      load

      def load(_RangeSlider__d: Dict) ‑> RangeSlider

      Creates an instance of this class using the contents of a dict.

      Instance variables

      var disabled

      True if this field is disabled.

      var label

      Text to be displayed alongside the component.

      var max

      The maximum value of the slider. Defaults to 100.

      var max_value

      The upper bound of the selected range.

      var min

      The minimum value of the slider. Defaults to 0.

      var min_value

      The lower bound of the selected range.

      var name

      An identifying name for this component.

      var step

      The difference between two adjacent values of the slider.

      var tooltip

      An optional tooltip message displayed when a user clicks the help icon to the right of the component.

      var trigger

      True if the form should be submitted when the slider value changes.

      var visible

      True if the component should be visible. Defaults to true.

      Methods

      dump

      def dump(self) ‑> Dict

      Returns the contents of this object as a dict.

      RepeatCard

      class RepeatCard(box: str, item_view: str, item_props: Union[dict, str], data: Union[Data, str], commands: Union[List[Command], NoneType] = None)

      EXPERIMENTAL. DO NOT USE. Create a card containing other cards.

      Static methods

      load

      def load(_RepeatCard__d: Dict) ‑> RepeatCard

      Creates an instance of this class using the contents of a dict.

      Instance variables

      var box

      A string indicating how to place this component on the page.

      var commands

      Contextual menu commands for this component.

      var data

      Data for this card.

      var item_props

      The child card properties.

      var item_view

      EXPERIMENTAL. DO NOT USE.

      Methods

      dump

      def dump(self) ‑> Dict

      Returns the contents of this object as a dict.

      Separator

      class Separator(label: Union[str, NoneType] = None, name: Union[str, NoneType] = None, visible: Union[bool, NoneType] = None)

      Create a separator.

      A separator visually separates content into groups.

      Static methods

      load

      def load(_Separator__d: Dict) ‑> Separator

      Creates an instance of this class using the contents of a dict.

      Instance variables

      var label

      The text displayed on the separator.

      var name

      An identifying name for this component.

      var visible

      True if the component should be visible. Defaults to true.

      Methods

      dump

      def dump(self) ‑> Dict

      Returns the contents of this object as a dict.

      Slider

      class Slider(name: str, label: Union[str, NoneType] = None, min: Union[float, NoneType] = None, max: Union[float, NoneType] = None, step: Union[float, NoneType] = None, value: Union[float, NoneType] = None, disabled: Union[bool, NoneType] = None, trigger: Union[bool, NoneType] = None, visible: Union[bool, NoneType] = None, tooltip: Union[str, NoneType] = None)

      Create a slider.

      A slider is an element used to set a value. It provides a visual indication of adjustable content, as well as the current setting in the total range of content. It is displayed as a horizontal track with options on either side. A knob or lever is dragged to one end or the other to make the choice, indicating the current value. Marks on the slider bar can show values and users can choose where they want to drag the knob or lever to set the value.

      A slider is a good choice when you know that users think of the value as a relative quantity, not a numeric value. For example, users think about setting their audio volume to low or medium — not about setting the value to two or five.

      The default value of the slider will be zero or be constrained to the min and max values. The min will be returned if the value is set under the min and the max will be returned if set higher than the max value.

      Static methods

      load

      def load(_Slider__d: Dict) ‑> Slider

      Creates an instance of this class using the contents of a dict.

      Instance variables

      var disabled

      True if this field is disabled.

      var label

      Text to be displayed alongside the component.

      var max

      The maximum value of the slider.

      var min

      The minimum value of the slider.

      var name

      An identifying name for this component.

      var step

      The difference between two adjacent values of the slider.

      var tooltip

      An optional tooltip message displayed when a user clicks the help icon to the right of the component.

      var trigger

      True if the form should be submitted when the slider value changes.

      var value

      The current value of the slider.

      var visible

      True if the component should be visible. Defaults to true.

      Methods

      dump

      def dump(self) ‑> Dict

      Returns the contents of this object as a dict.

      SmallSeriesStatCard

      class SmallSeriesStatCard(box: str, title: str, value: str, plot_data: Union[Data, str], plot_value: str, plot_zero_value: Union[float, NoneType] = None, plot_category: Union[str, NoneType] = None, plot_type: Union[str, NoneType] = None, plot_curve: Union[str, NoneType] = None, plot_color: Union[str, NoneType] = None, data: Union[dict, str, NoneType] = None, commands: Union[List[Command], NoneType] = None)

      Create a small stat card displaying a primary value and a series plot.

      Static methods

      load

      def load(_SmallSeriesStatCard__d: Dict) ‑> SmallSeriesStatCard

      Creates an instance of this class using the contents of a dict.

      Instance variables

      var box

      A string indicating how to place this component on the page.

      var commands

      Contextual menu commands for this component.

      var data

      Data for this card.

      var plot_category

      The data field to use for x-axis values (ignored if plot_type is area; must be provided if plot_type is interval). Defaults to 'x'.

      var plot_color

      The plot's color.

      var plot_curve

      The plot's curve style. Defaults to linear. One of 'linear', 'smooth', 'step', 'step-after', 'step-before'.

      var plot_data

      The plot's data.

      var plot_type

      The type of plot. Defaults to area. One of 'area', 'interval'.

      var plot_value

      The data field to use for y-axis values.

      var plot_zero_value

      The base value to use for each y-axis mark. Set this to 0 if you want to pin the x-axis at y=0. If not provided, the minimum value from the data is used.

      var title

      The card's title.

      var value

      The primary value displayed.

      Methods

      dump

      def dump(self) ‑> Dict

      Returns the contents of this object as a dict.

      SmallStatCard

      class SmallStatCard(box: str, title: str, value: str, data: Union[dict, str, NoneType] = None, commands: Union[List[Command], NoneType] = None)

      Create a stat card displaying a single value.

      Static methods

      load

      def load(_SmallStatCard__d: Dict) ‑> SmallStatCard

      Creates an instance of this class using the contents of a dict.

      Instance variables

      var box

      A string indicating how to place this component on the page.

      var commands

      Contextual menu commands for this component.

      var data

      Data for this card.

      var title

      The card's title.

      var value

      The primary value displayed.

      Methods

      dump

      def dump(self) ‑> Dict

      Returns the contents of this object as a dict.

      Spinbox

      class Spinbox(name: str, label: Union[str, NoneType] = None, min: Union[float, NoneType] = None, max: Union[float, NoneType] = None, step: Union[float, NoneType] = None, value: Union[float, NoneType] = None, disabled: Union[bool, NoneType] = None, visible: Union[bool, NoneType] = None, tooltip: Union[str, NoneType] = None)

      Create a spinbox.

      A spinbox allows the user to incrementally adjust a value in small steps. It is mainly used for numeric values, but other values are supported too.

      Static methods

      load

      def load(_Spinbox__d: Dict) ‑> Spinbox

      Creates an instance of this class using the contents of a dict.

      Instance variables

      var disabled

      True if this field is disabled.

      var label

      Text to be displayed alongside the component.

      var max

      The maximum value of the spinbox.

      var min

      The minimum value of the spinbox.

      var name

      An identifying name for this component.

      var step

      The difference between two adjacent values of the spinbox.

      var tooltip

      An optional tooltip message displayed when a user clicks the help icon to the right of the component.

      var value

      The current value of the spinbox.

      var visible

      True if the component should be visible. Defaults to true.

      Methods

      dump

      def dump(self) ‑> Dict

      Returns the contents of this object as a dict.

      Step

      class Step(label: str, icon: Union[str, NoneType] = None, done: Union[bool, NoneType] = None)

      Create a step for a stepper.

      Static methods

      load

      def load(_Step__d: Dict) ‑> Step

      Creates an instance of this class using the contents of a dict.

      Instance variables

      var done

      Indicates whether this step has already been completed.

      var icon

      Icon to be displayed.

      var label

      Text displayed below icon.

      Methods

      dump

      def dump(self) ‑> Dict

      Returns the contents of this object as a dict.

      Stepper

      class Stepper(name: str, items: List[Step], visible: Union[bool, NoneType] = None, tooltip: Union[str, NoneType] = None)

      Create a component that displays a sequence of steps in a process. The steps keep users informed about where they are in the process and how much is left to complete.

      Static methods

      load

      def load(_Stepper__d: Dict) ‑> Stepper

      Creates an instance of this class using the contents of a dict.

      Instance variables

      var items

      The sequence of steps to be displayed.

      var name

      An identifying name for this component.

      var tooltip

      An optional tooltip message displayed when a user clicks the help icon to the right of the component.

      var visible

      True if the component should be visible. Defaults to true.

      Methods

      dump

      def dump(self) ‑> Dict

      Returns the contents of this object as a dict.

      Tab

      class Tab(name: str, label: Union[str, NoneType] = None, icon: Union[str, NoneType] = None)

      Create a tab.

      Static methods

      load

      def load(_Tab__d: Dict) ‑> Tab

      Creates an instance of this class using the contents of a dict.

      Instance variables

      var icon

      The icon displayed on the tab.

      var label

      The text displayed on the tab.

      var name

      An identifying name for this component.

      Methods

      dump

      def dump(self) ‑> Dict

      Returns the contents of this object as a dict.

      TabCard

      class TabCard(box: str, items: List[Tab], value: Union[str, NoneType] = None, link: Union[bool, NoneType] = None, commands: Union[List[Command], NoneType] = None)

      Create a card containing tabs for navigation.

      Static methods

      load

      def load(_TabCard__d: Dict) ‑> TabCard

      Creates an instance of this class using the contents of a dict.

      Instance variables

      var box

      A string indicating how to place this component on the page.

      var commands

      Contextual menu commands for this component.

      var items

      Items to render.

      var link

      True if tabs should be rendered as links and not a standard tab.

      var value

      The name of the tab to select.

      Methods

      dump

      def dump(self) ‑> Dict

      Returns the contents of this object as a dict.

      Table

      class Table(name: str, columns: List[TableColumn], rows: List[TableRow], multiple: Union[bool, NoneType] = None, groupable: Union[bool, NoneType] = None, downloadable: Union[bool, NoneType] = None, resettable: Union[bool, NoneType] = None, height: Union[str, NoneType] = None, values: Union[List[str], NoneType] = None, visible: Union[bool, NoneType] = None, tooltip: Union[str, NoneType] = None)

      Create an interactive table.

      This table differs from a markdown table in that it supports clicking or selecting rows. If you simply want to display a non-interactive table of information, use a markdown table.

      If multiple is set to False (default), each row in the table is clickable. When a row is clicked, the form is submitted automatically, and q.args.table_name is set to [row_name], where table_name is the name of the table, and row_name is the name of the row that was clicked on.

      If multiple is set to True, each row in the table is selectable. A row can be selected by clicking on it. Multiple rows can be selected either by shift+clicking or using marquee selection. When the form is submitted,q.args.table_name is set to [row1_name, row2_name, …] where table_name is the name of the table, and row1_name, row2_name are the name of the rows that were selected. Note that if multiple is set to True, the form is not submitted automatically, and one or more buttons are required in the form to trigger submission.

      Static methods

      load

      def load(_Table__d: Dict) ‑> Table

      Creates an instance of this class using the contents of a dict.

      Instance variables

      var columns

      The columns in this table.

      var downloadable

      Indicates whether the contents of this table can be downloaded and saved as a CSV file. Defaults to False.

      var groupable

      True to allow group by feature.

      var height

      The height of the table, e.g. '400px', '50%', etc.

      var multiple

      True to allow multiple rows to be selected.

      var name

      An identifying name for this component.

      var resettable

      Indicates whether a Reset button should be displayed to reset search / filter / group-by values to their defaults. Defaults to False.

      var rows

      The rows in this table.

      var tooltip

      An optional tooltip message displayed when a user clicks the help icon to the right of the component.

      var values

      The names of the selected rows. If this parameter is set, multiple selections will be allowed (multiple is assumed to be True).

      var visible

      True if the component should be visible. Defaults to true.

      Methods

      dump

      def dump(self) ‑> Dict

      Returns the contents of this object as a dict.

      TableCellType

      class TableCellType(progress: Union[ProgressTableCellType, NoneType] = None, icon: Union[IconTableCellType, NoneType] = None)

      Defines cell content to be rendered instead of a simple text.

      Static methods

      load

      def load(_TableCellType__d: Dict) ‑> TableCellType

      Creates an instance of this class using the contents of a dict.

      Instance variables

      var icon

      No documentation available.

      var progress

      No documentation available.

      Methods

      dump

      def dump(self) ‑> Dict

      Returns the contents of this object as a dict.

      TableColumn

      class TableColumn(name: str, label: str, min_width: Union[str, NoneType] = None, max_width: Union[str, NoneType] = None, sortable: Union[bool, NoneType] = None, searchable: Union[bool, NoneType] = None, filterable: Union[bool, NoneType] = None, link: Union[bool, NoneType] = None, cell_type: Union[TableCellType, NoneType] = None)

      Create a table column.

      Static methods

      load

      def load(_TableColumn__d: Dict) ‑> TableColumn

      Creates an instance of this class using the contents of a dict.

      Instance variables

      var cell_type

      Defines how to render each cell in this column. Defaults to plain text.

      var filterable

      Indicates whether the contents of this column are displayed as filters in a dropdown.

      var label

      The text displayed on the column header.

      var link

      Indicates whether each cell in this column should be displayed as a clickable link.

      var max_width

      The maximum width of this column, e.g. '100px'. Only px units are supported at this time.

      var min_width

      The minimum width of this column, e.g. '50px'. Only px units are supported at this time.

      var name

      An identifying name for this column.

      var searchable

      Indicates whether the contents of this column can be searched through. Enables a search box for the table if true.

      var sortable

      Indicates whether the column is sortable.

      Methods

      dump

      def dump(self) ‑> Dict

      Returns the contents of this object as a dict.

      TableRow

      class TableRow(name: str, cells: List[str])

      Create a table row.

      Static methods

      load

      def load(_TableRow__d: Dict) ‑> TableRow

      Creates an instance of this class using the contents of a dict.

      Instance variables

      var cells

      The cells in this row (displayed left to right).

      var name

      An identifying name for this row.

      Methods

      dump

      def dump(self) ‑> Dict

      Returns the contents of this object as a dict.

      Tabs

      class Tabs(name: str, value: Union[str, NoneType] = None, items: Union[List[Tab], NoneType] = None, visible: Union[bool, NoneType] = None)

      Create a tab bar.

      Static methods

      load

      def load(_Tabs__d: Dict) ‑> Tabs

      Creates an instance of this class using the contents of a dict.

      Instance variables

      var items

      The tabs in this tab bar.

      var name

      An identifying name for this component.

      var value

      The name of the tab to select.

      var visible

      True if the component should be visible. Defaults to true.

      Methods

      dump

      def dump(self) ‑> Dict

      Returns the contents of this object as a dict.

      TallGaugeStatCard

      class TallGaugeStatCard(box: str, title: str, value: str, aux_value: str, progress: float, plot_color: Union[str, NoneType] = None, data: Union[dict, str, NoneType] = None, commands: Union[List[Command], NoneType] = None)

      Create a tall stat card displaying a primary value, an auxiliary value and a progress gauge.

      Static methods

      load

      def load(_TallGaugeStatCard__d: Dict) ‑> TallGaugeStatCard

      Creates an instance of this class using the contents of a dict.

      Instance variables

      var aux_value

      The auxiliary value displayed next to the primary value.

      var box

      A string indicating how to place this component on the page.

      var commands

      Contextual menu commands for this component.

      var data

      Data for this card.

      var plot_color

      The color of the progress gauge.

      var progress

      The value of the progress gauge, between 0 and 1.

      var title

      The card's title.

      var value

      The primary value displayed.

      Methods

      dump

      def dump(self) ‑> Dict

      Returns the contents of this object as a dict.

      TallSeriesStatCard

      class TallSeriesStatCard(box: str, title: str, value: str, aux_value: str, plot_data: Union[Data, str], plot_value: str, plot_zero_value: Union[float, NoneType] = None, plot_category: Union[str, NoneType] = None, plot_type: Union[str, NoneType] = None, plot_curve: Union[str, NoneType] = None, plot_color: Union[str, NoneType] = None, data: Union[dict, str, NoneType] = None, commands: Union[List[Command], NoneType] = None)

      Create a tall stat card displaying a primary value, an auxiliary value and a series plot.

      Static methods

      load

      def load(_TallSeriesStatCard__d: Dict) ‑> TallSeriesStatCard

      Creates an instance of this class using the contents of a dict.

      Instance variables

      var aux_value

      The auxiliary value displayed below the primary value.

      var box

      A string indicating how to place this component on the page.

      var commands

      Contextual menu commands for this component.

      var data

      Data for this card.

      var plot_category

      The data field to use for x-axis values (ignored if plot_type is area; must be provided if plot_type is interval). Defaults to 'x'.

      var plot_color

      The plot's color.

      var plot_curve

      The plot's curve style. Defaults to linear. One of 'linear', 'smooth', 'step', 'step-after', 'step-before'.

      var plot_data

      The plot's data.

      var plot_type

      The type of plot. Defaults to area. One of 'area', 'interval'.

      var plot_value

      The data field to use for y-axis values.

      var plot_zero_value

      The base value to use for each y-axis mark. Set this to 0 if you want to pin the x-axis at y=0. If not provided, the minimum value from the data is used.

      var title

      The card's title.

      var value

      The primary value displayed.

      Methods

      dump

      def dump(self) ‑> Dict

      Returns the contents of this object as a dict.

      Template

      class Template(content: str, data: Union[dict, str, NoneType] = None, name: Union[str, NoneType] = None, visible: Union[bool, NoneType] = None)

      Render dynamic content using an HTML template.

      Static methods

      load

      def load(_Template__d: Dict) ‑> Template

      Creates an instance of this class using the contents of a dict.

      Instance variables

      var content

      The Handlebars template. https://handlebarsjs.com/guide/

      var data

      Data for the Handlebars template

      var name

      An identifying name for this component.

      var visible

      True if the component should be visible. Defaults to true.

      Methods

      dump

      def dump(self) ‑> Dict

      Returns the contents of this object as a dict.

      TemplateCard

      class TemplateCard(box: str, title: str, content: str, data: Union[dict, str, NoneType] = None, commands: Union[List[Command], NoneType] = None)

      Render dynamic content using an HTML template.

      Static methods

      load

      def load(_TemplateCard__d: Dict) ‑> TemplateCard

      Creates an instance of this class using the contents of a dict.

      Instance variables

      var box

      A string indicating how to place this component on the page.

      var commands

      Contextual menu commands for this component.

      var content

      The Handlebars template. https://handlebarsjs.com/guide/

      var data

      Data for the Handlebars template.

      var title

      The title for this card.

      Methods

      dump

      def dump(self) ‑> Dict

      Returns the contents of this object as a dict.

      Text

      class Text(content: str, size: Union[str, NoneType] = None, visible: Union[bool, NoneType] = None, tooltip: Union[str, NoneType] = None, name: Union[str, NoneType] = None)

      Create text content.

      Static methods

      load

      def load(_Text__d: Dict) ‑> Text

      Creates an instance of this class using the contents of a dict.

      Instance variables

      var content

      The text content.

      var name

      An identifying name for this component.

      var size

      The font size of the text content. One of 'xl', 'l', 'm', 's', 'xs'.

      var tooltip

      Tooltip message.

      var visible

      True if the component should be visible. Defaults to true.

      Methods

      dump

      def dump(self) ‑> Dict

      Returns the contents of this object as a dict.

      TextL

      class TextL(content: str, visible: Union[bool, NoneType] = None, tooltip: Union[str, NoneType] = None, commands: Union[List[Command], NoneType] = None, name: Union[str, NoneType] = None)

      Create large sized text content.

      Static methods

      load

      def load(_TextL__d: Dict) ‑> TextL

      Creates an instance of this class using the contents of a dict.

      Instance variables

      var commands

      Contextual menu commands for this component.

      var content

      The text content.

      var name

      An identifying name for this component.

      var tooltip

      Tooltip message.

      var visible

      True if the component should be visible. Defaults to true.

      Methods

      dump

      def dump(self) ‑> Dict

      Returns the contents of this object as a dict.

      TextM

      class TextM(content: str, visible: Union[bool, NoneType] = None, tooltip: Union[str, NoneType] = None, name: Union[str, NoneType] = None)

      Create medium sized text content.

      Static methods

      load

      def load(_TextM__d: Dict) ‑> TextM

      Creates an instance of this class using the contents of a dict.

      Instance variables

      var content

      The text content.

      var name

      An identifying name for this component.

      var tooltip

      Tooltip message.

      var visible

      True if the component should be visible. Defaults to true.

      Methods

      dump

      def dump(self) ‑> Dict

      Returns the contents of this object as a dict.

      TextS

      class TextS(content: str, visible: Union[bool, NoneType] = None, tooltip: Union[str, NoneType] = None, name: Union[str, NoneType] = None)

      Create small sized text content.

      Static methods

      load

      def load(_TextS__d: Dict) ‑> TextS

      Creates an instance of this class using the contents of a dict.

      Instance variables

      var content

      The text content.

      var name

      An identifying name for this component.

      var tooltip

      Tooltip message.

      var visible

      True if the component should be visible. Defaults to true.

      Methods

      dump

      def dump(self) ‑> Dict

      Returns the contents of this object as a dict.

      TextXl

      class TextXl(content: str, visible: Union[bool, NoneType] = None, tooltip: Union[str, NoneType] = None, commands: Union[List[Command], NoneType] = None, name: Union[str, NoneType] = None)

      Create extra-large sized text content.

      Static methods

      load

      def load(_TextXl__d: Dict) ‑> TextXl

      Creates an instance of this class using the contents of a dict.

      Instance variables

      var commands

      Contextual menu commands for this component.

      var content

      The text content.

      var name

      An identifying name for this component.

      var tooltip

      Tooltip message.

      var visible

      True if the component should be visible. Defaults to true.

      Methods

      dump

      def dump(self) ‑> Dict

      Returns the contents of this object as a dict.

      TextXs

      class TextXs(content: str, visible: Union[bool, NoneType] = None, tooltip: Union[str, NoneType] = None, name: Union[str, NoneType] = None)

      Create extra-small sized text content.

      Static methods

      load

      def load(_TextXs__d: Dict) ‑> TextXs

      Creates an instance of this class using the contents of a dict.

      Instance variables

      var content

      The text content.

      var name

      An identifying name for this component.

      var tooltip

      Tooltip message.

      var visible

      True if the component should be visible. Defaults to true.

      Methods

      dump

      def dump(self) ‑> Dict

      Returns the contents of this object as a dict.

      Textbox

      class Textbox(name: str, label: Union[str, NoneType] = None, placeholder: Union[str, NoneType] = None, value: Union[str, NoneType] = None, mask: Union[str, NoneType] = None, icon: Union[str, NoneType] = None, prefix: Union[str, NoneType] = None, suffix: Union[str, NoneType] = None, error: Union[str, NoneType] = None, required: Union[bool, NoneType] = None, disabled: Union[bool, NoneType] = None, readonly: Union[bool, NoneType] = None, multiline: Union[bool, NoneType] = None, password: Union[bool, NoneType] = None, trigger: Union[bool, NoneType] = None, visible: Union[bool, NoneType] = None, tooltip: Union[str, NoneType] = None)

      Create a text box.

      The text box component enables a user to type text into an app. It's typically used to capture a single line of text, but can be configured to capture multiple lines of text. The text displays on the screen in a simple, uniform format.

      Static methods

      load

      def load(_Textbox__d: Dict) ‑> Textbox

      Creates an instance of this class using the contents of a dict.

      Instance variables

      var disabled

      True if the text box is disabled.

      var error

      Text to be displayed as an error below the text box.

      var icon

      Icon displayed in the far right end of the text field.

      var label

      The text displayed above the field.

      var mask

      The masking string that defines the mask's behavior. A backslash will escape any character. Special format characters are: '9': [0-9] 'a': [a-zA-Z] '*': [a-zA-Z0-9].

      var multiline

      True if the text box should allow multi-line text entry.

      var name

      An identifying name for this component.

      var password

      True if the text box should hide text content.

      var placeholder

      A string that provides a brief hint to the user as to what kind of information is expected in the field. It should be a word or short phrase that demonstrates the expected type of data, rather than an explanatory message.

      var prefix

      Text to be displayed before the text box contents.

      var readonly

      True if the text box is a read-only field.

      var required

      True if the text box is a required field.

      var suffix

      Text to be displayed after the text box contents.

      var tooltip

      An optional tooltip message displayed when a user clicks the help icon to the right of the component.

      var trigger

      True if the form should be submitted when the text value changes.

      var value

      Text to be displayed inside the text box.

      var visible

      True if the component should be visible. Defaults to true.

      Methods

      dump

      def dump(self) ‑> Dict

      Returns the contents of this object as a dict.

      Toggle

      class Toggle(name: str, label: Union[str, NoneType] = None, value: Union[bool, NoneType] = None, disabled: Union[bool, NoneType] = None, trigger: Union[bool, NoneType] = None, visible: Union[bool, NoneType] = None, tooltip: Union[str, NoneType] = None)

      Create a toggle. Toggles represent a physical switch that allows users to turn things on or off. Use toggles to present users with two mutually exclusive options (like on/off), where choosing an option results in an immediate action.

      Use a toggle for binary operations that take effect right after the user flips the Toggle. For example, use a Toggle to turn services or hardware components on or off. In other words, if a physical switch would work for the action, a Toggle is probably the best component to use.

      Static methods

      load

      def load(_Toggle__d: Dict) ‑> Toggle

      Creates an instance of this class using the contents of a dict.

      Instance variables

      var disabled

      True if the checkbox is disabled.

      var label

      Text to be displayed alongside the component.

      var name

      An identifying name for this component.

      var tooltip

      An optional tooltip message displayed when a user clicks the help icon to the right of the component.

      var trigger

      True if the form should be submitted when the toggle value changes.

      var value

      True if selected, False if unselected.

      var visible

      True if the component should be visible. Defaults to true.

      Methods

      dump

      def dump(self) ‑> Dict

      Returns the contents of this object as a dict.

      ToolbarCard

      class ToolbarCard(box: str, items: List[Command], secondary_items: Union[List[Command], NoneType] = None, overflow_items: Union[List[Command], NoneType] = None, commands: Union[List[Command], NoneType] = None)

      Create a card containing a toolbar.

      Static methods

      load

      def load(_ToolbarCard__d: Dict) ‑> ToolbarCard

      Creates an instance of this class using the contents of a dict.

      Instance variables

      var box

      A string indicating how to place this component on the page.

      var commands

      Contextual menu commands for this component.

      var items

      Items to render.

      var overflow_items

      Items to render in an overflow menu.

      var secondary_items

      Items to render on the right side (or left, in RTL).

      Methods

      dump

      def dump(self) ‑> Dict

      Returns the contents of this object as a dict.

      VegaCard

      class VegaCard(box: str, title: str, specification: str, data: Union[dict, str, NoneType] = None, commands: Union[List[Command], NoneType] = None)

      Create a card containing a Vega-lite plot.

      Static methods

      load

      def load(_VegaCard__d: Dict) ‑> VegaCard

      Creates an instance of this class using the contents of a dict.

      Instance variables

      var box

      A string indicating how to place this component on the page.

      var commands

      Contextual menu commands for this component.

      var data

      Data for the plot, if any.

      var specification

      The Vega-lite specification.

      var title

      The title of this card.

      Methods

      dump

      def dump(self) ‑> Dict

      Returns the contents of this object as a dict.

      VegaVisualization

      class VegaVisualization(specification: str, data: Union[dict, str, NoneType] = None, width: Union[str, NoneType] = None, height: Union[str, NoneType] = None, name: Union[str, NoneType] = None, visible: Union[bool, NoneType] = None)

      Create a Vega-lite plot for display inside a form.

      Static methods

      load

      def load(_VegaVisualization__d: Dict) ‑> VegaVisualization

      Creates an instance of this class using the contents of a dict.

      Instance variables

      var data

      Data for the plot, if any.

      var height

      The height of the visualization. Defaults to 300px.

      var name

      An identifying name for this component.

      var specification

      The Vega-lite specification.

      var visible

      True if the component should be visible. Defaults to true.

      var width

      The width of the visualization. Defaults to 100%.

      Methods

      dump

      def dump(self) ‑> Dict

      Returns the contents of this object as a dict.

      Visualization

      class Visualization(plot: Plot, data: Union[dict, str], width: Union[str, NoneType] = None, height: Union[str, NoneType] = None, name: Union[str, NoneType] = None, visible: Union[bool, NoneType] = None)

      Create a visualization for display inside a form.

      Static methods

      load

      def load(_Visualization__d: Dict) ‑> Visualization

      Creates an instance of this class using the contents of a dict.

      Instance variables

      var data

      Data for this visualization.

      var height

      The hight of the visualization. Defaults to 300px.

      var name

      An identifying name for this component.

      var plot

      The plot to be rendered in this visualization.

      var visible

      True if the component should be visible. Defaults to true.

      var width

      The width of the visualization. Defaults to 100%.

      Methods

      dump

      def dump(self) ‑> Dict

      Returns the contents of this object as a dict.

      WideBarStatCard

      class WideBarStatCard(box: str, title: str, value: str, aux_value: str, progress: float, plot_color: Union[str, NoneType] = None, data: Union[dict, str, NoneType] = None, commands: Union[List[Command], NoneType] = None)

      Create a wide stat card displaying a primary value, an auxiliary value and a progress bar.

      Static methods

      load

      def load(_WideBarStatCard__d: Dict) ‑> WideBarStatCard

      Creates an instance of this class using the contents of a dict.

      Instance variables

      var aux_value

      The auxiliary value displayed next to the primary value.

      var box

      A string indicating how to place this component on the page.

      var commands

      Contextual menu commands for this component.

      var data

      Data for this card.

      var plot_color

      The color of the progress bar.

      var progress

      The value of the progress bar, between 0 and 1.

      var title

      The card's title.

      var value

      The primary value displayed.

      Methods

      dump

      def dump(self) ‑> Dict

      Returns the contents of this object as a dict.

      WideGaugeStatCard

      class WideGaugeStatCard(box: str, title: str, value: str, aux_value: str, progress: float, plot_color: Union[str, NoneType] = None, data: Union[dict, str, NoneType] = None, commands: Union[List[Command], NoneType] = None)

      Create a wide stat card displaying a primary value, an auxiliary value and a progress gauge.

      Static methods

      load

      def load(_WideGaugeStatCard__d: Dict) ‑> WideGaugeStatCard

      Creates an instance of this class using the contents of a dict.

      Instance variables

      var aux_value

      The auxiliary value displayed next to the primary value.

      var box

      A string indicating how to place this component on the page.

      var commands

      Contextual menu commands for this component.

      var data

      Data for this card.

      var plot_color

      The color of the progress gauge.

      var progress

      The value of the progress gauge, between 0 and 1.

      var title

      The card's title.

      var value

      The primary value displayed.

      Methods

      dump

      def dump(self) ‑> Dict

      Returns the contents of this object as a dict.

      WideSeriesStatCard

      class WideSeriesStatCard(box: str, title: str, value: str, aux_value: str, plot_data: Union[Data, str], plot_value: str, plot_zero_value: Union[float, NoneType] = None, plot_category: Union[str, NoneType] = None, plot_type: Union[str, NoneType] = None, plot_curve: Union[str, NoneType] = None, plot_color: Union[str, NoneType] = None, data: Union[dict, str, NoneType] = None, commands: Union[List[Command], NoneType] = None)

      Create a wide stat card displaying a primary value, an auxiliary value and a series plot.

      Static methods

      load

      def load(_WideSeriesStatCard__d: Dict) ‑> WideSeriesStatCard

      Creates an instance of this class using the contents of a dict.

      Instance variables

      var aux_value

      The auxiliary value displayed below the primary value.

      var box

      A string indicating how to place this component on the page.

      var commands

      Contextual menu commands for this component.

      var data

      Data for this card.

      var plot_category

      The data field to use for x-axis values (ignored if plot_type is area; must be provided if plot_type is interval). Defaults to 'x'.

      var plot_color

      The plot's color.

      var plot_curve

      The plot's curve style. Defaults to linear. One of 'linear', 'smooth', 'step', 'step-after', 'step-before'.

      var plot_data

      The plot's data.

      var plot_type

      The type of plot. Defaults to area. One of 'area', 'interval'.

      var plot_value

      The data field to use for y-axis values.

      var plot_zero_value

      The base value to use for each y-axis mark. Set this to 0 if you want to pin the x-axis at y=0. If not provided, the minimum value from the data is used.

      var title

      The card's title.

      var value

      The primary value displayed.

      Methods

      dump

      def dump(self) ‑> Dict

      Returns the contents of this object as a dict.

      Edit this page
      - - - - - - - - - - +

      Module h2o_wave.types

      Classes

      Breadcrumb

      class Breadcrumb(name: str, label: str)

      Create a breadcrumb for a BreadcrumbsCard.

      Static methods

      load

      def load(_Breadcrumb__d: Dict) ‑> Breadcrumb

      Creates an instance of this class using the contents of a dict.

      Instance variables

      var label

      The label to display.

      var name

      The name of this item. Prefix the name with a '#' to trigger hash-change navigation.

      Methods

      dump

      def dump(self) ‑> Dict

      Returns the contents of this object as a dict.

      BreadcrumbsCard

      class BreadcrumbsCard(box: str, items: List[Breadcrumb], commands: Union[List[Command], NoneType] = None)

      Create a card containing breadcrumbs. Breadcrumbs should be used as a navigational aid in your app or site. They indicate the current page’s location within a hierarchy and help the user understand where they are in relation to the rest of that hierarchy. They also afford one-click access to higher levels of that hierarchy. Breadcrumbs are typically placed, in horizontal form, under the masthead or navigation of an experience, above the primary content area.

      Static methods

      load

      def load(_BreadcrumbsCard__d: Dict) ‑> BreadcrumbsCard

      Creates an instance of this class using the contents of a dict.

      Instance variables

      var box

      A string indicating how to place this component on the page.

      var commands

      Contextual menu commands for this component.

      var items

      A list of Breadcrumb instances to display. See breadcrumb()

      Methods

      dump

      def dump(self) ‑> Dict

      Returns the contents of this object as a dict.

      Button

      class Button(name: str, label: Union[str, NoneType] = None, caption: Union[str, NoneType] = None, value: Union[str, NoneType] = None, primary: Union[bool, NoneType] = None, disabled: Union[bool, NoneType] = None, link: Union[bool, NoneType] = None, visible: Union[bool, NoneType] = None, tooltip: Union[str, NoneType] = None)

      Create a button.

      Buttons are best used to enable a user to commit a change or complete steps in a task. They are typically found inside forms, dialogs, panels or pages. An example of their usage is confirming the deletion of a file in a confirmation dialog.

      When considering their place in a layout, contemplate the order in which a user will flow through the UI. As an example, in a form, the individual will need to read and interact with the form fields before submitting the form. Therefore, as a general rule, the button should be placed at the bottom of the UI container which holds the related UI elements.

      Buttons may be placed within a "buttons" component which will lay out the buttons horizontally, or used individually and they will be stacked vertically.

      While buttons can technically be used to navigate a user to another part of the experience, this is not recommended unless that navigation is part of an action or their flow.

      Static methods

      load

      def load(_Button__d: Dict) ‑> Button

      Creates an instance of this class using the contents of a dict.

      Instance variables

      var caption

      The caption displayed below the label. Setting a caption renders a compound button.

      var disabled

      True if the button should be disabled.

      var label

      The text displayed on the button.

      var link

      True if the button should be rendered as link text and not a standard button.

      var name

      An identifying name for this component. If the name is prefixed with a '#', the button sets the location hash to the name when clicked.

      var primary

      True if the button should be rendered as the primary button in the set.

      var tooltip

      An optional tooltip message displayed when a user clicks the help icon to the right of the component.

      var value

      A value for this button. If a value is set, it is used for the button's submitted instead of a boolean True.

      var visible

      True if the component should be visible. Defaults to true.

      Methods

      dump

      def dump(self) ‑> Dict

      Returns the contents of this object as a dict.

      Buttons

      class Buttons(items: List[ForwardRef('Component')], justify: Union[str, NoneType] = None, name: Union[str, NoneType] = None, visible: Union[bool, NoneType] = None)

      Create a set of buttons to be layed out horizontally.

      Static methods

      load

      def load(_Buttons__d: Dict) ‑> Buttons

      Creates an instance of this class using the contents of a dict.

      Instance variables

      var items

      The button in this set.

      var justify

      Specifies how to lay out buttons horizontally. One of 'start', 'end', 'center', 'between', 'around'.

      var name

      An identifying name for this component.

      var visible

      True if the component should be visible. Defaults to true.

      Methods

      dump

      def dump(self) ‑> Dict

      Returns the contents of this object as a dict.

      Checkbox

      class Checkbox(name: str, label: Union[str, NoneType] = None, value: Union[bool, NoneType] = None, indeterminate: Union[bool, NoneType] = None, disabled: Union[bool, NoneType] = None, trigger: Union[bool, NoneType] = None, visible: Union[bool, NoneType] = None, tooltip: Union[str, NoneType] = None)

      Create a checkbox.

      A checkbox allows users to switch between two mutually exclusive options (checked or unchecked, on or off) through a single click or tap. It can also be used to indicate a subordinate setting or preference when paired with another component.

      A checkbox is used to select or deselect action items. It can be used for a single item or for a list of multiple items that a user can choose from. The component has two selection states: unselected and selected.

      For a binary choice, the main difference between a checkbox and a toggle switch is that the checkbox is for status and the toggle switch is for action.

      Use multiple checkboxes for multi-select scenarios in which a user chooses one or more items from a group of choices that are not mutually exclusive.

      Static methods

      load

      def load(_Checkbox__d: Dict) ‑> Checkbox

      Creates an instance of this class using the contents of a dict.

      Instance variables

      var disabled

      True if the checkbox is disabled.

      var indeterminate

      True if the selection is indeterminate (neither selected nor unselected).

      var label

      Text to be displayed alongside the checkbox.

      var name

      An identifying name for this component.

      var tooltip

      An optional tooltip message displayed when a user clicks the help icon to the right of the component.

      var trigger

      True if the form should be submitted when the checkbox value changes.

      var value

      True if selected, False if unselected.

      var visible

      True if the component should be visible. Defaults to true.

      Methods

      dump

      def dump(self) ‑> Dict

      Returns the contents of this object as a dict.

      Checklist

      class Checklist(name: str, label: Union[str, NoneType] = None, values: Union[List[str], NoneType] = None, choices: Union[List[Choice], NoneType] = None, trigger: Union[bool, NoneType] = None, visible: Union[bool, NoneType] = None, tooltip: Union[str, NoneType] = None)

      Create a set of checkboxes. Use this for multi-select scenarios in which a user chooses one or more items from a group of choices that are not mutually exclusive.

      Static methods

      load

      def load(_Checklist__d: Dict) ‑> Checklist

      Creates an instance of this class using the contents of a dict.

      Instance variables

      var choices

      The choices to be presented.

      var label

      Text to be displayed above the component.

      var name

      An identifying name for this component.

      var tooltip

      An optional tooltip message displayed when a user clicks the help icon to the right of the component.

      var trigger

      True if the form should be submitted when the checklist value changes.

      var values

      The names of the selected choices.

      var visible

      True if the component should be visible. Defaults to true.

      Methods

      dump

      def dump(self) ‑> Dict

      Returns the contents of this object as a dict.

      Choice

      class Choice(name: str, label: Union[str, NoneType] = None, disabled: Union[bool, NoneType] = None)

      Create a choice for a checklist, choice group or dropdown.

      Static methods

      load

      def load(_Choice__d: Dict) ‑> Choice

      Creates an instance of this class using the contents of a dict.

      Instance variables

      var disabled

      True if the checkbox is disabled.

      var label

      Text to be displayed alongside the component.

      var name

      An identifying name for this component.

      Methods

      dump

      def dump(self) ‑> Dict

      Returns the contents of this object as a dict.

      ChoiceGroup

      class ChoiceGroup(name: str, label: Union[str, NoneType] = None, value: Union[str, NoneType] = None, choices: Union[List[Choice], NoneType] = None, required: Union[bool, NoneType] = None, trigger: Union[bool, NoneType] = None, visible: Union[bool, NoneType] = None, tooltip: Union[str, NoneType] = None)

      Create a choice group. The choice group component, also known as radio buttons, let users select one option from two or more choices. Each option is represented by one choice group button; a user can select only one choice group in a button group.

      Choice groups emphasize all options equally, and that may draw more attention to the options than necessary. Consider using other components, unless the options deserve extra attention from the user. For example, if the default option is recommended for most users in most situations, use a dropdown instead.

      If there are only two mutually exclusive options, combine them into a single Checkbox or Toggle switch. For example, use a checkbox for "I agree" instead of choice group buttons for "I agree" and "I don't agree."

      Static methods

      load

      def load(_ChoiceGroup__d: Dict) ‑> ChoiceGroup

      Creates an instance of this class using the contents of a dict.

      Instance variables

      var choices

      The choices to be presented.

      var label

      Text to be displayed alongside the component.

      var name

      An identifying name for this component.

      var required

      True if this field is required.

      var tooltip

      An optional tooltip message displayed when a user clicks the help icon to the right of the component.

      var trigger

      True if the form should be submitted when the selection changes.

      var value

      The name of the selected choice.

      var visible

      True if the component should be visible. Defaults to true.

      Methods

      dump

      def dump(self) ‑> Dict

      Returns the contents of this object as a dict.

      ColorPicker

      class ColorPicker(name: str, label: Union[str, NoneType] = None, value: Union[str, NoneType] = None, choices: Union[List[str], NoneType] = None, visible: Union[bool, NoneType] = None, tooltip: Union[str, NoneType] = None)

      Create a color picker.

      A date picker allows a user to pick a color value. If the 'choices' parameter is set, a swatch picker is displayed instead of the standard color picker.

      Static methods

      load

      def load(_ColorPicker__d: Dict) ‑> ColorPicker

      Creates an instance of this class using the contents of a dict.

      Instance variables

      var choices

      A list of colors (CSS-compatible strings) to limit color choices to.

      var label

      Text to be displayed alongside the component.

      var name

      An identifying name for this component.

      var tooltip

      An optional tooltip message displayed when a user clicks the help icon to the right of the component.

      var value

      The selected color (CSS-compatible string)

      var visible

      True if the component should be visible. Defaults to true.

      Methods

      dump

      def dump(self) ‑> Dict

      Returns the contents of this object as a dict.

      Combobox

      class Combobox(name: str, label: Union[str, NoneType] = None, placeholder: Union[str, NoneType] = None, value: Union[str, NoneType] = None, choices: Union[List[str], NoneType] = None, error: Union[str, NoneType] = None, disabled: Union[bool, NoneType] = None, visible: Union[bool, NoneType] = None, tooltip: Union[str, NoneType] = None)

      Create a combobox.

      A combobox is a list in which the selected item is always visible, and the others are visible on demand by clicking a drop-down button or by typing in the input. They are used to simplify the design and make a choice within the UI.

      When closed, only the selected item is visible. When users click the drop-down button, all the options become visible. To change the value, users open the list and click another value or use the arrow keys (up and down) to select a new value. When collapsed the user can select a new value by typing.

      Static methods

      load

      def load(_Combobox__d: Dict) ‑> Combobox

      Creates an instance of this class using the contents of a dict.

      Instance variables

      var choices

      The choices to be presented.

      var disabled

      True if this field is disabled.

      var error

      Text to be displayed as an error below the text box.

      var label

      Text to be displayed alongside the component.

      var name

      An identifying name for this component.

      var placeholder

      A string that provides a brief hint to the user as to what kind of information is expected in the field.

      var tooltip

      An optional tooltip message displayed when a user clicks the help icon to the right of the component.

      var value

      The name of the selected choice.

      var visible

      True if the component should be visible. Defaults to true.

      Methods

      dump

      def dump(self) ‑> Dict

      Returns the contents of this object as a dict.

      Command

      class Command(name: str, label: Union[str, NoneType] = None, caption: Union[str, NoneType] = None, icon: Union[str, NoneType] = None, items: Union[List[ForwardRef('Command')], NoneType] = None, data: Union[str, NoneType] = None)

      Create a command.

      Commands are typically displayed as context menu items or toolbar button.

      Static methods

      load

      def load(_Command__d: Dict) ‑> Command

      Creates an instance of this class using the contents of a dict.

      Instance variables

      var caption

      The caption for this command (typically a tooltip).

      var data

      Data associated with this command, if any.

      var icon

      The icon to be displayed for this command.

      var items

      Sub-commands, if any

      var label

      The text displayed for this command.

      var name

      An identifying name for this component. If the name is prefixed with a '#', the command sets the location hash to the name when executed.

      Methods

      dump

      def dump(self) ‑> Dict

      Returns the contents of this object as a dict.

      Component

      class Component(text: Union[Text, NoneType] = None, text_xl: Union[TextXl, NoneType] = None, text_l: Union[TextL, NoneType] = None, text_m: Union[TextM, NoneType] = None, text_s: Union[TextS, NoneType] = None, text_xs: Union[TextXs, NoneType] = None, label: Union[Label, NoneType] = None, separator: Union[Separator, NoneType] = None, progress: Union[Progress, NoneType] = None, message_bar: Union[MessageBar, NoneType] = None, textbox: Union[Textbox, NoneType] = None, checkbox: Union[Checkbox, NoneType] = None, toggle: Union[Toggle, NoneType] = None, choice_group: Union[ChoiceGroup, NoneType] = None, checklist: Union[Checklist, NoneType] = None, dropdown: Union[Dropdown, NoneType] = None, combobox: Union[Combobox, NoneType] = None, slider: Union[Slider, NoneType] = None, spinbox: Union[Spinbox, NoneType] = None, date_picker: Union[DatePicker, NoneType] = None, color_picker: Union[ColorPicker, NoneType] = None, button: Union[Button, NoneType] = None, buttons: Union[Buttons, NoneType] = None, file_upload: Union[FileUpload, NoneType] = None, table: Union[Table, NoneType] = None, link: Union[Link, NoneType] = None, tabs: Union[Tabs, NoneType] = None, expander: Union[Expander, NoneType] = None, frame: Union[Frame, NoneType] = None, markup: Union[Markup, NoneType] = None, template: Union[Template, NoneType] = None, picker: Union[Picker, NoneType] = None, range_slider: Union[RangeSlider, NoneType] = None, stepper: Union[Stepper, NoneType] = None, visualization: Union[Visualization, NoneType] = None, vega_visualization: Union[VegaVisualization, NoneType] = None)

      Create a component.

      Static methods

      load

      def load(_Component__d: Dict) ‑> Component

      Creates an instance of this class using the contents of a dict.

      Instance variables

      var button

      Button.

      var buttons

      Button set.

      var checkbox

      Checkbox.

      var checklist

      Checklist.

      var choice_group

      Choice group.

      var color_picker

      Color picker.

      var combobox

      Combobox.

      var date_picker

      Date picker.

      var dropdown

      Dropdown.

      var expander

      Expander.

      var file_upload

      File upload.

      var frame

      Frame.

      var label

      Label.

      var link

      Link.

      var markup

      Markup

      var message_bar

      Message bar.

      var picker

      Picker.

      var progress

      Progress bar.

      var range_slider

      Range Slider.

      var separator

      Separator.

      var slider

      Slider.

      var spinbox

      Spinbox.

      var stepper

      Stepper.

      var table

      Table.

      var tabs

      Tabs.

      var template

      Template

      var text

      Text block.

      var text_l

      Large sized text block.

      var text_m

      Medium sized text block.

      var text_s

      Small sized text block.

      var text_xl

      Extra-large sized text block.

      var text_xs

      Extra-small sized text block.

      var textbox

      Textbox.

      var toggle

      Toggle.

      var vega_visualization

      Vega-lite Visualization.

      var visualization

      Visualization.

      Methods

      dump

      def dump(self) ‑> Dict

      Returns the contents of this object as a dict.

      DatePicker

      class DatePicker(name: str, label: Union[str, NoneType] = None, placeholder: Union[str, NoneType] = None, value: Union[str, NoneType] = None, disabled: Union[bool, NoneType] = None, trigger: Union[bool, NoneType] = None, visible: Union[bool, NoneType] = None, tooltip: Union[str, NoneType] = None)

      Create a date picker.

      A date picker allows a user to pick a date value.

      Static methods

      load

      def load(_DatePicker__d: Dict) ‑> DatePicker

      Creates an instance of this class using the contents of a dict.

      Instance variables

      var disabled

      True if this field is disabled.

      var label

      Text to be displayed alongside the component.

      var name

      An identifying name for this component.

      var placeholder

      A string that provides a brief hint to the user as to what kind of information is expected in the field.

      var tooltip

      An optional tooltip message displayed when a user clicks the help icon to the right of the component.

      var trigger

      True if the form should be submitted when the datepicker value changes.

      var value

      The date value in YYYY-MM-DD format.

      var visible

      True if the component should be visible. Defaults to true.

      Methods

      dump

      def dump(self) ‑> Dict

      Returns the contents of this object as a dict.

      Dropdown

      class Dropdown(name: str, label: Union[str, NoneType] = None, placeholder: Union[str, NoneType] = None, value: Union[str, NoneType] = None, values: Union[List[str], NoneType] = None, choices: Union[List[Choice], NoneType] = None, required: Union[bool, NoneType] = None, disabled: Union[bool, NoneType] = None, trigger: Union[bool, NoneType] = None, visible: Union[bool, NoneType] = None, tooltip: Union[str, NoneType] = None)

      Create a dropdown.

      A dropdown is a list in which the selected item is always visible, and the others are visible on demand by clicking a drop-down button. They are used to simplify the design and make a choice within the UI. When closed, only the selected item is visible. When users click the drop-down button, all the options become visible.

      To change the value, users open the list and click another value or use the arrow keys (up and down) to select a new value.

      Note: Use either the 'value' parameter or the 'values' parameter. Setting the 'values' parameter renders a multi-select dropdown.

      Static methods

      load

      def load(_Dropdown__d: Dict) ‑> Dropdown

      Creates an instance of this class using the contents of a dict.

      Instance variables

      var choices

      The choices to be presented.

      var disabled

      True if this field is disabled.

      var label

      Text to be displayed alongside the component.

      var name

      An identifying name for this component.

      var placeholder

      A string that provides a brief hint to the user as to what kind of information is expected in the field.

      var required

      True if this is a required field.

      var tooltip

      An optional tooltip message displayed when a user clicks the help icon to the right of the component.

      var trigger

      True if the form should be submitted when the dropdown value changes.

      var value

      The name of the selected choice.

      var values

      The names of the selected choices. If this parameter is set, multiple selections will be allowed.

      var visible

      True if the component should be visible. Defaults to true.

      Methods

      dump

      def dump(self) ‑> Dict

      Returns the contents of this object as a dict.

      Expander

      class Expander(name: str, label: Union[str, NoneType] = None, expanded: Union[bool, NoneType] = None, items: Union[List[ForwardRef('Component')], NoneType] = None, visible: Union[bool, NoneType] = None)

      Creates a new expander.

      Expanders can be used to show or hide a group of related components.

      Static methods

      load

      def load(_Expander__d: Dict) ‑> Expander

      Creates an instance of this class using the contents of a dict.

      Instance variables

      var expanded

      True if expanded, False if collapsed.

      var items

      List of components to be hideable by the expander.

      var label

      The text displayed on the expander.

      var name

      An identifying name for this component.

      var visible

      True if the component should be visible. Defaults to true.

      Methods

      dump

      def dump(self) ‑> Dict

      Returns the contents of this object as a dict.

      FileUpload

      class FileUpload(name: str, label: Union[str, NoneType] = None, multiple: Union[bool, NoneType] = None, file_extensions: Union[List[str], NoneType] = None, max_file_size: Union[float, NoneType] = None, max_size: Union[float, NoneType] = None, height: Union[str, NoneType] = None, visible: Union[bool, NoneType] = None, tooltip: Union[str, NoneType] = None)

      Create a file upload component. A file upload component allows a user to browse, select and upload one or more files.

      Static methods

      load

      def load(_FileUpload__d: Dict) ‑> FileUpload

      Creates an instance of this class using the contents of a dict.

      Instance variables

      var file_extensions

      List of allowed file extensions, e.g. pdf, docx, etc.

      var height

      The height of the file upload, e.g. '400px', '50%', etc.

      var label

      Text to be displayed alongside the component.

      var max_file_size

      Maximum allowed size (Mb) per file. Defaults to no limit.

      var max_size

      Maximum allowed size (Mb) for all files combined. Defaults to no limit.

      var multiple

      True if the component should allow multiple files to be uploaded.

      var name

      An identifying name for this component.

      var tooltip

      An optional tooltip message displayed when a user clicks the help icon to the right of the component.

      var visible

      True if the component should be visible. Defaults to true.

      Methods

      dump

      def dump(self) ‑> Dict

      Returns the contents of this object as a dict.

      FlexCard

      class FlexCard(box: str, item_view: str, item_props: Union[dict, str], data: Union[Data, str], direction: Union[str, NoneType] = None, justify: Union[str, NoneType] = None, align: Union[str, NoneType] = None, wrap: Union[str, NoneType] = None, commands: Union[List[Command], NoneType] = None)

      EXPERIMENTAL. DO NOT USE. Create a card containing other cards laid out using a one-dimensional model with flexible alignemnt and wrapping capabilities.

      Static methods

      load

      def load(_FlexCard__d: Dict) ‑> FlexCard

      Creates an instance of this class using the contents of a dict.

      Instance variables

      var align

      Layout strategy for cross axis. One of 'start', 'end', 'center', 'baseline', 'stretch'.

      var box

      A string indicating how to place this component on the page.

      var commands

      Contextual menu commands for this component.

      var data

      Data for this card.

      var direction

      Layout direction. One of 'horizontal', 'vertical'.

      var item_props

      The child card properties.

      var item_view

      The child card type.

      var justify

      Layout strategy for main axis. One of 'start', 'end', 'center', 'between', 'around'.

      var wrap

      Wrapping strategy. One of 'start', 'end', 'center', 'between', 'around', 'stretch'.

      Methods

      dump

      def dump(self) ‑> Dict

      Returns the contents of this object as a dict.

      FormCard

      class FormCard(box: str, items: Union[List[Component], str], commands: Union[List[Command], NoneType] = None)

      Create a form.

      Static methods

      load

      def load(_FormCard__d: Dict) ‑> FormCard

      Creates an instance of this class using the contents of a dict.

      Instance variables

      var box

      A string indicating how to place this component on the page.

      var commands

      Contextual menu commands for this component.

      var items

      The components in this form.

      Methods

      dump

      def dump(self) ‑> Dict

      Returns the contents of this object as a dict.

      Frame

      class Frame(path: Union[str, NoneType] = None, content: Union[str, NoneType] = None, width: Union[str, NoneType] = None, height: Union[str, NoneType] = None, name: Union[str, NoneType] = None, visible: Union[bool, NoneType] = None)

      Create a new inline frame (an iframe).

      Static methods

      load

      def load(_Frame__d: Dict) ‑> Frame

      Creates an instance of this class using the contents of a dict.

      Instance variables

      var content

      The HTML content of the page. A string containing <html>...</html>.

      var height

      The height of the frame, e.g. 200px, 50%, etc. Defaults to 150px.

      var name

      An identifying name for this component.

      var path

      The path or URL of the web page, e.g. /foo.html or http://example.com/foo.html

      var visible

      True if the component should be visible. Defaults to true.

      var width

      The width of the frame, e.g. 200px, 50%, etc. Defaults to 100%.

      Methods

      dump

      def dump(self) ‑> Dict

      Returns the contents of this object as a dict.

      FrameCard

      class FrameCard(box: str, title: str, path: Union[str, NoneType] = None, content: Union[str, NoneType] = None, commands: Union[List[Command], NoneType] = None)

      Render a card containing a HTML page inside an inline frame (an iframe).

      Either a path or content can be provided as arguments.

      Static methods

      load

      def load(_FrameCard__d: Dict) ‑> FrameCard

      Creates an instance of this class using the contents of a dict.

      Instance variables

      var box

      A string indicating how to place this component on the page.

      var commands

      Contextual menu commands for this component.

      var content

      The HTML content of the page. A string containing <html>...</html>

      var path

      The path or URL of the web page, e.g. /foo.html or http://example.com/foo.html

      var title

      The title for this card.

      Methods

      dump

      def dump(self) ‑> Dict

      Returns the contents of this object as a dict.

      GraphicsCard

      class GraphicsCard(box: str, view_box: str, stage: Union[List[dict], str, NoneType] = None, scene: Union[Data, str, NoneType] = None, width: Union[str, NoneType] = None, height: Union[str, NoneType] = None, commands: Union[List[Command], NoneType] = None)

      Create a card for displaying vector graphics.

      Static methods

      load

      def load(_GraphicsCard__d: Dict) ‑> GraphicsCard

      Creates an instance of this class using the contents of a dict.

      Instance variables

      var box

      A string indicating how to place this component on the page.

      var commands

      Contextual menu commands for this component.

      var height

      The displayed height of the rectangular viewport. (Not the height of its coordinate system.)

      var scene

      Foreground layer for rendering dynamic SVG elements.

      var stage

      Background layer for rendering static SVG elements. Must be packed to conserve memory.

      var view_box

      The position and dimension of the SVG viewport, in user space. A space-separated list of four numbers: min-x, min-y, width and height. For example, '0 0 400 300'. See: https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/viewBox

      var width

      The displayed width of the rectangular viewport. (Not the width of its coordinate system.)

      Methods

      dump

      def dump(self) ‑> Dict

      Returns the contents of this object as a dict.

      GridCard

      class GridCard(box: str, title: str, cells: Union[Data, str], data: Union[Data, str], commands: Union[List[Command], NoneType] = None)

      EXPERIMENTAL. DO NOT USE.

      Static methods

      load

      def load(_GridCard__d: Dict) ‑> GridCard

      Creates an instance of this class using the contents of a dict.

      Instance variables

      var box

      A string indicating how to place this component on the page.

      var cells

      EXPERIMENTAL. DO NOT USE.

      var commands

      Contextual menu commands for this component.

      var data

      EXPERIMENTAL. DO NOT USE.

      var title

      EXPERIMENTAL. DO NOT USE.

      Methods

      dump

      def dump(self) ‑> Dict

      Returns the contents of this object as a dict.

      HeaderCard

      class HeaderCard(box: str, title: str, subtitle: str, icon: Union[str, NoneType] = None, icon_color: Union[str, NoneType] = None, commands: Union[List[Command], NoneType] = None)

      Render a card containing a HTML page inside an inline frame (iframe).

      Either a path or content can be provided as arguments.

      Static methods

      load

      def load(_HeaderCard__d: Dict) ‑> HeaderCard

      Creates an instance of this class using the contents of a dict.

      Instance variables

      var box

      A string indicating how to place this component on the page.

      var commands

      Contextual menu commands for this component.

      var icon

      The icon type, displayed to the left.

      var icon_color

      The icon's color.

      var subtitle

      The subtitle, displayed below the title.

      var title

      The title.

      Methods

      dump

      def dump(self) ‑> Dict

      Returns the contents of this object as a dict.

      IconTableCellType

      class IconTableCellType(color: Union[str, NoneType] = None, name: Union[str, NoneType] = None)

      Create a cell type that renders a column's cells as icons instead of plain text. If set on a column, the cell value is interpreted as the name of the icon to be displayed.

      Static methods

      load

      def load(_IconTableCellType__d: Dict) ‑> IconTableCellType

      Creates an instance of this class using the contents of a dict.

      Instance variables

      var color

      Icon color.

      var name

      An identifying name for this component.

      Methods

      dump

      def dump(self) ‑> Dict

      Returns the contents of this object as a dict.

      ImageCard

      class ImageCard(box: str, title: str, type: str, image: str, data: Union[dict, str, NoneType] = None, commands: Union[List[Command], NoneType] = None)

      Create a card that displays a base64-encoded image.

      Static methods

      load

      def load(_ImageCard__d: Dict) ‑> ImageCard

      Creates an instance of this class using the contents of a dict.

      Instance variables

      var box

      A string indicating how to place this component on the page.

      var commands

      Contextual menu commands for this component.

      var data

      Data for this card.

      var image

      Image data, base64-encoded.

      var title

      The card's title.

      var type

      The image MIME subtype. One of apng, bmp, gif, x-icon, jpeg, png, webp.

      Methods

      dump

      def dump(self) ‑> Dict

      Returns the contents of this object as a dict.

      Label

      class Label(label: str, required: Union[bool, NoneType] = None, disabled: Union[bool, NoneType] = None, visible: Union[bool, NoneType] = None, tooltip: Union[str, NoneType] = None, name: Union[str, NoneType] = None)

      Create a label.

      Labels give a name or title to a component or group of components. Labels should be in close proximity to the component or group they are paired with. Some components, such as textboxes, dropdowns, or toggles, already have labels incorporated, but other components may optionally add a Label if it helps inform the user of the component’s purpose.

      Static methods

      load

      def load(_Label__d: Dict) ‑> Label

      Creates an instance of this class using the contents of a dict.

      Instance variables

      var disabled

      True if the label should be disabled.

      var label

      The text displayed on the label.

      var name

      An identifying name for this component.

      var required

      True if the field is required.

      var tooltip

      An optional tooltip message displayed when a user clicks the help icon to the right of the component.

      var visible

      True if the component should be visible. Defaults to true.

      Methods

      dump

      def dump(self) ‑> Dict

      Returns the contents of this object as a dict.

      LargeBarStatCard

      class LargeBarStatCard(box: str, title: str, caption: str, value: str, aux_value: str, value_caption: str, aux_value_caption: str, progress: float, plot_color: Union[str, NoneType] = None, data: Union[dict, str, NoneType] = None, commands: Union[List[Command], NoneType] = None)

      Create a large captioned card displaying a primary value, an auxiliary value and a progress bar, with captions for each value.

      Static methods

      load

      def load(_LargeBarStatCard__d: Dict) ‑> LargeBarStatCard

      Creates an instance of this class using the contents of a dict.

      Instance variables

      var aux_value

      The auxiliary value, typically a target value.

      var aux_value_caption

      The caption displayed below the auxiliary value.

      var box

      A string indicating how to place this component on the page.

      var caption

      The card's caption.

      var commands

      Contextual menu commands for this component.

      var data

      Data for this card.

      var plot_color

      The color of the progress bar.

      var progress

      The value of the progress bar, between 0 and 1.

      var title

      The card's title.

      var value

      The primary value displayed.

      var value_caption

      The caption displayed below the primary value.

      Methods

      dump

      def dump(self) ‑> Dict

      Returns the contents of this object as a dict.

      LargeStatCard

      class LargeStatCard(box: str, title: str, value: str, aux_value: str, caption: str, data: Union[dict, str, NoneType] = None, commands: Union[List[Command], NoneType] = None)

      Create a stat card displaying a primary value, an auxiliary value and a caption.

      Static methods

      load

      def load(_LargeStatCard__d: Dict) ‑> LargeStatCard

      Creates an instance of this class using the contents of a dict.

      Instance variables

      var aux_value

      The auxiliary value displayed next to the primary value.

      var box

      A string indicating how to place this component on the page.

      var caption

      The caption displayed below the primary value.

      var commands

      Contextual menu commands for this component.

      var data

      Data for this card.

      var title

      The card's title.

      var value

      The primary value displayed.

      Methods

      dump

      def dump(self) ‑> Dict

      Returns the contents of this object as a dict.

      Link

      class Link(label: Union[str, NoneType] = None, path: Union[str, NoneType] = None, disabled: Union[bool, NoneType] = None, download: Union[bool, NoneType] = None, button: Union[bool, NoneType] = None, visible: Union[bool, NoneType] = None, tooltip: Union[str, NoneType] = None, name: Union[str, NoneType] = None)

      Create a hyperlink.

      Hyperlinks can be internal or external. Internal hyperlinks have paths that begin with a / and point to URLs within the Q UI. All other kinds of paths are treated as external hyperlinks.

      Static methods

      load

      def load(_Link__d: Dict) ‑> Link

      Creates an instance of this class using the contents of a dict.

      Instance variables

      var button

      True if the link should be rendered as a button.

      var disabled

      True if the link should be disabled.

      var download

      True if the link should be used for file download.

      var label

      The text to be displayed. If blank, the path is used as the label.

      var name

      An identifying name for this component.

      var path

      The path or URL to link to.

      var tooltip

      An optional tooltip message displayed when a user clicks the help icon to the right of the component.

      var visible

      True if the component should be visible. Defaults to true.

      Methods

      dump

      def dump(self) ‑> Dict

      Returns the contents of this object as a dict.

      ListCard

      class ListCard(box: str, title: str, item_view: str, item_props: Union[dict, str], data: Union[Data, str], commands: Union[List[Command], NoneType] = None)

      EXPERIMENTAL. DO NOT USE. Create a card containing other cards laid out in the form of a list (vertically, top-to-bottom).

      Static methods

      load

      def load(_ListCard__d: Dict) ‑> ListCard

      Creates an instance of this class using the contents of a dict.

      Instance variables

      var box

      A string indicating how to place this component on the page.

      var commands

      Contextual menu commands for this component.

      var data

      Data for this card.

      var item_props

      The child card properties.

      var item_view

      The child card type.

      var title

      The title for this card.

      Methods

      dump

      def dump(self) ‑> Dict

      Returns the contents of this object as a dict.

      ListItem1Card

      class ListItem1Card(box: str, title: str, caption: str, value: str, aux_value: str, data: Union[dict, str], commands: Union[List[Command], NoneType] = None)

      EXPERIMENTAL. DO NOT USE.

      Static methods

      load

      def load(_ListItem1Card__d: Dict) ‑> ListItem1Card

      Creates an instance of this class using the contents of a dict.

      Instance variables

      var aux_value

      EXPERIMENTAL. DO NOT USE.

      var box

      A string indicating how to place this component on the page.

      var caption

      EXPERIMENTAL. DO NOT USE.

      var commands

      Contextual menu commands for this component.

      var data

      EXPERIMENTAL. DO NOT USE.

      var title

      EXPERIMENTAL. DO NOT USE.

      var value

      EXPERIMENTAL. DO NOT USE.

      Methods

      dump

      def dump(self) ‑> Dict

      Returns the contents of this object as a dict.

      Mark

      class Mark(coord: Union[str, NoneType] = None, type: Union[str, NoneType] = None, x: Union[str, float, int, NoneType] = None, x0: Union[str, float, int, NoneType] = None, x1: Union[str, float, int, NoneType] = None, x2: Union[str, float, int, NoneType] = None, x_min: Union[float, NoneType] = None, x_max: Union[float, NoneType] = None, x_nice: Union[bool, NoneType] = None, x_scale: Union[str, NoneType] = None, x_title: Union[str, NoneType] = None, y: Union[str, float, int, NoneType] = None, y0: Union[str, float, int, NoneType] = None, y1: Union[str, float, int, NoneType] = None, y2: Union[str, float, int, NoneType] = None, y_min: Union[float, NoneType] = None, y_max: Union[float, NoneType] = None, y_nice: Union[bool, NoneType] = None, y_scale: Union[str, NoneType] = None, y_title: Union[str, NoneType] = None, color: Union[str, NoneType] = None, color_range: Union[str, NoneType] = None, color_domain: Union[List[str], NoneType] = None, shape: Union[str, NoneType] = None, shape_range: Union[str, NoneType] = None, size: Union[str, float, int, NoneType] = None, size_range: Union[str, NoneType] = None, stack: Union[str, NoneType] = None, dodge: Union[str, NoneType] = None, curve: Union[str, NoneType] = None, fill_color: Union[str, NoneType] = None, fill_opacity: Union[float, NoneType] = None, stroke_color: Union[str, NoneType] = None, stroke_opacity: Union[float, NoneType] = None, stroke_size: Union[float, NoneType] = None, stroke_dash: Union[str, NoneType] = None, label: Union[str, NoneType] = None, label_offset: Union[float, NoneType] = None, label_offset_x: Union[float, NoneType] = None, label_offset_y: Union[float, NoneType] = None, label_rotation: Union[str, NoneType] = None, label_position: Union[str, NoneType] = None, label_overlap: Union[str, NoneType] = None, label_fill_color: Union[str, NoneType] = None, label_fill_opacity: Union[float, NoneType] = None, label_stroke_color: Union[str, NoneType] = None, label_stroke_opacity: Union[float, NoneType] = None, label_stroke_size: Union[float, NoneType] = None, label_font_size: Union[float, NoneType] = None, label_font_weight: Union[str, NoneType] = None, label_line_height: Union[float, NoneType] = None, label_align: Union[str, NoneType] = None, ref_stroke_color: Union[str, NoneType] = None, ref_stroke_opacity: Union[float, NoneType] = None, ref_stroke_size: Union[float, NoneType] = None, ref_stroke_dash: Union[str, NoneType] = None)

      Create a specification for a layer of graphical marks such as bars, lines, points for a plot. A plot can contain multiple such layers of marks.

      Static methods

      load

      def load(_Mark__d: Dict) ‑> Mark

      Creates an instance of this class using the contents of a dict.

      Instance variables

      var color

      Mark color field or value.

      var color_domain

      The unique values in the data (labels or categories or classes) to map colors to, e.g. ['high', 'medium', 'low']. If this is not provided, the unique values are automatically inferred from the color attribute.

      var color_range

      Mark color range for multi-series plots. A string containing space-separated colors, e.g. '#fee8c8 #fdbb84 #e34a33'

      var coord

      Coordinate system. rect is synonymous to cartesian. theta is transposed polar. One of 'rect', 'cartesian', 'polar', 'theta', 'helix'.

      var curve

      Curve type for line and area mark types. One of 'none', 'smooth', 'step-before', 'step', 'step-after'.

      var dodge

      Field to dodge marks by, or 'auto' to infer.

      var fill_color

      Mark fill color.

      var fill_opacity

      Mark fill opacity.

      var label

      Label field or value.

      var label_align

      Label text alignment. One of 'left', 'right', 'center', 'start', 'end'.

      var label_fill_color

      Label fill color.

      var label_fill_opacity

      Label fill opacity.

      var label_font_size

      Label font size.

      var label_font_weight

      Label font weight.

      var label_line_height

      Label line height.

      var label_offset

      Distance between label and mark.

      var label_offset_x

      Horizontal distance between label and mark.

      var label_offset_y

      Vertical distance between label and mark.

      var label_overlap

      Strategy to use if labels overlap. One of 'hide', 'overlap', 'constrain'.

      var label_position

      Label position relative to the mark. One of 'top', 'bottom', 'middle', 'left', 'right'.

      var label_rotation

      Label rotation angle, in degrees, or 'none' to disable automatic rotation. The default behavior is 'auto' for automatic rotation.

      var label_stroke_color

      Label stroke color.

      var label_stroke_opacity

      Label stroke opacity.

      var label_stroke_size

      Label stroke size (line width or pen thickness).

      var ref_stroke_color

      Reference line stroke color.

      var ref_stroke_dash

      Reference line stroke dash style. A string containing space-separated integers that specify distances to alternately draw a line and a gap (in coordinate space units). If the number of elements in the array is odd, the elements of the array get copied and concatenated. For example, [5, 15, 25] will become [5, 15, 25, 5, 15, 25].

      var ref_stroke_opacity

      Reference line stroke opacity.

      var ref_stroke_size

      Reference line stroke size (line width or pen thickness).

      var shape

      Mark shape field or value for point mark types. Possible values are 'circle', 'square', 'bowtie', 'diamond', 'hexagon', 'triangle', 'triangle-down', 'cross', 'tick', 'plus', 'hyphen', 'line'.

      var shape_range

      Mark shape range for multi-series plots using point mark types. A string containing space-separated shapes, e.g. 'circle square diamond'

      var size

      Mark size field or value.

      var size_range

      Mark size range. A string containing space-separated integers, e.g. '4 30'

      var stack

      Field to stack marks by, or 'auto' to infer.

      var stroke_color

      Mark stroke color.

      var stroke_dash

      Mark stroke dash style. A string containing space-separated integers that specify distances to alternately draw a line and a gap (in coordinate space units). If the number of elements in the array is odd, the elements of the array get copied and concatenated. For example, [5, 15, 25] will become [5, 15, 25, 5, 15, 25].

      var stroke_opacity

      Mark stroke opacity.

      var stroke_size

      Mark stroke size.

      var type

      Graphical geometry. One of 'interval', 'line', 'path', 'point', 'area', 'polygon', 'schema', 'edge', 'heatmap'.

      var x

      X field or value.

      var x0

      X base field or value.

      var x1

      X bin lower bound field or value. For histograms.

      var x2

      X bin upper bound field or value. For histograms.

      var x_max

      X axis scale maximum.

      var x_min

      X axis scale minimum.

      var x_nice

      Whether to nice X axis scale ticks.

      var x_scale

      X axis scale type. One of 'linear', 'cat', 'category', 'identity', 'log', 'pow', 'time', 'timeCat', 'quantize', 'quantile'.

      var x_title

      X axis title.

      var y

      Y field or value.

      var y0

      Y base field or value.

      var y1

      Y bin lower bound field or value. For histograms.

      var y2

      Y bin upper bound field or value. For histograms.

      var y_max

      Y axis scale maximum.

      var y_min

      Y axis scale minimum.

      var y_nice

      Whether to nice Y axis scale ticks.

      var y_scale

      Y axis scale type. One of 'linear', 'cat', 'category', 'identity', 'log', 'pow', 'time', 'timeCat', 'quantize', 'quantile'.

      var y_title

      Y axis title.

      Methods

      dump

      def dump(self) ‑> Dict

      Returns the contents of this object as a dict.

      MarkdownCard

      class MarkdownCard(box: str, title: str, content: str, data: Union[dict, str, NoneType] = None, commands: Union[List[Command], NoneType] = None)

      Create a card that renders Markdown content.

      Github-flavored markdown is supported. HTML markup is allowed in markdown content. URLs, if found, are displayed as hyperlinks. Copyright, reserved, trademark, quotes, etc. are replaced with language-neutral symbols.

      Static methods

      load

      def load(_MarkdownCard__d: Dict) ‑> MarkdownCard

      Creates an instance of this class using the contents of a dict.

      Instance variables

      var box

      A string indicating how to place this component on the page.

      var commands

      Contextual menu commands for this component.

      var content

      The markdown content. Supports Github Flavored Markdown (GFM): https://guides.github.com/features/mastering-markdown/

      var data

      Additional data for the card.

      var title

      The title for this card.

      Methods

      dump

      def dump(self) ‑> Dict

      Returns the contents of this object as a dict.

      Markup

      class Markup(content: str, name: Union[str, NoneType] = None, visible: Union[bool, NoneType] = None)

      Render HTML content.

      Static methods

      load

      def load(_Markup__d: Dict) ‑> Markup

      Creates an instance of this class using the contents of a dict.

      Instance variables

      var content

      The HTML content.

      var name

      An identifying name for this component.

      var visible

      True if the component should be visible. Defaults to true.

      Methods

      dump

      def dump(self) ‑> Dict

      Returns the contents of this object as a dict.

      MarkupCard

      class MarkupCard(box: str, title: str, content: str, commands: Union[List[Command], NoneType] = None)

      Render HTML content.

      Static methods

      load

      def load(_MarkupCard__d: Dict) ‑> MarkupCard

      Creates an instance of this class using the contents of a dict.

      Instance variables

      var box

      A string indicating how to place this component on the page.

      var commands

      Contextual menu commands for this component.

      var content

      The HTML content.

      var title

      The title for this card.

      Methods

      dump

      def dump(self) ‑> Dict

      Returns the contents of this object as a dict.

      MessageBar

      class MessageBar(type: Union[str, NoneType] = None, text: Union[str, NoneType] = None, name: Union[str, NoneType] = None, visible: Union[bool, NoneType] = None)

      Create a message bar.

      A message bar is an area at the top of a primary view that displays relevant status information. You can use a message bar to tell the user about a situation that does not require their immediate attention and therefore does not need to block other activities.

      Static methods

      load

      def load(_MessageBar__d: Dict) ‑> MessageBar

      Creates an instance of this class using the contents of a dict.

      Instance variables

      var name

      An identifying name for this component.

      var text

      The text displayed on the message bar.

      var type

      The icon and color of the message bar. One of 'info', 'error', 'warning', 'success', 'danger', 'blocked'.

      var visible

      True if the component should be visible. Defaults to true.

      Methods

      dump

      def dump(self) ‑> Dict

      Returns the contents of this object as a dict.

      MetaCard

      class MetaCard(box: str, title: Union[str, NoneType] = None, refresh: Union[int, NoneType] = None, notification: Union[str, NoneType] = None, redirect: Union[str, NoneType] = None, icon: Union[str, NoneType] = None, commands: Union[List[Command], NoneType] = None)

      Represents page-global state.

      This card is invisible. It is used to control attributes of the active page.

      Static methods

      load

      def load(_MetaCard__d: Dict) ‑> MetaCard

      Creates an instance of this class using the contents of a dict.

      Instance variables

      var box

      A string indicating how to place this component on the page.

      var commands

      Contextual menu commands for this component.

      var icon

      Shortcut icon path. Preferably a .png file (.ico files may not work in mobile browsers).

      var notification

      Display a desktop notification to the user.

      var redirect

      Redirect the page to a new URL.

      var refresh

      Refresh rate in seconds. A value of 0 turns off live-updates. Values != 0 are currently ignored (reserved for future use).

      var title

      The title of the page.

      Methods

      dump

      def dump(self) ‑> Dict

      Returns the contents of this object as a dict.

      NavCard

      class NavCard(box: str, items: List[NavGroup], commands: Union[List[Command], NoneType] = None)

      Create a card containing a navigation pane.

      Static methods

      load

      def load(_NavCard__d: Dict) ‑> NavCard

      Creates an instance of this class using the contents of a dict.

      Instance variables

      var box

      A string indicating how to place this component on the page.

      var commands

      Contextual menu commands for this component.

      var items

      The navigation groups contained in this pane.

      Methods

      dump

      def dump(self) ‑> Dict

      Returns the contents of this object as a dict.

      NavGroup

      class NavGroup(label: str, items: List[NavItem])

      Create a group of navigation items.

      Static methods

      load

      def load(_NavGroup__d: Dict) ‑> NavGroup

      Creates an instance of this class using the contents of a dict.

      Instance variables

      var items

      The navigation items contained in this group.

      var label

      The label to display for this group.

      Methods

      dump

      def dump(self) ‑> Dict

      Returns the contents of this object as a dict.

      NavItem

      class NavItem(name: str, label: str)

      Create a navigation item.

      Static methods

      load

      def load(_NavItem__d: Dict) ‑> NavItem

      Creates an instance of this class using the contents of a dict.

      Instance variables

      var label

      The label to display.

      var name

      The name of this item. Prefix the name with a '#' to trigger hash-change navigation.

      Methods

      dump

      def dump(self) ‑> Dict

      Returns the contents of this object as a dict.

      Picker

      class Picker(name: str, choices: List[Choice], label: Union[str, NoneType] = None, values: Union[List[str], NoneType] = None, max_choices: Union[int, NoneType] = None, disabled: Union[bool, NoneType] = None, visible: Union[bool, NoneType] = None, tooltip: Union[str, NoneType] = None)

      Create a picker. Pickers are used to select one or more choices, such as tags or files, from a list. Use a picker to allow the user to quickly search for or manage a few tags or files.

      Static methods

      load

      def load(_Picker__d: Dict) ‑> Picker

      Creates an instance of this class using the contents of a dict.

      Instance variables

      var choices

      The choices to be presented.

      var disabled

      Controls whether the picker should be disabled or not.

      var label

      Text to be displayed above the component.

      var max_choices

      Maximum number of selectable choices. Defaults to no limit.

      var name

      An identifying name for this component.

      var tooltip

      An optional tooltip message displayed when a user clicks the help icon to the right of the component.

      var values

      The names of the selected choices.

      var visible

      True if the component should be visible. Defaults to true.

      Methods

      dump

      def dump(self) ‑> Dict

      Returns the contents of this object as a dict.

      PixelArtCard

      class PixelArtCard(box: str, title: str, data: Union[dict, str], commands: Union[List[Command], NoneType] = None)

      Create a card displaying a collaborative Pixel art tool, just for kicks.

      Static methods

      load

      def load(_PixelArtCard__d: Dict) ‑> PixelArtCard

      Creates an instance of this class using the contents of a dict.

      Instance variables

      var box

      A string indicating how to place this component on the page.

      var commands

      Contextual menu commands for this component.

      var data

      The data for this card.

      var title

      The title for this card.

      Methods

      dump

      def dump(self) ‑> Dict

      Returns the contents of this object as a dict.

      Plot

      class Plot(marks: List[Mark])

      Create a plot. A plot is composed of one or more graphical mark layers.

      Static methods

      load

      def load(_Plot__d: Dict) ‑> Plot

      Creates an instance of this class using the contents of a dict.

      Instance variables

      var marks

      The graphical mark layers contained in this plot.

      Methods

      dump

      def dump(self) ‑> Dict

      Returns the contents of this object as a dict.

      PlotCard

      class PlotCard(box: str, title: str, data: Union[dict, str], plot: Plot, commands: Union[List[Command], NoneType] = None)

      Create a card displaying a plot.

      Static methods

      load

      def load(_PlotCard__d: Dict) ‑> PlotCard

      Creates an instance of this class using the contents of a dict.

      Instance variables

      var box

      A string indicating how to place this component on the page.

      var commands

      Contextual menu commands for this component.

      var data

      Data for this card.

      var plot

      The plot to be displayed in this card.

      var title

      The title for this card.

      Methods

      dump

      def dump(self) ‑> Dict

      Returns the contents of this object as a dict.

      Progress

      class Progress(label: str, caption: Union[str, NoneType] = None, value: Union[float, NoneType] = None, visible: Union[bool, NoneType] = None, tooltip: Union[str, NoneType] = None, name: Union[str, NoneType] = None)

      Create a progress bar.

      Progress bars are used to show the completion status of an operation lasting more than 2 seconds. If the state of progress cannot be determined, do not set a value. Progress bars feature a bar showing total units to completion, and total units finished. The label appears above the bar, and the caption appears below. The label should tell someone exactly what the operation is doing.

      Examples of formatting include: [Object] is being [operation name], or [Object] is being [operation name] to [destination name] or [Object] is being [operation name] from [source name] to [destination name]

      Status text is generally in units elapsed and total units. Real-world examples include copying files to a storage location, saving edits to a file, and more. Use units that are informative and relevant to give the best idea to users of how long the operation will take to complete. Avoid time units as they are rarely accurate enough to be trustworthy. Also, combine steps of a complex operation into one total bar to avoid “rewinding” the bar. Instead change the label to reflect the change if necessary. Bars moving backwards reduce confidence in the service.

      Static methods

      load

      def load(_Progress__d: Dict) ‑> Progress

      Creates an instance of this class using the contents of a dict.

      Instance variables

      var caption

      The text displayed below the bar.

      var label

      The text displayed above the bar.

      var name

      An identifying name for this component.

      var tooltip

      An optional tooltip message displayed when a user clicks the help icon to the right of the component.

      var value

      The progress, between 0.0 and 1.0, or -1 (default) if indeterminate.

      var visible

      True if the component should be visible. Defaults to true.

      Methods

      dump

      def dump(self) ‑> Dict

      Returns the contents of this object as a dict.

      ProgressTableCellType

      class ProgressTableCellType(color: Union[str, NoneType] = None, name: Union[str, NoneType] = None)

      Create a cell type that renders a column's cells as progress bars instead of plain text. If set on a column, the cell value must be between 0.0 and 1.0.

      Static methods

      load

      def load(_ProgressTableCellType__d: Dict) ‑> ProgressTableCellType

      Creates an instance of this class using the contents of a dict.

      Instance variables

      var color

      Color of the progress arc.

      var name

      An identifying name for this component.

      Methods

      dump

      def dump(self) ‑> Dict

      Returns the contents of this object as a dict.

      RangeSlider

      class RangeSlider(name: str, label: Union[str, NoneType] = None, min: Union[float, NoneType] = None, max: Union[float, NoneType] = None, step: Union[float, NoneType] = None, min_value: Union[float, NoneType] = None, max_value: Union[float, NoneType] = None, disabled: Union[bool, NoneType] = None, trigger: Union[bool, NoneType] = None, visible: Union[bool, NoneType] = None, tooltip: Union[str, NoneType] = None)

      Create a range slider.

      A range slider is an element used to select a value range. It provides a visual indication of adjustable content, as well as the current setting in the total range of content. It is displayed as a horizontal track with options on either side. Knobs or levers are dragged to one end or the other to make the choice, indicating the current max and min value.

      Static methods

      load

      def load(_RangeSlider__d: Dict) ‑> RangeSlider

      Creates an instance of this class using the contents of a dict.

      Instance variables

      var disabled

      True if this field is disabled.

      var label

      Text to be displayed alongside the component.

      var max

      The maximum value of the slider. Defaults to 100.

      var max_value

      The upper bound of the selected range.

      var min

      The minimum value of the slider. Defaults to 0.

      var min_value

      The lower bound of the selected range.

      var name

      An identifying name for this component.

      var step

      The difference between two adjacent values of the slider.

      var tooltip

      An optional tooltip message displayed when a user clicks the help icon to the right of the component.

      var trigger

      True if the form should be submitted when the slider value changes.

      var visible

      True if the component should be visible. Defaults to true.

      Methods

      dump

      def dump(self) ‑> Dict

      Returns the contents of this object as a dict.

      RepeatCard

      class RepeatCard(box: str, item_view: str, item_props: Union[dict, str], data: Union[Data, str], commands: Union[List[Command], NoneType] = None)

      EXPERIMENTAL. DO NOT USE. Create a card containing other cards.

      Static methods

      load

      def load(_RepeatCard__d: Dict) ‑> RepeatCard

      Creates an instance of this class using the contents of a dict.

      Instance variables

      var box

      A string indicating how to place this component on the page.

      var commands

      Contextual menu commands for this component.

      var data

      Data for this card.

      var item_props

      The child card properties.

      var item_view

      EXPERIMENTAL. DO NOT USE.

      Methods

      dump

      def dump(self) ‑> Dict

      Returns the contents of this object as a dict.

      Separator

      class Separator(label: Union[str, NoneType] = None, name: Union[str, NoneType] = None, visible: Union[bool, NoneType] = None)

      Create a separator.

      A separator visually separates content into groups.

      Static methods

      load

      def load(_Separator__d: Dict) ‑> Separator

      Creates an instance of this class using the contents of a dict.

      Instance variables

      var label

      The text displayed on the separator.

      var name

      An identifying name for this component.

      var visible

      True if the component should be visible. Defaults to true.

      Methods

      dump

      def dump(self) ‑> Dict

      Returns the contents of this object as a dict.

      Slider

      class Slider(name: str, label: Union[str, NoneType] = None, min: Union[float, NoneType] = None, max: Union[float, NoneType] = None, step: Union[float, NoneType] = None, value: Union[float, NoneType] = None, disabled: Union[bool, NoneType] = None, trigger: Union[bool, NoneType] = None, visible: Union[bool, NoneType] = None, tooltip: Union[str, NoneType] = None)

      Create a slider.

      A slider is an element used to set a value. It provides a visual indication of adjustable content, as well as the current setting in the total range of content. It is displayed as a horizontal track with options on either side. A knob or lever is dragged to one end or the other to make the choice, indicating the current value. Marks on the slider bar can show values and users can choose where they want to drag the knob or lever to set the value.

      A slider is a good choice when you know that users think of the value as a relative quantity, not a numeric value. For example, users think about setting their audio volume to low or medium — not about setting the value to two or five.

      The default value of the slider will be zero or be constrained to the min and max values. The min will be returned if the value is set under the min and the max will be returned if set higher than the max value.

      Static methods

      load

      def load(_Slider__d: Dict) ‑> Slider

      Creates an instance of this class using the contents of a dict.

      Instance variables

      var disabled

      True if this field is disabled.

      var label

      Text to be displayed alongside the component.

      var max

      The maximum value of the slider.

      var min

      The minimum value of the slider.

      var name

      An identifying name for this component.

      var step

      The difference between two adjacent values of the slider.

      var tooltip

      An optional tooltip message displayed when a user clicks the help icon to the right of the component.

      var trigger

      True if the form should be submitted when the slider value changes.

      var value

      The current value of the slider.

      var visible

      True if the component should be visible. Defaults to true.

      Methods

      dump

      def dump(self) ‑> Dict

      Returns the contents of this object as a dict.

      SmallSeriesStatCard

      class SmallSeriesStatCard(box: str, title: str, value: str, plot_data: Union[Data, str], plot_value: str, plot_zero_value: Union[float, NoneType] = None, plot_category: Union[str, NoneType] = None, plot_type: Union[str, NoneType] = None, plot_curve: Union[str, NoneType] = None, plot_color: Union[str, NoneType] = None, data: Union[dict, str, NoneType] = None, commands: Union[List[Command], NoneType] = None)

      Create a small stat card displaying a primary value and a series plot.

      Static methods

      load

      def load(_SmallSeriesStatCard__d: Dict) ‑> SmallSeriesStatCard

      Creates an instance of this class using the contents of a dict.

      Instance variables

      var box

      A string indicating how to place this component on the page.

      var commands

      Contextual menu commands for this component.

      var data

      Data for this card.

      var plot_category

      The data field to use for x-axis values (ignored if plot_type is area; must be provided if plot_type is interval). Defaults to 'x'.

      var plot_color

      The plot's color.

      var plot_curve

      The plot's curve style. Defaults to linear. One of 'linear', 'smooth', 'step', 'step-after', 'step-before'.

      var plot_data

      The plot's data.

      var plot_type

      The type of plot. Defaults to area. One of 'area', 'interval'.

      var plot_value

      The data field to use for y-axis values.

      var plot_zero_value

      The base value to use for each y-axis mark. Set this to 0 if you want to pin the x-axis at y=0. If not provided, the minimum value from the data is used.

      var title

      The card's title.

      var value

      The primary value displayed.

      Methods

      dump

      def dump(self) ‑> Dict

      Returns the contents of this object as a dict.

      SmallStatCard

      class SmallStatCard(box: str, title: str, value: str, data: Union[dict, str, NoneType] = None, commands: Union[List[Command], NoneType] = None)

      Create a stat card displaying a single value.

      Static methods

      load

      def load(_SmallStatCard__d: Dict) ‑> SmallStatCard

      Creates an instance of this class using the contents of a dict.

      Instance variables

      var box

      A string indicating how to place this component on the page.

      var commands

      Contextual menu commands for this component.

      var data

      Data for this card.

      var title

      The card's title.

      var value

      The primary value displayed.

      Methods

      dump

      def dump(self) ‑> Dict

      Returns the contents of this object as a dict.

      Spinbox

      class Spinbox(name: str, label: Union[str, NoneType] = None, min: Union[float, NoneType] = None, max: Union[float, NoneType] = None, step: Union[float, NoneType] = None, value: Union[float, NoneType] = None, disabled: Union[bool, NoneType] = None, visible: Union[bool, NoneType] = None, tooltip: Union[str, NoneType] = None)

      Create a spinbox.

      A spinbox allows the user to incrementally adjust a value in small steps. It is mainly used for numeric values, but other values are supported too.

      Static methods

      load

      def load(_Spinbox__d: Dict) ‑> Spinbox

      Creates an instance of this class using the contents of a dict.

      Instance variables

      var disabled

      True if this field is disabled.

      var label

      Text to be displayed alongside the component.

      var max

      The maximum value of the spinbox.

      var min

      The minimum value of the spinbox.

      var name

      An identifying name for this component.

      var step

      The difference between two adjacent values of the spinbox.

      var tooltip

      An optional tooltip message displayed when a user clicks the help icon to the right of the component.

      var value

      The current value of the spinbox.

      var visible

      True if the component should be visible. Defaults to true.

      Methods

      dump

      def dump(self) ‑> Dict

      Returns the contents of this object as a dict.

      Step

      class Step(label: str, icon: Union[str, NoneType] = None, done: Union[bool, NoneType] = None)

      Create a step for a stepper.

      Static methods

      load

      def load(_Step__d: Dict) ‑> Step

      Creates an instance of this class using the contents of a dict.

      Instance variables

      var done

      Indicates whether this step has already been completed.

      var icon

      Icon to be displayed.

      var label

      Text displayed below icon.

      Methods

      dump

      def dump(self) ‑> Dict

      Returns the contents of this object as a dict.

      Stepper

      class Stepper(name: str, items: List[Step], visible: Union[bool, NoneType] = None, tooltip: Union[str, NoneType] = None)

      Create a component that displays a sequence of steps in a process. The steps keep users informed about where they are in the process and how much is left to complete.

      Static methods

      load

      def load(_Stepper__d: Dict) ‑> Stepper

      Creates an instance of this class using the contents of a dict.

      Instance variables

      var items

      The sequence of steps to be displayed.

      var name

      An identifying name for this component.

      var tooltip

      An optional tooltip message displayed when a user clicks the help icon to the right of the component.

      var visible

      True if the component should be visible. Defaults to true.

      Methods

      dump

      def dump(self) ‑> Dict

      Returns the contents of this object as a dict.

      Tab

      class Tab(name: str, label: Union[str, NoneType] = None, icon: Union[str, NoneType] = None)

      Create a tab.

      Static methods

      load

      def load(_Tab__d: Dict) ‑> Tab

      Creates an instance of this class using the contents of a dict.

      Instance variables

      var icon

      The icon displayed on the tab.

      var label

      The text displayed on the tab.

      var name

      An identifying name for this component.

      Methods

      dump

      def dump(self) ‑> Dict

      Returns the contents of this object as a dict.

      TabCard

      class TabCard(box: str, items: List[Tab], value: Union[str, NoneType] = None, link: Union[bool, NoneType] = None, commands: Union[List[Command], NoneType] = None)

      Create a card containing tabs for navigation.

      Static methods

      load

      def load(_TabCard__d: Dict) ‑> TabCard

      Creates an instance of this class using the contents of a dict.

      Instance variables

      var box

      A string indicating how to place this component on the page.

      var commands

      Contextual menu commands for this component.

      var items

      Items to render.

      var link

      True if tabs should be rendered as links and not a standard tab.

      var value

      The name of the tab to select.

      Methods

      dump

      def dump(self) ‑> Dict

      Returns the contents of this object as a dict.

      Table

      class Table(name: str, columns: List[TableColumn], rows: List[TableRow], multiple: Union[bool, NoneType] = None, groupable: Union[bool, NoneType] = None, downloadable: Union[bool, NoneType] = None, resettable: Union[bool, NoneType] = None, height: Union[str, NoneType] = None, values: Union[List[str], NoneType] = None, visible: Union[bool, NoneType] = None, tooltip: Union[str, NoneType] = None)

      Create an interactive table.

      This table differs from a markdown table in that it supports clicking or selecting rows. If you simply want to display a non-interactive table of information, use a markdown table.

      If multiple is set to False (default), each row in the table is clickable. When a row is clicked, the form is submitted automatically, and q.args.table_name is set to [row_name], where table_name is the name of the table, and row_name is the name of the row that was clicked on.

      If multiple is set to True, each row in the table is selectable. A row can be selected by clicking on it. Multiple rows can be selected either by shift+clicking or using marquee selection. When the form is submitted,q.args.table_name is set to [row1_name, row2_name, …] where table_name is the name of the table, and row1_name, row2_name are the name of the rows that were selected. Note that if multiple is set to True, the form is not submitted automatically, and one or more buttons are required in the form to trigger submission.

      Static methods

      load

      def load(_Table__d: Dict) ‑> Table

      Creates an instance of this class using the contents of a dict.

      Instance variables

      var columns

      The columns in this table.

      var downloadable

      Indicates whether the contents of this table can be downloaded and saved as a CSV file. Defaults to False.

      var groupable

      True to allow group by feature.

      var height

      The height of the table, e.g. '400px', '50%', etc.

      var multiple

      True to allow multiple rows to be selected.

      var name

      An identifying name for this component.

      var resettable

      Indicates whether a Reset button should be displayed to reset search / filter / group-by values to their defaults. Defaults to False.

      var rows

      The rows in this table.

      var tooltip

      An optional tooltip message displayed when a user clicks the help icon to the right of the component.

      var values

      The names of the selected rows. If this parameter is set, multiple selections will be allowed (multiple is assumed to be True).

      var visible

      True if the component should be visible. Defaults to true.

      Methods

      dump

      def dump(self) ‑> Dict

      Returns the contents of this object as a dict.

      TableCellType

      class TableCellType(progress: Union[ProgressTableCellType, NoneType] = None, icon: Union[IconTableCellType, NoneType] = None)

      Defines cell content to be rendered instead of a simple text.

      Static methods

      load

      def load(_TableCellType__d: Dict) ‑> TableCellType

      Creates an instance of this class using the contents of a dict.

      Instance variables

      var icon

      No documentation available.

      var progress

      No documentation available.

      Methods

      dump

      def dump(self) ‑> Dict

      Returns the contents of this object as a dict.

      TableColumn

      class TableColumn(name: str, label: str, min_width: Union[str, NoneType] = None, max_width: Union[str, NoneType] = None, sortable: Union[bool, NoneType] = None, searchable: Union[bool, NoneType] = None, filterable: Union[bool, NoneType] = None, link: Union[bool, NoneType] = None, cell_type: Union[TableCellType, NoneType] = None)

      Create a table column.

      Static methods

      load

      def load(_TableColumn__d: Dict) ‑> TableColumn

      Creates an instance of this class using the contents of a dict.

      Instance variables

      var cell_type

      Defines how to render each cell in this column. Defaults to plain text.

      var filterable

      Indicates whether the contents of this column are displayed as filters in a dropdown.

      var label

      The text displayed on the column header.

      var link

      Indicates whether each cell in this column should be displayed as a clickable link.

      var max_width

      The maximum width of this column, e.g. '100px'. Only px units are supported at this time.

      var min_width

      The minimum width of this column, e.g. '50px'. Only px units are supported at this time.

      var name

      An identifying name for this column.

      var searchable

      Indicates whether the contents of this column can be searched through. Enables a search box for the table if true.

      var sortable

      Indicates whether the column is sortable.

      Methods

      dump

      def dump(self) ‑> Dict

      Returns the contents of this object as a dict.

      TableRow

      class TableRow(name: str, cells: List[str])

      Create a table row.

      Static methods

      load

      def load(_TableRow__d: Dict) ‑> TableRow

      Creates an instance of this class using the contents of a dict.

      Instance variables

      var cells

      The cells in this row (displayed left to right).

      var name

      An identifying name for this row.

      Methods

      dump

      def dump(self) ‑> Dict

      Returns the contents of this object as a dict.

      Tabs

      class Tabs(name: str, value: Union[str, NoneType] = None, items: Union[List[Tab], NoneType] = None, visible: Union[bool, NoneType] = None)

      Create a tab bar.

      Static methods

      load

      def load(_Tabs__d: Dict) ‑> Tabs

      Creates an instance of this class using the contents of a dict.

      Instance variables

      var items

      The tabs in this tab bar.

      var name

      An identifying name for this component.

      var value

      The name of the tab to select.

      var visible

      True if the component should be visible. Defaults to true.

      Methods

      dump

      def dump(self) ‑> Dict

      Returns the contents of this object as a dict.

      TallGaugeStatCard

      class TallGaugeStatCard(box: str, title: str, value: str, aux_value: str, progress: float, plot_color: Union[str, NoneType] = None, data: Union[dict, str, NoneType] = None, commands: Union[List[Command], NoneType] = None)

      Create a tall stat card displaying a primary value, an auxiliary value and a progress gauge.

      Static methods

      load

      def load(_TallGaugeStatCard__d: Dict) ‑> TallGaugeStatCard

      Creates an instance of this class using the contents of a dict.

      Instance variables

      var aux_value

      The auxiliary value displayed next to the primary value.

      var box

      A string indicating how to place this component on the page.

      var commands

      Contextual menu commands for this component.

      var data

      Data for this card.

      var plot_color

      The color of the progress gauge.

      var progress

      The value of the progress gauge, between 0 and 1.

      var title

      The card's title.

      var value

      The primary value displayed.

      Methods

      dump

      def dump(self) ‑> Dict

      Returns the contents of this object as a dict.

      TallSeriesStatCard

      class TallSeriesStatCard(box: str, title: str, value: str, aux_value: str, plot_data: Union[Data, str], plot_value: str, plot_zero_value: Union[float, NoneType] = None, plot_category: Union[str, NoneType] = None, plot_type: Union[str, NoneType] = None, plot_curve: Union[str, NoneType] = None, plot_color: Union[str, NoneType] = None, data: Union[dict, str, NoneType] = None, commands: Union[List[Command], NoneType] = None)

      Create a tall stat card displaying a primary value, an auxiliary value and a series plot.

      Static methods

      load

      def load(_TallSeriesStatCard__d: Dict) ‑> TallSeriesStatCard

      Creates an instance of this class using the contents of a dict.

      Instance variables

      var aux_value

      The auxiliary value displayed below the primary value.

      var box

      A string indicating how to place this component on the page.

      var commands

      Contextual menu commands for this component.

      var data

      Data for this card.

      var plot_category

      The data field to use for x-axis values (ignored if plot_type is area; must be provided if plot_type is interval). Defaults to 'x'.

      var plot_color

      The plot's color.

      var plot_curve

      The plot's curve style. Defaults to linear. One of 'linear', 'smooth', 'step', 'step-after', 'step-before'.

      var plot_data

      The plot's data.

      var plot_type

      The type of plot. Defaults to area. One of 'area', 'interval'.

      var plot_value

      The data field to use for y-axis values.

      var plot_zero_value

      The base value to use for each y-axis mark. Set this to 0 if you want to pin the x-axis at y=0. If not provided, the minimum value from the data is used.

      var title

      The card's title.

      var value

      The primary value displayed.

      Methods

      dump

      def dump(self) ‑> Dict

      Returns the contents of this object as a dict.

      Template

      class Template(content: str, data: Union[dict, str, NoneType] = None, name: Union[str, NoneType] = None, visible: Union[bool, NoneType] = None)

      Render dynamic content using an HTML template.

      Static methods

      load

      def load(_Template__d: Dict) ‑> Template

      Creates an instance of this class using the contents of a dict.

      Instance variables

      var content

      The Handlebars template. https://handlebarsjs.com/guide/

      var data

      Data for the Handlebars template

      var name

      An identifying name for this component.

      var visible

      True if the component should be visible. Defaults to true.

      Methods

      dump

      def dump(self) ‑> Dict

      Returns the contents of this object as a dict.

      TemplateCard

      class TemplateCard(box: str, title: str, content: str, data: Union[dict, str, NoneType] = None, commands: Union[List[Command], NoneType] = None)

      Render dynamic content using an HTML template.

      Static methods

      load

      def load(_TemplateCard__d: Dict) ‑> TemplateCard

      Creates an instance of this class using the contents of a dict.

      Instance variables

      var box

      A string indicating how to place this component on the page.

      var commands

      Contextual menu commands for this component.

      var content

      The Handlebars template. https://handlebarsjs.com/guide/

      var data

      Data for the Handlebars template.

      var title

      The title for this card.

      Methods

      dump

      def dump(self) ‑> Dict

      Returns the contents of this object as a dict.

      Text

      class Text(content: str, size: Union[str, NoneType] = None, visible: Union[bool, NoneType] = None, tooltip: Union[str, NoneType] = None, name: Union[str, NoneType] = None)

      Create text content.

      Static methods

      load

      def load(_Text__d: Dict) ‑> Text

      Creates an instance of this class using the contents of a dict.

      Instance variables

      var content

      The text content.

      var name

      An identifying name for this component.

      var size

      The font size of the text content. One of 'xl', 'l', 'm', 's', 'xs'.

      var tooltip

      Tooltip message.

      var visible

      True if the component should be visible. Defaults to true.

      Methods

      dump

      def dump(self) ‑> Dict

      Returns the contents of this object as a dict.

      TextL

      class TextL(content: str, visible: Union[bool, NoneType] = None, tooltip: Union[str, NoneType] = None, commands: Union[List[Command], NoneType] = None, name: Union[str, NoneType] = None)

      Create large sized text content.

      Static methods

      load

      def load(_TextL__d: Dict) ‑> TextL

      Creates an instance of this class using the contents of a dict.

      Instance variables

      var commands

      Contextual menu commands for this component.

      var content

      The text content.

      var name

      An identifying name for this component.

      var tooltip

      Tooltip message.

      var visible

      True if the component should be visible. Defaults to true.

      Methods

      dump

      def dump(self) ‑> Dict

      Returns the contents of this object as a dict.

      TextM

      class TextM(content: str, visible: Union[bool, NoneType] = None, tooltip: Union[str, NoneType] = None, name: Union[str, NoneType] = None)

      Create medium sized text content.

      Static methods

      load

      def load(_TextM__d: Dict) ‑> TextM

      Creates an instance of this class using the contents of a dict.

      Instance variables

      var content

      The text content.

      var name

      An identifying name for this component.

      var tooltip

      Tooltip message.

      var visible

      True if the component should be visible. Defaults to true.

      Methods

      dump

      def dump(self) ‑> Dict

      Returns the contents of this object as a dict.

      TextS

      class TextS(content: str, visible: Union[bool, NoneType] = None, tooltip: Union[str, NoneType] = None, name: Union[str, NoneType] = None)

      Create small sized text content.

      Static methods

      load

      def load(_TextS__d: Dict) ‑> TextS

      Creates an instance of this class using the contents of a dict.

      Instance variables

      var content

      The text content.

      var name

      An identifying name for this component.

      var tooltip

      Tooltip message.

      var visible

      True if the component should be visible. Defaults to true.

      Methods

      dump

      def dump(self) ‑> Dict

      Returns the contents of this object as a dict.

      TextXl

      class TextXl(content: str, visible: Union[bool, NoneType] = None, tooltip: Union[str, NoneType] = None, commands: Union[List[Command], NoneType] = None, name: Union[str, NoneType] = None)

      Create extra-large sized text content.

      Static methods

      load

      def load(_TextXl__d: Dict) ‑> TextXl

      Creates an instance of this class using the contents of a dict.

      Instance variables

      var commands

      Contextual menu commands for this component.

      var content

      The text content.

      var name

      An identifying name for this component.

      var tooltip

      Tooltip message.

      var visible

      True if the component should be visible. Defaults to true.

      Methods

      dump

      def dump(self) ‑> Dict

      Returns the contents of this object as a dict.

      TextXs

      class TextXs(content: str, visible: Union[bool, NoneType] = None, tooltip: Union[str, NoneType] = None, name: Union[str, NoneType] = None)

      Create extra-small sized text content.

      Static methods

      load

      def load(_TextXs__d: Dict) ‑> TextXs

      Creates an instance of this class using the contents of a dict.

      Instance variables

      var content

      The text content.

      var name

      An identifying name for this component.

      var tooltip

      Tooltip message.

      var visible

      True if the component should be visible. Defaults to true.

      Methods

      dump

      def dump(self) ‑> Dict

      Returns the contents of this object as a dict.

      Textbox

      class Textbox(name: str, label: Union[str, NoneType] = None, placeholder: Union[str, NoneType] = None, value: Union[str, NoneType] = None, mask: Union[str, NoneType] = None, icon: Union[str, NoneType] = None, prefix: Union[str, NoneType] = None, suffix: Union[str, NoneType] = None, error: Union[str, NoneType] = None, required: Union[bool, NoneType] = None, disabled: Union[bool, NoneType] = None, readonly: Union[bool, NoneType] = None, multiline: Union[bool, NoneType] = None, password: Union[bool, NoneType] = None, trigger: Union[bool, NoneType] = None, visible: Union[bool, NoneType] = None, tooltip: Union[str, NoneType] = None)

      Create a text box.

      The text box component enables a user to type text into an app. It's typically used to capture a single line of text, but can be configured to capture multiple lines of text. The text displays on the screen in a simple, uniform format.

      Static methods

      load

      def load(_Textbox__d: Dict) ‑> Textbox

      Creates an instance of this class using the contents of a dict.

      Instance variables

      var disabled

      True if the text box is disabled.

      var error

      Text to be displayed as an error below the text box.

      var icon

      Icon displayed in the far right end of the text field.

      var label

      The text displayed above the field.

      var mask

      The masking string that defines the mask's behavior. A backslash will escape any character. Special format characters are: '9': [0-9] 'a': [a-zA-Z] '*': [a-zA-Z0-9].

      var multiline

      True if the text box should allow multi-line text entry.

      var name

      An identifying name for this component.

      var password

      True if the text box should hide text content.

      var placeholder

      A string that provides a brief hint to the user as to what kind of information is expected in the field. It should be a word or short phrase that demonstrates the expected type of data, rather than an explanatory message.

      var prefix

      Text to be displayed before the text box contents.

      var readonly

      True if the text box is a read-only field.

      var required

      True if the text box is a required field.

      var suffix

      Text to be displayed after the text box contents.

      var tooltip

      An optional tooltip message displayed when a user clicks the help icon to the right of the component.

      var trigger

      True if the form should be submitted when the text value changes.

      var value

      Text to be displayed inside the text box.

      var visible

      True if the component should be visible. Defaults to true.

      Methods

      dump

      def dump(self) ‑> Dict

      Returns the contents of this object as a dict.

      Toggle

      class Toggle(name: str, label: Union[str, NoneType] = None, value: Union[bool, NoneType] = None, disabled: Union[bool, NoneType] = None, trigger: Union[bool, NoneType] = None, visible: Union[bool, NoneType] = None, tooltip: Union[str, NoneType] = None)

      Create a toggle. Toggles represent a physical switch that allows users to turn things on or off. Use toggles to present users with two mutually exclusive options (like on/off), where choosing an option results in an immediate action.

      Use a toggle for binary operations that take effect right after the user flips the Toggle. For example, use a Toggle to turn services or hardware components on or off. In other words, if a physical switch would work for the action, a Toggle is probably the best component to use.

      Static methods

      load

      def load(_Toggle__d: Dict) ‑> Toggle

      Creates an instance of this class using the contents of a dict.

      Instance variables

      var disabled

      True if the checkbox is disabled.

      var label

      Text to be displayed alongside the component.

      var name

      An identifying name for this component.

      var tooltip

      An optional tooltip message displayed when a user clicks the help icon to the right of the component.

      var trigger

      True if the form should be submitted when the toggle value changes.

      var value

      True if selected, False if unselected.

      var visible

      True if the component should be visible. Defaults to true.

      Methods

      dump

      def dump(self) ‑> Dict

      Returns the contents of this object as a dict.

      ToolbarCard

      class ToolbarCard(box: str, items: List[Command], secondary_items: Union[List[Command], NoneType] = None, overflow_items: Union[List[Command], NoneType] = None, commands: Union[List[Command], NoneType] = None)

      Create a card containing a toolbar.

      Static methods

      load

      def load(_ToolbarCard__d: Dict) ‑> ToolbarCard

      Creates an instance of this class using the contents of a dict.

      Instance variables

      var box

      A string indicating how to place this component on the page.

      var commands

      Contextual menu commands for this component.

      var items

      Items to render.

      var overflow_items

      Items to render in an overflow menu.

      var secondary_items

      Items to render on the right side (or left, in RTL).

      Methods

      dump

      def dump(self) ‑> Dict

      Returns the contents of this object as a dict.

      VegaCard

      class VegaCard(box: str, title: str, specification: str, data: Union[dict, str, NoneType] = None, commands: Union[List[Command], NoneType] = None)

      Create a card containing a Vega-lite plot.

      Static methods

      load

      def load(_VegaCard__d: Dict) ‑> VegaCard

      Creates an instance of this class using the contents of a dict.

      Instance variables

      var box

      A string indicating how to place this component on the page.

      var commands

      Contextual menu commands for this component.

      var data

      Data for the plot, if any.

      var specification

      The Vega-lite specification.

      var title

      The title of this card.

      Methods

      dump

      def dump(self) ‑> Dict

      Returns the contents of this object as a dict.

      VegaVisualization

      class VegaVisualization(specification: str, data: Union[dict, str, NoneType] = None, width: Union[str, NoneType] = None, height: Union[str, NoneType] = None, name: Union[str, NoneType] = None, visible: Union[bool, NoneType] = None)

      Create a Vega-lite plot for display inside a form.

      Static methods

      load

      def load(_VegaVisualization__d: Dict) ‑> VegaVisualization

      Creates an instance of this class using the contents of a dict.

      Instance variables

      var data

      Data for the plot, if any.

      var height

      The height of the visualization. Defaults to 300px.

      var name

      An identifying name for this component.

      var specification

      The Vega-lite specification.

      var visible

      True if the component should be visible. Defaults to true.

      var width

      The width of the visualization. Defaults to 100%.

      Methods

      dump

      def dump(self) ‑> Dict

      Returns the contents of this object as a dict.

      Visualization

      class Visualization(plot: Plot, data: Union[dict, str], width: Union[str, NoneType] = None, height: Union[str, NoneType] = None, name: Union[str, NoneType] = None, visible: Union[bool, NoneType] = None)

      Create a visualization for display inside a form.

      Static methods

      load

      def load(_Visualization__d: Dict) ‑> Visualization

      Creates an instance of this class using the contents of a dict.

      Instance variables

      var data

      Data for this visualization.

      var height

      The hight of the visualization. Defaults to 300px.

      var name

      An identifying name for this component.

      var plot

      The plot to be rendered in this visualization.

      var visible

      True if the component should be visible. Defaults to true.

      var width

      The width of the visualization. Defaults to 100%.

      Methods

      dump

      def dump(self) ‑> Dict

      Returns the contents of this object as a dict.

      WideBarStatCard

      class WideBarStatCard(box: str, title: str, value: str, aux_value: str, progress: float, plot_color: Union[str, NoneType] = None, data: Union[dict, str, NoneType] = None, commands: Union[List[Command], NoneType] = None)

      Create a wide stat card displaying a primary value, an auxiliary value and a progress bar.

      Static methods

      load

      def load(_WideBarStatCard__d: Dict) ‑> WideBarStatCard

      Creates an instance of this class using the contents of a dict.

      Instance variables

      var aux_value

      The auxiliary value displayed next to the primary value.

      var box

      A string indicating how to place this component on the page.

      var commands

      Contextual menu commands for this component.

      var data

      Data for this card.

      var plot_color

      The color of the progress bar.

      var progress

      The value of the progress bar, between 0 and 1.

      var title

      The card's title.

      var value

      The primary value displayed.

      Methods

      dump

      def dump(self) ‑> Dict

      Returns the contents of this object as a dict.

      WideGaugeStatCard

      class WideGaugeStatCard(box: str, title: str, value: str, aux_value: str, progress: float, plot_color: Union[str, NoneType] = None, data: Union[dict, str, NoneType] = None, commands: Union[List[Command], NoneType] = None)

      Create a wide stat card displaying a primary value, an auxiliary value and a progress gauge.

      Static methods

      load

      def load(_WideGaugeStatCard__d: Dict) ‑> WideGaugeStatCard

      Creates an instance of this class using the contents of a dict.

      Instance variables

      var aux_value

      The auxiliary value displayed next to the primary value.

      var box

      A string indicating how to place this component on the page.

      var commands

      Contextual menu commands for this component.

      var data

      Data for this card.

      var plot_color

      The color of the progress gauge.

      var progress

      The value of the progress gauge, between 0 and 1.

      var title

      The card's title.

      var value

      The primary value displayed.

      Methods

      dump

      def dump(self) ‑> Dict

      Returns the contents of this object as a dict.

      WideSeriesStatCard

      class WideSeriesStatCard(box: str, title: str, value: str, aux_value: str, plot_data: Union[Data, str], plot_value: str, plot_zero_value: Union[float, NoneType] = None, plot_category: Union[str, NoneType] = None, plot_type: Union[str, NoneType] = None, plot_curve: Union[str, NoneType] = None, plot_color: Union[str, NoneType] = None, data: Union[dict, str, NoneType] = None, commands: Union[List[Command], NoneType] = None)

      Create a wide stat card displaying a primary value, an auxiliary value and a series plot.

      Static methods

      load

      def load(_WideSeriesStatCard__d: Dict) ‑> WideSeriesStatCard

      Creates an instance of this class using the contents of a dict.

      Instance variables

      var aux_value

      The auxiliary value displayed below the primary value.

      var box

      A string indicating how to place this component on the page.

      var commands

      Contextual menu commands for this component.

      var data

      Data for this card.

      var plot_category

      The data field to use for x-axis values (ignored if plot_type is area; must be provided if plot_type is interval). Defaults to 'x'.

      var plot_color

      The plot's color.

      var plot_curve

      The plot's curve style. Defaults to linear. One of 'linear', 'smooth', 'step', 'step-after', 'step-before'.

      var plot_data

      The plot's data.

      var plot_type

      The type of plot. Defaults to area. One of 'area', 'interval'.

      var plot_value

      The data field to use for y-axis values.

      var plot_zero_value

      The base value to use for each y-axis mark. Set this to 0 if you want to pin the x-axis at y=0. If not provided, the minimum value from the data is used.

      var title

      The card's title.

      var value

      The primary value displayed.

      Methods

      dump

      def dump(self) ‑> Dict

      Returns the contents of this object as a dict.

      Edit this page
      + + + + + + + + + + \ No newline at end of file diff --git a/docs/docs/api/ui/index.html b/docs/docs/api/ui/index.html index 383292a897..45f9b1a2da 100644 --- a/docs/docs/api/ui/index.html +++ b/docs/docs/api/ui/index.html @@ -5,29 +5,29 @@ Module h2o_wave.ui | H2O Wave - - - - - - - - - - + + + + + + + + + +
      -

      Module h2o_wave.ui

      Functions

      breadcrumb

      def breadcrumb(name: str, label: str) ‑> Breadcrumb

      Create a breadcrumb for a BreadcrumbsCard.

      Args
      name
      The name of this item. Prefix the name with a '#' to trigger hash-change navigation.
      label
      The label to display.
      Returns

      A Breadcrumb instance.

      breadcrumbs_card

      def breadcrumbs_card(box: str, items: List[Breadcrumb], commands: Union[List[Command], NoneType] = None) ‑> BreadcrumbsCard

      Create a card containing breadcrumbs. Breadcrumbs should be used as a navigational aid in your app or site. They indicate the current page’s location within a hierarchy and help the user understand where they are in relation to the rest of that hierarchy. They also afford one-click access to higher levels of that hierarchy. Breadcrumbs are typically placed, in horizontal form, under the masthead or navigation of an experience, above the primary content area.

      Args
      box
      A string indicating how to place this component on the page.
      items
      A list of Breadcrumb instances to display. See breadcrumb()
      commands
      Contextual menu commands for this component.
      Returns

      A BreadcrumbsCard instance.

      button

      def button(name: str, label: Union[str, NoneType] = None, caption: Union[str, NoneType] = None, value: Union[str, NoneType] = None, primary: Union[bool, NoneType] = None, disabled: Union[bool, NoneType] = None, link: Union[bool, NoneType] = None, visible: Union[bool, NoneType] = None, tooltip: Union[str, NoneType] = None) ‑> Component

      Create a button.

      Buttons are best used to enable a user to commit a change or complete steps in a task. They are typically found inside forms, dialogs, panels or pages. An example of their usage is confirming the deletion of a file in a confirmation dialog.

      When considering their place in a layout, contemplate the order in which a user will flow through the UI. As an example, in a form, the individual will need to read and interact with the form fields before submitting the form. Therefore, as a general rule, the button should be placed at the bottom of the UI container which holds the related UI elements.

      Buttons may be placed within a "buttons" component which will lay out the buttons horizontally, or used individually and they will be stacked vertically.

      While buttons can technically be used to navigate a user to another part of the experience, this is not recommended unless that navigation is part of an action or their flow.

      Args
      name
      An identifying name for this component. If the name is prefixed with a '#', the button sets the location hash to the name when clicked.
      label
      The text displayed on the button.
      caption
      The caption displayed below the label. Setting a caption renders a compound button.
      value
      A value for this button. If a value is set, it is used for the button's submitted instead of a boolean True.
      primary
      True if the button should be rendered as the primary button in the set.
      disabled
      True if the button should be disabled.
      link
      True if the button should be rendered as link text and not a standard button.
      visible
      True if the component should be visible. Defaults to true.
      tooltip
      An optional tooltip message displayed when a user clicks the help icon to the right of the component.
      Returns

      A Button instance.

      buttons

      def buttons(items: List[Component], justify: Union[str, NoneType] = None, name: Union[str, NoneType] = None, visible: Union[bool, NoneType] = None) ‑> Component

      Create a set of buttons to be layed out horizontally.

      Args
      items
      The button in this set.
      justify
      Specifies how to lay out buttons horizontally. One of 'start', 'end', 'center', 'between', 'around'.
      name
      An identifying name for this component.
      visible
      True if the component should be visible. Defaults to true.
      Returns

      A Buttons instance.

      checkbox

      def checkbox(name: str, label: Union[str, NoneType] = None, value: Union[bool, NoneType] = None, indeterminate: Union[bool, NoneType] = None, disabled: Union[bool, NoneType] = None, trigger: Union[bool, NoneType] = None, visible: Union[bool, NoneType] = None, tooltip: Union[str, NoneType] = None) ‑> Component

      Create a checkbox.

      A checkbox allows users to switch between two mutually exclusive options (checked or unchecked, on or off) through a single click or tap. It can also be used to indicate a subordinate setting or preference when paired with another component.

      A checkbox is used to select or deselect action items. It can be used for a single item or for a list of multiple items that a user can choose from. The component has two selection states: unselected and selected.

      For a binary choice, the main difference between a checkbox and a toggle switch is that the checkbox is for status and the toggle switch is for action.

      Use multiple checkboxes for multi-select scenarios in which a user chooses one or more items from a group of choices that are not mutually exclusive.

      Args
      name
      An identifying name for this component.
      label
      Text to be displayed alongside the checkbox.
      value
      True if selected, False if unselected.
      indeterminate
      True if the selection is indeterminate (neither selected nor unselected).
      disabled
      True if the checkbox is disabled.
      trigger
      True if the form should be submitted when the checkbox value changes.
      visible
      True if the component should be visible. Defaults to true.
      tooltip
      An optional tooltip message displayed when a user clicks the help icon to the right of the component.
      Returns

      A Checkbox instance.

      checklist

      def checklist(name: str, label: Union[str, NoneType] = None, values: Union[List[str], NoneType] = None, choices: Union[List[Choice], NoneType] = None, trigger: Union[bool, NoneType] = None, visible: Union[bool, NoneType] = None, tooltip: Union[str, NoneType] = None) ‑> Component

      Create a set of checkboxes. Use this for multi-select scenarios in which a user chooses one or more items from a group of choices that are not mutually exclusive.

      Args
      name
      An identifying name for this component.
      label
      Text to be displayed above the component.
      values
      The names of the selected choices.
      choices
      The choices to be presented.
      trigger
      True if the form should be submitted when the checklist value changes.
      visible
      True if the component should be visible. Defaults to true.
      tooltip
      An optional tooltip message displayed when a user clicks the help icon to the right of the component.
      Returns

      A Checklist instance.

      choice

      def choice(name: str, label: Union[str, NoneType] = None, disabled: Union[bool, NoneType] = None) ‑> Choice

      Create a choice for a checklist, choice group or dropdown.

      Args
      name
      An identifying name for this component.
      label
      Text to be displayed alongside the component.
      disabled
      True if the checkbox is disabled.
      Returns

      A Choice instance.

      choice_group

      def choice_group(name: str, label: Union[str, NoneType] = None, value: Union[str, NoneType] = None, choices: Union[List[Choice], NoneType] = None, required: Union[bool, NoneType] = None, trigger: Union[bool, NoneType] = None, visible: Union[bool, NoneType] = None, tooltip: Union[str, NoneType] = None) ‑> Component

      Create a choice group. The choice group component, also known as radio buttons, let users select one option from two or more choices. Each option is represented by one choice group button; a user can select only one choice group in a button group.

      Choice groups emphasize all options equally, and that may draw more attention to the options than necessary. Consider using other components, unless the options deserve extra attention from the user. For example, if the default option is recommended for most users in most situations, use a dropdown instead.

      If there are only two mutually exclusive options, combine them into a single Checkbox or Toggle switch. For example, use a checkbox for "I agree" instead of choice group buttons for "I agree" and "I don't agree."

      Args
      name
      An identifying name for this component.
      label
      Text to be displayed alongside the component.
      value
      The name of the selected choice.
      choices
      The choices to be presented.
      required
      True if this field is required.
      trigger
      True if the form should be submitted when the selection changes.
      visible
      True if the component should be visible. Defaults to true.
      tooltip
      An optional tooltip message displayed when a user clicks the help icon to the right of the component.
      Returns

      A ChoiceGroup instance.

      color_picker

      def color_picker(name: str, label: Union[str, NoneType] = None, value: Union[str, NoneType] = None, choices: Union[List[str], NoneType] = None, visible: Union[bool, NoneType] = None, tooltip: Union[str, NoneType] = None) ‑> Component

      Create a color picker.

      A date picker allows a user to pick a color value. If the 'choices' parameter is set, a swatch picker is displayed instead of the standard color picker.

      Args
      name
      An identifying name for this component.
      label
      Text to be displayed alongside the component.
      value
      The selected color (CSS-compatible string)
      choices
      A list of colors (CSS-compatible strings) to limit color choices to.
      visible
      True if the component should be visible. Defaults to true.
      tooltip
      An optional tooltip message displayed when a user clicks the help icon to the right of the component.
      Returns

      A ColorPicker instance.

      combobox

      def combobox(name: str, label: Union[str, NoneType] = None, placeholder: Union[str, NoneType] = None, value: Union[str, NoneType] = None, choices: Union[List[str], NoneType] = None, error: Union[str, NoneType] = None, disabled: Union[bool, NoneType] = None, visible: Union[bool, NoneType] = None, tooltip: Union[str, NoneType] = None) ‑> Component

      Create a combobox.

      A combobox is a list in which the selected item is always visible, and the others are visible on demand by clicking a drop-down button or by typing in the input. They are used to simplify the design and make a choice within the UI.

      When closed, only the selected item is visible. When users click the drop-down button, all the options become visible. To change the value, users open the list and click another value or use the arrow keys (up and down) to select a new value. When collapsed the user can select a new value by typing.

      Args
      name
      An identifying name for this component.
      label
      Text to be displayed alongside the component.
      placeholder
      A string that provides a brief hint to the user as to what kind of information is expected in the field.
      value
      The name of the selected choice.
      choices
      The choices to be presented.
      error
      Text to be displayed as an error below the text box.
      disabled
      True if this field is disabled.
      visible
      True if the component should be visible. Defaults to true.
      tooltip
      An optional tooltip message displayed when a user clicks the help icon to the right of the component.
      Returns

      A Combobox instance.

      command

      def command(name: str, label: Union[str, NoneType] = None, caption: Union[str, NoneType] = None, icon: Union[str, NoneType] = None, items: Union[List[Command], NoneType] = None, data: Union[str, NoneType] = None) ‑> Command

      Create a command.

      Commands are typically displayed as context menu items or toolbar button.

      Args
      name
      An identifying name for this component. If the name is prefixed with a '#', the command sets the location hash to the name when executed.
      label
      The text displayed for this command.
      caption
      The caption for this command (typically a tooltip).
      icon
      The icon to be displayed for this command.
      items
      Sub-commands, if any
      data
      Data associated with this command, if any.
      Returns

      A Command instance.

      component

      def component(text: Union[Text, NoneType] = None, text_xl: Union[TextXl, NoneType] = None, text_l: Union[TextL, NoneType] = None, text_m: Union[TextM, NoneType] = None, text_s: Union[TextS, NoneType] = None, text_xs: Union[TextXs, NoneType] = None, label: Union[Label, NoneType] = None, separator: Union[Separator, NoneType] = None, progress: Union[Progress, NoneType] = None, message_bar: Union[MessageBar, NoneType] = None, textbox: Union[Textbox, NoneType] = None, checkbox: Union[Checkbox, NoneType] = None, toggle: Union[Toggle, NoneType] = None, choice_group: Union[ChoiceGroup, NoneType] = None, checklist: Union[Checklist, NoneType] = None, dropdown: Union[Dropdown, NoneType] = None, combobox: Union[Combobox, NoneType] = None, slider: Union[Slider, NoneType] = None, spinbox: Union[Spinbox, NoneType] = None, date_picker: Union[DatePicker, NoneType] = None, color_picker: Union[ColorPicker, NoneType] = None, button: Union[Button, NoneType] = None, buttons: Union[Buttons, NoneType] = None, file_upload: Union[FileUpload, NoneType] = None, table: Union[Table, NoneType] = None, link: Union[Link, NoneType] = None, tabs: Union[Tabs, NoneType] = None, expander: Union[Expander, NoneType] = None, frame: Union[Frame, NoneType] = None, markup: Union[Markup, NoneType] = None, template: Union[Template, NoneType] = None, picker: Union[Picker, NoneType] = None, range_slider: Union[RangeSlider, NoneType] = None, stepper: Union[Stepper, NoneType] = None, visualization: Union[Visualization, NoneType] = None, vega_visualization: Union[VegaVisualization, NoneType] = None) ‑> Component

      Create a component.

      Args
      text
      Text block.
      text_xl
      Extra-large sized text block.
      text_l
      Large sized text block.
      text_m
      Medium sized text block.
      text_s
      Small sized text block.
      text_xs
      Extra-small sized text block.
      label
      Label.
      separator
      Separator.
      progress
      Progress bar.
      message_bar
      Message bar.
      textbox
      Textbox.
      checkbox
      Checkbox.
      toggle
      Toggle.
      choice_group
      Choice group.
      checklist
      Checklist.
      dropdown
      Dropdown.
      combobox
      Combobox.
      slider
      Slider.
      spinbox
      Spinbox.
      date_picker
      Date picker.
      color_picker
      Color picker.
      button
      Button.
      buttons
      Button set.
      file_upload
      File upload.
      table
      Table.
      link
      Link.
      tabs
      Tabs.
      expander
      Expander.
      frame
      Frame.
      markup
      Markup
      template
      Template
      picker
      Picker.
      range_slider
      Range Slider.
      stepper
      Stepper.
      visualization
      Visualization.
      vega_visualization
      Vega-lite Visualization.
      Returns

      A Component instance.

      date_picker

      def date_picker(name: str, label: Union[str, NoneType] = None, placeholder: Union[str, NoneType] = None, value: Union[str, NoneType] = None, disabled: Union[bool, NoneType] = None, trigger: Union[bool, NoneType] = None, visible: Union[bool, NoneType] = None, tooltip: Union[str, NoneType] = None) ‑> Component

      Create a date picker.

      A date picker allows a user to pick a date value.

      Args
      name
      An identifying name for this component.
      label
      Text to be displayed alongside the component.
      placeholder
      A string that provides a brief hint to the user as to what kind of information is expected in the field.
      value
      The date value in YYYY-MM-DD format.
      disabled
      True if this field is disabled.
      trigger
      True if the form should be submitted when the datepicker value changes.
      visible
      True if the component should be visible. Defaults to true.
      tooltip
      An optional tooltip message displayed when a user clicks the help icon to the right of the component.
      Returns

      A DatePicker instance.

      dropdown

      def dropdown(name: str, label: Union[str, NoneType] = None, placeholder: Union[str, NoneType] = None, value: Union[str, NoneType] = None, values: Union[List[str], NoneType] = None, choices: Union[List[Choice], NoneType] = None, required: Union[bool, NoneType] = None, disabled: Union[bool, NoneType] = None, trigger: Union[bool, NoneType] = None, visible: Union[bool, NoneType] = None, tooltip: Union[str, NoneType] = None) ‑> Component

      Create a dropdown.

      A dropdown is a list in which the selected item is always visible, and the others are visible on demand by clicking a drop-down button. They are used to simplify the design and make a choice within the UI. When closed, only the selected item is visible. When users click the drop-down button, all the options become visible.

      To change the value, users open the list and click another value or use the arrow keys (up and down) to select a new value.

      Note: Use either the 'value' parameter or the 'values' parameter. Setting the 'values' parameter renders a multi-select dropdown.

      Args
      name
      An identifying name for this component.
      label
      Text to be displayed alongside the component.
      placeholder
      A string that provides a brief hint to the user as to what kind of information is expected in the field.
      value
      The name of the selected choice.
      values
      The names of the selected choices. If this parameter is set, multiple selections will be allowed.
      choices
      The choices to be presented.
      required
      True if this is a required field.
      disabled
      True if this field is disabled.
      trigger
      True if the form should be submitted when the dropdown value changes.
      visible
      True if the component should be visible. Defaults to true.
      tooltip
      An optional tooltip message displayed when a user clicks the help icon to the right of the component.
      Returns

      A Dropdown instance.

      expander

      def expander(name: str, label: Union[str, NoneType] = None, expanded: Union[bool, NoneType] = None, items: Union[List[Component], NoneType] = None, visible: Union[bool, NoneType] = None) ‑> Component

      Creates a new expander.

      Expanders can be used to show or hide a group of related components.

      Args
      name
      An identifying name for this component.
      label
      The text displayed on the expander.
      expanded
      True if expanded, False if collapsed.
      items
      List of components to be hideable by the expander.
      visible
      True if the component should be visible. Defaults to true.
      Returns

      A Expander instance.

      file_upload

      def file_upload(name: str, label: Union[str, NoneType] = None, multiple: Union[bool, NoneType] = None, file_extensions: Union[List[str], NoneType] = None, max_file_size: Union[float, NoneType] = None, max_size: Union[float, NoneType] = None, height: Union[str, NoneType] = None, visible: Union[bool, NoneType] = None, tooltip: Union[str, NoneType] = None) ‑> Component

      Create a file upload component. A file upload component allows a user to browse, select and upload one or more files.

      Args
      name
      An identifying name for this component.
      label
      Text to be displayed alongside the component.
      multiple
      True if the component should allow multiple files to be uploaded.
      file_extensions
      List of allowed file extensions, e.g. pdf, docx, etc.
      max_file_size
      Maximum allowed size (Mb) per file. Defaults to no limit.
      max_size
      Maximum allowed size (Mb) for all files combined. Defaults to no limit.
      height
      The height of the file upload, e.g. '400px', '50%', etc.
      visible
      True if the component should be visible. Defaults to true.
      tooltip
      An optional tooltip message displayed when a user clicks the help icon to the right of the component.
      Returns

      A FileUpload instance.

      flex_card

      def flex_card(box: str, item_view: str, item_props: Union[dict, str], data: Union[Data, str], direction: Union[str, NoneType] = None, justify: Union[str, NoneType] = None, align: Union[str, NoneType] = None, wrap: Union[str, NoneType] = None, commands: Union[List[Command], NoneType] = None) ‑> FlexCard

      EXPERIMENTAL. DO NOT USE. Create a card containing other cards laid out using a one-dimensional model with flexible alignemnt and wrapping capabilities.

      Args
      box
      A string indicating how to place this component on the page.
      item_view
      The child card type.
      item_props
      The child card properties.
      data
      Data for this card.
      direction
      Layout direction. One of 'horizontal', 'vertical'.
      justify
      Layout strategy for main axis. One of 'start', 'end', 'center', 'between', 'around'.
      align
      Layout strategy for cross axis. One of 'start', 'end', 'center', 'baseline', 'stretch'.
      wrap
      Wrapping strategy. One of 'start', 'end', 'center', 'between', 'around', 'stretch'.
      commands
      Contextual menu commands for this component.
      Returns

      A FlexCard instance.

      form_card

      def form_card(box: str, items: Union[List[Component], str], commands: Union[List[Command], NoneType] = None) ‑> FormCard

      Create a form.

      Args
      box
      A string indicating how to place this component on the page.
      items
      The components in this form.
      commands
      Contextual menu commands for this component.
      Returns

      A FormCard instance.

      frame

      def frame(path: Union[str, NoneType] = None, content: Union[str, NoneType] = None, width: Union[str, NoneType] = None, height: Union[str, NoneType] = None, name: Union[str, NoneType] = None, visible: Union[bool, NoneType] = None) ‑> Component

      Create a new inline frame (an iframe).

      Args
      path
      The path or URL of the web page, e.g. /foo.html or http://example.com/foo.html
      content
      The HTML content of the page. A string containing <html>...</html>.
      width
      The width of the frame, e.g. 200px, 50%, etc. Defaults to 100%.
      height
      The height of the frame, e.g. 200px, 50%, etc. Defaults to 150px.
      name
      An identifying name for this component.
      visible
      True if the component should be visible. Defaults to true.
      Returns

      A Frame instance.

      frame_card

      def frame_card(box: str, title: str, path: Union[str, NoneType] = None, content: Union[str, NoneType] = None, commands: Union[List[Command], NoneType] = None) ‑> FrameCard

      Render a card containing a HTML page inside an inline frame (an iframe).

      Either a path or content can be provided as arguments.

      Args
      box
      A string indicating how to place this component on the page.
      title
      The title for this card.
      path
      The path or URL of the web page, e.g. /foo.html or http://example.com/foo.html
      content
      The HTML content of the page. A string containing <html>...</html>
      commands
      Contextual menu commands for this component.
      Returns

      A FrameCard instance.

      graphics_card

      def graphics_card(box: str, view_box: str, stage: Union[List[dict], str, NoneType] = None, scene: Union[Data, str, NoneType] = None, width: Union[str, NoneType] = None, height: Union[str, NoneType] = None, commands: Union[List[Command], NoneType] = None) ‑> GraphicsCard

      Create a card for displaying vector graphics.

      Args
      box
      A string indicating how to place this component on the page.
      view_box
      The position and dimension of the SVG viewport, in user space. A space-separated list of four numbers: min-x, min-y, width and height. For example, '0 0 400 300'. See: https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/viewBox
      stage
      Background layer for rendering static SVG elements. Must be packed to conserve memory.
      scene
      Foreground layer for rendering dynamic SVG elements.
      width
      The displayed width of the rectangular viewport. (Not the width of its coordinate system.)
      height
      The displayed height of the rectangular viewport. (Not the height of its coordinate system.)
      commands
      Contextual menu commands for this component.
      Returns

      A GraphicsCard instance.

      grid_card

      def grid_card(box: str, title: str, cells: Union[Data, str], data: Union[Data, str], commands: Union[List[Command], NoneType] = None) ‑> GridCard

      EXPERIMENTAL. DO NOT USE.

      Args
      box
      A string indicating how to place this component on the page.
      title
      EXPERIMENTAL. DO NOT USE.
      cells
      EXPERIMENTAL. DO NOT USE.
      data
      EXPERIMENTAL. DO NOT USE.
      commands
      Contextual menu commands for this component.
      Returns

      A GridCard instance.

      header_card

      def header_card(box: str, title: str, subtitle: str, icon: Union[str, NoneType] = None, icon_color: Union[str, NoneType] = None, commands: Union[List[Command], NoneType] = None) ‑> HeaderCard

      Render a card containing a HTML page inside an inline frame (iframe).

      Either a path or content can be provided as arguments.

      Args
      box
      A string indicating how to place this component on the page.
      title
      The title.
      subtitle
      The subtitle, displayed below the title.
      icon
      The icon type, displayed to the left.
      icon_color
      The icon's color.
      commands
      Contextual menu commands for this component.
      Returns

      A HeaderCard instance.

      icon_table_cell_type

      def icon_table_cell_type(color: Union[str, NoneType] = None, name: Union[str, NoneType] = None) ‑> TableCellType

      Create a cell type that renders a column's cells as icons instead of plain text. If set on a column, the cell value is interpreted as the name of the icon to be displayed.

      Args
      color
      Icon color.
      name
      An identifying name for this component.
      Returns

      A IconTableCellType instance.

      image_card

      def image_card(box: str, title: str, type: str, image: str, data: Union[dict, str, NoneType] = None, commands: Union[List[Command], NoneType] = None) ‑> ImageCard

      Create a card that displays a base64-encoded image.

      Args
      box
      A string indicating how to place this component on the page.
      title
      The card's title.
      type
      The image MIME subtype. One of apng, bmp, gif, x-icon, jpeg, png, webp.
      image
      Image data, base64-encoded.
      data
      Data for this card.
      commands
      Contextual menu commands for this component.
      Returns

      A ImageCard instance.

      label

      def label(label: str, required: Union[bool, NoneType] = None, disabled: Union[bool, NoneType] = None, visible: Union[bool, NoneType] = None, tooltip: Union[str, NoneType] = None, name: Union[str, NoneType] = None) ‑> Component

      Create a label.

      Labels give a name or title to a component or group of components. Labels should be in close proximity to the component or group they are paired with. Some components, such as textboxes, dropdowns, or toggles, already have labels incorporated, but other components may optionally add a Label if it helps inform the user of the component’s purpose.

      Args
      label
      The text displayed on the label.
      required
      True if the field is required.
      disabled
      True if the label should be disabled.
      visible
      True if the component should be visible. Defaults to true.
      tooltip
      An optional tooltip message displayed when a user clicks the help icon to the right of the component.
      name
      An identifying name for this component.
      Returns

      A Label instance.

      large_bar_stat_card

      def large_bar_stat_card(box: str, title: str, caption: str, value: str, aux_value: str, value_caption: str, aux_value_caption: str, progress: float, plot_color: Union[str, NoneType] = None, data: Union[dict, str, NoneType] = None, commands: Union[List[Command], NoneType] = None) ‑> LargeBarStatCard

      Create a large captioned card displaying a primary value, an auxiliary value and a progress bar, with captions for each value.

      Args
      box
      A string indicating how to place this component on the page.
      title
      The card's title.
      caption
      The card's caption.
      value
      The primary value displayed.
      aux_value
      The auxiliary value, typically a target value.
      value_caption
      The caption displayed below the primary value.
      aux_value_caption
      The caption displayed below the auxiliary value.
      progress
      The value of the progress bar, between 0 and 1.
      plot_color
      The color of the progress bar.
      data
      Data for this card.
      commands
      Contextual menu commands for this component.
      Returns

      A LargeBarStatCard instance.

      large_stat_card

      def large_stat_card(box: str, title: str, value: str, aux_value: str, caption: str, data: Union[dict, str, NoneType] = None, commands: Union[List[Command], NoneType] = None) ‑> LargeStatCard

      Create a stat card displaying a primary value, an auxiliary value and a caption.

      Args
      box
      A string indicating how to place this component on the page.
      title
      The card's title.
      value
      The primary value displayed.
      aux_value
      The auxiliary value displayed next to the primary value.
      caption
      The caption displayed below the primary value.
      data
      Data for this card.
      commands
      Contextual menu commands for this component.
      Returns

      A LargeStatCard instance.

      link

      def link(label: Union[str, NoneType] = None, path: Union[str, NoneType] = None, disabled: Union[bool, NoneType] = None, download: Union[bool, NoneType] = None, button: Union[bool, NoneType] = None, visible: Union[bool, NoneType] = None, tooltip: Union[str, NoneType] = None, name: Union[str, NoneType] = None) ‑> Component

      Create a hyperlink.

      Hyperlinks can be internal or external. Internal hyperlinks have paths that begin with a / and point to URLs within the Q UI. All other kinds of paths are treated as external hyperlinks.

      Args
      label
      The text to be displayed. If blank, the path is used as the label.
      path
      The path or URL to link to.
      disabled
      True if the link should be disabled.
      download
      True if the link should be used for file download.
      button
      True if the link should be rendered as a button.
      visible
      True if the component should be visible. Defaults to true.
      tooltip
      An optional tooltip message displayed when a user clicks the help icon to the right of the component.
      name
      An identifying name for this component.
      Returns

      A Link instance.

      list_card

      def list_card(box: str, title: str, item_view: str, item_props: Union[dict, str], data: Union[Data, str], commands: Union[List[Command], NoneType] = None) ‑> ListCard

      EXPERIMENTAL. DO NOT USE. Create a card containing other cards laid out in the form of a list (vertically, top-to-bottom).

      Args
      box
      A string indicating how to place this component on the page.
      title
      The title for this card.
      item_view
      The child card type.
      item_props
      The child card properties.
      data
      Data for this card.
      commands
      Contextual menu commands for this component.
      Returns

      A ListCard instance.

      list_item1_card

      def list_item1_card(box: str, title: str, caption: str, value: str, aux_value: str, data: Union[dict, str], commands: Union[List[Command], NoneType] = None) ‑> ListItem1Card

      EXPERIMENTAL. DO NOT USE.

      Args
      box
      A string indicating how to place this component on the page.
      title
      EXPERIMENTAL. DO NOT USE.
      caption
      EXPERIMENTAL. DO NOT USE.
      value
      EXPERIMENTAL. DO NOT USE.
      aux_value
      EXPERIMENTAL. DO NOT USE.
      data
      EXPERIMENTAL. DO NOT USE.
      commands
      Contextual menu commands for this component.
      Returns

      A ListItem1Card instance.

      mark

      def mark(coord: Union[str, NoneType] = None, type: Union[str, NoneType] = None, x: Union[str, float, int, NoneType] = None, x0: Union[str, float, int, NoneType] = None, x1: Union[str, float, int, NoneType] = None, x2: Union[str, float, int, NoneType] = None, x_min: Union[float, NoneType] = None, x_max: Union[float, NoneType] = None, x_nice: Union[bool, NoneType] = None, x_scale: Union[str, NoneType] = None, x_title: Union[str, NoneType] = None, y: Union[str, float, int, NoneType] = None, y0: Union[str, float, int, NoneType] = None, y1: Union[str, float, int, NoneType] = None, y2: Union[str, float, int, NoneType] = None, y_min: Union[float, NoneType] = None, y_max: Union[float, NoneType] = None, y_nice: Union[bool, NoneType] = None, y_scale: Union[str, NoneType] = None, y_title: Union[str, NoneType] = None, color: Union[str, NoneType] = None, color_range: Union[str, NoneType] = None, color_domain: Union[List[str], NoneType] = None, shape: Union[str, NoneType] = None, shape_range: Union[str, NoneType] = None, size: Union[str, float, int, NoneType] = None, size_range: Union[str, NoneType] = None, stack: Union[str, NoneType] = None, dodge: Union[str, NoneType] = None, curve: Union[str, NoneType] = None, fill_color: Union[str, NoneType] = None, fill_opacity: Union[float, NoneType] = None, stroke_color: Union[str, NoneType] = None, stroke_opacity: Union[float, NoneType] = None, stroke_size: Union[float, NoneType] = None, stroke_dash: Union[str, NoneType] = None, label: Union[str, NoneType] = None, label_offset: Union[float, NoneType] = None, label_offset_x: Union[float, NoneType] = None, label_offset_y: Union[float, NoneType] = None, label_rotation: Union[str, NoneType] = None, label_position: Union[str, NoneType] = None, label_overlap: Union[str, NoneType] = None, label_fill_color: Union[str, NoneType] = None, label_fill_opacity: Union[float, NoneType] = None, label_stroke_color: Union[str, NoneType] = None, label_stroke_opacity: Union[float, NoneType] = None, label_stroke_size: Union[float, NoneType] = None, label_font_size: Union[float, NoneType] = None, label_font_weight: Union[str, NoneType] = None, label_line_height: Union[float, NoneType] = None, label_align: Union[str, NoneType] = None, ref_stroke_color: Union[str, NoneType] = None, ref_stroke_opacity: Union[float, NoneType] = None, ref_stroke_size: Union[float, NoneType] = None, ref_stroke_dash: Union[str, NoneType] = None) ‑> Mark

      Create a specification for a layer of graphical marks such as bars, lines, points for a plot. A plot can contain multiple such layers of marks.

      Args
      coord
      Coordinate system. rect is synonymous to cartesian. theta is transposed polar. One of 'rect', 'cartesian', 'polar', 'theta', 'helix'.
      type
      Graphical geometry. One of 'interval', 'line', 'path', 'point', 'area', 'polygon', 'schema', 'edge', 'heatmap'.
      x
      X field or value.
      x0
      X base field or value.
      x1
      X bin lower bound field or value. For histograms.
      x2
      X bin upper bound field or value. For histograms.
      x_min
      X axis scale minimum.
      x_max
      X axis scale maximum.
      x_nice
      Whether to nice X axis scale ticks.
      x_scale
      X axis scale type. One of 'linear', 'cat', 'category', 'identity', 'log', 'pow', 'time', 'timeCat', 'quantize', 'quantile'.
      x_title
      X axis title.
      y
      Y field or value.
      y0
      Y base field or value.
      y1
      Y bin lower bound field or value. For histograms.
      y2
      Y bin upper bound field or value. For histograms.
      y_min
      Y axis scale minimum.
      y_max
      Y axis scale maximum.
      y_nice
      Whether to nice Y axis scale ticks.
      y_scale
      Y axis scale type. One of 'linear', 'cat', 'category', 'identity', 'log', 'pow', 'time', 'timeCat', 'quantize', 'quantile'.
      y_title
      Y axis title.
      color
      Mark color field or value.
      color_range
      Mark color range for multi-series plots. A string containing space-separated colors, e.g. '#fee8c8 #fdbb84 #e34a33'
      color_domain
      The unique values in the data (labels or categories or classes) to map colors to, e.g. ['high', 'medium', 'low']. If this is not provided, the unique values are automatically inferred from the color attribute.
      shape
      Mark shape field or value for point mark types. Possible values are 'circle', 'square', 'bowtie', 'diamond', 'hexagon', 'triangle', 'triangle-down', 'cross', 'tick', 'plus', 'hyphen', 'line'.
      shape_range
      Mark shape range for multi-series plots using point mark types. A string containing space-separated shapes, e.g. 'circle square diamond'
      size
      Mark size field or value.
      size_range
      Mark size range. A string containing space-separated integers, e.g. '4 30'
      stack
      Field to stack marks by, or 'auto' to infer.
      dodge
      Field to dodge marks by, or 'auto' to infer.
      curve
      Curve type for line and area mark types. One of 'none', 'smooth', 'step-before', 'step', 'step-after'.
      fill_color
      Mark fill color.
      fill_opacity
      Mark fill opacity.
      stroke_color
      Mark stroke color.
      stroke_opacity
      Mark stroke opacity.
      stroke_size
      Mark stroke size.
      stroke_dash
      Mark stroke dash style. A string containing space-separated integers that specify distances to alternately draw a line and a gap (in coordinate space units). If the number of elements in the array is odd, the elements of the array get copied and concatenated. For example, [5, 15, 25] will become [5, 15, 25, 5, 15, 25].
      label
      Label field or value.
      label_offset
      Distance between label and mark.
      label_offset_x
      Horizontal distance between label and mark.
      label_offset_y
      Vertical distance between label and mark.
      label_rotation
      Label rotation angle, in degrees, or 'none' to disable automatic rotation. The default behavior is 'auto' for automatic rotation.
      label_position
      Label position relative to the mark. One of 'top', 'bottom', 'middle', 'left', 'right'.
      label_overlap
      Strategy to use if labels overlap. One of 'hide', 'overlap', 'constrain'.
      label_fill_color
      Label fill color.
      label_fill_opacity
      Label fill opacity.
      label_stroke_color
      Label stroke color.
      label_stroke_opacity
      Label stroke opacity.
      label_stroke_size
      Label stroke size (line width or pen thickness).
      label_font_size
      Label font size.
      label_font_weight
      Label font weight.
      label_line_height
      Label line height.
      label_align
      Label text alignment. One of 'left', 'right', 'center', 'start', 'end'.
      ref_stroke_color
      Reference line stroke color.
      ref_stroke_opacity
      Reference line stroke opacity.
      ref_stroke_size
      Reference line stroke size (line width or pen thickness).
      ref_stroke_dash
      Reference line stroke dash style. A string containing space-separated integers that specify distances to alternately draw a line and a gap (in coordinate space units). If the number of elements in the array is odd, the elements of the array get copied and concatenated. For example, [5, 15, 25] will become [5, 15, 25, 5, 15, 25].
      Returns

      A Mark instance.

      markdown_card

      def markdown_card(box: str, title: str, content: str, data: Union[dict, str, NoneType] = None, commands: Union[List[Command], NoneType] = None) ‑> MarkdownCard

      Create a card that renders Markdown content.

      Github-flavored markdown is supported. HTML markup is allowed in markdown content. URLs, if found, are displayed as hyperlinks. Copyright, reserved, trademark, quotes, etc. are replaced with language-neutral symbols.

      Args
      box
      A string indicating how to place this component on the page.
      title
      The title for this card.
      content
      The markdown content. Supports Github Flavored Markdown (GFM): https://guides.github.com/features/mastering-markdown/
      data
      Additional data for the card.
      commands
      Contextual menu commands for this component.
      Returns

      A MarkdownCard instance.

      markup

      def markup(content: str, name: Union[str, NoneType] = None, visible: Union[bool, NoneType] = None) ‑> Component

      Render HTML content.

      Args
      content
      The HTML content.
      name
      An identifying name for this component.
      visible
      True if the component should be visible. Defaults to true.
      Returns

      A Markup instance.

      markup_card

      def markup_card(box: str, title: str, content: str, commands: Union[List[Command], NoneType] = None) ‑> MarkupCard

      Render HTML content.

      Args
      box
      A string indicating how to place this component on the page.
      title
      The title for this card.
      content
      The HTML content.
      commands
      Contextual menu commands for this component.
      Returns

      A MarkupCard instance.

      message_bar

      def message_bar(type: Union[str, NoneType] = None, text: Union[str, NoneType] = None, name: Union[str, NoneType] = None, visible: Union[bool, NoneType] = None) ‑> Component

      Create a message bar.

      A message bar is an area at the top of a primary view that displays relevant status information. You can use a message bar to tell the user about a situation that does not require their immediate attention and therefore does not need to block other activities.

      Args
      type
      The icon and color of the message bar. One of 'info', 'error', 'warning', 'success', 'danger', 'blocked'.
      text
      The text displayed on the message bar.
      name
      An identifying name for this component.
      visible
      True if the component should be visible. Defaults to true.
      Returns

      A MessageBar instance.

      meta_card

      def meta_card(box: str, title: Union[str, NoneType] = None, refresh: Union[int, NoneType] = None, notification: Union[str, NoneType] = None, redirect: Union[str, NoneType] = None, commands: Union[List[Command], NoneType] = None) ‑> MetaCard

      Represents page-global state.

      This card is invisible. It is used to control attributes of the active page.

      Args
      box
      A string indicating how to place this component on the page.
      title
      The title of the page.
      refresh
      Refresh rate in seconds. A value of 0 turns off live-updates. Values != 0 are currently ignored (reserved for future use).
      notification
      Display a desktop notification to the user.
      redirect
      Redirect the page to a new URL.
      commands
      Contextual menu commands for this component.
      Returns

      A MetaCard instance.

      nav_card

      def nav_card(box: str, items: List[NavGroup], commands: Union[List[Command], NoneType] = None) ‑> NavCard

      Create a card containing a navigation pane.

      Args
      box
      A string indicating how to place this component on the page.
      items
      The navigation groups contained in this pane.
      commands
      Contextual menu commands for this component.
      Returns

      A NavCard instance.

      nav_group

      def nav_group(label: str, items: List[NavItem]) ‑> NavGroup

      Create a group of navigation items.

      Args
      label
      The label to display for this group.
      items
      The navigation items contained in this group.
      Returns

      A NavGroup instance.

      nav_item

      def nav_item(name: str, label: str) ‑> NavItem

      Create a navigation item.

      Args
      name
      The name of this item. Prefix the name with a '#' to trigger hash-change navigation.
      label
      The label to display.
      Returns

      A NavItem instance.

      picker

      def picker(name: str, choices: List[Choice], label: Union[str, NoneType] = None, values: Union[List[str], NoneType] = None, max_choices: Union[int, NoneType] = None, disabled: Union[bool, NoneType] = None, visible: Union[bool, NoneType] = None, tooltip: Union[str, NoneType] = None) ‑> Component

      Create a picker. Pickers are used to select one or more choices, such as tags or files, from a list. Use a picker to allow the user to quickly search for or manage a few tags or files.

      Args
      name
      An identifying name for this component.
      choices
      The choices to be presented.
      label
      Text to be displayed above the component.
      values
      The names of the selected choices.
      max_choices
      Maximum number of selectable choices. Defaults to no limit.
      disabled
      Controls whether the picker should be disabled or not.
      visible
      True if the component should be visible. Defaults to true.
      tooltip
      An optional tooltip message displayed when a user clicks the help icon to the right of the component.
      Returns

      A Picker instance.

      pixel_art_card

      def pixel_art_card(box: str, title: str, data: Union[dict, str], commands: Union[List[Command], NoneType] = None) ‑> PixelArtCard

      Create a card displaying a collaborative Pixel art tool, just for kicks.

      Args
      box
      A string indicating how to place this component on the page.
      title
      The title for this card.
      data
      The data for this card.
      commands
      Contextual menu commands for this component.
      Returns

      A PixelArtCard instance.

      plot

      def plot(marks: List[Mark]) ‑> Plot

      Create a plot. A plot is composed of one or more graphical mark layers.

      Args
      marks
      The graphical mark layers contained in this plot.
      Returns

      A Plot instance.

      plot_card

      def plot_card(box: str, title: str, data: Union[dict, str], plot: Plot, commands: Union[List[Command], NoneType] = None) ‑> PlotCard

      Create a card displaying a plot.

      Args
      box
      A string indicating how to place this component on the page.
      title
      The title for this card.
      data
      Data for this card.
      plot
      The plot to be displayed in this card.
      commands
      Contextual menu commands for this component.
      Returns

      A PlotCard instance.

      progress

      def progress(label: str, caption: Union[str, NoneType] = None, value: Union[float, NoneType] = None, visible: Union[bool, NoneType] = None, tooltip: Union[str, NoneType] = None, name: Union[str, NoneType] = None) ‑> Component

      Create a progress bar.

      Progress bars are used to show the completion status of an operation lasting more than 2 seconds. If the state of progress cannot be determined, do not set a value. Progress bars feature a bar showing total units to completion, and total units finished. The label appears above the bar, and the caption appears below. The label should tell someone exactly what the operation is doing.

      Examples of formatting include: [Object] is being [operation name], or [Object] is being [operation name] to [destination name] or [Object] is being [operation name] from [source name] to [destination name]

      Status text is generally in units elapsed and total units. Real-world examples include copying files to a storage location, saving edits to a file, and more. Use units that are informative and relevant to give the best idea to users of how long the operation will take to complete. Avoid time units as they are rarely accurate enough to be trustworthy. Also, combine steps of a complex operation into one total bar to avoid “rewinding” the bar. Instead change the label to reflect the change if necessary. Bars moving backwards reduce confidence in the service.

      Args
      label
      The text displayed above the bar.
      caption
      The text displayed below the bar.
      value
      The progress, between 0.0 and 1.0, or -1 (default) if indeterminate.
      visible
      True if the component should be visible. Defaults to true.
      tooltip
      An optional tooltip message displayed when a user clicks the help icon to the right of the component.
      name
      An identifying name for this component.
      Returns

      A Progress instance.

      progress_table_cell_type

      def progress_table_cell_type(color: Union[str, NoneType] = None, name: Union[str, NoneType] = None) ‑> TableCellType

      Create a cell type that renders a column's cells as progress bars instead of plain text. If set on a column, the cell value must be between 0.0 and 1.0.

      Args
      color
      Color of the progress arc.
      name
      An identifying name for this component.
      Returns

      A ProgressTableCellType instance.

      range_slider

      def range_slider(name: str, label: Union[str, NoneType] = None, min: Union[float, NoneType] = None, max: Union[float, NoneType] = None, step: Union[float, NoneType] = None, min_value: Union[float, NoneType] = None, max_value: Union[float, NoneType] = None, disabled: Union[bool, NoneType] = None, trigger: Union[bool, NoneType] = None, visible: Union[bool, NoneType] = None, tooltip: Union[str, NoneType] = None) ‑> Component

      Create a range slider.

      A range slider is an element used to select a value range. It provides a visual indication of adjustable content, as well as the current setting in the total range of content. It is displayed as a horizontal track with options on either side. Knobs or levers are dragged to one end or the other to make the choice, indicating the current max and min value.

      Args
      name
      An identifying name for this component.
      label
      Text to be displayed alongside the component.
      min
      The minimum value of the slider. Defaults to 0.
      max
      The maximum value of the slider. Defaults to 100.
      step
      The difference between two adjacent values of the slider.
      min_value
      The lower bound of the selected range.
      max_value
      The upper bound of the selected range.
      disabled
      True if this field is disabled.
      trigger
      True if the form should be submitted when the slider value changes.
      visible
      True if the component should be visible. Defaults to true.
      tooltip
      An optional tooltip message displayed when a user clicks the help icon to the right of the component.
      Returns

      A RangeSlider instance.

      repeat_card

      def repeat_card(box: str, item_view: str, item_props: Union[dict, str], data: Union[Data, str], commands: Union[List[Command], NoneType] = None) ‑> RepeatCard

      EXPERIMENTAL. DO NOT USE. Create a card containing other cards.

      Args
      box
      A string indicating how to place this component on the page.
      item_view
      EXPERIMENTAL. DO NOT USE.
      item_props
      The child card properties.
      data
      Data for this card.
      commands
      Contextual menu commands for this component.
      Returns

      A RepeatCard instance.

      separator

      def separator(label: Union[str, NoneType] = None, name: Union[str, NoneType] = None, visible: Union[bool, NoneType] = None) ‑> Component

      Create a separator.

      A separator visually separates content into groups.

      Args
      label
      The text displayed on the separator.
      name
      An identifying name for this component.
      visible
      True if the component should be visible. Defaults to true.
      Returns

      A Separator instance.

      slider

      def slider(name: str, label: Union[str, NoneType] = None, min: Union[float, NoneType] = None, max: Union[float, NoneType] = None, step: Union[float, NoneType] = None, value: Union[float, NoneType] = None, disabled: Union[bool, NoneType] = None, trigger: Union[bool, NoneType] = None, visible: Union[bool, NoneType] = None, tooltip: Union[str, NoneType] = None) ‑> Component

      Create a slider.

      A slider is an element used to set a value. It provides a visual indication of adjustable content, as well as the current setting in the total range of content. It is displayed as a horizontal track with options on either side. A knob or lever is dragged to one end or the other to make the choice, indicating the current value. Marks on the slider bar can show values and users can choose where they want to drag the knob or lever to set the value.

      A slider is a good choice when you know that users think of the value as a relative quantity, not a numeric value. For example, users think about setting their audio volume to low or medium — not about setting the value to two or five.

      The default value of the slider will be zero or be constrained to the min and max values. The min will be returned if the value is set under the min and the max will be returned if set higher than the max value.

      Args
      name
      An identifying name for this component.
      label
      Text to be displayed alongside the component.
      min
      The minimum value of the slider.
      max
      The maximum value of the slider.
      step
      The difference between two adjacent values of the slider.
      value
      The current value of the slider.
      disabled
      True if this field is disabled.
      trigger
      True if the form should be submitted when the slider value changes.
      visible
      True if the component should be visible. Defaults to true.
      tooltip
      An optional tooltip message displayed when a user clicks the help icon to the right of the component.
      Returns

      A Slider instance.

      small_series_stat_card

      def small_series_stat_card(box: str, title: str, value: str, plot_data: Union[Data, str], plot_value: str, plot_zero_value: Union[float, NoneType] = None, plot_category: Union[str, NoneType] = None, plot_type: Union[str, NoneType] = None, plot_curve: Union[str, NoneType] = None, plot_color: Union[str, NoneType] = None, data: Union[dict, str, NoneType] = None, commands: Union[List[Command], NoneType] = None) ‑> SmallSeriesStatCard

      Create a small stat card displaying a primary value and a series plot.

      Args
      box
      A string indicating how to place this component on the page.
      title
      The card's title.
      value
      The primary value displayed.
      plot_data
      The plot's data.
      plot_value
      The data field to use for y-axis values.
      plot_zero_value
      The base value to use for each y-axis mark. Set this to 0 if you want to pin the x-axis at y=0. If not provided, the minimum value from the data is used.
      plot_category
      The data field to use for x-axis values (ignored if plot_type is area; must be provided if plot_type is interval). Defaults to 'x'.
      plot_type
      The type of plot. Defaults to area. One of 'area', 'interval'.
      plot_curve
      The plot's curve style. Defaults to linear. One of 'linear', 'smooth', 'step', 'step-after', 'step-before'.
      plot_color
      The plot's color.
      data
      Data for this card.
      commands
      Contextual menu commands for this component.
      Returns

      A SmallSeriesStatCard instance.

      small_stat_card

      def small_stat_card(box: str, title: str, value: str, data: Union[dict, str, NoneType] = None, commands: Union[List[Command], NoneType] = None) ‑> SmallStatCard

      Create a stat card displaying a single value.

      Args
      box
      A string indicating how to place this component on the page.
      title
      The card's title.
      value
      The primary value displayed.
      data
      Data for this card.
      commands
      Contextual menu commands for this component.
      Returns

      A SmallStatCard instance.

      spinbox

      def spinbox(name: str, label: Union[str, NoneType] = None, min: Union[float, NoneType] = None, max: Union[float, NoneType] = None, step: Union[float, NoneType] = None, value: Union[float, NoneType] = None, disabled: Union[bool, NoneType] = None, visible: Union[bool, NoneType] = None, tooltip: Union[str, NoneType] = None) ‑> Component

      Create a spinbox.

      A spinbox allows the user to incrementally adjust a value in small steps. It is mainly used for numeric values, but other values are supported too.

      Args
      name
      An identifying name for this component.
      label
      Text to be displayed alongside the component.
      min
      The minimum value of the spinbox.
      max
      The maximum value of the spinbox.
      step
      The difference between two adjacent values of the spinbox.
      value
      The current value of the spinbox.
      disabled
      True if this field is disabled.
      visible
      True if the component should be visible. Defaults to true.
      tooltip
      An optional tooltip message displayed when a user clicks the help icon to the right of the component.
      Returns

      A Spinbox instance.

      step

      def step(label: str, icon: Union[str, NoneType] = None, done: Union[bool, NoneType] = None) ‑> Step

      Create a step for a stepper.

      Args
      label
      Text displayed below icon.
      icon
      Icon to be displayed.
      done
      Indicates whether this step has already been completed.
      Returns

      A Step instance.

      stepper

      def stepper(name: str, items: List[Step], visible: Union[bool, NoneType] = None, tooltip: Union[str, NoneType] = None) ‑> Component

      Create a component that displays a sequence of steps in a process. The steps keep users informed about where they are in the process and how much is left to complete.

      Args
      name
      An identifying name for this component.
      items
      The sequence of steps to be displayed.
      visible
      True if the component should be visible. Defaults to true.
      tooltip
      An optional tooltip message displayed when a user clicks the help icon to the right of the component.
      Returns

      A Stepper instance.

      tab

      def tab(name: str, label: Union[str, NoneType] = None, icon: Union[str, NoneType] = None) ‑> Tab

      Create a tab.

      Args
      name
      An identifying name for this component.
      label
      The text displayed on the tab.
      icon
      The icon displayed on the tab.
      Returns

      A Tab instance.

      tab_card

      def tab_card(box: str, items: List[Tab], value: Union[str, NoneType] = None, link: Union[bool, NoneType] = None, commands: Union[List[Command], NoneType] = None) ‑> TabCard

      Create a card containing tabs for navigation.

      Args
      box
      A string indicating how to place this component on the page.
      items
      Items to render.
      value
      The name of the tab to select.
      link
      True if tabs should be rendered as links and not a standard tab.
      commands
      Contextual menu commands for this component.
      Returns

      A TabCard instance.

      table

      def table(name: str, columns: List[TableColumn], rows: List[TableRow], multiple: Union[bool, NoneType] = None, groupable: Union[bool, NoneType] = None, downloadable: Union[bool, NoneType] = None, resettable: Union[bool, NoneType] = None, height: Union[str, NoneType] = None, values: Union[List[str], NoneType] = None, visible: Union[bool, NoneType] = None, tooltip: Union[str, NoneType] = None) ‑> Component

      Create an interactive table.

      This table differs from a markdown table in that it supports clicking or selecting rows. If you simply want to display a non-interactive table of information, use a markdown table.

      If multiple is set to False (default), each row in the table is clickable. When a row is clicked, the form is submitted automatically, and q.args.table_name is set to [row_name], where table_name is the name of the table, and row_name is the name of the row that was clicked on.

      If multiple is set to True, each row in the table is selectable. A row can be selected by clicking on it. Multiple rows can be selected either by shift+clicking or using marquee selection. When the form is submitted,q.args.table_name is set to [row1_name, row2_name, …] where table_name is the name of the table, and row1_name, row2_name are the name of the rows that were selected. Note that if multiple is set to True, the form is not submitted automatically, and one or more buttons are required in the form to trigger submission.

      Args
      name
      An identifying name for this component.
      columns
      The columns in this table.
      rows
      The rows in this table.
      multiple
      True to allow multiple rows to be selected.
      groupable
      True to allow group by feature.
      downloadable
      Indicates whether the contents of this table can be downloaded and saved as a CSV file. Defaults to False.
      resettable
      Indicates whether a Reset button should be displayed to reset search / filter / group-by values to their defaults. Defaults to False.
      height
      The height of the table, e.g. '400px', '50%', etc.
      values
      The names of the selected rows. If this parameter is set, multiple selections will be allowed (multiple is assumed to be True).
      visible
      True if the component should be visible. Defaults to true.
      tooltip
      An optional tooltip message displayed when a user clicks the help icon to the right of the component.
      Returns

      A Table instance.

      table_cell_type

      def table_cell_type(progress: Union[ProgressTableCellType, NoneType] = None, icon: Union[IconTableCellType, NoneType] = None) ‑> TableCellType

      Defines cell content to be rendered instead of a simple text.

      Args
      progress
      No documentation available.
      icon
      No documentation available.
      Returns

      A TableCellType instance.

      table_column

      def table_column(name: str, label: str, min_width: Union[str, NoneType] = None, max_width: Union[str, NoneType] = None, sortable: Union[bool, NoneType] = None, searchable: Union[bool, NoneType] = None, filterable: Union[bool, NoneType] = None, link: Union[bool, NoneType] = None, cell_type: Union[TableCellType, NoneType] = None) ‑> TableColumn

      Create a table column.

      Args
      name
      An identifying name for this column.
      label
      The text displayed on the column header.
      min_width
      The minimum width of this column, e.g. '50px'. Only px units are supported at this time.
      max_width
      The maximum width of this column, e.g. '100px'. Only px units are supported at this time.
      sortable
      Indicates whether the column is sortable.
      searchable
      Indicates whether the contents of this column can be searched through. Enables a search box for the table if true.
      filterable
      Indicates whether the contents of this column are displayed as filters in a dropdown.
      link
      Indicates whether each cell in this column should be displayed as a clickable link.
      cell_type
      Defines how to render each cell in this column. Defaults to plain text.
      Returns

      A TableColumn instance.

      table_row

      def table_row(name: str, cells: List[str]) ‑> TableRow

      Create a table row.

      Args
      name
      An identifying name for this row.
      cells
      The cells in this row (displayed left to right).
      Returns

      A TableRow instance.

      tabs

      def tabs(name: str, value: Union[str, NoneType] = None, items: Union[List[Tab], NoneType] = None, visible: Union[bool, NoneType] = None) ‑> Component

      Create a tab bar.

      Args
      name
      An identifying name for this component.
      value
      The name of the tab to select.
      items
      The tabs in this tab bar.
      visible
      True if the component should be visible. Defaults to true.
      Returns

      A Tabs instance.

      tall_gauge_stat_card

      def tall_gauge_stat_card(box: str, title: str, value: str, aux_value: str, progress: float, plot_color: Union[str, NoneType] = None, data: Union[dict, str, NoneType] = None, commands: Union[List[Command], NoneType] = None) ‑> TallGaugeStatCard

      Create a tall stat card displaying a primary value, an auxiliary value and a progress gauge.

      Args
      box
      A string indicating how to place this component on the page.
      title
      The card's title.
      value
      The primary value displayed.
      aux_value
      The auxiliary value displayed next to the primary value.
      progress
      The value of the progress gauge, between 0 and 1.
      plot_color
      The color of the progress gauge.
      data
      Data for this card.
      commands
      Contextual menu commands for this component.
      Returns

      A TallGaugeStatCard instance.

      tall_series_stat_card

      def tall_series_stat_card(box: str, title: str, value: str, aux_value: str, plot_data: Union[Data, str], plot_value: str, plot_zero_value: Union[float, NoneType] = None, plot_category: Union[str, NoneType] = None, plot_type: Union[str, NoneType] = None, plot_curve: Union[str, NoneType] = None, plot_color: Union[str, NoneType] = None, data: Union[dict, str, NoneType] = None, commands: Union[List[Command], NoneType] = None) ‑> TallSeriesStatCard

      Create a tall stat card displaying a primary value, an auxiliary value and a series plot.

      Args
      box
      A string indicating how to place this component on the page.
      title
      The card's title.
      value
      The primary value displayed.
      aux_value
      The auxiliary value displayed below the primary value.
      plot_data
      The plot's data.
      plot_value
      The data field to use for y-axis values.
      plot_zero_value
      The base value to use for each y-axis mark. Set this to 0 if you want to pin the x-axis at y=0. If not provided, the minimum value from the data is used.
      plot_category
      The data field to use for x-axis values (ignored if plot_type is area; must be provided if plot_type is interval). Defaults to 'x'.
      plot_type
      The type of plot. Defaults to area. One of 'area', 'interval'.
      plot_curve
      The plot's curve style. Defaults to linear. One of 'linear', 'smooth', 'step', 'step-after', 'step-before'.
      plot_color
      The plot's color.
      data
      Data for this card.
      commands
      Contextual menu commands for this component.
      Returns

      A TallSeriesStatCard instance.

      template

      def template(content: str, data: Union[dict, str, NoneType] = None, name: Union[str, NoneType] = None, visible: Union[bool, NoneType] = None) ‑> Component

      Render dynamic content using an HTML template.

      Args
      content
      The Handlebars template. https://handlebarsjs.com/guide/
      data
      Data for the Handlebars template
      name
      An identifying name for this component.
      visible
      True if the component should be visible. Defaults to true.
      Returns

      A Template instance.

      template_card

      def template_card(box: str, title: str, content: str, data: Union[dict, str, NoneType] = None, commands: Union[List[Command], NoneType] = None) ‑> TemplateCard

      Render dynamic content using an HTML template.

      Args
      box
      A string indicating how to place this component on the page.
      title
      The title for this card.
      content
      The Handlebars template. https://handlebarsjs.com/guide/
      data
      Data for the Handlebars template.
      commands
      Contextual menu commands for this component.
      Returns

      A TemplateCard instance.

      text

      def text(content: str, size: Union[str, NoneType] = None, visible: Union[bool, NoneType] = None, tooltip: Union[str, NoneType] = None, name: Union[str, NoneType] = None) ‑> Component

      Create text content.

      Args
      content
      The text content.
      size
      The font size of the text content. One of 'xl', 'l', 'm', 's', 'xs'.
      visible
      True if the component should be visible. Defaults to true.
      tooltip
      Tooltip message.
      name
      An identifying name for this component.
      Returns

      A Text instance.

      text_l

      def text_l(content: str, visible: Union[bool, NoneType] = None, tooltip: Union[str, NoneType] = None, commands: Union[List[Command], NoneType] = None, name: Union[str, NoneType] = None) ‑> Component

      Create large sized text content.

      Args
      content
      The text content.
      visible
      True if the component should be visible. Defaults to true.
      tooltip
      Tooltip message.
      commands
      Contextual menu commands for this component.
      name
      An identifying name for this component.
      Returns

      A TextL instance.

      text_m

      def text_m(content: str, visible: Union[bool, NoneType] = None, tooltip: Union[str, NoneType] = None, name: Union[str, NoneType] = None) ‑> Component

      Create medium sized text content.

      Args
      content
      The text content.
      visible
      True if the component should be visible. Defaults to true.
      tooltip
      Tooltip message.
      name
      An identifying name for this component.
      Returns

      A TextM instance.

      text_s

      def text_s(content: str, visible: Union[bool, NoneType] = None, tooltip: Union[str, NoneType] = None, name: Union[str, NoneType] = None) ‑> Component

      Create small sized text content.

      Args
      content
      The text content.
      visible
      True if the component should be visible. Defaults to true.
      tooltip
      Tooltip message.
      name
      An identifying name for this component.
      Returns

      A TextS instance.

      text_xl

      def text_xl(content: str, visible: Union[bool, NoneType] = None, tooltip: Union[str, NoneType] = None, commands: Union[List[Command], NoneType] = None, name: Union[str, NoneType] = None) ‑> Component

      Create extra-large sized text content.

      Args
      content
      The text content.
      visible
      True if the component should be visible. Defaults to true.
      tooltip
      Tooltip message.
      commands
      Contextual menu commands for this component.
      name
      An identifying name for this component.
      Returns

      A TextXl instance.

      text_xs

      def text_xs(content: str, visible: Union[bool, NoneType] = None, tooltip: Union[str, NoneType] = None, name: Union[str, NoneType] = None) ‑> Component

      Create extra-small sized text content.

      Args
      content
      The text content.
      visible
      True if the component should be visible. Defaults to true.
      tooltip
      Tooltip message.
      name
      An identifying name for this component.
      Returns

      A TextXs instance.

      textbox

      def textbox(name: str, label: Union[str, NoneType] = None, placeholder: Union[str, NoneType] = None, value: Union[str, NoneType] = None, mask: Union[str, NoneType] = None, icon: Union[str, NoneType] = None, prefix: Union[str, NoneType] = None, suffix: Union[str, NoneType] = None, error: Union[str, NoneType] = None, required: Union[bool, NoneType] = None, disabled: Union[bool, NoneType] = None, readonly: Union[bool, NoneType] = None, multiline: Union[bool, NoneType] = None, password: Union[bool, NoneType] = None, trigger: Union[bool, NoneType] = None, visible: Union[bool, NoneType] = None, tooltip: Union[str, NoneType] = None) ‑> Component

      Create a text box.

      The text box component enables a user to type text into an app. It's typically used to capture a single line of text, but can be configured to capture multiple lines of text. The text displays on the screen in a simple, uniform format.

      Args
      name
      An identifying name for this component.
      label
      The text displayed above the field.
      placeholder
      A string that provides a brief hint to the user as to what kind of information is expected in the field. It should be a word or short phrase that demonstrates the expected type of data, rather than an explanatory message.
      value
      Text to be displayed inside the text box.
      mask
      The masking string that defines the mask's behavior. A backslash will escape any character. Special format characters are: '9': [0-9] 'a': [a-zA-Z] '*': [a-zA-Z0-9].
      icon
      Icon displayed in the far right end of the text field.
      prefix
      Text to be displayed before the text box contents.
      suffix
      Text to be displayed after the text box contents.
      error
      Text to be displayed as an error below the text box.
      required
      True if the text box is a required field.
      disabled
      True if the text box is disabled.
      readonly
      True if the text box is a read-only field.
      multiline
      True if the text box should allow multi-line text entry.
      password
      True if the text box should hide text content.
      trigger
      True if the form should be submitted when the text value changes.
      visible
      True if the component should be visible. Defaults to true.
      tooltip
      An optional tooltip message displayed when a user clicks the help icon to the right of the component.
      Returns

      A Textbox instance.

      toggle

      def toggle(name: str, label: Union[str, NoneType] = None, value: Union[bool, NoneType] = None, disabled: Union[bool, NoneType] = None, trigger: Union[bool, NoneType] = None, visible: Union[bool, NoneType] = None, tooltip: Union[str, NoneType] = None) ‑> Component

      Create a toggle. Toggles represent a physical switch that allows users to turn things on or off. Use toggles to present users with two mutually exclusive options (like on/off), where choosing an option results in an immediate action.

      Use a toggle for binary operations that take effect right after the user flips the Toggle. For example, use a Toggle to turn services or hardware components on or off. In other words, if a physical switch would work for the action, a Toggle is probably the best component to use.

      Args
      name
      An identifying name for this component.
      label
      Text to be displayed alongside the component.
      value
      True if selected, False if unselected.
      disabled
      True if the checkbox is disabled.
      trigger
      True if the form should be submitted when the toggle value changes.
      visible
      True if the component should be visible. Defaults to true.
      tooltip
      An optional tooltip message displayed when a user clicks the help icon to the right of the component.
      Returns

      A Toggle instance.

      toolbar_card

      def toolbar_card(box: str, items: List[Command], secondary_items: Union[List[Command], NoneType] = None, overflow_items: Union[List[Command], NoneType] = None, commands: Union[List[Command], NoneType] = None) ‑> ToolbarCard

      Create a card containing a toolbar.

      Args
      box
      A string indicating how to place this component on the page.
      items
      Items to render.
      secondary_items
      Items to render on the right side (or left, in RTL).
      overflow_items
      Items to render in an overflow menu.
      commands
      Contextual menu commands for this component.
      Returns

      A ToolbarCard instance.

      vega_card

      def vega_card(box: str, title: str, specification: str, data: Union[dict, str, NoneType] = None, commands: Union[List[Command], NoneType] = None) ‑> VegaCard

      Create a card containing a Vega-lite plot.

      Args
      box
      A string indicating how to place this component on the page.
      title
      The title of this card.
      specification
      The Vega-lite specification.
      data
      Data for the plot, if any.
      commands
      Contextual menu commands for this component.
      Returns

      A VegaCard instance.

      vega_visualization

      def vega_visualization(specification: str, data: Union[dict, str, NoneType] = None, width: Union[str, NoneType] = None, height: Union[str, NoneType] = None, name: Union[str, NoneType] = None, visible: Union[bool, NoneType] = None) ‑> Component

      Create a Vega-lite plot for display inside a form.

      Args
      specification
      The Vega-lite specification.
      data
      Data for the plot, if any.
      width
      The width of the visualization. Defaults to 100%.
      height
      The height of the visualization. Defaults to 300px.
      name
      An identifying name for this component.
      visible
      True if the component should be visible. Defaults to true.
      Returns

      A VegaVisualization instance.

      visualization

      def visualization(plot: Plot, data: Union[dict, str], width: Union[str, NoneType] = None, height: Union[str, NoneType] = None, name: Union[str, NoneType] = None, visible: Union[bool, NoneType] = None) ‑> Component

      Create a visualization for display inside a form.

      Args
      plot
      The plot to be rendered in this visualization.
      data
      Data for this visualization.
      width
      The width of the visualization. Defaults to 100%.
      height
      The hight of the visualization. Defaults to 300px.
      name
      An identifying name for this component.
      visible
      True if the component should be visible. Defaults to true.
      Returns

      A Visualization instance.

      wide_bar_stat_card

      def wide_bar_stat_card(box: str, title: str, value: str, aux_value: str, progress: float, plot_color: Union[str, NoneType] = None, data: Union[dict, str, NoneType] = None, commands: Union[List[Command], NoneType] = None) ‑> WideBarStatCard

      Create a wide stat card displaying a primary value, an auxiliary value and a progress bar.

      Args
      box
      A string indicating how to place this component on the page.
      title
      The card's title.
      value
      The primary value displayed.
      aux_value
      The auxiliary value displayed next to the primary value.
      progress
      The value of the progress bar, between 0 and 1.
      plot_color
      The color of the progress bar.
      data
      Data for this card.
      commands
      Contextual menu commands for this component.
      Returns

      A WideBarStatCard instance.

      wide_gauge_stat_card

      def wide_gauge_stat_card(box: str, title: str, value: str, aux_value: str, progress: float, plot_color: Union[str, NoneType] = None, data: Union[dict, str, NoneType] = None, commands: Union[List[Command], NoneType] = None) ‑> WideGaugeStatCard

      Create a wide stat card displaying a primary value, an auxiliary value and a progress gauge.

      Args
      box
      A string indicating how to place this component on the page.
      title
      The card's title.
      value
      The primary value displayed.
      aux_value
      The auxiliary value displayed next to the primary value.
      progress
      The value of the progress gauge, between 0 and 1.
      plot_color
      The color of the progress gauge.
      data
      Data for this card.
      commands
      Contextual menu commands for this component.
      Returns

      A WideGaugeStatCard instance.

      wide_series_stat_card

      def wide_series_stat_card(box: str, title: str, value: str, aux_value: str, plot_data: Union[Data, str], plot_value: str, plot_zero_value: Union[float, NoneType] = None, plot_category: Union[str, NoneType] = None, plot_type: Union[str, NoneType] = None, plot_curve: Union[str, NoneType] = None, plot_color: Union[str, NoneType] = None, data: Union[dict, str, NoneType] = None, commands: Union[List[Command], NoneType] = None) ‑> WideSeriesStatCard

      Create a wide stat card displaying a primary value, an auxiliary value and a series plot.

      Args
      box
      A string indicating how to place this component on the page.
      title
      The card's title.
      value
      The primary value displayed.
      aux_value
      The auxiliary value displayed below the primary value.
      plot_data
      The plot's data.
      plot_value
      The data field to use for y-axis values.
      plot_zero_value
      The base value to use for each y-axis mark. Set this to 0 if you want to pin the x-axis at y=0. If not provided, the minimum value from the data is used.
      plot_category
      The data field to use for x-axis values (ignored if plot_type is area; must be provided if plot_type is interval). Defaults to 'x'.
      plot_type
      The type of plot. Defaults to area. One of 'area', 'interval'.
      plot_curve
      The plot's curve style. Defaults to linear. One of 'linear', 'smooth', 'step', 'step-after', 'step-before'.
      plot_color
      The plot's color.
      data
      Data for this card.
      commands
      Contextual menu commands for this component.
      Returns

      A WideSeriesStatCard instance.

      Edit this page
      - - - - - - - - - - +

      Module h2o_wave.ui

      Functions

      breadcrumb

      def breadcrumb(name: str, label: str) ‑> Breadcrumb

      Create a breadcrumb for a BreadcrumbsCard.

      Args
      name
      The name of this item. Prefix the name with a '#' to trigger hash-change navigation.
      label
      The label to display.
      Returns

      A Breadcrumb instance.

      breadcrumbs_card

      def breadcrumbs_card(box: str, items: List[Breadcrumb], commands: Union[List[Command], NoneType] = None) ‑> BreadcrumbsCard

      Create a card containing breadcrumbs. Breadcrumbs should be used as a navigational aid in your app or site. They indicate the current page’s location within a hierarchy and help the user understand where they are in relation to the rest of that hierarchy. They also afford one-click access to higher levels of that hierarchy. Breadcrumbs are typically placed, in horizontal form, under the masthead or navigation of an experience, above the primary content area.

      Args
      box
      A string indicating how to place this component on the page.
      items
      A list of Breadcrumb instances to display. See breadcrumb()
      commands
      Contextual menu commands for this component.
      Returns

      A BreadcrumbsCard instance.

      button

      def button(name: str, label: Union[str, NoneType] = None, caption: Union[str, NoneType] = None, value: Union[str, NoneType] = None, primary: Union[bool, NoneType] = None, disabled: Union[bool, NoneType] = None, link: Union[bool, NoneType] = None, visible: Union[bool, NoneType] = None, tooltip: Union[str, NoneType] = None) ‑> Component

      Create a button.

      Buttons are best used to enable a user to commit a change or complete steps in a task. They are typically found inside forms, dialogs, panels or pages. An example of their usage is confirming the deletion of a file in a confirmation dialog.

      When considering their place in a layout, contemplate the order in which a user will flow through the UI. As an example, in a form, the individual will need to read and interact with the form fields before submitting the form. Therefore, as a general rule, the button should be placed at the bottom of the UI container which holds the related UI elements.

      Buttons may be placed within a "buttons" component which will lay out the buttons horizontally, or used individually and they will be stacked vertically.

      While buttons can technically be used to navigate a user to another part of the experience, this is not recommended unless that navigation is part of an action or their flow.

      Args
      name
      An identifying name for this component. If the name is prefixed with a '#', the button sets the location hash to the name when clicked.
      label
      The text displayed on the button.
      caption
      The caption displayed below the label. Setting a caption renders a compound button.
      value
      A value for this button. If a value is set, it is used for the button's submitted instead of a boolean True.
      primary
      True if the button should be rendered as the primary button in the set.
      disabled
      True if the button should be disabled.
      link
      True if the button should be rendered as link text and not a standard button.
      visible
      True if the component should be visible. Defaults to true.
      tooltip
      An optional tooltip message displayed when a user clicks the help icon to the right of the component.
      Returns

      A Button instance.

      buttons

      def buttons(items: List[Component], justify: Union[str, NoneType] = None, name: Union[str, NoneType] = None, visible: Union[bool, NoneType] = None) ‑> Component

      Create a set of buttons to be layed out horizontally.

      Args
      items
      The button in this set.
      justify
      Specifies how to lay out buttons horizontally. One of 'start', 'end', 'center', 'between', 'around'.
      name
      An identifying name for this component.
      visible
      True if the component should be visible. Defaults to true.
      Returns

      A Buttons instance.

      checkbox

      def checkbox(name: str, label: Union[str, NoneType] = None, value: Union[bool, NoneType] = None, indeterminate: Union[bool, NoneType] = None, disabled: Union[bool, NoneType] = None, trigger: Union[bool, NoneType] = None, visible: Union[bool, NoneType] = None, tooltip: Union[str, NoneType] = None) ‑> Component

      Create a checkbox.

      A checkbox allows users to switch between two mutually exclusive options (checked or unchecked, on or off) through a single click or tap. It can also be used to indicate a subordinate setting or preference when paired with another component.

      A checkbox is used to select or deselect action items. It can be used for a single item or for a list of multiple items that a user can choose from. The component has two selection states: unselected and selected.

      For a binary choice, the main difference between a checkbox and a toggle switch is that the checkbox is for status and the toggle switch is for action.

      Use multiple checkboxes for multi-select scenarios in which a user chooses one or more items from a group of choices that are not mutually exclusive.

      Args
      name
      An identifying name for this component.
      label
      Text to be displayed alongside the checkbox.
      value
      True if selected, False if unselected.
      indeterminate
      True if the selection is indeterminate (neither selected nor unselected).
      disabled
      True if the checkbox is disabled.
      trigger
      True if the form should be submitted when the checkbox value changes.
      visible
      True if the component should be visible. Defaults to true.
      tooltip
      An optional tooltip message displayed when a user clicks the help icon to the right of the component.
      Returns

      A Checkbox instance.

      checklist

      def checklist(name: str, label: Union[str, NoneType] = None, values: Union[List[str], NoneType] = None, choices: Union[List[Choice], NoneType] = None, trigger: Union[bool, NoneType] = None, visible: Union[bool, NoneType] = None, tooltip: Union[str, NoneType] = None) ‑> Component

      Create a set of checkboxes. Use this for multi-select scenarios in which a user chooses one or more items from a group of choices that are not mutually exclusive.

      Args
      name
      An identifying name for this component.
      label
      Text to be displayed above the component.
      values
      The names of the selected choices.
      choices
      The choices to be presented.
      trigger
      True if the form should be submitted when the checklist value changes.
      visible
      True if the component should be visible. Defaults to true.
      tooltip
      An optional tooltip message displayed when a user clicks the help icon to the right of the component.
      Returns

      A Checklist instance.

      choice

      def choice(name: str, label: Union[str, NoneType] = None, disabled: Union[bool, NoneType] = None) ‑> Choice

      Create a choice for a checklist, choice group or dropdown.

      Args
      name
      An identifying name for this component.
      label
      Text to be displayed alongside the component.
      disabled
      True if the checkbox is disabled.
      Returns

      A Choice instance.

      choice_group

      def choice_group(name: str, label: Union[str, NoneType] = None, value: Union[str, NoneType] = None, choices: Union[List[Choice], NoneType] = None, required: Union[bool, NoneType] = None, trigger: Union[bool, NoneType] = None, visible: Union[bool, NoneType] = None, tooltip: Union[str, NoneType] = None) ‑> Component

      Create a choice group. The choice group component, also known as radio buttons, let users select one option from two or more choices. Each option is represented by one choice group button; a user can select only one choice group in a button group.

      Choice groups emphasize all options equally, and that may draw more attention to the options than necessary. Consider using other components, unless the options deserve extra attention from the user. For example, if the default option is recommended for most users in most situations, use a dropdown instead.

      If there are only two mutually exclusive options, combine them into a single Checkbox or Toggle switch. For example, use a checkbox for "I agree" instead of choice group buttons for "I agree" and "I don't agree."

      Args
      name
      An identifying name for this component.
      label
      Text to be displayed alongside the component.
      value
      The name of the selected choice.
      choices
      The choices to be presented.
      required
      True if this field is required.
      trigger
      True if the form should be submitted when the selection changes.
      visible
      True if the component should be visible. Defaults to true.
      tooltip
      An optional tooltip message displayed when a user clicks the help icon to the right of the component.
      Returns

      A ChoiceGroup instance.

      color_picker

      def color_picker(name: str, label: Union[str, NoneType] = None, value: Union[str, NoneType] = None, choices: Union[List[str], NoneType] = None, visible: Union[bool, NoneType] = None, tooltip: Union[str, NoneType] = None) ‑> Component

      Create a color picker.

      A date picker allows a user to pick a color value. If the 'choices' parameter is set, a swatch picker is displayed instead of the standard color picker.

      Args
      name
      An identifying name for this component.
      label
      Text to be displayed alongside the component.
      value
      The selected color (CSS-compatible string)
      choices
      A list of colors (CSS-compatible strings) to limit color choices to.
      visible
      True if the component should be visible. Defaults to true.
      tooltip
      An optional tooltip message displayed when a user clicks the help icon to the right of the component.
      Returns

      A ColorPicker instance.

      combobox

      def combobox(name: str, label: Union[str, NoneType] = None, placeholder: Union[str, NoneType] = None, value: Union[str, NoneType] = None, choices: Union[List[str], NoneType] = None, error: Union[str, NoneType] = None, disabled: Union[bool, NoneType] = None, visible: Union[bool, NoneType] = None, tooltip: Union[str, NoneType] = None) ‑> Component

      Create a combobox.

      A combobox is a list in which the selected item is always visible, and the others are visible on demand by clicking a drop-down button or by typing in the input. They are used to simplify the design and make a choice within the UI.

      When closed, only the selected item is visible. When users click the drop-down button, all the options become visible. To change the value, users open the list and click another value or use the arrow keys (up and down) to select a new value. When collapsed the user can select a new value by typing.

      Args
      name
      An identifying name for this component.
      label
      Text to be displayed alongside the component.
      placeholder
      A string that provides a brief hint to the user as to what kind of information is expected in the field.
      value
      The name of the selected choice.
      choices
      The choices to be presented.
      error
      Text to be displayed as an error below the text box.
      disabled
      True if this field is disabled.
      visible
      True if the component should be visible. Defaults to true.
      tooltip
      An optional tooltip message displayed when a user clicks the help icon to the right of the component.
      Returns

      A Combobox instance.

      command

      def command(name: str, label: Union[str, NoneType] = None, caption: Union[str, NoneType] = None, icon: Union[str, NoneType] = None, items: Union[List[Command], NoneType] = None, data: Union[str, NoneType] = None) ‑> Command

      Create a command.

      Commands are typically displayed as context menu items or toolbar button.

      Args
      name
      An identifying name for this component. If the name is prefixed with a '#', the command sets the location hash to the name when executed.
      label
      The text displayed for this command.
      caption
      The caption for this command (typically a tooltip).
      icon
      The icon to be displayed for this command.
      items
      Sub-commands, if any
      data
      Data associated with this command, if any.
      Returns

      A Command instance.

      component

      def component(text: Union[Text, NoneType] = None, text_xl: Union[TextXl, NoneType] = None, text_l: Union[TextL, NoneType] = None, text_m: Union[TextM, NoneType] = None, text_s: Union[TextS, NoneType] = None, text_xs: Union[TextXs, NoneType] = None, label: Union[Label, NoneType] = None, separator: Union[Separator, NoneType] = None, progress: Union[Progress, NoneType] = None, message_bar: Union[MessageBar, NoneType] = None, textbox: Union[Textbox, NoneType] = None, checkbox: Union[Checkbox, NoneType] = None, toggle: Union[Toggle, NoneType] = None, choice_group: Union[ChoiceGroup, NoneType] = None, checklist: Union[Checklist, NoneType] = None, dropdown: Union[Dropdown, NoneType] = None, combobox: Union[Combobox, NoneType] = None, slider: Union[Slider, NoneType] = None, spinbox: Union[Spinbox, NoneType] = None, date_picker: Union[DatePicker, NoneType] = None, color_picker: Union[ColorPicker, NoneType] = None, button: Union[Button, NoneType] = None, buttons: Union[Buttons, NoneType] = None, file_upload: Union[FileUpload, NoneType] = None, table: Union[Table, NoneType] = None, link: Union[Link, NoneType] = None, tabs: Union[Tabs, NoneType] = None, expander: Union[Expander, NoneType] = None, frame: Union[Frame, NoneType] = None, markup: Union[Markup, NoneType] = None, template: Union[Template, NoneType] = None, picker: Union[Picker, NoneType] = None, range_slider: Union[RangeSlider, NoneType] = None, stepper: Union[Stepper, NoneType] = None, visualization: Union[Visualization, NoneType] = None, vega_visualization: Union[VegaVisualization, NoneType] = None) ‑> Component

      Create a component.

      Args
      text
      Text block.
      text_xl
      Extra-large sized text block.
      text_l
      Large sized text block.
      text_m
      Medium sized text block.
      text_s
      Small sized text block.
      text_xs
      Extra-small sized text block.
      label
      Label.
      separator
      Separator.
      progress
      Progress bar.
      message_bar
      Message bar.
      textbox
      Textbox.
      checkbox
      Checkbox.
      toggle
      Toggle.
      choice_group
      Choice group.
      checklist
      Checklist.
      dropdown
      Dropdown.
      combobox
      Combobox.
      slider
      Slider.
      spinbox
      Spinbox.
      date_picker
      Date picker.
      color_picker
      Color picker.
      button
      Button.
      buttons
      Button set.
      file_upload
      File upload.
      table
      Table.
      link
      Link.
      tabs
      Tabs.
      expander
      Expander.
      frame
      Frame.
      markup
      Markup
      template
      Template
      picker
      Picker.
      range_slider
      Range Slider.
      stepper
      Stepper.
      visualization
      Visualization.
      vega_visualization
      Vega-lite Visualization.
      Returns

      A Component instance.

      date_picker

      def date_picker(name: str, label: Union[str, NoneType] = None, placeholder: Union[str, NoneType] = None, value: Union[str, NoneType] = None, disabled: Union[bool, NoneType] = None, trigger: Union[bool, NoneType] = None, visible: Union[bool, NoneType] = None, tooltip: Union[str, NoneType] = None) ‑> Component

      Create a date picker.

      A date picker allows a user to pick a date value.

      Args
      name
      An identifying name for this component.
      label
      Text to be displayed alongside the component.
      placeholder
      A string that provides a brief hint to the user as to what kind of information is expected in the field.
      value
      The date value in YYYY-MM-DD format.
      disabled
      True if this field is disabled.
      trigger
      True if the form should be submitted when the datepicker value changes.
      visible
      True if the component should be visible. Defaults to true.
      tooltip
      An optional tooltip message displayed when a user clicks the help icon to the right of the component.
      Returns

      A DatePicker instance.

      dropdown

      def dropdown(name: str, label: Union[str, NoneType] = None, placeholder: Union[str, NoneType] = None, value: Union[str, NoneType] = None, values: Union[List[str], NoneType] = None, choices: Union[List[Choice], NoneType] = None, required: Union[bool, NoneType] = None, disabled: Union[bool, NoneType] = None, trigger: Union[bool, NoneType] = None, visible: Union[bool, NoneType] = None, tooltip: Union[str, NoneType] = None) ‑> Component

      Create a dropdown.

      A dropdown is a list in which the selected item is always visible, and the others are visible on demand by clicking a drop-down button. They are used to simplify the design and make a choice within the UI. When closed, only the selected item is visible. When users click the drop-down button, all the options become visible.

      To change the value, users open the list and click another value or use the arrow keys (up and down) to select a new value.

      Note: Use either the 'value' parameter or the 'values' parameter. Setting the 'values' parameter renders a multi-select dropdown.

      Args
      name
      An identifying name for this component.
      label
      Text to be displayed alongside the component.
      placeholder
      A string that provides a brief hint to the user as to what kind of information is expected in the field.
      value
      The name of the selected choice.
      values
      The names of the selected choices. If this parameter is set, multiple selections will be allowed.
      choices
      The choices to be presented.
      required
      True if this is a required field.
      disabled
      True if this field is disabled.
      trigger
      True if the form should be submitted when the dropdown value changes.
      visible
      True if the component should be visible. Defaults to true.
      tooltip
      An optional tooltip message displayed when a user clicks the help icon to the right of the component.
      Returns

      A Dropdown instance.

      expander

      def expander(name: str, label: Union[str, NoneType] = None, expanded: Union[bool, NoneType] = None, items: Union[List[Component], NoneType] = None, visible: Union[bool, NoneType] = None) ‑> Component

      Creates a new expander.

      Expanders can be used to show or hide a group of related components.

      Args
      name
      An identifying name for this component.
      label
      The text displayed on the expander.
      expanded
      True if expanded, False if collapsed.
      items
      List of components to be hideable by the expander.
      visible
      True if the component should be visible. Defaults to true.
      Returns

      A Expander instance.

      file_upload

      def file_upload(name: str, label: Union[str, NoneType] = None, multiple: Union[bool, NoneType] = None, file_extensions: Union[List[str], NoneType] = None, max_file_size: Union[float, NoneType] = None, max_size: Union[float, NoneType] = None, height: Union[str, NoneType] = None, visible: Union[bool, NoneType] = None, tooltip: Union[str, NoneType] = None) ‑> Component

      Create a file upload component. A file upload component allows a user to browse, select and upload one or more files.

      Args
      name
      An identifying name for this component.
      label
      Text to be displayed alongside the component.
      multiple
      True if the component should allow multiple files to be uploaded.
      file_extensions
      List of allowed file extensions, e.g. pdf, docx, etc.
      max_file_size
      Maximum allowed size (Mb) per file. Defaults to no limit.
      max_size
      Maximum allowed size (Mb) for all files combined. Defaults to no limit.
      height
      The height of the file upload, e.g. '400px', '50%', etc.
      visible
      True if the component should be visible. Defaults to true.
      tooltip
      An optional tooltip message displayed when a user clicks the help icon to the right of the component.
      Returns

      A FileUpload instance.

      flex_card

      def flex_card(box: str, item_view: str, item_props: Union[dict, str], data: Union[Data, str], direction: Union[str, NoneType] = None, justify: Union[str, NoneType] = None, align: Union[str, NoneType] = None, wrap: Union[str, NoneType] = None, commands: Union[List[Command], NoneType] = None) ‑> FlexCard

      EXPERIMENTAL. DO NOT USE. Create a card containing other cards laid out using a one-dimensional model with flexible alignemnt and wrapping capabilities.

      Args
      box
      A string indicating how to place this component on the page.
      item_view
      The child card type.
      item_props
      The child card properties.
      data
      Data for this card.
      direction
      Layout direction. One of 'horizontal', 'vertical'.
      justify
      Layout strategy for main axis. One of 'start', 'end', 'center', 'between', 'around'.
      align
      Layout strategy for cross axis. One of 'start', 'end', 'center', 'baseline', 'stretch'.
      wrap
      Wrapping strategy. One of 'start', 'end', 'center', 'between', 'around', 'stretch'.
      commands
      Contextual menu commands for this component.
      Returns

      A FlexCard instance.

      form_card

      def form_card(box: str, items: Union[List[Component], str], commands: Union[List[Command], NoneType] = None) ‑> FormCard

      Create a form.

      Args
      box
      A string indicating how to place this component on the page.
      items
      The components in this form.
      commands
      Contextual menu commands for this component.
      Returns

      A FormCard instance.

      frame

      def frame(path: Union[str, NoneType] = None, content: Union[str, NoneType] = None, width: Union[str, NoneType] = None, height: Union[str, NoneType] = None, name: Union[str, NoneType] = None, visible: Union[bool, NoneType] = None) ‑> Component

      Create a new inline frame (an iframe).

      Args
      path
      The path or URL of the web page, e.g. /foo.html or http://example.com/foo.html
      content
      The HTML content of the page. A string containing <html>...</html>.
      width
      The width of the frame, e.g. 200px, 50%, etc. Defaults to 100%.
      height
      The height of the frame, e.g. 200px, 50%, etc. Defaults to 150px.
      name
      An identifying name for this component.
      visible
      True if the component should be visible. Defaults to true.
      Returns

      A Frame instance.

      frame_card

      def frame_card(box: str, title: str, path: Union[str, NoneType] = None, content: Union[str, NoneType] = None, commands: Union[List[Command], NoneType] = None) ‑> FrameCard

      Render a card containing a HTML page inside an inline frame (an iframe).

      Either a path or content can be provided as arguments.

      Args
      box
      A string indicating how to place this component on the page.
      title
      The title for this card.
      path
      The path or URL of the web page, e.g. /foo.html or http://example.com/foo.html
      content
      The HTML content of the page. A string containing <html>...</html>
      commands
      Contextual menu commands for this component.
      Returns

      A FrameCard instance.

      graphics_card

      def graphics_card(box: str, view_box: str, stage: Union[List[dict], str, NoneType] = None, scene: Union[Data, str, NoneType] = None, width: Union[str, NoneType] = None, height: Union[str, NoneType] = None, commands: Union[List[Command], NoneType] = None) ‑> GraphicsCard

      Create a card for displaying vector graphics.

      Args
      box
      A string indicating how to place this component on the page.
      view_box
      The position and dimension of the SVG viewport, in user space. A space-separated list of four numbers: min-x, min-y, width and height. For example, '0 0 400 300'. See: https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/viewBox
      stage
      Background layer for rendering static SVG elements. Must be packed to conserve memory.
      scene
      Foreground layer for rendering dynamic SVG elements.
      width
      The displayed width of the rectangular viewport. (Not the width of its coordinate system.)
      height
      The displayed height of the rectangular viewport. (Not the height of its coordinate system.)
      commands
      Contextual menu commands for this component.
      Returns

      A GraphicsCard instance.

      grid_card

      def grid_card(box: str, title: str, cells: Union[Data, str], data: Union[Data, str], commands: Union[List[Command], NoneType] = None) ‑> GridCard

      EXPERIMENTAL. DO NOT USE.

      Args
      box
      A string indicating how to place this component on the page.
      title
      EXPERIMENTAL. DO NOT USE.
      cells
      EXPERIMENTAL. DO NOT USE.
      data
      EXPERIMENTAL. DO NOT USE.
      commands
      Contextual menu commands for this component.
      Returns

      A GridCard instance.

      header_card

      def header_card(box: str, title: str, subtitle: str, icon: Union[str, NoneType] = None, icon_color: Union[str, NoneType] = None, commands: Union[List[Command], NoneType] = None) ‑> HeaderCard

      Render a card containing a HTML page inside an inline frame (iframe).

      Either a path or content can be provided as arguments.

      Args
      box
      A string indicating how to place this component on the page.
      title
      The title.
      subtitle
      The subtitle, displayed below the title.
      icon
      The icon type, displayed to the left.
      icon_color
      The icon's color.
      commands
      Contextual menu commands for this component.
      Returns

      A HeaderCard instance.

      icon_table_cell_type

      def icon_table_cell_type(color: Union[str, NoneType] = None, name: Union[str, NoneType] = None) ‑> TableCellType

      Create a cell type that renders a column's cells as icons instead of plain text. If set on a column, the cell value is interpreted as the name of the icon to be displayed.

      Args
      color
      Icon color.
      name
      An identifying name for this component.
      Returns

      A IconTableCellType instance.

      image_card

      def image_card(box: str, title: str, type: str, image: str, data: Union[dict, str, NoneType] = None, commands: Union[List[Command], NoneType] = None) ‑> ImageCard

      Create a card that displays a base64-encoded image.

      Args
      box
      A string indicating how to place this component on the page.
      title
      The card's title.
      type
      The image MIME subtype. One of apng, bmp, gif, x-icon, jpeg, png, webp.
      image
      Image data, base64-encoded.
      data
      Data for this card.
      commands
      Contextual menu commands for this component.
      Returns

      A ImageCard instance.

      label

      def label(label: str, required: Union[bool, NoneType] = None, disabled: Union[bool, NoneType] = None, visible: Union[bool, NoneType] = None, tooltip: Union[str, NoneType] = None, name: Union[str, NoneType] = None) ‑> Component

      Create a label.

      Labels give a name or title to a component or group of components. Labels should be in close proximity to the component or group they are paired with. Some components, such as textboxes, dropdowns, or toggles, already have labels incorporated, but other components may optionally add a Label if it helps inform the user of the component’s purpose.

      Args
      label
      The text displayed on the label.
      required
      True if the field is required.
      disabled
      True if the label should be disabled.
      visible
      True if the component should be visible. Defaults to true.
      tooltip
      An optional tooltip message displayed when a user clicks the help icon to the right of the component.
      name
      An identifying name for this component.
      Returns

      A Label instance.

      large_bar_stat_card

      def large_bar_stat_card(box: str, title: str, caption: str, value: str, aux_value: str, value_caption: str, aux_value_caption: str, progress: float, plot_color: Union[str, NoneType] = None, data: Union[dict, str, NoneType] = None, commands: Union[List[Command], NoneType] = None) ‑> LargeBarStatCard

      Create a large captioned card displaying a primary value, an auxiliary value and a progress bar, with captions for each value.

      Args
      box
      A string indicating how to place this component on the page.
      title
      The card's title.
      caption
      The card's caption.
      value
      The primary value displayed.
      aux_value
      The auxiliary value, typically a target value.
      value_caption
      The caption displayed below the primary value.
      aux_value_caption
      The caption displayed below the auxiliary value.
      progress
      The value of the progress bar, between 0 and 1.
      plot_color
      The color of the progress bar.
      data
      Data for this card.
      commands
      Contextual menu commands for this component.
      Returns

      A LargeBarStatCard instance.

      large_stat_card

      def large_stat_card(box: str, title: str, value: str, aux_value: str, caption: str, data: Union[dict, str, NoneType] = None, commands: Union[List[Command], NoneType] = None) ‑> LargeStatCard

      Create a stat card displaying a primary value, an auxiliary value and a caption.

      Args
      box
      A string indicating how to place this component on the page.
      title
      The card's title.
      value
      The primary value displayed.
      aux_value
      The auxiliary value displayed next to the primary value.
      caption
      The caption displayed below the primary value.
      data
      Data for this card.
      commands
      Contextual menu commands for this component.
      Returns

      A LargeStatCard instance.

      link

      def link(label: Union[str, NoneType] = None, path: Union[str, NoneType] = None, disabled: Union[bool, NoneType] = None, download: Union[bool, NoneType] = None, button: Union[bool, NoneType] = None, visible: Union[bool, NoneType] = None, tooltip: Union[str, NoneType] = None, name: Union[str, NoneType] = None) ‑> Component

      Create a hyperlink.

      Hyperlinks can be internal or external. Internal hyperlinks have paths that begin with a / and point to URLs within the Q UI. All other kinds of paths are treated as external hyperlinks.

      Args
      label
      The text to be displayed. If blank, the path is used as the label.
      path
      The path or URL to link to.
      disabled
      True if the link should be disabled.
      download
      True if the link should be used for file download.
      button
      True if the link should be rendered as a button.
      visible
      True if the component should be visible. Defaults to true.
      tooltip
      An optional tooltip message displayed when a user clicks the help icon to the right of the component.
      name
      An identifying name for this component.
      Returns

      A Link instance.

      list_card

      def list_card(box: str, title: str, item_view: str, item_props: Union[dict, str], data: Union[Data, str], commands: Union[List[Command], NoneType] = None) ‑> ListCard

      EXPERIMENTAL. DO NOT USE. Create a card containing other cards laid out in the form of a list (vertically, top-to-bottom).

      Args
      box
      A string indicating how to place this component on the page.
      title
      The title for this card.
      item_view
      The child card type.
      item_props
      The child card properties.
      data
      Data for this card.
      commands
      Contextual menu commands for this component.
      Returns

      A ListCard instance.

      list_item1_card

      def list_item1_card(box: str, title: str, caption: str, value: str, aux_value: str, data: Union[dict, str], commands: Union[List[Command], NoneType] = None) ‑> ListItem1Card

      EXPERIMENTAL. DO NOT USE.

      Args
      box
      A string indicating how to place this component on the page.
      title
      EXPERIMENTAL. DO NOT USE.
      caption
      EXPERIMENTAL. DO NOT USE.
      value
      EXPERIMENTAL. DO NOT USE.
      aux_value
      EXPERIMENTAL. DO NOT USE.
      data
      EXPERIMENTAL. DO NOT USE.
      commands
      Contextual menu commands for this component.
      Returns

      A ListItem1Card instance.

      mark

      def mark(coord: Union[str, NoneType] = None, type: Union[str, NoneType] = None, x: Union[str, float, int, NoneType] = None, x0: Union[str, float, int, NoneType] = None, x1: Union[str, float, int, NoneType] = None, x2: Union[str, float, int, NoneType] = None, x_min: Union[float, NoneType] = None, x_max: Union[float, NoneType] = None, x_nice: Union[bool, NoneType] = None, x_scale: Union[str, NoneType] = None, x_title: Union[str, NoneType] = None, y: Union[str, float, int, NoneType] = None, y0: Union[str, float, int, NoneType] = None, y1: Union[str, float, int, NoneType] = None, y2: Union[str, float, int, NoneType] = None, y_min: Union[float, NoneType] = None, y_max: Union[float, NoneType] = None, y_nice: Union[bool, NoneType] = None, y_scale: Union[str, NoneType] = None, y_title: Union[str, NoneType] = None, color: Union[str, NoneType] = None, color_range: Union[str, NoneType] = None, color_domain: Union[List[str], NoneType] = None, shape: Union[str, NoneType] = None, shape_range: Union[str, NoneType] = None, size: Union[str, float, int, NoneType] = None, size_range: Union[str, NoneType] = None, stack: Union[str, NoneType] = None, dodge: Union[str, NoneType] = None, curve: Union[str, NoneType] = None, fill_color: Union[str, NoneType] = None, fill_opacity: Union[float, NoneType] = None, stroke_color: Union[str, NoneType] = None, stroke_opacity: Union[float, NoneType] = None, stroke_size: Union[float, NoneType] = None, stroke_dash: Union[str, NoneType] = None, label: Union[str, NoneType] = None, label_offset: Union[float, NoneType] = None, label_offset_x: Union[float, NoneType] = None, label_offset_y: Union[float, NoneType] = None, label_rotation: Union[str, NoneType] = None, label_position: Union[str, NoneType] = None, label_overlap: Union[str, NoneType] = None, label_fill_color: Union[str, NoneType] = None, label_fill_opacity: Union[float, NoneType] = None, label_stroke_color: Union[str, NoneType] = None, label_stroke_opacity: Union[float, NoneType] = None, label_stroke_size: Union[float, NoneType] = None, label_font_size: Union[float, NoneType] = None, label_font_weight: Union[str, NoneType] = None, label_line_height: Union[float, NoneType] = None, label_align: Union[str, NoneType] = None, ref_stroke_color: Union[str, NoneType] = None, ref_stroke_opacity: Union[float, NoneType] = None, ref_stroke_size: Union[float, NoneType] = None, ref_stroke_dash: Union[str, NoneType] = None) ‑> Mark

      Create a specification for a layer of graphical marks such as bars, lines, points for a plot. A plot can contain multiple such layers of marks.

      Args
      coord
      Coordinate system. rect is synonymous to cartesian. theta is transposed polar. One of 'rect', 'cartesian', 'polar', 'theta', 'helix'.
      type
      Graphical geometry. One of 'interval', 'line', 'path', 'point', 'area', 'polygon', 'schema', 'edge', 'heatmap'.
      x
      X field or value.
      x0
      X base field or value.
      x1
      X bin lower bound field or value. For histograms.
      x2
      X bin upper bound field or value. For histograms.
      x_min
      X axis scale minimum.
      x_max
      X axis scale maximum.
      x_nice
      Whether to nice X axis scale ticks.
      x_scale
      X axis scale type. One of 'linear', 'cat', 'category', 'identity', 'log', 'pow', 'time', 'timeCat', 'quantize', 'quantile'.
      x_title
      X axis title.
      y
      Y field or value.
      y0
      Y base field or value.
      y1
      Y bin lower bound field or value. For histograms.
      y2
      Y bin upper bound field or value. For histograms.
      y_min
      Y axis scale minimum.
      y_max
      Y axis scale maximum.
      y_nice
      Whether to nice Y axis scale ticks.
      y_scale
      Y axis scale type. One of 'linear', 'cat', 'category', 'identity', 'log', 'pow', 'time', 'timeCat', 'quantize', 'quantile'.
      y_title
      Y axis title.
      color
      Mark color field or value.
      color_range
      Mark color range for multi-series plots. A string containing space-separated colors, e.g. '#fee8c8 #fdbb84 #e34a33'
      color_domain
      The unique values in the data (labels or categories or classes) to map colors to, e.g. ['high', 'medium', 'low']. If this is not provided, the unique values are automatically inferred from the color attribute.
      shape
      Mark shape field or value for point mark types. Possible values are 'circle', 'square', 'bowtie', 'diamond', 'hexagon', 'triangle', 'triangle-down', 'cross', 'tick', 'plus', 'hyphen', 'line'.
      shape_range
      Mark shape range for multi-series plots using point mark types. A string containing space-separated shapes, e.g. 'circle square diamond'
      size
      Mark size field or value.
      size_range
      Mark size range. A string containing space-separated integers, e.g. '4 30'
      stack
      Field to stack marks by, or 'auto' to infer.
      dodge
      Field to dodge marks by, or 'auto' to infer.
      curve
      Curve type for line and area mark types. One of 'none', 'smooth', 'step-before', 'step', 'step-after'.
      fill_color
      Mark fill color.
      fill_opacity
      Mark fill opacity.
      stroke_color
      Mark stroke color.
      stroke_opacity
      Mark stroke opacity.
      stroke_size
      Mark stroke size.
      stroke_dash
      Mark stroke dash style. A string containing space-separated integers that specify distances to alternately draw a line and a gap (in coordinate space units). If the number of elements in the array is odd, the elements of the array get copied and concatenated. For example, [5, 15, 25] will become [5, 15, 25, 5, 15, 25].
      label
      Label field or value.
      label_offset
      Distance between label and mark.
      label_offset_x
      Horizontal distance between label and mark.
      label_offset_y
      Vertical distance between label and mark.
      label_rotation
      Label rotation angle, in degrees, or 'none' to disable automatic rotation. The default behavior is 'auto' for automatic rotation.
      label_position
      Label position relative to the mark. One of 'top', 'bottom', 'middle', 'left', 'right'.
      label_overlap
      Strategy to use if labels overlap. One of 'hide', 'overlap', 'constrain'.
      label_fill_color
      Label fill color.
      label_fill_opacity
      Label fill opacity.
      label_stroke_color
      Label stroke color.
      label_stroke_opacity
      Label stroke opacity.
      label_stroke_size
      Label stroke size (line width or pen thickness).
      label_font_size
      Label font size.
      label_font_weight
      Label font weight.
      label_line_height
      Label line height.
      label_align
      Label text alignment. One of 'left', 'right', 'center', 'start', 'end'.
      ref_stroke_color
      Reference line stroke color.
      ref_stroke_opacity
      Reference line stroke opacity.
      ref_stroke_size
      Reference line stroke size (line width or pen thickness).
      ref_stroke_dash
      Reference line stroke dash style. A string containing space-separated integers that specify distances to alternately draw a line and a gap (in coordinate space units). If the number of elements in the array is odd, the elements of the array get copied and concatenated. For example, [5, 15, 25] will become [5, 15, 25, 5, 15, 25].
      Returns

      A Mark instance.

      markdown_card

      def markdown_card(box: str, title: str, content: str, data: Union[dict, str, NoneType] = None, commands: Union[List[Command], NoneType] = None) ‑> MarkdownCard

      Create a card that renders Markdown content.

      Github-flavored markdown is supported. HTML markup is allowed in markdown content. URLs, if found, are displayed as hyperlinks. Copyright, reserved, trademark, quotes, etc. are replaced with language-neutral symbols.

      Args
      box
      A string indicating how to place this component on the page.
      title
      The title for this card.
      content
      The markdown content. Supports Github Flavored Markdown (GFM): https://guides.github.com/features/mastering-markdown/
      data
      Additional data for the card.
      commands
      Contextual menu commands for this component.
      Returns

      A MarkdownCard instance.

      markup

      def markup(content: str, name: Union[str, NoneType] = None, visible: Union[bool, NoneType] = None) ‑> Component

      Render HTML content.

      Args
      content
      The HTML content.
      name
      An identifying name for this component.
      visible
      True if the component should be visible. Defaults to true.
      Returns

      A Markup instance.

      markup_card

      def markup_card(box: str, title: str, content: str, commands: Union[List[Command], NoneType] = None) ‑> MarkupCard

      Render HTML content.

      Args
      box
      A string indicating how to place this component on the page.
      title
      The title for this card.
      content
      The HTML content.
      commands
      Contextual menu commands for this component.
      Returns

      A MarkupCard instance.

      message_bar

      def message_bar(type: Union[str, NoneType] = None, text: Union[str, NoneType] = None, name: Union[str, NoneType] = None, visible: Union[bool, NoneType] = None) ‑> Component

      Create a message bar.

      A message bar is an area at the top of a primary view that displays relevant status information. You can use a message bar to tell the user about a situation that does not require their immediate attention and therefore does not need to block other activities.

      Args
      type
      The icon and color of the message bar. One of 'info', 'error', 'warning', 'success', 'danger', 'blocked'.
      text
      The text displayed on the message bar.
      name
      An identifying name for this component.
      visible
      True if the component should be visible. Defaults to true.
      Returns

      A MessageBar instance.

      meta_card

      def meta_card(box: str, title: Union[str, NoneType] = None, refresh: Union[int, NoneType] = None, notification: Union[str, NoneType] = None, redirect: Union[str, NoneType] = None, icon: Union[str, NoneType] = None, commands: Union[List[Command], NoneType] = None) ‑> MetaCard

      Represents page-global state.

      This card is invisible. It is used to control attributes of the active page.

      Args
      box
      A string indicating how to place this component on the page.
      title
      The title of the page.
      refresh
      Refresh rate in seconds. A value of 0 turns off live-updates. Values != 0 are currently ignored (reserved for future use).
      notification
      Display a desktop notification to the user.
      redirect
      Redirect the page to a new URL.
      icon
      Shortcut icon path. Preferably a .png file (.ico files may not work in mobile browsers).
      commands
      Contextual menu commands for this component.
      Returns

      A MetaCard instance.

      nav_card

      def nav_card(box: str, items: List[NavGroup], commands: Union[List[Command], NoneType] = None) ‑> NavCard

      Create a card containing a navigation pane.

      Args
      box
      A string indicating how to place this component on the page.
      items
      The navigation groups contained in this pane.
      commands
      Contextual menu commands for this component.
      Returns

      A NavCard instance.

      nav_group

      def nav_group(label: str, items: List[NavItem]) ‑> NavGroup

      Create a group of navigation items.

      Args
      label
      The label to display for this group.
      items
      The navigation items contained in this group.
      Returns

      A NavGroup instance.

      nav_item

      def nav_item(name: str, label: str) ‑> NavItem

      Create a navigation item.

      Args
      name
      The name of this item. Prefix the name with a '#' to trigger hash-change navigation.
      label
      The label to display.
      Returns

      A NavItem instance.

      picker

      def picker(name: str, choices: List[Choice], label: Union[str, NoneType] = None, values: Union[List[str], NoneType] = None, max_choices: Union[int, NoneType] = None, disabled: Union[bool, NoneType] = None, visible: Union[bool, NoneType] = None, tooltip: Union[str, NoneType] = None) ‑> Component

      Create a picker. Pickers are used to select one or more choices, such as tags or files, from a list. Use a picker to allow the user to quickly search for or manage a few tags or files.

      Args
      name
      An identifying name for this component.
      choices
      The choices to be presented.
      label
      Text to be displayed above the component.
      values
      The names of the selected choices.
      max_choices
      Maximum number of selectable choices. Defaults to no limit.
      disabled
      Controls whether the picker should be disabled or not.
      visible
      True if the component should be visible. Defaults to true.
      tooltip
      An optional tooltip message displayed when a user clicks the help icon to the right of the component.
      Returns

      A Picker instance.

      pixel_art_card

      def pixel_art_card(box: str, title: str, data: Union[dict, str], commands: Union[List[Command], NoneType] = None) ‑> PixelArtCard

      Create a card displaying a collaborative Pixel art tool, just for kicks.

      Args
      box
      A string indicating how to place this component on the page.
      title
      The title for this card.
      data
      The data for this card.
      commands
      Contextual menu commands for this component.
      Returns

      A PixelArtCard instance.

      plot

      def plot(marks: List[Mark]) ‑> Plot

      Create a plot. A plot is composed of one or more graphical mark layers.

      Args
      marks
      The graphical mark layers contained in this plot.
      Returns

      A Plot instance.

      plot_card

      def plot_card(box: str, title: str, data: Union[dict, str], plot: Plot, commands: Union[List[Command], NoneType] = None) ‑> PlotCard

      Create a card displaying a plot.

      Args
      box
      A string indicating how to place this component on the page.
      title
      The title for this card.
      data
      Data for this card.
      plot
      The plot to be displayed in this card.
      commands
      Contextual menu commands for this component.
      Returns

      A PlotCard instance.

      progress

      def progress(label: str, caption: Union[str, NoneType] = None, value: Union[float, NoneType] = None, visible: Union[bool, NoneType] = None, tooltip: Union[str, NoneType] = None, name: Union[str, NoneType] = None) ‑> Component

      Create a progress bar.

      Progress bars are used to show the completion status of an operation lasting more than 2 seconds. If the state of progress cannot be determined, do not set a value. Progress bars feature a bar showing total units to completion, and total units finished. The label appears above the bar, and the caption appears below. The label should tell someone exactly what the operation is doing.

      Examples of formatting include: [Object] is being [operation name], or [Object] is being [operation name] to [destination name] or [Object] is being [operation name] from [source name] to [destination name]

      Status text is generally in units elapsed and total units. Real-world examples include copying files to a storage location, saving edits to a file, and more. Use units that are informative and relevant to give the best idea to users of how long the operation will take to complete. Avoid time units as they are rarely accurate enough to be trustworthy. Also, combine steps of a complex operation into one total bar to avoid “rewinding” the bar. Instead change the label to reflect the change if necessary. Bars moving backwards reduce confidence in the service.

      Args
      label
      The text displayed above the bar.
      caption
      The text displayed below the bar.
      value
      The progress, between 0.0 and 1.0, or -1 (default) if indeterminate.
      visible
      True if the component should be visible. Defaults to true.
      tooltip
      An optional tooltip message displayed when a user clicks the help icon to the right of the component.
      name
      An identifying name for this component.
      Returns

      A Progress instance.

      progress_table_cell_type

      def progress_table_cell_type(color: Union[str, NoneType] = None, name: Union[str, NoneType] = None) ‑> TableCellType

      Create a cell type that renders a column's cells as progress bars instead of plain text. If set on a column, the cell value must be between 0.0 and 1.0.

      Args
      color
      Color of the progress arc.
      name
      An identifying name for this component.
      Returns

      A ProgressTableCellType instance.

      range_slider

      def range_slider(name: str, label: Union[str, NoneType] = None, min: Union[float, NoneType] = None, max: Union[float, NoneType] = None, step: Union[float, NoneType] = None, min_value: Union[float, NoneType] = None, max_value: Union[float, NoneType] = None, disabled: Union[bool, NoneType] = None, trigger: Union[bool, NoneType] = None, visible: Union[bool, NoneType] = None, tooltip: Union[str, NoneType] = None) ‑> Component

      Create a range slider.

      A range slider is an element used to select a value range. It provides a visual indication of adjustable content, as well as the current setting in the total range of content. It is displayed as a horizontal track with options on either side. Knobs or levers are dragged to one end or the other to make the choice, indicating the current max and min value.

      Args
      name
      An identifying name for this component.
      label
      Text to be displayed alongside the component.
      min
      The minimum value of the slider. Defaults to 0.
      max
      The maximum value of the slider. Defaults to 100.
      step
      The difference between two adjacent values of the slider.
      min_value
      The lower bound of the selected range.
      max_value
      The upper bound of the selected range.
      disabled
      True if this field is disabled.
      trigger
      True if the form should be submitted when the slider value changes.
      visible
      True if the component should be visible. Defaults to true.
      tooltip
      An optional tooltip message displayed when a user clicks the help icon to the right of the component.
      Returns

      A RangeSlider instance.

      repeat_card

      def repeat_card(box: str, item_view: str, item_props: Union[dict, str], data: Union[Data, str], commands: Union[List[Command], NoneType] = None) ‑> RepeatCard

      EXPERIMENTAL. DO NOT USE. Create a card containing other cards.

      Args
      box
      A string indicating how to place this component on the page.
      item_view
      EXPERIMENTAL. DO NOT USE.
      item_props
      The child card properties.
      data
      Data for this card.
      commands
      Contextual menu commands for this component.
      Returns

      A RepeatCard instance.

      separator

      def separator(label: Union[str, NoneType] = None, name: Union[str, NoneType] = None, visible: Union[bool, NoneType] = None) ‑> Component

      Create a separator.

      A separator visually separates content into groups.

      Args
      label
      The text displayed on the separator.
      name
      An identifying name for this component.
      visible
      True if the component should be visible. Defaults to true.
      Returns

      A Separator instance.

      slider

      def slider(name: str, label: Union[str, NoneType] = None, min: Union[float, NoneType] = None, max: Union[float, NoneType] = None, step: Union[float, NoneType] = None, value: Union[float, NoneType] = None, disabled: Union[bool, NoneType] = None, trigger: Union[bool, NoneType] = None, visible: Union[bool, NoneType] = None, tooltip: Union[str, NoneType] = None) ‑> Component

      Create a slider.

      A slider is an element used to set a value. It provides a visual indication of adjustable content, as well as the current setting in the total range of content. It is displayed as a horizontal track with options on either side. A knob or lever is dragged to one end or the other to make the choice, indicating the current value. Marks on the slider bar can show values and users can choose where they want to drag the knob or lever to set the value.

      A slider is a good choice when you know that users think of the value as a relative quantity, not a numeric value. For example, users think about setting their audio volume to low or medium — not about setting the value to two or five.

      The default value of the slider will be zero or be constrained to the min and max values. The min will be returned if the value is set under the min and the max will be returned if set higher than the max value.

      Args
      name
      An identifying name for this component.
      label
      Text to be displayed alongside the component.
      min
      The minimum value of the slider.
      max
      The maximum value of the slider.
      step
      The difference between two adjacent values of the slider.
      value
      The current value of the slider.
      disabled
      True if this field is disabled.
      trigger
      True if the form should be submitted when the slider value changes.
      visible
      True if the component should be visible. Defaults to true.
      tooltip
      An optional tooltip message displayed when a user clicks the help icon to the right of the component.
      Returns

      A Slider instance.

      small_series_stat_card

      def small_series_stat_card(box: str, title: str, value: str, plot_data: Union[Data, str], plot_value: str, plot_zero_value: Union[float, NoneType] = None, plot_category: Union[str, NoneType] = None, plot_type: Union[str, NoneType] = None, plot_curve: Union[str, NoneType] = None, plot_color: Union[str, NoneType] = None, data: Union[dict, str, NoneType] = None, commands: Union[List[Command], NoneType] = None) ‑> SmallSeriesStatCard

      Create a small stat card displaying a primary value and a series plot.

      Args
      box
      A string indicating how to place this component on the page.
      title
      The card's title.
      value
      The primary value displayed.
      plot_data
      The plot's data.
      plot_value
      The data field to use for y-axis values.
      plot_zero_value
      The base value to use for each y-axis mark. Set this to 0 if you want to pin the x-axis at y=0. If not provided, the minimum value from the data is used.
      plot_category
      The data field to use for x-axis values (ignored if plot_type is area; must be provided if plot_type is interval). Defaults to 'x'.
      plot_type
      The type of plot. Defaults to area. One of 'area', 'interval'.
      plot_curve
      The plot's curve style. Defaults to linear. One of 'linear', 'smooth', 'step', 'step-after', 'step-before'.
      plot_color
      The plot's color.
      data
      Data for this card.
      commands
      Contextual menu commands for this component.
      Returns

      A SmallSeriesStatCard instance.

      small_stat_card

      def small_stat_card(box: str, title: str, value: str, data: Union[dict, str, NoneType] = None, commands: Union[List[Command], NoneType] = None) ‑> SmallStatCard

      Create a stat card displaying a single value.

      Args
      box
      A string indicating how to place this component on the page.
      title
      The card's title.
      value
      The primary value displayed.
      data
      Data for this card.
      commands
      Contextual menu commands for this component.
      Returns

      A SmallStatCard instance.

      spinbox

      def spinbox(name: str, label: Union[str, NoneType] = None, min: Union[float, NoneType] = None, max: Union[float, NoneType] = None, step: Union[float, NoneType] = None, value: Union[float, NoneType] = None, disabled: Union[bool, NoneType] = None, visible: Union[bool, NoneType] = None, tooltip: Union[str, NoneType] = None) ‑> Component

      Create a spinbox.

      A spinbox allows the user to incrementally adjust a value in small steps. It is mainly used for numeric values, but other values are supported too.

      Args
      name
      An identifying name for this component.
      label
      Text to be displayed alongside the component.
      min
      The minimum value of the spinbox.
      max
      The maximum value of the spinbox.
      step
      The difference between two adjacent values of the spinbox.
      value
      The current value of the spinbox.
      disabled
      True if this field is disabled.
      visible
      True if the component should be visible. Defaults to true.
      tooltip
      An optional tooltip message displayed when a user clicks the help icon to the right of the component.
      Returns

      A Spinbox instance.

      step

      def step(label: str, icon: Union[str, NoneType] = None, done: Union[bool, NoneType] = None) ‑> Step

      Create a step for a stepper.

      Args
      label
      Text displayed below icon.
      icon
      Icon to be displayed.
      done
      Indicates whether this step has already been completed.
      Returns

      A Step instance.

      stepper

      def stepper(name: str, items: List[Step], visible: Union[bool, NoneType] = None, tooltip: Union[str, NoneType] = None) ‑> Component

      Create a component that displays a sequence of steps in a process. The steps keep users informed about where they are in the process and how much is left to complete.

      Args
      name
      An identifying name for this component.
      items
      The sequence of steps to be displayed.
      visible
      True if the component should be visible. Defaults to true.
      tooltip
      An optional tooltip message displayed when a user clicks the help icon to the right of the component.
      Returns

      A Stepper instance.

      tab

      def tab(name: str, label: Union[str, NoneType] = None, icon: Union[str, NoneType] = None) ‑> Tab

      Create a tab.

      Args
      name
      An identifying name for this component.
      label
      The text displayed on the tab.
      icon
      The icon displayed on the tab.
      Returns

      A Tab instance.

      tab_card

      def tab_card(box: str, items: List[Tab], value: Union[str, NoneType] = None, link: Union[bool, NoneType] = None, commands: Union[List[Command], NoneType] = None) ‑> TabCard

      Create a card containing tabs for navigation.

      Args
      box
      A string indicating how to place this component on the page.
      items
      Items to render.
      value
      The name of the tab to select.
      link
      True if tabs should be rendered as links and not a standard tab.
      commands
      Contextual menu commands for this component.
      Returns

      A TabCard instance.

      table

      def table(name: str, columns: List[TableColumn], rows: List[TableRow], multiple: Union[bool, NoneType] = None, groupable: Union[bool, NoneType] = None, downloadable: Union[bool, NoneType] = None, resettable: Union[bool, NoneType] = None, height: Union[str, NoneType] = None, values: Union[List[str], NoneType] = None, visible: Union[bool, NoneType] = None, tooltip: Union[str, NoneType] = None) ‑> Component

      Create an interactive table.

      This table differs from a markdown table in that it supports clicking or selecting rows. If you simply want to display a non-interactive table of information, use a markdown table.

      If multiple is set to False (default), each row in the table is clickable. When a row is clicked, the form is submitted automatically, and q.args.table_name is set to [row_name], where table_name is the name of the table, and row_name is the name of the row that was clicked on.

      If multiple is set to True, each row in the table is selectable. A row can be selected by clicking on it. Multiple rows can be selected either by shift+clicking or using marquee selection. When the form is submitted,q.args.table_name is set to [row1_name, row2_name, …] where table_name is the name of the table, and row1_name, row2_name are the name of the rows that were selected. Note that if multiple is set to True, the form is not submitted automatically, and one or more buttons are required in the form to trigger submission.

      Args
      name
      An identifying name for this component.
      columns
      The columns in this table.
      rows
      The rows in this table.
      multiple
      True to allow multiple rows to be selected.
      groupable
      True to allow group by feature.
      downloadable
      Indicates whether the contents of this table can be downloaded and saved as a CSV file. Defaults to False.
      resettable
      Indicates whether a Reset button should be displayed to reset search / filter / group-by values to their defaults. Defaults to False.
      height
      The height of the table, e.g. '400px', '50%', etc.
      values
      The names of the selected rows. If this parameter is set, multiple selections will be allowed (multiple is assumed to be True).
      visible
      True if the component should be visible. Defaults to true.
      tooltip
      An optional tooltip message displayed when a user clicks the help icon to the right of the component.
      Returns

      A Table instance.

      table_cell_type

      def table_cell_type(progress: Union[ProgressTableCellType, NoneType] = None, icon: Union[IconTableCellType, NoneType] = None) ‑> TableCellType

      Defines cell content to be rendered instead of a simple text.

      Args
      progress
      No documentation available.
      icon
      No documentation available.
      Returns

      A TableCellType instance.

      table_column

      def table_column(name: str, label: str, min_width: Union[str, NoneType] = None, max_width: Union[str, NoneType] = None, sortable: Union[bool, NoneType] = None, searchable: Union[bool, NoneType] = None, filterable: Union[bool, NoneType] = None, link: Union[bool, NoneType] = None, cell_type: Union[TableCellType, NoneType] = None) ‑> TableColumn

      Create a table column.

      Args
      name
      An identifying name for this column.
      label
      The text displayed on the column header.
      min_width
      The minimum width of this column, e.g. '50px'. Only px units are supported at this time.
      max_width
      The maximum width of this column, e.g. '100px'. Only px units are supported at this time.
      sortable
      Indicates whether the column is sortable.
      searchable
      Indicates whether the contents of this column can be searched through. Enables a search box for the table if true.
      filterable
      Indicates whether the contents of this column are displayed as filters in a dropdown.
      link
      Indicates whether each cell in this column should be displayed as a clickable link.
      cell_type
      Defines how to render each cell in this column. Defaults to plain text.
      Returns

      A TableColumn instance.

      table_row

      def table_row(name: str, cells: List[str]) ‑> TableRow

      Create a table row.

      Args
      name
      An identifying name for this row.
      cells
      The cells in this row (displayed left to right).
      Returns

      A TableRow instance.

      tabs

      def tabs(name: str, value: Union[str, NoneType] = None, items: Union[List[Tab], NoneType] = None, visible: Union[bool, NoneType] = None) ‑> Component

      Create a tab bar.

      Args
      name
      An identifying name for this component.
      value
      The name of the tab to select.
      items
      The tabs in this tab bar.
      visible
      True if the component should be visible. Defaults to true.
      Returns

      A Tabs instance.

      tall_gauge_stat_card

      def tall_gauge_stat_card(box: str, title: str, value: str, aux_value: str, progress: float, plot_color: Union[str, NoneType] = None, data: Union[dict, str, NoneType] = None, commands: Union[List[Command], NoneType] = None) ‑> TallGaugeStatCard

      Create a tall stat card displaying a primary value, an auxiliary value and a progress gauge.

      Args
      box
      A string indicating how to place this component on the page.
      title
      The card's title.
      value
      The primary value displayed.
      aux_value
      The auxiliary value displayed next to the primary value.
      progress
      The value of the progress gauge, between 0 and 1.
      plot_color
      The color of the progress gauge.
      data
      Data for this card.
      commands
      Contextual menu commands for this component.
      Returns

      A TallGaugeStatCard instance.

      tall_series_stat_card

      def tall_series_stat_card(box: str, title: str, value: str, aux_value: str, plot_data: Union[Data, str], plot_value: str, plot_zero_value: Union[float, NoneType] = None, plot_category: Union[str, NoneType] = None, plot_type: Union[str, NoneType] = None, plot_curve: Union[str, NoneType] = None, plot_color: Union[str, NoneType] = None, data: Union[dict, str, NoneType] = None, commands: Union[List[Command], NoneType] = None) ‑> TallSeriesStatCard

      Create a tall stat card displaying a primary value, an auxiliary value and a series plot.

      Args
      box
      A string indicating how to place this component on the page.
      title
      The card's title.
      value
      The primary value displayed.
      aux_value
      The auxiliary value displayed below the primary value.
      plot_data
      The plot's data.
      plot_value
      The data field to use for y-axis values.
      plot_zero_value
      The base value to use for each y-axis mark. Set this to 0 if you want to pin the x-axis at y=0. If not provided, the minimum value from the data is used.
      plot_category
      The data field to use for x-axis values (ignored if plot_type is area; must be provided if plot_type is interval). Defaults to 'x'.
      plot_type
      The type of plot. Defaults to area. One of 'area', 'interval'.
      plot_curve
      The plot's curve style. Defaults to linear. One of 'linear', 'smooth', 'step', 'step-after', 'step-before'.
      plot_color
      The plot's color.
      data
      Data for this card.
      commands
      Contextual menu commands for this component.
      Returns

      A TallSeriesStatCard instance.

      template

      def template(content: str, data: Union[dict, str, NoneType] = None, name: Union[str, NoneType] = None, visible: Union[bool, NoneType] = None) ‑> Component

      Render dynamic content using an HTML template.

      Args
      content
      The Handlebars template. https://handlebarsjs.com/guide/
      data
      Data for the Handlebars template
      name
      An identifying name for this component.
      visible
      True if the component should be visible. Defaults to true.
      Returns

      A Template instance.

      template_card

      def template_card(box: str, title: str, content: str, data: Union[dict, str, NoneType] = None, commands: Union[List[Command], NoneType] = None) ‑> TemplateCard

      Render dynamic content using an HTML template.

      Args
      box
      A string indicating how to place this component on the page.
      title
      The title for this card.
      content
      The Handlebars template. https://handlebarsjs.com/guide/
      data
      Data for the Handlebars template.
      commands
      Contextual menu commands for this component.
      Returns

      A TemplateCard instance.

      text

      def text(content: str, size: Union[str, NoneType] = None, visible: Union[bool, NoneType] = None, tooltip: Union[str, NoneType] = None, name: Union[str, NoneType] = None) ‑> Component

      Create text content.

      Args
      content
      The text content.
      size
      The font size of the text content. One of 'xl', 'l', 'm', 's', 'xs'.
      visible
      True if the component should be visible. Defaults to true.
      tooltip
      Tooltip message.
      name
      An identifying name for this component.
      Returns

      A Text instance.

      text_l

      def text_l(content: str, visible: Union[bool, NoneType] = None, tooltip: Union[str, NoneType] = None, commands: Union[List[Command], NoneType] = None, name: Union[str, NoneType] = None) ‑> Component

      Create large sized text content.

      Args
      content
      The text content.
      visible
      True if the component should be visible. Defaults to true.
      tooltip
      Tooltip message.
      commands
      Contextual menu commands for this component.
      name
      An identifying name for this component.
      Returns

      A TextL instance.

      text_m

      def text_m(content: str, visible: Union[bool, NoneType] = None, tooltip: Union[str, NoneType] = None, name: Union[str, NoneType] = None) ‑> Component

      Create medium sized text content.

      Args
      content
      The text content.
      visible
      True if the component should be visible. Defaults to true.
      tooltip
      Tooltip message.
      name
      An identifying name for this component.
      Returns

      A TextM instance.

      text_s

      def text_s(content: str, visible: Union[bool, NoneType] = None, tooltip: Union[str, NoneType] = None, name: Union[str, NoneType] = None) ‑> Component

      Create small sized text content.

      Args
      content
      The text content.
      visible
      True if the component should be visible. Defaults to true.
      tooltip
      Tooltip message.
      name
      An identifying name for this component.
      Returns

      A TextS instance.

      text_xl

      def text_xl(content: str, visible: Union[bool, NoneType] = None, tooltip: Union[str, NoneType] = None, commands: Union[List[Command], NoneType] = None, name: Union[str, NoneType] = None) ‑> Component

      Create extra-large sized text content.

      Args
      content
      The text content.
      visible
      True if the component should be visible. Defaults to true.
      tooltip
      Tooltip message.
      commands
      Contextual menu commands for this component.
      name
      An identifying name for this component.
      Returns

      A TextXl instance.

      text_xs

      def text_xs(content: str, visible: Union[bool, NoneType] = None, tooltip: Union[str, NoneType] = None, name: Union[str, NoneType] = None) ‑> Component

      Create extra-small sized text content.

      Args
      content
      The text content.
      visible
      True if the component should be visible. Defaults to true.
      tooltip
      Tooltip message.
      name
      An identifying name for this component.
      Returns

      A TextXs instance.

      textbox

      def textbox(name: str, label: Union[str, NoneType] = None, placeholder: Union[str, NoneType] = None, value: Union[str, NoneType] = None, mask: Union[str, NoneType] = None, icon: Union[str, NoneType] = None, prefix: Union[str, NoneType] = None, suffix: Union[str, NoneType] = None, error: Union[str, NoneType] = None, required: Union[bool, NoneType] = None, disabled: Union[bool, NoneType] = None, readonly: Union[bool, NoneType] = None, multiline: Union[bool, NoneType] = None, password: Union[bool, NoneType] = None, trigger: Union[bool, NoneType] = None, visible: Union[bool, NoneType] = None, tooltip: Union[str, NoneType] = None) ‑> Component

      Create a text box.

      The text box component enables a user to type text into an app. It's typically used to capture a single line of text, but can be configured to capture multiple lines of text. The text displays on the screen in a simple, uniform format.

      Args
      name
      An identifying name for this component.
      label
      The text displayed above the field.
      placeholder
      A string that provides a brief hint to the user as to what kind of information is expected in the field. It should be a word or short phrase that demonstrates the expected type of data, rather than an explanatory message.
      value
      Text to be displayed inside the text box.
      mask
      The masking string that defines the mask's behavior. A backslash will escape any character. Special format characters are: '9': [0-9] 'a': [a-zA-Z] '*': [a-zA-Z0-9].
      icon
      Icon displayed in the far right end of the text field.
      prefix
      Text to be displayed before the text box contents.
      suffix
      Text to be displayed after the text box contents.
      error
      Text to be displayed as an error below the text box.
      required
      True if the text box is a required field.
      disabled
      True if the text box is disabled.
      readonly
      True if the text box is a read-only field.
      multiline
      True if the text box should allow multi-line text entry.
      password
      True if the text box should hide text content.
      trigger
      True if the form should be submitted when the text value changes.
      visible
      True if the component should be visible. Defaults to true.
      tooltip
      An optional tooltip message displayed when a user clicks the help icon to the right of the component.
      Returns

      A Textbox instance.

      toggle

      def toggle(name: str, label: Union[str, NoneType] = None, value: Union[bool, NoneType] = None, disabled: Union[bool, NoneType] = None, trigger: Union[bool, NoneType] = None, visible: Union[bool, NoneType] = None, tooltip: Union[str, NoneType] = None) ‑> Component

      Create a toggle. Toggles represent a physical switch that allows users to turn things on or off. Use toggles to present users with two mutually exclusive options (like on/off), where choosing an option results in an immediate action.

      Use a toggle for binary operations that take effect right after the user flips the Toggle. For example, use a Toggle to turn services or hardware components on or off. In other words, if a physical switch would work for the action, a Toggle is probably the best component to use.

      Args
      name
      An identifying name for this component.
      label
      Text to be displayed alongside the component.
      value
      True if selected, False if unselected.
      disabled
      True if the checkbox is disabled.
      trigger
      True if the form should be submitted when the toggle value changes.
      visible
      True if the component should be visible. Defaults to true.
      tooltip
      An optional tooltip message displayed when a user clicks the help icon to the right of the component.
      Returns

      A Toggle instance.

      toolbar_card

      def toolbar_card(box: str, items: List[Command], secondary_items: Union[List[Command], NoneType] = None, overflow_items: Union[List[Command], NoneType] = None, commands: Union[List[Command], NoneType] = None) ‑> ToolbarCard

      Create a card containing a toolbar.

      Args
      box
      A string indicating how to place this component on the page.
      items
      Items to render.
      secondary_items
      Items to render on the right side (or left, in RTL).
      overflow_items
      Items to render in an overflow menu.
      commands
      Contextual menu commands for this component.
      Returns

      A ToolbarCard instance.

      vega_card

      def vega_card(box: str, title: str, specification: str, data: Union[dict, str, NoneType] = None, commands: Union[List[Command], NoneType] = None) ‑> VegaCard

      Create a card containing a Vega-lite plot.

      Args
      box
      A string indicating how to place this component on the page.
      title
      The title of this card.
      specification
      The Vega-lite specification.
      data
      Data for the plot, if any.
      commands
      Contextual menu commands for this component.
      Returns

      A VegaCard instance.

      vega_visualization

      def vega_visualization(specification: str, data: Union[dict, str, NoneType] = None, width: Union[str, NoneType] = None, height: Union[str, NoneType] = None, name: Union[str, NoneType] = None, visible: Union[bool, NoneType] = None) ‑> Component

      Create a Vega-lite plot for display inside a form.

      Args
      specification
      The Vega-lite specification.
      data
      Data for the plot, if any.
      width
      The width of the visualization. Defaults to 100%.
      height
      The height of the visualization. Defaults to 300px.
      name
      An identifying name for this component.
      visible
      True if the component should be visible. Defaults to true.
      Returns

      A VegaVisualization instance.

      visualization

      def visualization(plot: Plot, data: Union[dict, str], width: Union[str, NoneType] = None, height: Union[str, NoneType] = None, name: Union[str, NoneType] = None, visible: Union[bool, NoneType] = None) ‑> Component

      Create a visualization for display inside a form.

      Args
      plot
      The plot to be rendered in this visualization.
      data
      Data for this visualization.
      width
      The width of the visualization. Defaults to 100%.
      height
      The hight of the visualization. Defaults to 300px.
      name
      An identifying name for this component.
      visible
      True if the component should be visible. Defaults to true.
      Returns

      A Visualization instance.

      wide_bar_stat_card

      def wide_bar_stat_card(box: str, title: str, value: str, aux_value: str, progress: float, plot_color: Union[str, NoneType] = None, data: Union[dict, str, NoneType] = None, commands: Union[List[Command], NoneType] = None) ‑> WideBarStatCard

      Create a wide stat card displaying a primary value, an auxiliary value and a progress bar.

      Args
      box
      A string indicating how to place this component on the page.
      title
      The card's title.
      value
      The primary value displayed.
      aux_value
      The auxiliary value displayed next to the primary value.
      progress
      The value of the progress bar, between 0 and 1.
      plot_color
      The color of the progress bar.
      data
      Data for this card.
      commands
      Contextual menu commands for this component.
      Returns

      A WideBarStatCard instance.

      wide_gauge_stat_card

      def wide_gauge_stat_card(box: str, title: str, value: str, aux_value: str, progress: float, plot_color: Union[str, NoneType] = None, data: Union[dict, str, NoneType] = None, commands: Union[List[Command], NoneType] = None) ‑> WideGaugeStatCard

      Create a wide stat card displaying a primary value, an auxiliary value and a progress gauge.

      Args
      box
      A string indicating how to place this component on the page.
      title
      The card's title.
      value
      The primary value displayed.
      aux_value
      The auxiliary value displayed next to the primary value.
      progress
      The value of the progress gauge, between 0 and 1.
      plot_color
      The color of the progress gauge.
      data
      Data for this card.
      commands
      Contextual menu commands for this component.
      Returns

      A WideGaugeStatCard instance.

      wide_series_stat_card

      def wide_series_stat_card(box: str, title: str, value: str, aux_value: str, plot_data: Union[Data, str], plot_value: str, plot_zero_value: Union[float, NoneType] = None, plot_category: Union[str, NoneType] = None, plot_type: Union[str, NoneType] = None, plot_curve: Union[str, NoneType] = None, plot_color: Union[str, NoneType] = None, data: Union[dict, str, NoneType] = None, commands: Union[List[Command], NoneType] = None) ‑> WideSeriesStatCard

      Create a wide stat card displaying a primary value, an auxiliary value and a series plot.

      Args
      box
      A string indicating how to place this component on the page.
      title
      The card's title.
      value
      The primary value displayed.
      aux_value
      The auxiliary value displayed below the primary value.
      plot_data
      The plot's data.
      plot_value
      The data field to use for y-axis values.
      plot_zero_value
      The base value to use for each y-axis mark. Set this to 0 if you want to pin the x-axis at y=0. If not provided, the minimum value from the data is used.
      plot_category
      The data field to use for x-axis values (ignored if plot_type is area; must be provided if plot_type is interval). Defaults to 'x'.
      plot_type
      The type of plot. Defaults to area. One of 'area', 'interval'.
      plot_curve
      The plot's curve style. Defaults to linear. One of 'linear', 'smooth', 'step', 'step-after', 'step-before'.
      plot_color
      The plot's color.
      data
      Data for this card.
      commands
      Contextual menu commands for this component.
      Returns

      A WideSeriesStatCard instance.

      Edit this page
      + + + + + + + + + + \ No newline at end of file diff --git a/docs/docs/apps/index.html b/docs/docs/apps/index.html index 125f8270f5..0059f9f0ef 100644 --- a/docs/docs/apps/index.html +++ b/docs/docs/apps/index.html @@ -5,31 +5,30 @@ Wave Apps | H2O Wave - - - - - - - - - - + + + + + + + + + +
      -

      Wave Apps

      A Wave app is the primary mechanism to publish interactive web content in Wave.

      A Wave app can publish content and handle user interactions, unlike a Wave script, which can publish content but not handle user interactions.

      Here is the skeleton of a Wave app:

      from h2o_wave import Q, listen, ui
      -
      async def serve(q: Q):
      # Modify the page
      q.page['qux'] = ui.some_card()
      # Save the page
      await q.page.save()
      -
      # Start listening to events
      listen('/foo', serve)

      Listen and serve

      listen() has two required arguments:

      • The route your app is interested in (in the above case /foo).
      • The handler function to call when an event is received (in the above case, serve).

      listen() is a blocking call: it starts an event loop listening for user interaction events, and announces itself to the Wave server. The Wave server then starts routing any user actions happening at /foo to your app.

      The serve() function is called every time the user performs some action at the route /foo (access the page, reload it, click a button, access a menu, enter text, and so on).

      The details about what action was performed, and who performed the action, are available in the argument passed to serve(), the query context q (of type Q).

      Runtime context

      The query context q carries the following attributes:

      • route: The route at which the action was performed (in this case, /foo).
      • page: A reference to the current page (in this case, the page hosted at /foo).
      • site: A reference to the page's parent site, from which you can grab references to other pages.
      • args: The event arguments, a dictionary-like object containing information about the user action.
      • app, user, client: Dictionary-like objects holding server-side state, at the app-level, the user-level and the client-level, respectively. Here, 'client' refers to the browser tab.
      • username: The username of the user who performed the action.
      • mode: The app's realtime mode, one of unicast, multicast, or broadcast.
      Edit this page
      - - - - - - - - - - +

      Wave Apps

      A Wave app is the primary mechanism to publish interactive web content in Wave.

      A Wave app can publish content and handle user interactions, unlike a Wave script, which can publish content but not handle user interactions.

      Structure

      Here is the skeleton of a Wave app:

      app.py
      from h2o_wave import main, app, Q, ui
      +
      @app('/foo')
      async def serve(q: Q):
      # Modify the page
      q.page['qux'] = ui.some_card()
      # Save the page
      await q.page.save()

      An app typically imports four symbols from h2o_wave:

      • main: An ASGI-compatible function. See Deployment.
      • app: A decorator for your query handler (or request handler).
      • Q: A class that represents the query sent to your query handler.
      • ui: The module containing the API for drawing UI elements.

      @app() has one required argument - the route your app is interested in (in this case /foo). Whenever a user performs any action at /foo - access the page, reload it, click a button, access a menu, enter text, and so on - the query handler serve() is called. The details about what action was performed, and who performed the action, are available in the argument passed to serve(), the query context q (of type Q).

      Wave apps are run using the wave run command, which accepts the name of the Python module in which main is imported from h2o_wave.

      If your app is contained in app.py, run it like this:

      wave run app

      If your app is contained in path/to/app.py, run it like this:

      wave run path.to.app

      When run, the app starts an event loop listening for user interaction events, and announces itself to the Wave server. The Wave server then starts routing any user actions happening at /foo to your app.

      Runtime context

      The query context q carries the following attributes:

      • route: The route at which the action was performed (in this case, /foo).
      • page: A reference to the current page (in this case, the page hosted at /foo).
      • site: A reference to the page's parent site, from which you can grab references to other pages.
      • args: The event arguments, a dictionary-like object containing information about the user action.
      • app, user, client: Dictionary-like objects holding server-side state, at the app-level, the user-level and the client-level, respectively. Here, 'client' refers to the browser tab.
      • username: The username of the user who performed the action.
      • mode: The app's realtime mode, one of unicast, multicast, or broadcast.
      Edit this page
      + + + + + + + + + + \ No newline at end of file diff --git a/docs/docs/architecture/index.html b/docs/docs/architecture/index.html index d82c2bc94f..2cf8ff10ed 100644 --- a/docs/docs/architecture/index.html +++ b/docs/docs/architecture/index.html @@ -5,29 +5,29 @@ Architecture | H2O Wave - - - - - - - - - - + + + + + + + + + +
      -

      Architecture

      H2O Wave is a software stack for building beautiful, low-latency, realtime, browser-based applications and dashboards entirely in Python without using HTML, Javascript or CSS.

      It excels at capturing data, visualizations, and graphics from multiple sources, and broadcasting them live over the web.

      The stack is engineered from the ground-up for low-latency, realtime information display, and is usable on its own (not only a programming framework, but a programmable content server).

      Overview

      The Wave runtime operates over three tiers:

      • A content server. The Wave server, a ~10MB static binary executable that runs anywhere1.
      • A language driver. The h2o-wave PyPI package used by Wave scripts and apps.
      • A browser-based client. The user interface and components.
      +---------+ +---------+
      | Browser +---------+ +------>+ app1.py |
      +---------+ | | +---------+
      v |
      +---------+ +-+------+-+ +---------+
      | Browser +------>+ Server +---->+ app2.py |
      +---------+ +-+------+-+ +---------+
      ^ |
      +---------+ | | +---------+
      | Browser +---------+ +------>+ app3.py |
      +---------+ +---------+

      The Wave server has three main functions:

      • Store site content
      • Transmit content changes to browsers.
      • Transmit browser events to apps.

      In other words, the Wave server is comparable to a in-memory realtime database, a HTTP web server and a proxy server, all rolled into one, with browsers (clients) downstream, and Wave apps (or scripts) upstream.

      The language driver (the h2o-wave PyPI package) provides the ability to manage content on the Wave server. It's similar in function to a database driver, but unlike typical database drivers (which use SQL as a protocol), the Wave driver provides an API closely integrated with the Python language that feels natural and idiomatic in practice.

      The browser-based client's job is to render content on the user interface, and transmit user actions in the form of events back to the Wave server.

      How does it work?

      The Wave server stores all content in a page cache called a site. A site is a collection of pages. Each page has an address, called its route. A page is composed of cards. A card holds content, and any tabular data associated with the content, called data buffers.

      When a browser is pointed to a route, it pulls a copy of the page, creates a replica locally, and renders the content on the user interface.

      The language driver (the h2o-wave PyPI package) maintains an illusion that server-side content is available locally. Local updates to pages and cards are transmitted in the form of operations to the server. The server applies those updates to the master copy of the content. If any browser is currently displaying that content, the server forwards updates to the browser, causing the browser to update its replica and re-render its user interface.

      Python
      +------------+
      | app.py |
      | + |
      | | |
      | v |
      | +---+----+ |
      +-+ Driver +-+
      +---+----+
      |
      |Operations
      |
      v
      +-----+------+
      | Server |
      | |
      | +------+ |
      | | Page | |
      | +------+ |
      | |
      +-----+------+
      |
      |Replication
      |
      +-------------+
      | +---------+ |
      | | Replica | |
      | +---------+ |
      | |
      | UI |
      +-------------+
      Browser

      The language driver can be used by two kinds of Python programs: Wave apps and Wave scripts.

      • Wave apps are interactive programs that can update content and respond to user actions.
      • Wave scripts are simpler, non-interactive (batch) programs: they can update content, but not respond to user actions.

      Wave apps sport a websocket server under the hood. When a Wave app is launched, it announces its existence to the Wave server, and the Wave server establishes a relay with the Wave app. When a browser tries to connect to an app, the Wave server acts as a hub, relaying information back and forth between the browser and the app.

      How is it different?

      The Wave server retains content. This is an important concept to understand, and the primary reason why Wave is different from a typical web framework. A Wave script can update content and exit, and the Wave server will happily continue serving that content. In other words, no Python process needs to be around if a new user arrives after you script has exited.

      Different parts of the same page can be updated by different scripts running on different devices. Also, all content is live (or reactive) all the time: browsers always display up-to-date content without the need to reload.

      1 Linux, Windows, Darwin, BSD, Solaris, Android on amd64, arm, 386, ppc, mips; almost everywhere.

      Edit this page
      - - - - - - - - - - +

      Architecture

      H2O Wave is a software stack for building beautiful, low-latency, realtime, browser-based applications and dashboards entirely in Python without using HTML, Javascript or CSS.

      It excels at capturing data, visualizations, and graphics from multiple sources, and broadcasting them live over the web.

      The stack is engineered from the ground-up for low-latency, realtime information display, and is usable on its own (not only a programming framework, but a programmable content server).

      Overview

      The Wave runtime operates over three tiers:

      • A content server. The Wave server, a ~10MB static binary executable that runs anywhere1.
      • A language driver. The h2o-wave PyPI package used by Wave scripts and apps.
      • A browser-based client. The user interface and components.
      +---------+ +---------+
      | Browser +---------+ +------>+ app1.py |
      +---------+ | | +---------+
      v |
      +---------+ +-+------+-+ +---------+
      | Browser +------>+ Server +---->+ app2.py |
      +---------+ +-+------+-+ +---------+
      ^ |
      +---------+ | | +---------+
      | Browser +---------+ +------>+ app3.py |
      +---------+ +---------+

      The Wave server has three main functions:

      • Store site content
      • Transmit content changes to browsers.
      • Transmit browser events to apps.

      In other words, the Wave server is comparable to a in-memory realtime database, a HTTP web server and a proxy server, all rolled into one, with browsers (clients) downstream, and Wave apps (or scripts) upstream.

      The language driver (the h2o-wave PyPI package) provides the ability to manage content on the Wave server. It's similar in function to a database driver, but unlike typical database drivers (which use SQL as a protocol), the Wave driver provides an API closely integrated with the Python language that feels natural and idiomatic in practice.

      The browser-based client's job is to render content on the user interface, and transmit user actions in the form of events back to the Wave server.

      How does it work?

      The Wave server stores all content in a page cache called a site. A site is a collection of pages. Each page has an address, called its route. A page is composed of cards. A card holds content, and any tabular data associated with the content, called data buffers.

      When a browser is pointed to a route, it pulls a copy of the page, creates a replica locally, and renders the content on the user interface.

      The language driver (the h2o-wave PyPI package) maintains an illusion that server-side content is available locally. Local updates to pages and cards are transmitted in the form of operations to the server. The server applies those updates to the master copy of the content. If any browser is currently displaying that content, the server forwards updates to the browser, causing the browser to update its replica and re-render its user interface.

      Python
      +------------+
      | app.py |
      | + |
      | | |
      | v |
      | +---+----+ |
      +-+ Driver +-+
      +---+----+
      |
      |Operations
      |
      v
      +-----+------+
      | Server |
      | |
      | +------+ |
      | | Page | |
      | +------+ |
      | |
      +-----+------+
      |
      |Replication
      |
      +-------------+
      | +---------+ |
      | | Replica | |
      | +---------+ |
      | |
      | UI |
      +-------------+
      Browser

      The language driver can be used by two kinds of Python programs: Wave apps and Wave scripts.

      • Wave apps are interactive programs that can update content and respond to user actions.
      • Wave scripts are simpler, non-interactive (batch) programs: they can update content, but not respond to user actions.

      Wave apps are ASGI servers under the hood. When a Wave app is launched, it announces its existence to the Wave server, and the Wave server establishes a relay with the Wave app. When a browser tries to connect to an app, the Wave server acts as a hub, relaying information back and forth between the browser and the app.

      How is it different?

      The Wave server retains content. This is an important concept to understand, and the primary reason why Wave is different from a typical web framework. A Wave script can update content and exit, and the Wave server will happily continue serving that content. In other words, no Python process needs to be around if a new user arrives after you script has exited.

      Different parts of the same page can be updated by different scripts running on different devices. Also, all content is live (or reactive) all the time: browsers always display up-to-date content without the need to reload.

      1 Linux, Windows, Darwin, BSD, Solaris, Android on amd64, arm, 386, ppc, mips; almost everywhere.

      Edit this page
      + + + + + + + + + + \ No newline at end of file diff --git a/docs/docs/arguments/index.html b/docs/docs/arguments/index.html index 1055685c67..48e9e5a992 100644 --- a/docs/docs/arguments/index.html +++ b/docs/docs/arguments/index.html @@ -5,31 +5,30 @@ Event Arguments | H2O Wave - - - - - - - - - - + + + + + + + + + +
      -

      Event Arguments

      When a user interacts with components on a page - like typing in text, making choices, clicking buttons, and so on - that information is available to your app in the form of event arguments.

      The event arguments can be read from q.args, a read-only dictionary-like object passed to your listen() handler:

      from h2o_wave import Q, listen
      -
      async def serve(q: Q):
      print(q.args.foo)
      print(q.args.bar)
      print(q.args.qux)
      -
      listen('/foo', serve)
      tip

      q.args is an Expando instance, which means it behaves both like a dictionary and an object: q.args['foo'] is the same as q.args.foo. q.args.foo is easier to read.

      Interpreting arguments

      The table below summarizes how to interpret inputs from various components.

      ComponentIf the component is named foo, the value of q.args.foo is...
      ui.button()value if provided, else True.
      ui.checkbox()True if checked, False if unchecked, None if indeterminate.
      ui.checklist()A list of names of all the selected choices (a list of strings).
      ui.choice_group()The name of the selected choice (a string).
      ui.color_picker()The selected color (a string).
      ui.combobox()Either the name of the selected choice or the value typed in (a string).
      ui.command()data if provided, else True.
      ui.date_picker()The selected date in YYYY-MM-DD format (a string).
      ui.dropdown()If multi-valued, a list of names of all the selected choices (a list of strings), otherwise the name of the selected choice (a string).
      ui.expander()True if expanded, else False.
      ui.file_upload()A list of paths to the uploaded files (a list of strings).
      ui.nav_item()True if clicked.
      ui.picker()A list of names of all the selected choices (a list of strings).
      ui.range_slider()[min, max] (a list of two numbers).
      ui.slider()The selected value (a number).
      ui.spinbox()The selected value (a number).
      ui.table()A list of names of all the selected rows (a list of strings).
      ui.tabs()The name of the active tab (a string).
      ui.textbox()The value typed in (a string).
      ui.toggle()True if checked, False if unchecked.
      Edit this page
      - - - - - - - - - - +

      Event Arguments

      When a user interacts with components on a page - like typing in text, making choices, clicking buttons, and so on - that information is available to your app in the form of event arguments.

      The event arguments can be read from q.args, a read-only dictionary-like object passed to your @app() handler:

      from h2o_wave import Q, main, app
      +
      @app('/foo')
      async def serve(q: Q):
      print(q.args.foo)
      print(q.args.bar)
      print(q.args.qux)
      tip

      q.args is an Expando instance, which means it behaves both like a dictionary and an object: q.args['foo'] is the same as q.args.foo. q.args.foo is easier to read.

      Interpreting arguments

      The table below summarizes how to interpret inputs from various components.

      ComponentIf the component is named foo, the value of q.args.foo is...
      ui.button()value if provided, else True.
      ui.checkbox()True if checked, False if unchecked, None if indeterminate.
      ui.checklist()A list of names of all the selected choices (a list of strings).
      ui.choice_group()The name of the selected choice (a string).
      ui.color_picker()The selected color (a string).
      ui.combobox()Either the name of the selected choice or the value typed in (a string).
      ui.command()data if provided, else True.
      ui.date_picker()The selected date in YYYY-MM-DD format (a string).
      ui.dropdown()If multi-valued, a list of names of all the selected choices (a list of strings), otherwise the name of the selected choice (a string).
      ui.expander()True if expanded, else False.
      ui.file_upload()A list of paths to the uploaded files (a list of strings).
      ui.nav_item()True if clicked.
      ui.picker()A list of names of all the selected choices (a list of strings).
      ui.range_slider()[min, max] (a list of two numbers).
      ui.slider()The selected value (a number).
      ui.spinbox()The selected value (a number).
      ui.table()A list of names of all the selected rows (a list of strings).
      ui.tabs()The name of the active tab (a string).
      ui.textbox()The value typed in (a string).
      ui.toggle()True if checked, False if unchecked.
      Edit this page
      + + + + + + + + + + \ No newline at end of file diff --git a/docs/docs/background/index.html b/docs/docs/background/index.html new file mode 100644 index 0000000000..c566a943c1 --- /dev/null +++ b/docs/docs/background/index.html @@ -0,0 +1,35 @@ + + + + + + +Background Tasks | H2O Wave + + + + + + + + + + + + +
      +

      Background Tasks

      Wave apps are servers based on asyncio, Python's library for Asynchronous I/O, and lets you develop and deploy high-performance applications.

      Your @app query handler is invoked every time a user performs some action in your app's UI - access the page, reload it, click a button, access a menu, enter text, and so on. Performing blocking operations in your handler will hang your app's server and make your app's UI appear unresponsive until the blocking operation completes.

      In some cases, blocking calls can be pushed to the background to improve concurrency. To achieve this, the Wave API provides two lightweight wrappers over asyncio.run_in_executor(): q.run() and q.exec().

      Here is an example of a function that blocks:

      import time
      +
      def blocking_function(seconds) -> str:
      time.sleep(seconds) # Blocks!
      return f'Done!'

      To call the above function from an app, don't do this:

      @app('/demo')
      async def serve(q: Q):
      # ...
      message = blocking_function(42)
      # ...

      Instead, do this:

      @app('/demo')
      async def serve(q: Q):
      # ...
      message = await q.run(blocking_function, 42)
      # ...

      q.run() runs the blocking function in the background, in-process.

      Depending on your use case, you might want to use a separate process pool or thread pool from Python's multiprocessing library, like this:

      import concurrent.futures
      +
      @app('/demo')
      async def serve(q: Q):
      # ...
      with concurrent.futures.ThreadPoolExecutor() as pool:
      message = await q.exec(pool, blocking_function, 42)
      # ...

      q.exec() accepts a custom process pool or thread pool to run the blocking function.

      tip

      Apps that make calls to external services or APIs are better off replacing blocking HTTP clients like requests with non-blocking clients like HTTPX.

      Edit this page
      + + + + + + + + + + + + \ No newline at end of file diff --git a/docs/docs/backup/index.html b/docs/docs/backup/index.html index 9a8ea3653c..470c4fb51c 100644 --- a/docs/docs/backup/index.html +++ b/docs/docs/backup/index.html @@ -5,29 +5,29 @@ Backup and Recovery | H2O Wave - - - - - - - - - - + + + + + + + + + +
      -

      Backup and Recovery

      caution

      This feature is experimental. Do not rely on this in production!

      The Wave server logs all content changes to stderr. The changes are written in a format that can be read back in. This means that you can replay the log from beginning to end to recover the server's state (content, pages, everything). The log is, literally, a change log.

      To capture the log, redirect stderr to a file when you launch the server:

      ./wave 2> backup.log

      To recover state, feed the log file back in the next time you launch the server:

      ./wave -init backup.log

      To recover state and continue capturing the log, use:

      ./wave -init backup.log 2> other.log

      If you end up with a big log file, you can compact it like this:

      ./wave -compact big.log 2> small.log
      Edit this page
      - - - - - - - - - - +

      Backup and Recovery

      caution

      This feature is experimental. Do not rely on this in production!

      The Wave server logs all content changes to stderr. The changes are written in a format that can be read back in. This means that you can replay the log from beginning to end to recover the server's state (content, pages, everything). The log is, literally, a change log.

      To capture the log, redirect stderr to a file when you launch the server:

      ./waved 2> backup.log

      To recover state, feed the log file back in the next time you launch the server:

      ./waved -init backup.log

      To recover state and continue capturing the log, use:

      ./waved -init backup.log 2> other.log

      If you end up with a big log file, you can compact it like this:

      ./waved -compact big.log 2> small.log
      Edit this page
      + + + + + + + + + + \ No newline at end of file diff --git a/docs/docs/browser-testing/index.html b/docs/docs/browser-testing/index.html index bd1792bf13..5be53fb7fd 100644 --- a/docs/docs/browser-testing/index.html +++ b/docs/docs/browser-testing/index.html @@ -5,31 +5,31 @@ Browser Testing | H2O Wave - - - - - - - - - - + + + + + + + + + +
      -

      Browser Testing

      Wave supports authoring functional tests in Python for the Cypress test framework. This feature lets you automate browser-based point-and-click tests for your app.

      Installation

      Step 1: Install Node.js

      Install a recent version of Node.js.

      Step 2: Set up Cypress

      Using your terminal, go to your Wave installation's test directory and install Cypress

      $ cd path/to/wave
      $ cd test
      $ npm install

      Writing a test

      See the Wizard example to understand how to author tests for your interactive app. Specifically, note how the @cypress attribute is used. Refer to the Cypress API to learn how to author assertions.

      from h2o_wave import cypress
      +

      Browser Testing

      Wave supports authoring functional tests in Python for the Cypress test framework. This feature lets you automate browser-based point-and-click tests for your app.

      Installation

      Step 1: Install Node.js

      Install a recent version of Node.js.

      Step 2: Set up Cypress

      Using your terminal, go to your Wave installation's test directory and install Cypress

      $ cd $HOME/wave/test
      $ npm install

      Writing a test

      See the Wizard example to understand how to author tests for your interactive app. Specifically, note how the @cypress attribute is used. Refer to the Cypress API to learn how to author assertions.

      from h2o_wave import cypress
      @cypress('Walk through the wizard')
      def test_wizard(cy):
      cy.visit('/demo')
      cy.locate('step1').click()
      cy.locate('text').should('contain.text', 'What is your name?')
      cy.locate('nickname').clear().type('Fred')
      cy.locate('step2').click()
      cy.locate('text').should('contain.text', 'Hi Fred! How do you feel right now?')
      cy.locate('feeling').clear().type('quirky')
      cy.locate('step3').click()
      cy.locate('text').should('contain.text', 'What a coincidence, Fred! I feel quirky too!')
      -
      tip

      To escape Cypress function names that overlap with Python's reserved keywords, prefix the name with an underscore _. For example, use cy._as() instead of cy.as().

      Running your test

      Step 1: Start the Cypress test runner

      $ cd path/to/wave
      $ cd test
      $ ./node_modules/.bin/cypress open

      Step 2: Start the Wave server as usual

      $ ./wave

      Step 3: Translate your Python tests to Javascript

      To translate your Python tests to Javascript, execute the Python module or file containing your tests like this:

      $ CYPRESS_INTEGRATION_TEST_DIR=path/to/wave/test/cypress/integration ./venv/bin/python examples/wizard.py

      The CYPRESS_INTEGRATION_TEST_DIR environment variable indicates where the Wave SDK should write translated files to. This must be set to the cypress/integration directory.

      Alternatively, you can set the CYPRESS_INTEGRATION_TEST_DIR environment variable in your shell (or IDE) to simplify running your test file:

      $ export CYPRESS_INTEGRATION_TEST_DIR=path/to/wave/test/cypress/integration
      $ ./venv/bin/python examples/wizard.py

      Step 4: Run your tests

      At this point, you should find all your tests displayed in the Cypress UI. Simply click on a test to run it. Happy testing!

      Edit this page
      - - - - - - - - - - +
      tip

      To escape Cypress function names that overlap with Python's reserved keywords, prefix the name with an underscore _. For example, use cy._as() instead of cy.as().

      Running your test

      Step 1: Start the Cypress test runner

      $ cd $HOME/wave/test
      $ ./node_modules/.bin/cypress open

      Step 2: Start the Wave server as usual

      $ ./waved

      Step 3: Translate your Python tests to Javascript

      To translate your Python tests to Javascript, execute the Python module or file containing your tests like this:

      $ CYPRESS_INTEGRATION_TEST_DIR=$HOME/wave/test/cypress/integration ./venv/bin/python examples/wizard.py

      The CYPRESS_INTEGRATION_TEST_DIR environment variable indicates where the Wave SDK should write translated files to. This must be set to the cypress/integration directory.

      Alternatively, you can set the CYPRESS_INTEGRATION_TEST_DIR environment variable in your shell (or IDE) to simplify running your test file:

      $ export CYPRESS_INTEGRATION_TEST_DIR=$HOME/wave/test/cypress/integration
      $ ./venv/bin/python examples/wizard.py

      Step 4: Run your tests

      At this point, you should find all your tests displayed in the Cypress UI. Simply click on a test to run it. Happy testing!

      Edit this page
      + + + + + + + + + + \ No newline at end of file diff --git a/docs/docs/buffers/index.html b/docs/docs/buffers/index.html index c50dbbb3c6..0362e86b40 100644 --- a/docs/docs/buffers/index.html +++ b/docs/docs/buffers/index.html @@ -5,20 +5,20 @@ Data Buffers | H2O Wave - - - - - - - - - - + + + + + + + + + +
      -

      Data Buffers

      Data buffers are in-memory data structures designed to hold a card's tabular data.

      Data buffers make it convenient to separate data (what is displayed) from presentation (how it is displayed). You can declare a card once, and update its underlying data buffer multiple times. A card can hold zero or more data buffers.

      Cards and buffers

      Data buffers are tabular data structures containing columns and rows. Different cards utilize data buffers in different ways. For example, the plot in the ui.small_series_stat_card() uses a data buffer called plot_data to hold time series data.

      CPU Usage

      card = ui.small_series_stat_card(
      box=f'1 1 1 1',
      title='CPU',
      value='10%',
      plot_data=data('time usage', -15),
      plot_category='time',
      plot_value='usage',
      ))

      In the above snippet, data('time usage', -15) defines a placeholder for a table with two columns (time and usage) and 15 rows (we'll get to why the 15 is negative shortly), and the card's plot_category and plot_value point to the two columns time and usage, respectively.

      Appending rows (tuples or records) to the data buffer make the card plot those rows.

      while True:
      card.plot_data[-1] = [get_time(), get_usage()]
      time.sleep(1)

      The while loop above does something like this:

      card.plot_data[-1] = ['2020-10-05T02:10:20Z', 42.5]
      card.plot_data[-1] = ['2020-10-05T02:10:21Z', 43.1]
      card.plot_data[-1] = ['2020-10-05T02:10:22Z', 39.2]
      card.plot_data[-1] = ['2020-10-05T02:10:23Z', 38.7]

      Types of buffers

      There are three types of data buffers:

      • Array buffers hold tabular data with a fixed number of rows, and allow random access to rows using 0-based integers as keys.
      • Cyclic buffers also hold tabular data with a fixed number of rows, but do not allow random access to rows. They can only be appended to. Rows are first-in first-out (FIFO), and adding rows beyond its capacity overwrites the oldest rows.
      • Map buffers (or dictionary buffers) hold tabular data with a variable number of rows, and allow random access to rows using string keys.
      caution

      Map buffers are convenient to use, but use more memory on the server compared to array buffers and cyclic buffers, so use them sparingly.

      The data function

      Use the data() function to declare a data buffer. The Wave server uses this declaration to allocate memory for the data buffer.

      data() takes multiple arguments:

      • fields: The names of columns, in order; a space-separated string or a list or a tuple ('foo bar' or ['foo', 'bar'] or ('foo', 'bar').
      • size: The number of rows to allocate.
        • A positive row count creates an array buffer.
        • A negative row count creates a cyclic buffer.
        • A zero row count (or None) creates a map buffer.
      • rows: A dict or list of rows to initialize the data buffer with. Each row can be a list or tuple.
        • For array or cyclic buffers, pass a list of rows.
        • For map buffers, pass a dict with strings as keys and rows as values.

      Buffers in practice

      Declare a 5-row buffer with columns donut and price.

      # Array buffer
      b = data(fields='donut price', size=5)
      +

      Data Buffers

      Data buffers are in-memory data structures designed to hold a card's tabular data.

      Data buffers make it convenient to separate data (what is displayed) from presentation (how it is displayed). You can declare a card once, and update its underlying data buffer multiple times. A card can hold zero or more data buffers.

      Cards and buffers

      Data buffers are tabular data structures containing columns and rows. Different cards utilize data buffers in different ways. For example, the plot in the ui.small_series_stat_card() uses a data buffer called plot_data to hold time series data.

      CPU Usage

      card = ui.small_series_stat_card(
      box=f'1 1 1 1',
      title='CPU',
      value='10%',
      plot_data=data('time usage', -15),
      plot_category='time',
      plot_value='usage',
      ))

      In the above snippet, data('time usage', -15) defines a placeholder for a table with two columns (time and usage) and 15 rows (we'll get to why the 15 is negative shortly), and the card's plot_category and plot_value point to the two columns time and usage, respectively.

      Appending rows (tuples or records) to the data buffer make the card plot those rows.

      while True:
      card.plot_data[-1] = [get_time(), get_usage()]
      time.sleep(1)

      The while loop above does something like this:

      card.plot_data[-1] = ['2020-10-05T02:10:20Z', 42.5]
      card.plot_data[-1] = ['2020-10-05T02:10:21Z', 43.1]
      card.plot_data[-1] = ['2020-10-05T02:10:22Z', 39.2]
      card.plot_data[-1] = ['2020-10-05T02:10:23Z', 38.7]

      Types of buffers

      There are three types of data buffers:

      • Array buffers hold tabular data with a fixed number of rows, and allow random access to rows using 0-based integers as keys.
      • Cyclic buffers also hold tabular data with a fixed number of rows, but do not allow random access to rows. They can only be appended to. Rows are first-in first-out (FIFO), and adding rows beyond its capacity overwrites the oldest rows.
      • Map buffers (or dictionary buffers) hold tabular data with a variable number of rows, and allow random access to rows using string keys.
      caution

      Map buffers are convenient to use, but use more memory on the server compared to array buffers and cyclic buffers, so use them sparingly.

      The data function

      Use the data() function to declare a data buffer. The Wave server uses this declaration to allocate memory for the data buffer.

      data() takes multiple arguments:

      • fields: The names of columns, in order; a space-separated string or a list or a tuple ('foo bar' or ['foo', 'bar'] or ('foo', 'bar').
      • size: The number of rows to allocate.
        • A positive row count creates an array buffer.
        • A negative row count creates a cyclic buffer.
        • A zero row count (or None) creates a map buffer.
      • rows: A dict or list of rows to initialize the data buffer with. Each row can be a list or tuple.
        • For array or cyclic buffers, pass a list of rows.
        • For map buffers, pass a dict with strings as keys and rows as values.

      Buffers in practice

      Declare a 5-row buffer with columns donut and price.

      # Array buffer
      b = data(fields='donut price', size=5)
      # Cyclic buffer
      b = data(fields='donut price', size=-5)
      # Map buffer
      b = data(fields='donut price')

      Declare and initialize a 5-row buffer with columns donut and price.

      # Array buffer
      b = data(fields='donut price', size=5, rows=[
      ['cream', 3.99],
      ['custard', 2.99],
      ['cinnamon', 2.49],
      ['sprinkles', 2.49],
      ['sugar', 1.99],
      ])
      # Cyclic buffer
      b = data(fields='donut price', size=-5, rows=[
      ['cream', 3.99],
      ['custard', 2.99],
      ['cinnamon', 2.49],
      ['sprinkles', 2.49],
      ['sugar', 1.99],
      ])
      @@ -27,15 +27,15 @@
      # Map buffer (the following two forms are equivalent)
      b['cin'] = ['cinnamon', 2.99]
      b.cin = ['cinnamon', 2.99]

      Modify a buffer value:

      # Array buffer (the following two forms are equivalent)
      b[2]['price'] = 2.99
      b[2].price = 2.99
      # Cyclic buffer (the following two forms are equivalent)
      b[-1]['price'] = 2.99 # last donut on menu now costs 2.99
      b[-1].price = 2.99
      # Map buffer (the following three forms are equivalent)
      b['cin']['price'] = 2.99
      b['cin'].price = 2.99
      b.cin.price = 2.99
      Edit this page
      - - - - - - - - - - + + + + + + + + + + \ No newline at end of file diff --git a/docs/docs/cards/index.html b/docs/docs/cards/index.html index 23231a7464..6965528fd3 100644 --- a/docs/docs/cards/index.html +++ b/docs/docs/cards/index.html @@ -5,29 +5,29 @@ Cards | H2O Wave - - - - - - - - - - + + + + + + + + + +
      -

      Cards

      A card represents a block of content on a Page. This section lists the different kinds of cards available to you. Each of the cards below serve a different purpose.

      info

      To learn how to add, update or remove cards from a page, see Pages.

      Inputs

      Forms

      The form card is the most versatile and commonly used card in Wave apps.

      Use a form card to display input components like textboxes, dropdowns, date-pickers, and so on. The form card displays its components one below the other, stacked vertically. You can lay out several form cards on a page to build out intricate user interfaces.

      See ui.form_card().

      Content

      Use content cards to display formatted text, images or HTML.

      tip

      You can also display each of the following types of content using a form card. Use a content card if you want to display only that specific type of content. Use a form card if you want to display content intermingled with other types of content and input components.

      Markdown

      Use a markdown card to display content authored in markdown.

      See ui.markdown_card().

      Template

      Use a template card to display content authored using Handlebars templates.

      See ui.template_card().

      Markup (HTML)

      Use a markup card to display raw HTML content.

      See ui.markup_card().

      Inline Frame

      Use a frame card to display embed external HTML content your page.

      See ui.frame_card().

      Image

      Use an image card to display an image on your page, either by specifying the image's path or by providing base64-encoded image data.

      See ui.image_card().

      Control

      Use control cards to provide links or commands to allow users to navigate between different sections, or surface top-level actions applicable across your user interface.

      Header

      Use a header card to display your app's title and icon.

      See ui.header_card().

      Breadcrumbs

      Use a breadcrumbs card to display breadcrumbs, a navigational aid that indicates the current page's location withing a hierarchy, and help the user understand where they are in relation to the hierarchy.

      See ui.breadcrumbs_card().

      Navigation Pane

      Use a navigation pane to provide links to the main content areas of your app.

      See ui.nav_card().

      Tabs

      Use tabs to allow navigation between two or more views of content.

      See ui.tab_card().

      Toolbar

      Use a toolbar to display top-level commands that operate on the content of your app.

      See ui.toolbar_card().

      Graphics

      Use these cards to display plots (or charts or graphs), or draw custom graphics.

      Plot

      Use a plot card to display visualizations defined using Wave's native plot() API, based on the Grammar of Graphics.

      See ui.plot_card().

      Vega-lite

      Use this card to display visualizations defined using Vega-Lite.

      See ui.vega_card().

      Graphics

      Use a graphics card to render vector graphics and turtle graphics backed by data buffers.

      See ui.graphics_card().

      Stats

      Use stats cards for a quick and easy way to display live values and graphics (or sparklines). These cards are backed by data buffers, and provide an efficient mechanism to display values that change rapidly over time.

      CardUse
      ui.small_series_stat_card()Small stat card; displays a primary value and a series plot.
      ui.small_stat_card()Stat card; displays a single value.
      ui.large_bar_stat_card()Large captioned card; displays a primary value, an auxiliary value and a progress bar, with captions for each value.
      ui.large_stat_card()Stat card; displays a primary value, an auxiliary value and a caption.
      ui.tall_gauge_stat_card()Tall stat card; displays a primary value, an auxiliary value and a progress gauge.
      ui.tall_series_stat_card()Tall stat card; displays a primary value, an auxiliary value and a series plot.
      ui.wide_bar_stat_card()Wide stat card; displays a primary value, an auxiliary value and a progress bar.
      ui.wide_gauge_stat_card()Wide stat card; displays a primary value, an auxiliary value and a progress gauge.
      ui.wide_series_stat_card()Wide stat card; displays a primary value, an auxiliary value and a series plot.

      Meta

      The meta card is an invisible card, primarily used to control the behavior of the page it's placed on, like displaying a desktop notification, redirecting to a different page, or turning off realtime updates.

      See ui.meta_card().

      Edit this page
      - - - - - - - - - - +

      Cards

      A card represents a block of content on a Page. This section lists the different kinds of cards available to you. Each of the cards below serve a different purpose.

      info

      To learn how to add, update or remove cards from a page, see Pages.

      Inputs

      Forms

      The form card is the most versatile and commonly used card in Wave apps.

      Use a form card to display input components like textboxes, dropdowns, date-pickers, and so on. The form card displays its components one below the other, stacked vertically. You can lay out several form cards on a page to build out intricate user interfaces.

      See ui.form_card().

      Content

      Use content cards to display formatted text, images or HTML.

      tip

      You can also display each of the following types of content using a form card. Use a content card if you want to display only that specific type of content. Use a form card if you want to display content intermingled with other types of content and input components.

      Markdown

      Use a markdown card to display content authored in markdown.

      See ui.markdown_card().

      Template

      Use a template card to display content authored using Handlebars templates.

      See ui.template_card().

      Markup (HTML)

      Use a markup card to display raw HTML content.

      See ui.markup_card().

      Inline Frame

      Use a frame card to display embed external HTML content your page.

      See ui.frame_card().

      Image

      Use an image card to display an image on your page, either by specifying the image's path or by providing base64-encoded image data.

      See ui.image_card().

      Control

      Use control cards to provide links or commands to allow users to navigate between different sections, or surface top-level actions applicable across your user interface.

      Header

      Use a header card to display your app's title and icon.

      See ui.header_card().

      Breadcrumbs

      Use a breadcrumbs card to display breadcrumbs, a navigational aid that indicates the current page's location withing a hierarchy, and help the user understand where they are in relation to the hierarchy.

      See ui.breadcrumbs_card().

      Navigation Pane

      Use a navigation pane to provide links to the main content areas of your app.

      See ui.nav_card().

      Tabs

      Use tabs to allow navigation between two or more views of content.

      See ui.tab_card().

      Toolbar

      Use a toolbar to display top-level commands that operate on the content of your app.

      See ui.toolbar_card().

      Graphics

      Use these cards to display plots (or charts or graphs), or draw custom graphics.

      Plot

      Use a plot card to display visualizations defined using Wave's native plot() API, based on the Grammar of Graphics.

      See ui.plot_card().

      Vega-lite

      Use this card to display visualizations defined using Vega-Lite.

      See ui.vega_card().

      Graphics

      Use a graphics card to render vector graphics and turtle graphics backed by data buffers.

      See ui.graphics_card().

      Stats

      Use stats cards for a quick and easy way to display live values and graphics (or sparklines). These cards are backed by data buffers, and provide an efficient mechanism to display values that change rapidly over time.

      CardUse
      ui.small_series_stat_card()Small stat card; displays a primary value and a series plot.
      ui.small_stat_card()Stat card; displays a single value.
      ui.large_bar_stat_card()Large captioned card; displays a primary value, an auxiliary value and a progress bar, with captions for each value.
      ui.large_stat_card()Stat card; displays a primary value, an auxiliary value and a caption.
      ui.tall_gauge_stat_card()Tall stat card; displays a primary value, an auxiliary value and a progress gauge.
      ui.tall_series_stat_card()Tall stat card; displays a primary value, an auxiliary value and a series plot.
      ui.wide_bar_stat_card()Wide stat card; displays a primary value, an auxiliary value and a progress bar.
      ui.wide_gauge_stat_card()Wide stat card; displays a primary value, an auxiliary value and a progress gauge.
      ui.wide_series_stat_card()Wide stat card; displays a primary value, an auxiliary value and a series plot.

      Meta

      The meta card is an invisible card, primarily used to control the behavior of the page it's placed on, like displaying a desktop notification, redirecting to a different page, or turning off realtime updates.

      See ui.meta_card().

      Edit this page
      + + + + + + + + + + \ No newline at end of file diff --git a/docs/docs/change-log/index.html b/docs/docs/change-log/index.html index 1b57905b70..cae94505c6 100644 --- a/docs/docs/change-log/index.html +++ b/docs/docs/change-log/index.html @@ -5,29 +5,29 @@ Change Log | H2O Wave - - - - - - - - - - + + + + + + + + + +
      -

      Change Log

      Versioning

      H2O Wave and its Python driver follow Semantic Versioning. Major releases ship every six months (~February and ~August), while minor and patch releases may ship as often as every week. Minor and patch releases should never contain breaking changes.

      When referencing the h2o-wave package from your requirements.txt or setup.py, you should always use a version constraint such as >=4.2, <5 (any version 4.2 or greater, but less than 5), since major releases of H2O Wave do include breaking changes.

      Support Policy

      For LTS releases, bug fixes are provided for 2 years and security fixes are provided for 3 years. These releases provide the longest window of support and maintenance. For general releases, bug fixes are provided for 6 months and security fixes are provided for 1 year.

      v0.8.0

      Oct 20, 2020 - Download

      • Added
        • Escape Cypress test functions using leading underscore _ if they overlap with Python reserved keywords.
        • Add data-test attribute to all form components for browser testing.
        • Add trigger property to the date picker component.
        • Allow pre-selecting rows in the table component.
        • Add visible property to all components to show/hide them on demand.
        • Add support for OpenID Connect (OIDC).
        • Add documentation on security.
      • Fixed
        • Default HTML page title set to Wave.
        • Make % heights work properly for frames inside forms.

      v0.7.0

      Oct 15, 2020 - Download

      • Added
        • Hash navigation using context menus.
        • Allow handling location hash when an open app page is reloaded.
        • Allow pre-selecting a tab in a tab_card.
        • Allow setting a height on the file upload component.
        • Allow justifying buttons left/center/right/spread.
        • Add data-test attribute to all cards for browser testing.
        • New documentation website, gallery, guides and tutorials.
      • Changed
        • Fit table height to content height whenever possible.
        • Improve spacing between form components.
        • data-test attribute is set based on the names of cards.
      • Fixed
        • Quote CSV data properly while downloading a table component's data.
        • Don't auto-hide axis labels in plots when data is missing.
        • Display labels instead of names when a pickers initial values are set.
        • Handle numeric column sorting in the table component.
        • Handle icon column sorting in the table component.

      v0.6.0

      Sep 23, 2020 - Download

      • Added
        • Apps when launched now automatically use an available free port instead of 55556.
        • Client-side redirects to URLs and hashes using meta_card.redirect.
        • Context menus inside forms: ui.text_xl() and ui.text_l() now support optional context menus.
        • Plots now support specifying data values for predictable color encoding and legends.
        • ui.markup component for rendering HTML inline in forms.
        • ui.template component for rendering templated HTML inline in forms.
        • The height of tables can now be controlled using the height attribute.
        • Both sorting and group-by now work on the same table column if specified.
        • Lots of examples on how to use ui.table sorting, grouping, search, download, etc.
        • Ability to specify which column in a ui.table is the primary column, or disable altogether.
      • Changed
        • ui.text() now unconditionally allows embedded HTML tags.
        • App host now defaults to 127.0.0.1 instead of localhost.
        • Footer display in ui.table is now inferred from usage and displayed automatically.
        • The min_width and max_width attributes for table columns are now strings (consistency).
      • Fixed
        • Background color rendering bug when page overflows after loading.
        • Render tooltip properly on toolbar command buttons.
        • ui.table() rendering bug: remove stray 0.
        • Python error stack trace, if any, is displayed on top of all other cards on page.

      v0.5.0

      Sep 18, 2020 - Download

      • Added
        • Example for controlling cards with tabs.
        • Cypress test runner for CI.
        • Search, sort, filter, group-by, export and custom cell types for table component.
      • Changed
        • Remove semantic validation for stepper component.
      • Fixed
        • Value synchronization bug in textbox component.

      v0.4.0

      Sep 16, 2020 - Download

      • Added
        • Trigger attribute to checklist component.
      • Changed
        • Allow same min and max values for the range slider component.
        • App tests are now automatically and directly translated to Cypress tests when loaded.
      • Fixed
        • Allow removing selected options from the picker component.
        • Render axis title properly when specified.
        • Raise informative error message if attempting to use Numpy objects in components.
      • Removed
        • Cypress test bridge removed from server.
        • run_tests API.

      v0.3.1

      Sep 8, 2020 - Download

      • Fixed
        • Multiselect dropdown checkboxes do not respond when clicked.

      v0.3.0

      Sep 8, 2020 - Download

      • Added
        • Native plots inside form cards - ui.visualization().
        • Vega plots inside form cards - ui.vega_visualization().

      v0.2.0

      Sep 4, 2020 - Download

      • Added
        • Picker component.
        • Breadcrumbs component.
        • Range slider component.
        • Stepper component.
        • Allow backend to handle changes to textboxes as you type.
        • Select / deselect all controls for multivalued dropdown component.
        • Examples for using plotly plots.
        • Example for updating vega plots.
        • OS-specific installations instructions.
        • Cypress test framework support.
      • Fixed
        • Add .exe extension o Windows executable.
        • Percentage formatting in Safari.

      v0.1.4

      Aug 10, 2020 - Download

      • Fixed
        • Frame heights are not respected with total height of frames exceeds containing card size

      v0.1.3

      Aug 10, 2020 - Download

      • Fixed
        • h2o_wave.ui.link() now has a download attribute to work around a Firefox bug.
        • Race condition in the interactive tour that caused some examples to not preview properly.

      v0.1.2

      Aug 7, 2020 - Download

      • Added
        • API for h2o_wave.core.Expando copy, clone and item/attribute deletion.
        • Migration guide.
        • Example for setting browser window title.
        • API and example for Header card: h2o_wave.ui.header_card().
        • Export h2o_wave.core.Ref from h2o_wave.
        • API and examples for inline frames inside form cards: h2o_wave.ui.frame().
      • Changed
        • Renamed env var prefix for settings to H2O_Q_.
      • Fixed
        • Plot X/Y axis transpose bug.

      v0.1.1

      Jul 27, 2020 - Download

      • Added
        • Options for file type and size to file upload component.
        • API for displaying desktop notifications.
        • Buttons can now submit specific values instead of only True/False.
        • Examples for layout and card sizing.
        • Image card for displaying base64-encoded images.
        • Example for image card.
        • Vector graphics API.
        • Turtle graphics based path generator.
        • Examples for graphics card.
      • Fixed
        • Re-rendering performance improvements.

      v0.1.0

      Jul 13, 2020 - Download

      • Added
        • Example for displaying iframe content > 2MB.
        • Example for plotting using matplotlib.
        • Example for plotting using Altair.
        • Example for plotting using Vega.
        • Example for plotting using Bokeh.
        • Example for plotting using custom D3.js Javascript.
        • Example for live dashboard with stats cards.
        • Example for master-detail user interfaces using ui.table().
        • Example for authoring multi-step wizard user interfaces.
        • Unload API: q.unload() to delete uploaded files.

      v0.0.7

      Jul 12, 2020 - Download

      • Added
        • Download API: q.download().
        • Vega-lite support: ui.vega_card().
        • Context menu support to all cards.
        • refresh attribute on meta_card allows static pages to stop receiving live updates.
        • Passing -debug when starting server displays site stats at /_d/site.
        • Drag and drop support for file upload component.
        • Template expression support for markdown cards.
        • All APIs and examples documented.
        • All 110 examples now ship with the Sphinx documentation.
        • Documentation now ships with release download.
      • Changed
        • API consistency: ui.vis() renamed to ui.plot().
        • All stats cards now have descriptive names.
        • API consistency: ui.mark.mark renamed to ui.mark.type.
        • API consistency: page.sync() and page.push() renamed to page.save().
      • Removed
        • ui.dashboard_card() and ui.notebook_card().

      v0.0.6

      Jul 6, 2020 - Download

      • Added
        • Log network traffic when logging is set to debug mode.
        • Capture and display unhandled exceptions on the UI.
        • Routing using location hash.
        • Toolbar component.
        • Tabs component.
        • Nav component.
        • Upload API: q.upload().
      • Changed
        • q.session renamed to q.user

      v0.0.5

      Jun 29, 2020 - Download

      • Added
        • Add configure() API to configure environment before launching.

      v0.0.4

      Jun 26, 2020 - Download

      • Added
        • Multi-user and multi-client support: launch apps in multicast or unicast modes in addition to broadcast mode.
        • Client-specific data can now be stored and accessed via q.client, similar to q.session and q.app.
        • Simpler page referencing: import site can be used instead of site = Site().
      • Changed
        • Apps now lauch in unicast mode by default instead of broadcast mode.

      v0.0.3

      Jun 19, 2020 - Download

      • Added
        • Make Expando data structure available for apps.

      v0.0.2

      Jun 17, 2020 - Download

      • Initial version
      • v0.0.1
      • Package stub
      Edit this page
      - - - - - - - - - - +

      Change Log

      Versioning

      H2O Wave and its Python driver follow Semantic Versioning. Major releases ship every six months (~February and ~August), while minor and patch releases may ship as often as every week. Minor and patch releases should never contain breaking changes.

      When referencing the h2o-wave package from your requirements.txt or setup.py, you should always use a version constraint such as >=4.2, <5 (any version 4.2 or greater, but less than 5), since major releases of H2O Wave do include breaking changes.

      Support Policy

      For LTS releases, bug fixes are provided for 2 years and security fixes are provided for 3 years. These releases provide the longest window of support and maintenance. For general releases, bug fixes are provided for 6 months and security fixes are provided for 1 year.

      v0.9.0

      Oct 28, 2020 - Download

      • Added
        • ASGI compatibility: Wave apps can now be run using an ASGI server.
        • @app decorator to identify primary query handler in an app.
        • Live-reload for apps.
        • New wave CLI and wave run command.
        • q.run() and q.exec() APIs for running background tasks.
        • Display server version/build at startup.
        • AsyncSite for updating other pages from an app without blocking the main thread.
        • Drop or clear pages from a site using del site[route].
      • Changed
        • All HTTP calls now use non-blocking asyncio using the httpx library.
        • listen() is deprecated.
        • H2O_WAVE_INTERNAL_ADDRESS and H2O_WAVE_EXTERNAL_ADDRESS are deprecated.
        • An app's UI is now cleared when an app crashes or is terminated.
        • All examples migrated to use @app instead of listen().
        • Server binary renamed to waved (as in wave daemon).
        • Apps using @app must be run using wave run.
      • Fixed
        • Performance and concurrency improvements across the board.
        • Stability improvements to the Wave Tour.

      v0.8.1

      Oct 26, 2020 - Download

      • Fixed
        • Enable visible properly on text_* components.
        • Fix checkbox value unchecking.
        • Improve stepper component layout.

      v0.8.0

      Oct 20, 2020 - Download

      • Added
        • Escape Cypress test functions using leading underscore _ if they overlap with Python reserved keywords.
        • Add data-test attribute to all form components for browser testing.
        • Add trigger property to the date picker component.
        • Allow pre-selecting rows in the table component.
        • Add visible property to all components to show/hide them on demand.
        • Add support for OpenID Connect (OIDC).
        • Add documentation on security.
      • Fixed
        • Default HTML page title set to Wave.
        • Make % heights work properly for frames inside forms.

      v0.7.0

      Oct 15, 2020 - Download

      • Added
        • Hash navigation using context menus.
        • Allow handling location hash when an open app page is reloaded.
        • Allow pre-selecting a tab in a tab_card.
        • Allow setting a height on the file upload component.
        • Allow justifying buttons left/center/right/spread.
        • Add data-test attribute to all cards for browser testing.
        • New documentation website, gallery, guides and tutorials.
      • Changed
        • Fit table height to content height whenever possible.
        • Improve spacing between form components.
        • data-test attribute is set based on the names of cards.
      • Fixed
        • Quote CSV data properly while downloading a table component's data.
        • Don't auto-hide axis labels in plots when data is missing.
        • Display labels instead of names when a pickers initial values are set.
        • Handle numeric column sorting in the table component.
        • Handle icon column sorting in the table component.

      v0.6.0

      Sep 23, 2020 - Download

      • Added
        • Apps when launched now automatically use an available free port instead of 55556.
        • Client-side redirects to URLs and hashes using meta_card.redirect.
        • Context menus inside forms: ui.text_xl() and ui.text_l() now support optional context menus.
        • Plots now support specifying data values for predictable color encoding and legends.
        • ui.markup component for rendering HTML inline in forms.
        • ui.template component for rendering templated HTML inline in forms.
        • The height of tables can now be controlled using the height attribute.
        • Both sorting and group-by now work on the same table column if specified.
        • Lots of examples on how to use ui.table sorting, grouping, search, download, etc.
        • Ability to specify which column in a ui.table is the primary column, or disable altogether.
      • Changed
        • ui.text() now unconditionally allows embedded HTML tags.
        • App host now defaults to 127.0.0.1 instead of localhost.
        • Footer display in ui.table is now inferred from usage and displayed automatically.
        • The min_width and max_width attributes for table columns are now strings (consistency).
      • Fixed
        • Background color rendering bug when page overflows after loading.
        • Render tooltip properly on toolbar command buttons.
        • ui.table() rendering bug: remove stray 0.
        • Python error stack trace, if any, is displayed on top of all other cards on page.

      v0.5.0

      Sep 18, 2020 - Download

      • Added
        • Example for controlling cards with tabs.
        • Cypress test runner for CI.
        • Search, sort, filter, group-by, export and custom cell types for table component.
      • Changed
        • Remove semantic validation for stepper component.
      • Fixed
        • Value synchronization bug in textbox component.

      v0.4.0

      Sep 16, 2020 - Download

      • Added
        • Trigger attribute to checklist component.
      • Changed
        • Allow same min and max values for the range slider component.
        • App tests are now automatically and directly translated to Cypress tests when loaded.
      • Fixed
        • Allow removing selected options from the picker component.
        • Render axis title properly when specified.
        • Raise informative error message if attempting to use Numpy objects in components.
      • Removed
        • Cypress test bridge removed from server.
        • run_tests API.

      v0.3.1

      Sep 8, 2020 - Download

      • Fixed
        • Multiselect dropdown checkboxes do not respond when clicked.

      v0.3.0

      Sep 8, 2020 - Download

      • Added
        • Native plots inside form cards - ui.visualization().
        • Vega plots inside form cards - ui.vega_visualization().

      v0.2.0

      Sep 4, 2020 - Download

      • Added
        • Picker component.
        • Breadcrumbs component.
        • Range slider component.
        • Stepper component.
        • Allow backend to handle changes to textboxes as you type.
        • Select / deselect all controls for multivalued dropdown component.
        • Examples for using plotly plots.
        • Example for updating vega plots.
        • OS-specific installations instructions.
        • Cypress test framework support.
      • Fixed
        • Add .exe extension o Windows executable.
        • Percentage formatting in Safari.

      v0.1.4

      Aug 10, 2020 - Download

      • Fixed
        • Frame heights are not respected with total height of frames exceeds containing card size

      v0.1.3

      Aug 10, 2020 - Download

      • Fixed
        • h2o_wave.ui.link() now has a download attribute to work around a Firefox bug.
        • Race condition in the interactive tour that caused some examples to not preview properly.

      v0.1.2

      Aug 7, 2020 - Download

      • Added
        • API for h2o_wave.core.Expando copy, clone and item/attribute deletion.
        • Migration guide.
        • Example for setting browser window title.
        • API and example for Header card: h2o_wave.ui.header_card().
        • Export h2o_wave.core.Ref from h2o_wave.
        • API and examples for inline frames inside form cards: h2o_wave.ui.frame().
      • Changed
        • Renamed env var prefix for settings to H2O_Q_.
      • Fixed
        • Plot X/Y axis transpose bug.

      v0.1.1

      Jul 27, 2020 - Download

      • Added
        • Options for file type and size to file upload component.
        • API for displaying desktop notifications.
        • Buttons can now submit specific values instead of only True/False.
        • Examples for layout and card sizing.
        • Image card for displaying base64-encoded images.
        • Example for image card.
        • Vector graphics API.
        • Turtle graphics based path generator.
        • Examples for graphics card.
      • Fixed
        • Re-rendering performance improvements.

      v0.1.0

      Jul 13, 2020 - Download

      • Added
        • Example for displaying iframe content > 2MB.
        • Example for plotting using matplotlib.
        • Example for plotting using Altair.
        • Example for plotting using Vega.
        • Example for plotting using Bokeh.
        • Example for plotting using custom D3.js Javascript.
        • Example for live dashboard with stats cards.
        • Example for master-detail user interfaces using ui.table().
        • Example for authoring multi-step wizard user interfaces.
        • Unload API: q.unload() to delete uploaded files.

      v0.0.7

      Jul 12, 2020 - Download

      • Added
        • Download API: q.download().
        • Vega-lite support: ui.vega_card().
        • Context menu support to all cards.
        • refresh attribute on meta_card allows static pages to stop receiving live updates.
        • Passing -debug when starting server displays site stats at /_d/site.
        • Drag and drop support for file upload component.
        • Template expression support for markdown cards.
        • All APIs and examples documented.
        • All 110 examples now ship with the Sphinx documentation.
        • Documentation now ships with release download.
      • Changed
        • API consistency: ui.vis() renamed to ui.plot().
        • All stats cards now have descriptive names.
        • API consistency: ui.mark.mark renamed to ui.mark.type.
        • API consistency: page.sync() and page.push() renamed to page.save().
      • Removed
        • ui.dashboard_card() and ui.notebook_card().

      v0.0.6

      Jul 6, 2020 - Download

      • Added
        • Log network traffic when logging is set to debug mode.
        • Capture and display unhandled exceptions on the UI.
        • Routing using location hash.
        • Toolbar component.
        • Tabs component.
        • Nav component.
        • Upload API: q.upload().
      • Changed
        • q.session renamed to q.user

      v0.0.5

      Jun 29, 2020 - Download

      • Added
        • Add configure() API to configure environment before launching.

      v0.0.4

      Jun 26, 2020 - Download

      • Added
        • Multi-user and multi-client support: launch apps in multicast or unicast modes in addition to broadcast mode.
        • Client-specific data can now be stored and accessed via q.client, similar to q.session and q.app.
        • Simpler page referencing: import site can be used instead of site = Site().
      • Changed
        • Apps now lauch in unicast mode by default instead of broadcast mode.

      v0.0.3

      Jun 19, 2020 - Download

      • Added
        • Make Expando data structure available for apps.

      v0.0.2

      Jun 17, 2020 - Download

      • Initial version
      • v0.0.1
      • Package stub
      Edit this page
      + + + + + + + + + + \ No newline at end of file diff --git a/docs/docs/cli/index.html b/docs/docs/cli/index.html new file mode 100644 index 0000000000..5b8a5317cc --- /dev/null +++ b/docs/docs/cli/index.html @@ -0,0 +1,35 @@ + + + + + + +Command Line Interface | H2O Wave + + + + + + + + + + + + +
      +

      Command Line Interface

      The CLI is accessible using the wave command, available once you pip install h2o-wave.

      To view a list of sub-commands, simply run wave:

      $ wave
      Usage: wave [OPTIONS] COMMAND [ARGS]...
      +
      Options:
      --help Show this message and exit.
      +
      Commands:
      run Run an app.

      Get help on a sub-command:

      $ wave <command> --help

      wave run

      wave run runs an app.

      Run app.py with auto reload:

      $ wave run app

      Run path/to/app.py with auto reload:

      $ wave run path.to.app

      Run path/to/app.py without auto reload:

      $ wave run --no-reload path.to.app
      Edit this page
      + + + + + + + + + + + + \ No newline at end of file diff --git a/docs/docs/components/index.html b/docs/docs/components/index.html index ca98f621bf..193134fc2f 100644 --- a/docs/docs/components/index.html +++ b/docs/docs/components/index.html @@ -5,30 +5,30 @@ Components | H2O Wave - - - - - - - - - - + + + + + + + + + +
      -

      Components

      Components are blocks of interactive content (inputs, commands, notifications, graphics) contained in a form card.

      info

      Several of the components below allow users to input information or interact with them in some way. To know what the user did, see event arguments.

      Content

      Text

      Use text() or one of its variants to display text content. Markdown works, too. text_xl() and text_l() support context menus.

      See ui.text() ui.text_l() ui.text_m() ui.text_s() ui.text_xl() ui.text_xs()

      Label

      Use a label to give a name or title to other components.

      See ui.label()

      Link

      Use link() to display a hyperlink.

      See ui.link()

      Template

      Use template() to render dynamic content using HTML.

      See ui.template()

      HTML

      Use markup() to display raw HTML.

      See ui.markup()

      Inline frame

      Use frame() to embed external HTML content using an inline frame.

      See ui.frame()

      Table

      Use a table to display tabular data. A table also functions as an input element, and can report row(s) selection, useful for building master-detail views.

      See ui.table()

      Inputs

      Checkbox

      Use a checkbox to allow switching between two mutually exclusive options (checked/unchecked or on/off).

      See ui.checkbox()

      Checklist

      Use a checklist to display a list of checkboxes.

      See ui.checklist()

      Choice Group

      Use a choice group (also called radio buttons) to allow switching between more than two mutually exclusive options.

      See ui.choice_group()

      Color Picker

      Use a color picker to allow pick colors or swatches.

      See ui.color_picker()

      Combo Box

      Use a combo box to allow picking from a list of choices, or typing in custom values.

      See ui.combobox()

      Date Picker

      Use a date picker to allow picking a date.

      See ui.date_picker()

      Dropdown

      Use a dropdown to allow picking from a list of choices.

      See ui.dropdown()

      File Upload

      Use a file upload component to allow uploading files.

      See ui.file_upload()

      Picker

      Use a picker component to allow picking multiple tags or labels from a list.

      See ui.picker()

      Range Slider

      Use a range slider to allow selecting a range of values within another range.

      See ui.range_slider()

      Slider

      Use a slider to allow selecting a value from a range of values.

      See ui.slider()

      Spin Box

      Use a spin box to allow incrementally adjusting a value in small steps.

      See ui.spinbox()

      Table

      Use a table to display tabular data, or allow selecting one or more rows.

      See ui.table()

      Textbox

      Use a textbox to allow typing in text.

      See ui.textbox()

      Toggle

      Use a toggle to allow switching between two mutually exclusive options (checked/unchecked or on/off), while producing an immediate result. +

      Components

      Components are blocks of interactive content (inputs, commands, notifications, graphics) contained in a form card.

      info

      Several of the components below allow users to input information or interact with them in some way. To know what the user did, see event arguments.

      Content

      Text

      Use text() or one of its variants to display text content. Markdown works, too. text_xl() and text_l() support context menus.

      See ui.text() ui.text_l() ui.text_m() ui.text_s() ui.text_xl() ui.text_xs()

      Label

      Use a label to give a name or title to other components.

      See ui.label()

      Link

      Use link() to display a hyperlink.

      See ui.link()

      Template

      Use template() to render dynamic content using HTML.

      See ui.template()

      HTML

      Use markup() to display raw HTML.

      See ui.markup()

      Inline frame

      Use frame() to embed external HTML content using an inline frame.

      See ui.frame()

      Table

      Use a table to display tabular data. A table also functions as an input element, and can report row(s) selection, useful for building master-detail views.

      See ui.table()

      Inputs

      Checkbox

      Use a checkbox to allow switching between two mutually exclusive options (checked/unchecked or on/off).

      See ui.checkbox()

      Checklist

      Use a checklist to display a list of checkboxes.

      See ui.checklist()

      Choice Group

      Use a choice group (also called radio buttons) to allow switching between more than two mutually exclusive options.

      See ui.choice_group()

      Color Picker

      Use a color picker to allow pick colors or swatches.

      See ui.color_picker()

      Combo Box

      Use a combo box to allow picking from a list of choices, or typing in custom values.

      See ui.combobox()

      Date Picker

      Use a date picker to allow picking a date.

      See ui.date_picker()

      Dropdown

      Use a dropdown to allow picking from a list of choices.

      See ui.dropdown()

      File Upload

      Use a file upload component to allow uploading files.

      See ui.file_upload()

      Picker

      Use a picker component to allow picking multiple tags or labels from a list.

      See ui.picker()

      Range Slider

      Use a range slider to allow selecting a range of values within another range.

      See ui.range_slider()

      Slider

      Use a slider to allow selecting a value from a range of values.

      See ui.slider()

      Spin Box

      Use a spin box to allow incrementally adjusting a value in small steps.

      See ui.spinbox()

      Table

      Use a table to display tabular data, or allow selecting one or more rows.

      See ui.table()

      Textbox

      Use a textbox to allow typing in text.

      See ui.textbox()

      Toggle

      Use a toggle to allow switching between two mutually exclusive options (checked/unchecked or on/off), while producing an immediate result. See ui.toggle()

      Commands

      Command

      Use a command to define menu items for cards and components that support menus and context-menus.

      See ui.command()

      Button

      Use button() to display a clickable button.

      See ui.button()

      Button Set

      Use buttons() to display two or more buttons side by side.

      See ui.buttons()

      Tabs

      Use tabs() to display a set of tabs.

      See ui.tabs()

      Engagement

      Message Bar

      Use a message bar to display information, warning and error notifications.

      See ui.message_bar()

      Progress Bar

      Use a progress bar to display progress information for tasks or operations.

      See ui.progress()

      Stepper

      Use a stepper to display a sequence of steps in a process, and how many have been completed.

      See ui.stepper()

      Graphics

      Visualization

      Use visualization() to display visualizations defined using Q's native plot() API, based on the Grammar of Graphics.

      See ui.visualization()

      Vega-lite Visualization

      Use vega_visualization() to display visualization defined using Vega-Lite.

      See ui.vega_visualization()

      Utilities

      Expander

      Use an expander to show or hider a group of related components.

      See ui.expander()

      Separator

      Use a separator to visually separate components in to groups.

      See ui.separator()

      Edit this page
      - - - - - - - - - - + + + + + + + + + + \ No newline at end of file diff --git a/docs/docs/configuration/index.html b/docs/docs/configuration/index.html index 261aea7773..987245c2f2 100644 --- a/docs/docs/configuration/index.html +++ b/docs/docs/configuration/index.html @@ -5,29 +5,29 @@ Configuration | H2O Wave - - - - - - - - - - + + + + + + + + + +
      -

      Configuration

      Configuring the server

      Command line options

      Execute wave -help to see all available command line options:

      $ ./wave -help
      Usage of ./wave:
      -access-key-id string
      default access key ID (default "access_key_id")
      -access-key-secret string
      default access key secret (default "access_key_secret")
      -compact string
      compact AOF log
      -data-dir string
      directory to store site data (default "./data")
      -debug
      enable debug mode (profiling, inspection, etc.)
      -init string
      initialize site content from AOF log
      -listen string
      listen on this address (default ":55555")
      -oidc-client-id string
      OIDC client ID
      -oidc-client-secret string
      OIDC client secret
      -oidc-end-session-url string
      OIDC end session URL
      -oidc-provider-url string
      OIDC provider URL
      -oidc-redirect-url string
      OIDC redirect URL
      -tls-cert-file string
      path to certificate file (TLS only)
      -tls-key-file string
      path to private key file (TLS only)
      -version
      print version and exit
      -web-dir string
      directory to serve web assets from (default "./www")

      Configuring your app

      Your Wave application has a websocket server under the hood, called an app server. For convenience, when you run your app during development, the app server automatically picks an available port, and assumes that your Wave server is running at http://127.0.0.1:55555/ (localhost, port 55555). For production deployments, you'll want to configure which port your app listens to, how it can access the Wave server, and how the Wave server can access your app.

      You can use the following environment variables to configure your app's server's behavior:

      H2O_WAVE_INTERNAL_ADDRESS

      The local host/port on which the app server should listen. Defaults to ws://127.0.0.1:0 (automatically picks an available port). For example, if you want your app to listen on a specific port, execute your app as follows (replace 66666 with a port number of your choice):

      $ H2O_WAVE_INTERNAL_ADDRESS=ws://127.0.0.1:66666 ./venv/bin/python my_app.py

      H2O_WAVE_EXTERNAL_ADDRESS

      The public host/port of the app server. Defaults to ws://127.0.0.1:0. Set this variable if you are running your Wave server and your app on different machine or containers.

      H2O_WAVE_ADDRESS

      The public host/port of the Wave server. Set this variable if you are running the Wave server on a remote machine or container.

      H2O_WAVE_ACCESS_KEY_ID

      The API access key ID to use for communicating with the Wave server.

      H2O_WAVE_ACCESS_KEY_SECRET

      The API access key secret to use for communicating with the Wave server.

      Edit this page
      - - - - - - - - - - +

      Configuration

      Configuring the server

      Command line options

      Execute waved -help to see all available command line options:

      $ ./waved -help
      Usage of ./waved:
      -access-key-id string
      default access key ID (default "access_key_id")
      -access-key-secret string
      default access key secret (default "access_key_secret")
      -compact string
      compact AOF log
      -data-dir string
      directory to store site data (default "./data")
      -debug
      enable debug mode (profiling, inspection, etc.)
      -init string
      initialize site content from AOF log
      -listen string
      listen on this address (default ":55555")
      -oidc-client-id string
      OIDC client ID
      -oidc-client-secret string
      OIDC client secret
      -oidc-end-session-url string
      OIDC end session URL
      -oidc-provider-url string
      OIDC provider URL
      -oidc-redirect-url string
      OIDC redirect URL
      -tls-cert-file string
      path to certificate file (TLS only)
      -tls-key-file string
      path to private key file (TLS only)
      -version
      print version and exit
      -web-dir string
      directory to serve web assets from (default "./www")

      Configuring your app

      Your Wave application is an ASGI server. When you run your app during development, the app server runs at http://127.0.0.1:8000/ by default (localhost, port 8000), and assumes that your Wave server is running at http://127.0.0.1:55555/ (localhost, port 55555). The wave run command automatically picks another available port if 8000 is not available.

      The Wave server and apps communicate with each other using RPC over persistent HTTP connections.

      For production deployments, you'll want to configure which port your app listens to, how it can access the Wave server, and how the Wave server can access your app.

      You can use the following environment variables to configure your app's server's behavior:

      H2O_APP_ADDRESS

      The public host/port of the app server. Defaults to http://127.0.0.1:8000. Set this variable if you are running your Wave server and your app on different machines or containers.

      H2O_WAVE_ADDRESS

      The public host/port of the Wave server. Defaults to http://127.0.0.1:55555. Set this variable if you are running the Wave server on a remote machine or container.

      H2O_WAVE_ACCESS_KEY_ID

      The API access key ID to use for communicating with the Wave server.

      H2O_WAVE_ACCESS_KEY_SECRET

      The API access key secret to use for communicating with the Wave server.

      H2O_WAVE_INTERNAL_ADDRESS

      Deprecated

      This environment variable will be removed in v1.0.

      The local host/port on which the app server should listen. Defaults to http://127.0.0.1:8000. For example, if you want your app to listen on a specific port, execute your app as follows (replace 66666 with a port number of your choice):

      $ H2O_WAVE_INTERNAL_ADDRESS=ws://127.0.0.1:66666 ./venv/bin/python my_app.py

      H2O_WAVE_EXTERNAL_ADDRESS

      Deprecated

      Specify H2O_APP_ADDRESS instead.

      The public host/port of the app server. Defaults to http://127.0.0.1:8000. Set this variable if you are running your Wave server and your app on different machines or containers.

      Edit this page
      + + + + + + + + + + \ No newline at end of file diff --git a/docs/docs/contributing/index.html b/docs/docs/contributing/index.html index 86f773e2a1..b68c079111 100644 --- a/docs/docs/contributing/index.html +++ b/docs/docs/contributing/index.html @@ -5,29 +5,29 @@ Contributing | H2O Wave - - - - - - - - - - + + + + + + + + + +
      -

      Contributing

      We appreciate all contributions. If you are planning to contribute back bug-fixes, please do so without any further discussion.

      If you plan to contribute new features, please first open an issue and discuss the feature with us. Sending a PR without discussion might end up resulting in a rejected PR because we might be taking the software in a different direction than you might be aware of.

      (Based on the PyTorch Contribution Guide.)

      About open source development

      If this is your first time contributing to an open source project, some aspects of the development process may seem unusual to you.

      • There is no way to "claim" issues. People often want to "claim" an issue when they decide to work on it, to ensure that there isn’t wasted work when someone else ends up working on it. This doesn’t really work too well in open source, since someone may decide to work on something, and end up not having time to do it. Feel free to give information in an advisory fashion, but at the end of the day, we will take running code and rough consensus.

      • There is a high bar for new functionality that is added. Unlike in a corporate environment, where the person who wrote code implicitly "owns" it and can be expected to take care of it in the beginning of its lifetime, once a pull request is merged into an open source project, it immediately becomes the collective responsibility of all maintainers on the project. When we merge code, we are saying that we, the maintainers, are able to review subsequent changes and make a bugfix to the code. This naturally leads to a higher standard of contribution.

      Proposing new features

      New feature ideas are best discussed on a specific issue. Please include as much information as you can, any accompanying data, and your proposed solution. The H2O Wave team and community frequently reviews new issues and comments where they think they can help. If you feel confident in your solution, go ahead and implement it.

      Reporting issues

      If you’ve identified an issue, first search through the list of existing issues on the repo. If you are unable to find a similar issue, then create a new one. Supply as much information you can to reproduce the problematic behavior. Also, include any additional insights like the behavior you expect.

      Implementing features

      If you want to fix a specific issue, it’s best to comment on the individual issue with your intent. However, we do not lock or assign issues except in cases where we have worked with the developer before. It’s best to strike up a conversation on the issue and discuss your proposed solution. The H2O Wave team can provide guidance that saves you time.

      Issues that are labeled first-new-issue, low, or medium priority provide the best entrance point are great places to start.

      Improving documentation and tutorials

      We aim to produce high quality documentation and tutorials. On rare occasions that content includes typos or bugs. If you find something you can fix, send us a pull request for consideration.

      Submitting pull requests

      You can view a list of all open issues here. Commenting on an issue is a great way to get the attention of the team. From here you can share your ideas and how you plan to resolve the issue.

      For more challenging issues, the team will provide feedback and direction for how to best solve the issue.

      If you’re not able to fix the issue itself, commenting and sharing whether you can reproduce the issue can be useful for helping the team identify problem areas.

      Improving code readability

      Improve code readability helps everyone. It is often better to submit a small number of pull requests that touch few files versus a large pull request that touches many files. Opening an issue related to your improvement is the best way to get started.

      Adding test cases

      Additional test coverage is appreciated. Help us make the codebase more robust.

      Security vulnerabilities

      If you discover a security vulnerability within H2O Wave, please send an email to Prithvi Prabhu at prithvi@h2o.ai. All security vulnerabilities will be promptly addressed.

      Code of Conduct

      This Code of Conduct provides community guidelines for a safe, respectful, productive, and collaborative place for any person who is willing to contribute to the H2O Wave community. It applies to all "collaborative space", which is defined as community communications channels (such as mailing lists, submitted patches, commit comments, etc.).

      • Participants will be tolerant of opposing views.
      • Participants must ensure that their language and actions are free of personal attacks and disparaging personal remarks.
      • When interpreting the words and actions of others, participants should always assume good intentions.
      • Behaviour which can be reasonably considered harassment will not be tolerated.

      (Based on the Ruby Code of Conduct.)

      Edit this page
      - - - - - - - - - - +

      Contributing

      We appreciate all contributions. If you are planning to contribute back bug-fixes, please do so without any further discussion.

      If you plan to contribute new features, please first open an issue and discuss the feature with us. Sending a PR without discussion might end up resulting in a rejected PR because we might be taking the software in a different direction than you might be aware of.

      (Based on the PyTorch Contribution Guide.)

      About open source development

      If this is your first time contributing to an open source project, some aspects of the development process may seem unusual to you.

      • There is no way to "claim" issues. People often want to "claim" an issue when they decide to work on it, to ensure that there isn’t wasted work when someone else ends up working on it. This doesn’t really work too well in open source, since someone may decide to work on something, and end up not having time to do it. Feel free to give information in an advisory fashion, but at the end of the day, we will take running code and rough consensus.

      • There is a high bar for new functionality that is added. Unlike in a corporate environment, where the person who wrote code implicitly "owns" it and can be expected to take care of it in the beginning of its lifetime, once a pull request is merged into an open source project, it immediately becomes the collective responsibility of all maintainers on the project. When we merge code, we are saying that we, the maintainers, are able to review subsequent changes and make a bugfix to the code. This naturally leads to a higher standard of contribution.

      Proposing new features

      New feature ideas are best discussed on a specific issue. Please include as much information as you can, any accompanying data, and your proposed solution. The H2O Wave team and community frequently reviews new issues and comments where they think they can help. If you feel confident in your solution, go ahead and implement it.

      Reporting issues

      If you’ve identified an issue, first search through the list of existing issues on the repo. If you are unable to find a similar issue, then create a new one. Supply as much information you can to reproduce the problematic behavior. Also, include any additional insights like the behavior you expect.

      Implementing features

      If you want to fix a specific issue, it’s best to comment on the individual issue with your intent. However, we do not lock or assign issues except in cases where we have worked with the developer before. It’s best to strike up a conversation on the issue and discuss your proposed solution. The H2O Wave team can provide guidance that saves you time.

      Issues that are labeled first-new-issue, low, or medium priority provide the best entrance point are great places to start.

      Improving documentation and tutorials

      We aim to produce high quality documentation and tutorials. On rare occasions that content includes typos or bugs. If you find something you can fix, send us a pull request for consideration.

      Submitting pull requests

      You can view a list of all open issues here. Commenting on an issue is a great way to get the attention of the team. From here you can share your ideas and how you plan to resolve the issue.

      For more challenging issues, the team will provide feedback and direction for how to best solve the issue.

      If you’re not able to fix the issue itself, commenting and sharing whether you can reproduce the issue can be useful for helping the team identify problem areas.

      Improving code readability

      Improve code readability helps everyone. It is often better to submit a small number of pull requests that touch few files versus a large pull request that touches many files. Opening an issue related to your improvement is the best way to get started.

      Adding test cases

      Additional test coverage is appreciated. Help us make the codebase more robust.

      Security vulnerabilities

      If you discover a security vulnerability within H2O Wave, please send an email to Prithvi Prabhu at prithvi@h2o.ai. All security vulnerabilities will be promptly addressed.

      Code of Conduct

      This Code of Conduct provides community guidelines for a safe, respectful, productive, and collaborative place for any person who is willing to contribute to the H2O Wave community. It applies to all "collaborative space", which is defined as community communications channels (such as mailing lists, submitted patches, commit comments, etc.).

      • Participants will be tolerant of opposing views.
      • Participants must ensure that their language and actions are free of personal attacks and disparaging personal remarks.
      • When interpreting the words and actions of others, participants should always assume good intentions.
      • Behaviour which can be reasonably considered harassment will not be tolerated.

      (Based on the Ruby Code of Conduct.)

      Edit this page
      + + + + + + + + + + \ No newline at end of file diff --git a/docs/docs/deployment/index.html b/docs/docs/deployment/index.html new file mode 100644 index 0000000000..3be25af1e1 --- /dev/null +++ b/docs/docs/deployment/index.html @@ -0,0 +1,33 @@ + + + + + + +Deployment | H2O Wave + + + + + + + + + + + + +
      +

      Deployment

      Deploying Wave scripts

      Wave scripts are regular Python scripts. Deploy them as you would any Python script.

      Deploying Wave apps

      Wave apps are ASGI-compatible, based on Uvicorn / Starlette, a high-performance Python server.

      You can run Wave apps behind any ASGI server, like uvicorn, gunicorn, daphne, hypercorn, etc.

      To run your app using an ASGI server, append :main to the app argument. For example, if you were normally executing your app foo.py using wave run foo, and want to run your app using Uvicorn, use uvicorn foo:main.

      These commands are equivalent:

      (venv) $ wave run --no-reload foo
      (venv) $ uvicorn foo:main

      For more information, see uvicorn.org/deployment and starlette.io/#performance.

      Edit this page
      + + + + + + + + + + + + \ No newline at end of file diff --git a/docs/docs/development/index.html b/docs/docs/development/index.html index cd44cd4b20..695f41ab5a 100644 --- a/docs/docs/development/index.html +++ b/docs/docs/development/index.html @@ -4,33 +4,30 @@ -Development | H2O Wave - - - - - - - - - - +Development | H2O Wave + + + + + + + + + +
      -

      Development

      Wave apps and scripts are plain Python programs. You can develop, debug and test them from the command-line, from the Python REPL, or from your favorite text editor.

      Both PyCharm Community Edition and Visual Studio Code are excellent for Python programming.

      tip

      At the time of writing, PyCharm's type-checking and error-detection is superior to Visual Studio Code's Python plugin.

      Getting started

      The simplest way to get started in either PyCharm or Visual Studio Code is the same:

      1. Create a working directory.
      2. Set up a Python virtual environment.
      3. Install the h2o-wave package.
      4. Open the directory in your IDE.
      mkdir $HOME/wave-apps
      cd $HOME/wave-apps
      python3 -m venv venv
      ./venv/bin/pip install h2o-wave

      Using PyCharm

      1. Launch PyCharm
      2. Click "File" -> "Open...", then choose $HOME/wave-apps.
      3. Right-click on wave-apps in the "Project" tree, then click "New" -> "Python File".
      4. Enter a file name, say, hello_world.py.
      5. Write some code (see sample below).
      6. Right-click anywhere inside the file and choose "Run hello_world" or "Debug hello_world".

      Using Visual Studio Code

      1. Launch Visual Studio Code
      2. Click "File" -> "Open...", then choose $HOME/wave-apps.
      3. Click "File" -> "New File"; save the file as, say, hello_world.py.
      4. You should now get a prompt asking if you want to install extensions for Python. Click "Install".
      5. Write some code (see sample below).
      6. Hit Ctrl+F5 to run, or F5 to debug.

      A hello world sample

      $HOME/wave-apps/hello_world.py
      from h2o_wave import site, ui
      -
      # Grab a reference to the page at route '/hello'
      page = site['/hello']
      -
      # Add a markdown card to the page.
      page['quote'] = ui.markdown_card(
      box='1 1 2 2',
      title='Hello World',
      content='"The Internet? Is that thing still around?" - *Homer Simpson*',
      )
      -
      # Finally, save the page.
      page.save()
      Edit this page
      - - - - - - - - - - +

      Development

      Wave scripts are plain Python programs. Wave apps are ASGI programs. You can develop, debug and test them from the command-line, from the Python REPL, or from your favorite text editor.

      Both PyCharm Community Edition and Visual Studio Code are excellent for Python programming.

      tip

      At the time of writing, PyCharm's type-checking and error-detection is superior to Visual Studio Code's Python plugin.

      Getting started

      The simplest way to get started in either PyCharm or Visual Studio Code is the same:

      1. Create a working directory.
      2. Set up a Python virtual environment.
      3. Install the h2o-wave package.
      4. Open the directory in your IDE.
      mkdir $HOME/wave-apps
      cd $HOME/wave-apps
      python3 -m venv venv
      ./venv/bin/pip install h2o-wave

      Using PyCharm

      1. Launch PyCharm
      2. Click "File" -> "Open...", then choose $HOME/wave-apps.
      3. Right-click on wave-apps in the "Project" tree, then click "New" -> "Python File".
      4. Enter a file name, say, foo.py.
      5. Write some code (see sample below).
      6. Right-click anywhere inside the file and choose "Run foo" or "Debug foo".

      Using Visual Studio Code

      1. Launch Visual Studio Code
      2. Click "File" -> "Open...", then choose $HOME/wave-apps.
      3. Click "File" -> "New File"; save the file as, say, foo.py.
      4. You should now get a prompt asking if you want to install extensions for Python. Click "Install".
      5. Write some code (see sample below).
      6. Hit Ctrl+F5 to run, or F5 to debug.

      Debugging Apps

      To debug Wave apps, set your IDE or editor's configuration to execute the command python -m h2o_wave run --no-reload foo instead of python foo.py.

      tip

      The command wave run --no-reload foo is equivalent to python -m h2o_wave run --no-reload foo.

      Using PyCharm

      • Open the "Run/Debug Configurations" dialog for your script.
      • Under "Configuration", change the "Script path" dropdown to "Module name".
      • Set "Module name" to h2o_wave.
      • Set "Parameters" to start foo (assuming your app's source code is in foo.py)
      Edit this page
      + + + + + + + + + + \ No newline at end of file diff --git a/docs/docs/enterprise/basic-concepts/index.html b/docs/docs/enterprise/basic-concepts/index.html index c13d7efb15..96481789e1 100644 --- a/docs/docs/enterprise/basic-concepts/index.html +++ b/docs/docs/enterprise/basic-concepts/index.html @@ -5,20 +5,20 @@ Basic Concepts | H2O Wave - - - - - - - - - - + + + + + + + + + +
      -

      Basic Concepts

      H2O AI Cloud platform recognizes three actors:

      • App Developer: creates and publishes apps
      • App User: browses and runs apps
      • Admin: manages the platform

      over two resource types:

      • App: runnable Wave app package
      • App instance: running instane of an app

      App

      App is a runnable Wave app package with metadata, such as (grouped into categories):

      • Identity
        • a unique name and version identifier
      • Display/search
        • a title and description
        • icon and screenshots
        • search category and keywords
      • Authorization
        • owner (e.g., the person who imported it into H2O AI Cloud)
        • visibility (PRIVATE, ALL_USERS)
      • Runtime
        • RAM/disk requirements
        • other runtime settings (e.g., pointers to dependencies and secrets to be injected at startup time)

      Users can start/run multiple instances of each app (subject to authorization, see below).

      Apps are mostly immutable, meaning once uploaded, they cannot be changed (except for visibility). +

      Basic Concepts

      H2O AI Cloud platform recognizes three actors:

      • App Developer: creates and publishes apps
      • App User: browses and runs apps
      • Admin: manages the platform

      over two resource types:

      • App: runnable Wave app package
      • App instance: running instane of an app

      App

      App is a runnable Wave app package with metadata, such as (grouped into categories):

      • Identity
        • a unique name and version identifier
      • Display/search
        • a title and description
        • icon and screenshots
        • search category and keywords
      • Authorization
        • owner (e.g., the person who imported it into H2O AI Cloud)
        • visibility (PRIVATE, ALL_USERS)
      • Runtime
        • RAM/disk requirements
        • other runtime settings (e.g., pointers to dependencies and secrets to be injected at startup time)

      Users can start/run multiple instances of each app (subject to authorization, see below).

      Apps are mostly immutable, meaning once uploaded, they cannot be changed (except for visibility). To "update" an app, one has to upload a new version.

      note

      Internally, H2O AI Cloud treats every app name/version combination as a separate entity. The UI then uses the app name to link several versions together; however each can have different title, description, owner, instances, etc.

      App Instance

      App instance is a running instance of an app wit the following metadata:

      • pointer to the corresponding app
      • owner (the person who started it)
      • visibility (PRIVATE, ALL_USERS, PUBLIC)

      H2O AI Cloud fully manages the app instance lifecycle on behalf of its users.

      Instances can be stateless or stateful (depending on the app configuration) @@ -28,15 +28,15 @@ these are typically created via h2o bundle deploy

    6. ALL_USERS apps are visible to/runnable by all signed-in users; they are also visible on the "Catalog" page; these are typically created via h2o bundle import
    7. App owner can manage (view, update, delete) her apps via h2o app ... or via the "My Apps" page.

      8. See Developer Guide for details on managing apps.

      Instance Access Authorization

      Access to app instances is governed by the following rules:

      • PRIVATE instances are only visible to the owner and the owner of the corresponding app (the app owner has only read access)
      • ALL_USERS instances are visible to all signed-in users
      • PUBLIC instances are visible to anyone on the Internet
      • Instance owner can manage (view, update, terminate) her instances via h2o instance or via the "My instances" page.

      Note that app/instance visibility can be modified by the owner, e.g., using h2o (app|instance) update <id> -v <visibility> or via the "My Apps"/"My Instances" page.

      Admin access is exempt from all the authorization rules (i.e., admins have full access to all apps/instances).

      See Developer Guide for details on manaigng app instance.

      Edit this page
      - - - - - - - - - - + + + + + + + + + + \ No newline at end of file diff --git a/docs/docs/enterprise/developer-guide/index.html b/docs/docs/enterprise/developer-guide/index.html index aea471582c..a2855be1c2 100644 --- a/docs/docs/enterprise/developer-guide/index.html +++ b/docs/docs/enterprise/developer-guide/index.html @@ -5,20 +5,20 @@ Developer Guide | H2O Wave - - - - - - - - - - + + + + + + + + + +
      -

      Developer Guide

      App Bundle Structure

      Each app has to be bundled as a zip archive (commonly used with suffix .wave) +

      Developer Guide

      App Bundle Structure

      Each app has to be bundled as a zip archive (commonly used with suffix .wave) consisting of:

      • app.toml - the platform configuration file
      • static/ - static asset directory, including the app icon (a png file starting with icon) and screenshots (files starting with screenshot)
      • requirements.txt - pip-managed dependencies of the app (can contain references to .whl files included in the .wave using paths relative to the archive root)
      • app source code

      You can quickly create a .wave archive by running h2o bundle in your app git repository @@ -41,7 +41,7 @@ MemoryLimit is a hard limit on the maximum amount of memory an instance can use before it is OOM-killed; MemoryReservation is how much memory is required to schedule an instance of the app.

    8. Env - request for a literal value/secret to be injected into an instance at startup-time as an Env variable; repeated; see Utilizing Secrets.
      • Name - name of the Env variable to the injected into the Python process; -names prefixed with Q8S are disallowed.
      • Secret - name of the shared secret to use; each secret can contain multiple key-value pairs; +names prefixed with H2O_CLOUD are disallowed.
      • Secret - name of the shared secret to use; each secret can contain multiple key-value pairs; cannot be used together with Value.
      • SecretKey - name of the key within the secret to use; cannot be used together with Value.
      • Value - the literal value of the Env variable; cannot be used together with Secret/SecretKey.
    9. File - request for a literal value/secret to be injected into an instance at startup-time as a file; repeated; see Utilizing Secrets.
      • Path - path to inject the file to; relative path means relative to the directory with the app code as determined by the platform; path dir cannot be / or . (only subdirs are allowed); @@ -51,19 +51,24 @@ references to .whl files included in the .wave using paths relative to the archive root)

        Developers can further customize the runtime environment by Utilizing Secrets.

        note

        At this moment, the platform does not provide any provisions for developers to customize the OS, native OS dependencies, Qd version, etc.

        We are actively working on improving this.

        CLI

        As a developer, you will need the h2o binary to interact with the platform.

        Configuring the CLI

        First you need to configure the CLI by running h2o config setup so that it knows how to talk to a particular platform deployment.

        Be aware, currently the CLI launches a browser to complete the user authentication, and due to this -we currently unable to support remote use of the CLI over SSH without provisions for X forwarding.

        Listing existing apps

        The h2o app list -a command will list all apps available for launch.

        $ h2o app list -a
        ID TITLE OWNER CREATED UPDATED CATEGORY VISIBILITY
        abc543210-0000-0000-0000-1234567890ab Peak 0.1.1 user1@h2o.ai 18d 18d Healthcare ALL_USERS
        bcd543210-1111-1111-1111-0123456789ab Tour 0.0.15-20200922162859 user2@h2o.ai 20d 20d Other ALL_USERS
        ...

        Launching existing apps

        To launch an app, the h2o app run <appId> command can be used to launch a new instance of that app. +we currently unable to support remote use of the CLI over SSH without provisions for X forwarding.

        Listing existing apps

        The h2o app list -a command will list all apps available for launch.

        $ h2o app list -a
        ID TITLE OWNER CREATED CATEGORY VISIBILITY TAGS
        abc543210-0000-0000-0000-1234567890ab Peak 0.1.1 user1@h2o.ai 18d Healthcare ALL_USERS Beta
        bcd543210-1111-1111-1111-0123456789ab Tour 0.0.15-20200922162859 user2@h2o.ai 20d Other ALL_USERS
        ...

        Launching existing apps

        To launch an app, the h2o app run <appId> command can be used to launch a new instance of that app. The -v flag can be used with app run to specify app instance visibility settings.

        $ h2o app run bcd543210-1111-1111-1111-0123456789ab
        ID 22222222-3333-4444-5555-666666666666
        URL https://22222222-3333-4444-5555-666666666666.wave.h2o.ai

        Publishing an app for others to see and launch

        Just run h2o bundle import in your app git repository. This will automatically package your current directory into a .wave package and import it into the platform.

        If you set the visibility to ALL_USERS (via the -v flag), others will be able use h2o app run or the UI to launch the app.

        Note: the name-version combination from your app.toml has to be unique and the platform will reject the request if such combination already exists. Therefore, you need to update the version in app.toml -before each run.

        $ h2o bundle import -v ALL_USERS
        ID bcd543210-1111-1111-1111-0123456789ab
        Title Peak
        Version 0.1.2
        Category Healthcare
        Created At 2020-10-13 06:28:03.050226 +0000 UTC
        Updated At 2020-10-13 06:28:03.050226 +0000 UTC
        Owner user1@h2o.ai
        Visibility ALL_USERS
        Bundle Location ai.h2o.wave.peak.0.1.2.wave
        Icon Location ai.h2o.wave.peak.0.1.2/icon.jpg
        Description Forecast of COVID-19 spread

        Running an app under development

        Just run h2o bundle deploy in your app git repository. This will automatically package your +before each run.

        $ h2o bundle import -v ALL_USERS
        ID bcd543210-1111-1111-1111-0123456789ab
        Title Peak
        Version 0.1.2
        Category Healthcare
        Created At 2020-10-13 06:28:03.050226 +0000 UTC
        Updated At 2020-10-13 06:28:03.050226 +0000 UTC
        Owner user1@h2o.ai
        Visibility ALL_USERS
        Description Forecast of COVID-19 spread
        Tags

        Running an app under development

        Just run h2o bundle deploy in your app git repository. This will automatically package your current directory into a .wave package, import it into the platform, and run it.

        In the output you will be able to find a URL where you can reach the instance, or visit the "My Instances" in the UI.

        Note: the CLI will auto-generate the version so that you can keep executing this without worrying about -version conflicts, just don't forget to clean up old instances/versions.

        $ h2o bundle deploy
        ID bcd543210-1111-1111-1111-0123456789ab
        Title Peak
        Version 0.1.2-20201013062803
        Category Healthcare
        Created At 2020-10-13 06:28:03.050226 +0000 UTC
        Updated At 2020-10-13 06:28:03.050226 +0000 UTC
        Owner user1@h2o.ai
        Visibility PRIVATE
        Bundle Location ai.h2o.wave.peak.0.1.2-20201013062803.wave
        Icon Location ai.h2o.wave.peak.0.1.2-20201013062803/icon.jpg
        Description Forecast of COVID-19 spread
        ID 22222222-3333-4444-5555-666666666666
        URL https://22222222-3333-4444-5555-666666666666.wave.h2o.ai

        Getting the logs of a running app instance

        Just run h2o instance logs, use the flag -f (--follow) to tail the log.

        $ h2o instance logs c22222222-3333-4444-5555-666666666666
        ...
        2020/10/15 12:04:40 #
        2020/10/15 12:04:40 # ┌───────────────────┐
        2020/10/15 12:04:40 # │ ┬ ┬┌─┐┬ ┬┌─┐ │
        2020/10/15 12:04:40 # │ │││├─┤└┐┌┘├┤ │
        2020/10/15 12:04:40 # │ └┴┘┴ ┴ └┘ └─┘ │
        2020/10/15 12:04:40 # └───────────────────┘
        2020/10/15 12:04:40 #
        2020/10/15 12:04:40 # {"address":":55555","t":"listen","webroot":"/wave/www"}
        2020/10/15 12:04:40 # {"host":"ws://127.0.0.1:55556","route":"/","t":"relay"}
        ...

        Running the app in cloud-like environment locally

        Just run h2o exec. This will bundle the app in a temporary .wave and launch it locally +version conflicts, just don't forget to clean up old instances/versions.

        $ h2o bundle deploy
        ID bcd543210-1111-1111-1111-0123456789ab
        Title Peak
        Version 0.1.2-20201013062803
        Category Healthcare
        Created At 2020-10-13 06:28:03.050226 +0000 UTC
        Updated At 2020-10-13 06:28:03.050226 +0000 UTC
        Owner user1@h2o.ai
        Visibility PRIVATE
        Description Forecast of COVID-19 spread
        Tags
        ID 22222222-3333-4444-5555-666666666666
        URL https://22222222-3333-4444-5555-666666666666.wave.h2o.ai

        Getting the logs of a running app instance

        Just run h2o instance logs, use the flag -f (--follow) to tail the log.

        $ h2o instance logs c22222222-3333-4444-5555-666666666666
        ...
        2020/10/27 16:16:34 #
        2020/10/27 16:16:34 # ┌─────────────────────────┐
        2020/10/27 16:16:34 # │ ┌ ┌ ┌──┐ ┌ ┌ ┌──┐ │ H2O Wave
        2020/10/27 16:16:34 # │ │ ┌──┘ │──│ │ │ └┐ │ (version) (build)
        2020/10/27 16:16:34 # │ └─┘ ┘ ┘ └──┘ └─┘ │ © 2020 H2O.ai, Inc.
        2020/10/27 16:16:34 # └─────────────────────────┘
        2020/10/27 16:16:34 #
        2020/10/27 16:16:34 # {"address":":55555","t":"listen","webroot":"/wave/www"}
        2020/10/27 16:16:34 # {"host":"ws://127.0.0.1:55556","route":"/","t":"relay"}
        ...

        Running the app in cloud-like environment locally

        Just run h2o exec. This will bundle the app in a temporary .wave and launch it locally using our platform docker image.

        Note that this requires that you have docker installed and that you have access to the docker image.

        Then navigate to http://localhost:55555/<your main route>.

        $ h2o exec
        {"level":"info","log_level":"debug","url":"file:///wave_bundle/q-peak.0.1.2.wave","app_root":"/app","venv_root":"/resources","server_path":"/wave/wave","py_module":"peak","tmp":"/tmp","startup_server":true,"version":"latest-20200929","time":"2020-10-13T06:42:21Z","message":"configuration"}
        {"level":"info","port":":55555","time":"2020-10-13T06:42:21Z","message":"starting launcher server"}
        {"level":"info","executable":"/wave/wave","time":"2020-10-13T06:42:21Z","message":"wave executable found"}
        ...

        Updating App Visibility

        The h2o app update <appId> -v <visbility> command can be used to modify an existing app's visibility.

        Authors who publish a new version of an app may want to de-list the old version. It is not possible to remove an app if there are instances running, as the data may still need to be available. The preferred method to de-list previous versions is to modify the visibility setting to PRIVATE.

        Updating Instance Visibility

        The h2o instance update <instanceId> -v <visbility> command, much like the app version, -can be used to modify an existing running instance's visibility setting.

        How-To

        Updating App To a Newer Version

        The "Catalog" page shows apps with visibility ALL_USERS, so rolling out a new app version is done by:

        1. importing a new version of the app as PRIVATE
        2. testing the new version
        3. changing the visibility of the new version to ALL USERS
        4. (optional) changing the visibility of the old version to PRIVATE

        This is based on the Basic Concepts:

        Apps are mostly immutable, meaning once uploaded, they cannot be changed (except for visibility). +can be used to modify an existing running instance's visibility setting.

        Managing App Tags

        Tags are means of visually annotating apps in the platform (similar to +GitHub issue labels).

        The h2o tag [assign, get, list, remove, update] commands let users see and, when authorized, +manage available app tags. +App tag configuration includes of name/title, RGB color, description, and ACLs. +Tags can only be assigned/removed/updated by user having a role (as determined by the auth provider) +present in the tag's Admin Roles list (empty means any user).

        Currently, tags can only be created and deleted by platform admins.

        How-To

        Updating App To a Newer Version

        The "Catalog" page shows apps with visibility ALL_USERS, so rolling out a new app version is done by:

        1. importing a new version of the app as PRIVATE
        2. testing the new version
        3. changing the visibility of the new version to ALL USERS
        4. (optional) changing the visibility of the old version to PRIVATE

        This is based on the Basic Concepts:

        Apps are mostly immutable, meaning once uploaded, they cannot be changed (except for visibility). To "update" an app, one has to upload a new version.

        and:

        Internally, H2O AI Cloud treats every app name/version combination as a separate entity. The UI then uses the app name to link several versions together; however each can have different title, description, owner, instances, etc.

        An important corollary is that instances of the old app version are not affected by the update @@ -74,16 +79,16 @@ nor is there an API for listing the available secrets. Secrets are currently managed by Admins. Contact your admins for the available secrets or for adding a new one.

        We are actively working on improving this.

      10. App Route

      While it is not a strict requirement, since the platform deploys each app with its own Wave server, -we advise that apps use / as their main route:

      if __name__ == '__main__':
      listen('/', main_page)
      Edit this page
      - - - - - - - - - - +we advise that apps use / as their main route:

      @app('/')
      async def serve(q: Q):
      pass
      Edit this page
      + + + + + + + + + + \ No newline at end of file diff --git a/docs/docs/enterprise/index.html b/docs/docs/enterprise/index.html index 0b928e1bca..efb244dd67 100644 --- a/docs/docs/enterprise/index.html +++ b/docs/docs/enterprise/index.html @@ -5,29 +5,29 @@ Introduction | H2O Wave - - - - - - - - - - + + + + + + + + + +
      -

      Introduction

      H2O AI Cloud is the best way to operationalize AI/ML applications built with H2O Wave.

      Rationale

      The end goal of data science projects is to produce analytical software applications to facilitate decision-support and automated decision making.

      The primary purpose of such applications is to help stakeholders make better decisions by giving them relevant information in an easily understandable format. Most of the heavy lifting is already taken care of by an app’s authors: what data to use, which algorithms to apply, what information to present, and how to present it.

      Developing and deploying such applications presents some unique problems:

      • Infrastructure. AI/ML modeling is storage and compute intensive. Incorporating machine learning into the software development process and integrating machine learning models into software applications is significantly more complicated compared to conventional software development.
      • Talent. Building applications requires a cross-disciplinary team with specialized skills - data scientists, data engineers, backend/frontend engineers and IT/operations - working in close collaboration with stakeholders.
      • Time to market. Application requirements are rarely set in stone. Market conditions, competitor offerings, and customer expectations change all the time. Software development teams no longer have months or years to develop and deploy applications. There is an intense need to prototype quickly, gather early feedback from stakeholders, and improve iteratively or fail fast.

      In other words, it requires extraordinary effort from a diverse team to wire up data, libraries, tooling and infrastructure before we can focus on what matters most: getting decision-support into the hands of stakeholders.

      What is H2O AI Cloud?

      H2O’s AI Cloud is a turnkey platform that streamlines this entire process: one platform and one API.

      • Turnkey Infrastructure. Provides all the building blocks and services necessary to develop and deploy analytical applications in one install. Combines data connectors, data storage, automatic machine learning, model operations and rapid web application development into a single, scalable, vendor-neutral platform with a coherent, end-to-end API.
      • Empowers Python programmers. The Wave SDK makes it easy for data scientists and data engineers to develop beautiful, polished, low-latency, real-time analytical web applications using pure Python and publish them directly to end-users. No Javascript/HTML/CSS required.
      • Faster time to market. Makes it easy to train models and immediately use them in interactive web applications for rapid prototyping and sharing with end-users. Dramatically simplifies and speeds up the iterative develop-deploy-feedback cycle.
      Edit this page
      - - - - - - - - - - +

      Introduction

      H2O AI Cloud is the best way to operationalize AI/ML applications built with H2O Wave.

      Rationale

      The end goal of data science projects is to produce analytical software applications to facilitate decision-support and automated decision making.

      The primary purpose of such applications is to help stakeholders make better decisions by giving them relevant information in an easily understandable format. Most of the heavy lifting is already taken care of by an app’s authors: what data to use, which algorithms to apply, what information to present, and how to present it.

      Developing and deploying such applications presents some unique problems:

      • Infrastructure. AI/ML modeling is storage and compute intensive. Incorporating machine learning into the software development process and integrating machine learning models into software applications is significantly more complicated compared to conventional software development.
      • Talent. Building applications requires a cross-disciplinary team with specialized skills - data scientists, data engineers, backend/frontend engineers and IT/operations - working in close collaboration with stakeholders.
      • Time to market. Application requirements are rarely set in stone. Market conditions, competitor offerings, and customer expectations change all the time. Software development teams no longer have months or years to develop and deploy applications. There is an intense need to prototype quickly, gather early feedback from stakeholders, and improve iteratively or fail fast.

      In other words, it requires extraordinary effort from a diverse team to wire up data, libraries, tooling and infrastructure before we can focus on what matters most: getting decision-support into the hands of stakeholders.

      What is H2O AI Cloud?

      H2O’s AI Cloud is a turnkey platform that streamlines this entire process: one platform and one API.

      • Turnkey Infrastructure. Provides all the building blocks and services necessary to develop and deploy analytical applications in one install. Combines data connectors, data storage, automatic machine learning, model operations and rapid web application development into a single, scalable, vendor-neutral platform with a coherent, end-to-end API.
      • Empowers Python programmers. The Wave SDK makes it easy for data scientists and data engineers to develop beautiful, polished, low-latency, real-time analytical web applications using pure Python and publish them directly to end-users. No Javascript/HTML/CSS required.
      • Faster time to market. Makes it easy to train models and immediately use them in interactive web applications for rapid prototyping and sharing with end-users. Dramatically simplifies and speeds up the iterative develop-deploy-feedback cycle.
      Edit this page
      + + + + + + + + + + \ No newline at end of file diff --git a/docs/docs/examples/background-executor/index.html b/docs/docs/examples/background-executor/index.html new file mode 100644 index 0000000000..50e94cca69 --- /dev/null +++ b/docs/docs/examples/background-executor/index.html @@ -0,0 +1,42 @@ + + + + + + +Background Tasks / Executor | H2O Wave + + + + + + + + + + + + +
      +

      Background Tasks / Executor

      Use q.exec() to execute background functions using a thread-pool or process-pool.

      import time
      import random
      import concurrent.futures
      from h2o_wave import main, app, Q, ui
      +
      +
      def blocking_function(secs) -> str:
      time.sleep(secs) # Blocks!
      return f'Done waiting for {secs} seconds!'
      +
      +
      @app('/demo')
      async def serve(q: Q):
      if q.args.start:
      q.page['form'] = ui.form_card(box='1 1 -1 -1', items=[ui.progress('Running...')])
      await q.page.save()
      +
      seconds = random.randint(1, 6)
      +
      # DON'T DO THIS!
      # This will make your app unresponsive for some time:
      # message = blocking_function(seconds)
      +
      # Do this instead:
      with concurrent.futures.ThreadPoolExecutor() as pool:
      message = await q.exec(pool, blocking_function, seconds)
      +
      # You can also pass a ProcessPoolExecutor, like this:
      # with concurrent.futures.ProcessPoolExecutor() as pool:
      # message = await q.exec(pool, blocking_function, seconds)
      +
      q.page['form'] = ui.form_card(box='1 1 -1 -1', items=[ui.message_bar('info', message)])
      await q.page.save()
      else:
      q.args.start = True
      q.page['form'] = ui.form_card(box='1 1 -1 -1', items=[ui.button(name='start', label='Start')])
      await q.page.save()
      Edit this page
      + + + + + + + + + + + + \ No newline at end of file diff --git a/docs/docs/examples/background/index.html b/docs/docs/examples/background/index.html new file mode 100644 index 0000000000..b6adeda702 --- /dev/null +++ b/docs/docs/examples/background/index.html @@ -0,0 +1,41 @@ + + + + + + +Background Tasks | H2O Wave + + + + + + + + + + + + +
      +

      Background Tasks

      Use q.run() to execute functions in the background, in-process.

      import time
      import random
      from h2o_wave import main, app, Q, ui
      +
      +
      def blocking_function(secs) -> str:
      time.sleep(secs) # Blocks!
      return f'Done waiting for {secs} seconds!'
      +
      +
      @app('/demo')
      async def serve(q: Q):
      if q.args.start:
      q.page['form'] = ui.form_card(box='1 1 -1 -1', items=[ui.progress('Running...')])
      await q.page.save()
      +
      seconds = random.randint(1, 6)
      +
      # DON'T DO THIS!
      # This will make your app unresponsive for some time:
      # message = blocking_function(seconds)
      +
      # Do this instead:
      message = await q.run(blocking_function, seconds)
      +
      q.page['form'] = ui.form_card(box='1 1 -1 -1', items=[ui.message_bar('info', message)])
      await q.page.save()
      else:
      q.args.start = True
      q.page['form'] = ui.form_card(box='1 1 -1 -1', items=[ui.button(name='start', label='Start')])
      await q.page.save()
      Edit this page
      + + + + + + + + + + + + \ No newline at end of file diff --git a/docs/docs/examples/breadcrumbs/index.html b/docs/docs/examples/breadcrumbs/index.html index 68547627c2..9d59f5afdb 100644 --- a/docs/docs/examples/breadcrumbs/index.html +++ b/docs/docs/examples/breadcrumbs/index.html @@ -5,20 +5,20 @@ Breadcrumbs | H2O Wave - - - - - - - - - - + + + + + + + + + +
      -

      Breadcrumbs

      Breadcrumbs should be used as a navigational aid in your app or site. +

      Breadcrumbs

      Breadcrumbs should be used as a navigational aid in your app or site. They indicate the current page’s location within a hierarchy and help the user understand where they are in relation to the rest of that hierarchy. They also afford one-click access to higher levels of that hierarchy. @@ -27,15 +27,15 @@

      page = site['/demo']
      page['breadcrumbs'] = ui.breadcrumbs_card(
      box='1 1 4 -1',
      items=[
      ui.breadcrumb(name='#menu1', label='Menu 1'),
      ui.breadcrumb(name='#menu2', label='Menu 2'),
      ui.breadcrumb(name='#menu3', label='Menu 3'),
      ],
      )
      page.save()
      Edit this page
      - - - - - - - - - - + + + + + + + + + + \ No newline at end of file diff --git a/docs/docs/examples/button/index.html b/docs/docs/examples/button/index.html index a576cd085f..6e44ac6946 100644 --- a/docs/docs/examples/button/index.html +++ b/docs/docs/examples/button/index.html @@ -5,33 +5,31 @@ Form / Button | H2O Wave - - - - - - - - - - + + + + + + + + + +
      -

      Form / Button

      Use buttons to enable a user to commit a change or complete steps in a task.

      from h2o_wave import Q, listen, ui
      +

      Form / Button

      Use buttons to enable a user to commit a change or complete steps in a task.

      from h2o_wave import main, app, Q, ui
      -
      async def serve(q: Q):
      if 'basic_button' in q.args:
      q.page['example'].items = [
      ui.text(f'basic_button={q.args.basic_button}'),
      ui.text(f'primary_button={q.args.primary_button}'),
      ui.text(f'link_button={q.args.link_button}'),
      ui.text(f'basic_disabled_button={q.args.basic_disabled_button}'),
      ui.text(f'primary_disabled_button={q.args.primary_disabled_button}'),
      ui.text(f'link_disabled_button={q.args.link_disabled_button}'),
      ui.text(f'basic_compound_button={q.args.basic_compound_button}'),
      ui.text(f'primary_compound_button={q.args.primary_compound_button}'),
      ui.text(f'basic_compound_disabled_button={q.args.basic_compound_disabled_button}'),
      ui.text(f'primary_compound_disabled_button={q.args.primary_compound_disabled_button}'),
      ui.button(name='show_form', label='Back', primary=True),
      ]
      else:
      q.page['example'] = ui.form_card(box='1 1 4 10', items=[
      ui.button(name='basic_button', label='Basic'),
      ui.button(name='primary_button', label='Primary', primary=True),
      ui.button(name='link_button', label='Link', link=True),
      ui.button(name='basic_disabled_button', label='Basic (Disabled)', disabled=True),
      ui.button(name='primary_disabled_button', label='Primary (Disabled)', primary=True, disabled=True),
      ui.button(name='link_disabled_button', label='Link (Disabled)', link=True, disabled=True),
      ui.button(name='basic_compound_button', label='Basic', caption='Compound Button.'),
      ui.button(name='primary_compound_button', label='Primary', caption='Compound Button', primary=True),
      ui.button(name='basic_compound_disabled_button', label='Basic (Disabled)', caption='Compound Button',
      disabled=True),
      ui.button(name='primary_compound_disabled_button', label='Primary (Disabled)', caption='Compound Button',
      primary=True, disabled=True),
      ])
      await q.page.save()
      -
      -
      listen('/demo', serve)
      Edit this page
      - - - - - - - - - - +
      @app('/demo')
      async def serve(q: Q):
      if 'basic_button' in q.args:
      q.page['example'].items = [
      ui.text(f'basic_button={q.args.basic_button}'),
      ui.text(f'primary_button={q.args.primary_button}'),
      ui.text(f'link_button={q.args.link_button}'),
      ui.text(f'basic_disabled_button={q.args.basic_disabled_button}'),
      ui.text(f'primary_disabled_button={q.args.primary_disabled_button}'),
      ui.text(f'link_disabled_button={q.args.link_disabled_button}'),
      ui.text(f'basic_compound_button={q.args.basic_compound_button}'),
      ui.text(f'primary_compound_button={q.args.primary_compound_button}'),
      ui.text(f'basic_compound_disabled_button={q.args.basic_compound_disabled_button}'),
      ui.text(f'primary_compound_disabled_button={q.args.primary_compound_disabled_button}'),
      ui.button(name='show_form', label='Back', primary=True),
      ]
      else:
      q.page['example'] = ui.form_card(box='1 1 4 10', items=[
      ui.button(name='basic_button', label='Basic'),
      ui.button(name='primary_button', label='Primary', primary=True),
      ui.button(name='link_button', label='Link', link=True),
      ui.button(name='basic_disabled_button', label='Basic (Disabled)', disabled=True),
      ui.button(name='primary_disabled_button', label='Primary (Disabled)', primary=True, disabled=True),
      ui.button(name='link_disabled_button', label='Link (Disabled)', link=True, disabled=True),
      ui.button(name='basic_compound_button', label='Basic', caption='Compound Button.'),
      ui.button(name='primary_compound_button', label='Primary', caption='Compound Button', primary=True),
      ui.button(name='basic_compound_disabled_button', label='Basic (Disabled)', caption='Compound Button',
      disabled=True),
      ui.button(name='primary_compound_disabled_button', label='Primary (Disabled)', caption='Compound Button',
      primary=True, disabled=True),
      ])
      await q.page.save()
      Edit this page
      + + + + + + + + + + \ No newline at end of file diff --git a/docs/docs/examples/buttons/index.html b/docs/docs/examples/buttons/index.html index 89b2efd22a..ca0af41d4b 100644 --- a/docs/docs/examples/buttons/index.html +++ b/docs/docs/examples/buttons/index.html @@ -5,33 +5,31 @@ Form / Buttons | H2O Wave - - - - - - - - - - + + + + + + + + + +
      -

      Form / Buttons

      Use the ui.buttons() function to group related buttons.

      from h2o_wave import Q, listen, ui
      +

      Form / Buttons

      Use the ui.buttons() function to group related buttons.

      from h2o_wave import main, app, Q, ui
      -
      async def serve(q: Q):
      if 'standard_button' in q.args:
      q.page['example'].items = [
      ui.text(f'primary_button={q.args.primary_button}'),
      ui.text(f'standard_button={q.args.standard_button}'),
      ui.text(f'standard_disabled_button={q.args.standard_disabled_button}'),
      ui.button(name='show_form', label='Back', primary=True),
      ]
      else:
      q.page['example'] = ui.form_card(box='1 1 4 10', items=[
      ui.buttons([
      ui.button(name='primary_button', label='Primary', primary=True),
      ui.button(name='standard_button', label='Standard'),
      ui.button(name='standard_disabled_button', label='Standard', disabled=True),
      ]),
      ])
      await q.page.save()
      -
      -
      listen('/demo', serve)
      Edit this page
      - - - - - - - - - - +
      @app('/demo')
      async def serve(q: Q):
      if 'standard_button' in q.args:
      q.page['example'].items = [
      ui.text(f'primary_button={q.args.primary_button}'),
      ui.text(f'standard_button={q.args.standard_button}'),
      ui.text(f'standard_disabled_button={q.args.standard_disabled_button}'),
      ui.button(name='show_form', label='Back', primary=True),
      ]
      else:
      q.page['example'] = ui.form_card(box='1 1 4 10', items=[
      ui.buttons([
      ui.button(name='primary_button', label='Primary', primary=True),
      ui.button(name='standard_button', label='Standard'),
      ui.button(name='standard_disabled_button', label='Standard', disabled=True),
      ]),
      ])
      await q.page.save()
      Edit this page
      + + + + + + + + + + \ No newline at end of file diff --git a/docs/docs/examples/card-menu/index.html b/docs/docs/examples/card-menu/index.html index c96a1ac803..698281a734 100644 --- a/docs/docs/examples/card-menu/index.html +++ b/docs/docs/examples/card-menu/index.html @@ -5,38 +5,36 @@ Context Menu | H2O Wave - - - - - - - - - - + + + + + + + + + +
      -

      Context Menu

      Display a context menu on a card.

      import json
      from h2o_wave import Q, listen, ui, data
      +

      Context Menu

      Display a context menu on a card.

      import json
      from h2o_wave import main, app, Q, ui, data
      # Vega lite spec for a bar plot, defaults to linear scale.
      spec_linear_scale = json.dumps(dict(
      mark='bar',
      encoding=dict(
      x=dict(field='a', type='ordinal'),
      y=dict(field='b', type='quantitative')
      )
      ))
      # Vega lite spec for a bar plot, log scaled.
      spec_log_scale = json.dumps(dict(
      mark='bar',
      encoding=dict(
      x=dict(field='a', type='ordinal'),
      y=dict(field='b', type='quantitative', scale=dict(type='log'))
      )
      ))
      # Data for our plot.
      plot_data = data(fields=["a", "b"], rows=[
      ["A", 28], ["B", 55], ["C", 43],
      ["D", 91], ["E", 81], ["F", 53],
      ["G", 19], ["H", 87], ["I", 52]
      ])
      # Create a couple of context menu commands.
      log_scale_command = ui.command(
      name='to_log_scale',
      label='Log Scale',
      icon='LineChart',
      )
      linear_scale_command = ui.command(
      name='to_linear_scale',
      label='Linear Scale',
      icon='LineChart',
      )
      -
      async def serve(q: Q):
      if q.client.plot_added: # Have we already added a plot?
      example = q.page['example']
      if q.args.to_log_scale:
      # Change to log scale
      example.title = 'Plot (Log Scale)',
      example.specification = spec_log_scale
      example.commands = [linear_scale_command]
      else:
      # Change to linear scale
      example.title = 'Plot (Linear Scale)',
      example.specification = spec_linear_scale
      example.commands = [log_scale_command]
      else: # Add a new plot
      q.page['example'] = ui.vega_card(
      box='1 1 2 4',
      title='Plot (Linear Scale)',
      specification=spec_linear_scale,
      data=plot_data,
      commands=[log_scale_command],
      )
      # Flag to indicate that we've added a plot
      q.client.plot_added = True
      -
      await q.page.save()
      -
      -
      listen('/demo', serve)
      Edit this page
      - - - - - - - - - - +
      @app('/demo')
      async def serve(q: Q):
      if q.client.plot_added: # Have we already added a plot?
      example = q.page['example']
      if q.args.to_log_scale:
      # Change to log scale
      example.title = 'Plot (Log Scale)',
      example.specification = spec_log_scale
      example.commands = [linear_scale_command]
      else:
      # Change to linear scale
      example.title = 'Plot (Linear Scale)',
      example.specification = spec_linear_scale
      example.commands = [log_scale_command]
      else: # Add a new plot
      q.page['example'] = ui.vega_card(
      box='1 1 2 4',
      title='Plot (Linear Scale)',
      specification=spec_linear_scale,
      data=plot_data,
      commands=[log_scale_command],
      )
      # Flag to indicate that we've added a plot
      q.client.plot_added = True
      +
      await q.page.save()
      Edit this page
      + + + + + + + + + + \ No newline at end of file diff --git a/docs/docs/examples/checkbox/index.html b/docs/docs/examples/checkbox/index.html index 68e059466f..64bb125101 100644 --- a/docs/docs/examples/checkbox/index.html +++ b/docs/docs/examples/checkbox/index.html @@ -5,33 +5,31 @@ Form / Checkbox | H2O Wave - - - - - - - - - - + + + + + + + + + +
      -

      Form / Checkbox

      Use checkboxes to switch between two mutually exclusive options.

      from h2o_wave import Q, listen, ui
      +

      Form / Checkbox

      Use checkboxes to switch between two mutually exclusive options.

      from h2o_wave import main, app, Q, ui
      -
      async def serve(q: Q):
      if q.args.show_inputs:
      q.page['example'].items = [
      ui.text(f'checkbox_unchecked={q.args.checkbox_unchecked}'),
      ui.text(f'checkbox_checked={q.args.checkbox_checked}'),
      ui.text(f'checkbox_indeterminate={q.args.checkbox_indeterminate}'),
      ui.text(f'checkbox_unchecked_disabled={q.args.checkbox_unchecked_disabled}'),
      ui.text(f'checkbox_checked_disabled={q.args.checkbox_checked_disabled}'),
      ui.text(f'checkbox_indeterminate_disabled={q.args.checkbox_indeterminate_disabled}'),
      ui.button(name='show_form', label='Back', primary=True),
      ]
      else:
      q.page['example'] = ui.form_card(box='1 1 4 10', items=[
      ui.checkbox(name='checkbox_unchecked', label='Not checked'),
      ui.checkbox(name='checkbox_checked', label='Checked', value=True),
      ui.checkbox(name='checkbox_indeterminate', label='Indeterminate', indeterminate=True),
      ui.checkbox(name='checkbox_unchecked_disabled', label='Not checked (Disabled)', disabled=True),
      ui.checkbox(name='checkbox_checked_disabled', label='Checked (Disabled)', value=True, disabled=True),
      ui.checkbox(name='checkbox_indeterminate_disabled', label='Indeterminate (Disabled)', indeterminate=True,
      disabled=True),
      ui.button(name='show_inputs', label='Submit', primary=True),
      ])
      await q.page.save()
      -
      -
      listen('/demo', serve)
      Edit this page
      - - - - - - - - - - +
      @app('/demo')
      async def serve(q: Q):
      if q.args.show_inputs:
      q.page['example'].items = [
      ui.text(f'checkbox_unchecked={q.args.checkbox_unchecked}'),
      ui.text(f'checkbox_checked={q.args.checkbox_checked}'),
      ui.text(f'checkbox_indeterminate={q.args.checkbox_indeterminate}'),
      ui.text(f'checkbox_unchecked_disabled={q.args.checkbox_unchecked_disabled}'),
      ui.text(f'checkbox_checked_disabled={q.args.checkbox_checked_disabled}'),
      ui.text(f'checkbox_indeterminate_disabled={q.args.checkbox_indeterminate_disabled}'),
      ui.button(name='show_form', label='Back', primary=True),
      ]
      else:
      q.page['example'] = ui.form_card(box='1 1 4 10', items=[
      ui.checkbox(name='checkbox_unchecked', label='Not checked'),
      ui.checkbox(name='checkbox_checked', label='Checked', value=True),
      ui.checkbox(name='checkbox_indeterminate', label='Indeterminate', indeterminate=True),
      ui.checkbox(name='checkbox_unchecked_disabled', label='Not checked (Disabled)', disabled=True),
      ui.checkbox(name='checkbox_checked_disabled', label='Checked (Disabled)', value=True, disabled=True),
      ui.checkbox(name='checkbox_indeterminate_disabled', label='Indeterminate (Disabled)', indeterminate=True,
      disabled=True),
      ui.button(name='show_inputs', label='Submit', primary=True),
      ])
      await q.page.save()
      Edit this page
      + + + + + + + + + + \ No newline at end of file diff --git a/docs/docs/examples/checklist/index.html b/docs/docs/examples/checklist/index.html index 2a01e78574..1b51107dae 100644 --- a/docs/docs/examples/checklist/index.html +++ b/docs/docs/examples/checklist/index.html @@ -5,33 +5,31 @@ Form / Checklist | H2O Wave - - - - - - - - - - + + + + + + + + + +
      -

      Form / Checklist

      Use a checklist to group a set of related checkboxes.

      from h2o_wave import Q, listen, ui
      +

      Form / Checklist

      Use a checklist to group a set of related checkboxes.

      from h2o_wave import main, app, Q, ui
      -
      async def serve(q: Q):
      if q.args.show_inputs:
      q.page['example'].items = [
      ui.text(f'selected={q.args.checklist}'),
      ui.button(name='show_form', label='Back', primary=True),
      ]
      else:
      q.page['example'] = ui.form_card(box='1 1 4 10', items=[
      ui.checklist(name='checklist', label='Choices',
      choices=[ui.choice(name=x, label=x) for x in ['Egg', 'Bacon', 'Spam']]),
      ui.button(name='show_inputs', label='Submit', primary=True),
      ])
      await q.page.save()
      -
      -
      listen('/demo', serve)
      Edit this page
      - - - - - - - - - - +
      @app('/demo')
      async def serve(q: Q):
      if q.args.show_inputs:
      q.page['example'].items = [
      ui.text(f'selected={q.args.checklist}'),
      ui.button(name='show_form', label='Back', primary=True),
      ]
      else:
      q.page['example'] = ui.form_card(box='1 1 4 10', items=[
      ui.checklist(name='checklist', label='Choices',
      choices=[ui.choice(name=x, label=x) for x in ['Egg', 'Bacon', 'Spam']]),
      ui.button(name='show_inputs', label='Submit', primary=True),
      ])
      await q.page.save()
      Edit this page
      + + + + + + + + + + \ No newline at end of file diff --git a/docs/docs/examples/choice-group/index.html b/docs/docs/examples/choice-group/index.html index e647ab7e0c..47d355e5fa 100644 --- a/docs/docs/examples/choice-group/index.html +++ b/docs/docs/examples/choice-group/index.html @@ -5,34 +5,32 @@ Form / Choice Group | H2O Wave - - - - - - - - - - + + + + + + + + + +
      -

      Form / Choice Group

      Use choice groups to let users select one option from two or more choices.

      from h2o_wave import Q, listen, ui
      +

      Form / Choice Group

      Use choice groups to let users select one option from two or more choices.

      from h2o_wave import main, app, Q, ui
      choices = [
      ui.choice('A', 'Option A'),
      ui.choice('B', 'Option B'),
      ui.choice('C', 'Option C', disabled=True),
      ui.choice('D', 'Option D'),
      ]
      -
      async def serve(q: Q):
      if q.args.show_inputs:
      q.page['example'].items = [
      ui.text(f'selected={q.args.choice_group}'),
      ui.button(name='show_form', label='Back', primary=True),
      ]
      else:
      q.page['example'] = ui.form_card(box='1 1 4 10', items=[
      ui.choice_group(name='choice_group', label='Pick one', value='B', required=True, choices=choices),
      ui.button(name='show_inputs', label='Submit', primary=True),
      ])
      await q.page.save()
      -
      -
      listen('/demo', serve)
      Edit this page
      - - - - - - - - - - +
      @app('/demo')
      async def serve(q: Q):
      if q.args.show_inputs:
      q.page['example'].items = [
      ui.text(f'selected={q.args.choice_group}'),
      ui.button(name='show_form', label='Back', primary=True),
      ]
      else:
      q.page['example'] = ui.form_card(box='1 1 4 10', items=[
      ui.choice_group(name='choice_group', label='Pick one', value='B', required=True, choices=choices),
      ui.button(name='show_inputs', label='Submit', primary=True),
      ])
      await q.page.save()
      Edit this page
      + + + + + + + + + + \ No newline at end of file diff --git a/docs/docs/examples/color-picker/index.html b/docs/docs/examples/color-picker/index.html index 38dac0be3e..ef922569e9 100644 --- a/docs/docs/examples/color-picker/index.html +++ b/docs/docs/examples/color-picker/index.html @@ -5,33 +5,31 @@ Form / Color Picker | H2O Wave - - - - - - - - - - + + + + + + + + + +
      -

      Form / Color Picker

      Use a color picker to allow a user to select a color.

      from h2o_wave import Q, listen, ui
      +

      Form / Color Picker

      Use a color picker to allow a user to select a color.

      from h2o_wave import main, app, Q, ui
      -
      async def serve(q: Q):
      if q.args.show_inputs:
      q.page['example'].items = [
      ui.text(f'color={q.args.color}'),
      ui.button(name='show_form', label='Back', primary=True),
      ]
      else:
      q.page['example'] = ui.form_card(box='1 1 4 10', items=[
      ui.color_picker(name='color', label='Pick a color', value='#F25F5C'),
      ui.button(name='show_inputs', label='Submit', primary=True),
      ])
      await q.page.save()
      -
      -
      listen('/demo', serve)
      Edit this page
      - - - - - - - - - - +
      @app('/demo')
      async def serve(q: Q):
      if q.args.show_inputs:
      q.page['example'].items = [
      ui.text(f'color={q.args.color}'),
      ui.button(name='show_form', label='Back', primary=True),
      ]
      else:
      q.page['example'] = ui.form_card(box='1 1 4 10', items=[
      ui.color_picker(name='color', label='Pick a color', value='#F25F5C'),
      ui.button(name='show_inputs', label='Submit', primary=True),
      ])
      await q.page.save()
      Edit this page
      + + + + + + + + + + \ No newline at end of file diff --git a/docs/docs/examples/combobox/index.html b/docs/docs/examples/combobox/index.html index 6b0f119872..ed119e8cc8 100644 --- a/docs/docs/examples/combobox/index.html +++ b/docs/docs/examples/combobox/index.html @@ -5,34 +5,32 @@ Form / Combobox | H2O Wave - - - - - - - - - - + + + + + + + + + +
      -

      Form / Combobox

      Use comboboxes to allow users to either choose between available choices or indicate a choice by free-form editing.

      from h2o_wave import Q, listen, ui
      +

      Form / Combobox

      Use comboboxes to allow users to either choose between available choices or indicate a choice by free-form editing.

      from h2o_wave import main, app, Q, ui
      combobox_choices = ['Cyan', 'Magenta', 'Yellow', 'Black']
      -
      async def serve(q: Q):
      if q.args.show_inputs:
      q.page['example'].items = [
      ui.text(f'combobox={q.args.combobox}'),
      ui.text(f'combobox_disabled={q.args.combobox_disabled}'),
      ui.text(f'combobox_error={q.args.combobox_error}'),
      ui.button(name='show_form', label='Back', primary=True),
      ]
      else:
      q.page['example'] = ui.form_card(box='1 1 4 10', items=[
      ui.combobox(name='combobox', label='Enter or choose a color', placeholder='Color...', value='Blue',
      choices=combobox_choices),
      ui.combobox(name='combobox_disabled', label='Enter or choose a color', placeholder='Color...', value='Blue',
      choices=combobox_choices, disabled=True),
      ui.combobox(name='combobox_error', label='Enter or choose a color', placeholder='Color...', value='Blue',
      choices=combobox_choices, error='This combobox has an error!'),
      ui.button(name='show_inputs', label='Submit', primary=True),
      ])
      await q.page.save()
      -
      -
      listen('/demo', serve)
      Edit this page
      - - - - - - - - - - +
      @app('/demo')
      async def serve(q: Q):
      if q.args.show_inputs:
      q.page['example'].items = [
      ui.text(f'combobox={q.args.combobox}'),
      ui.text(f'combobox_disabled={q.args.combobox_disabled}'),
      ui.text(f'combobox_error={q.args.combobox_error}'),
      ui.button(name='show_form', label='Back', primary=True),
      ]
      else:
      q.page['example'] = ui.form_card(box='1 1 4 10', items=[
      ui.combobox(name='combobox', label='Enter or choose a color', placeholder='Color...', value='Blue',
      choices=combobox_choices),
      ui.combobox(name='combobox_disabled', label='Enter or choose a color', placeholder='Color...', value='Blue',
      choices=combobox_choices, disabled=True),
      ui.combobox(name='combobox_error', label='Enter or choose a color', placeholder='Color...', value='Blue',
      choices=combobox_choices, error='This combobox has an error!'),
      ui.button(name='show_inputs', label='Submit', primary=True),
      ])
      await q.page.save()
      Edit this page
      + + + + + + + + + + \ No newline at end of file diff --git a/docs/docs/examples/counter-broadcast/index.html b/docs/docs/examples/counter-broadcast/index.html index 80ed306cac..ae0a66f63e 100644 --- a/docs/docs/examples/counter-broadcast/index.html +++ b/docs/docs/examples/counter-broadcast/index.html @@ -5,37 +5,35 @@ Mode / Broadcast | H2O Wave - - - - - - - - - - + + + + + + + + + +
      -

      Mode / Broadcast

      Launch the server in broadcast mode to synchronize browser state across users. -Open /demo in multiple browsers and watch them synchronize in realtime.

      from h2o_wave import Q, listen, ui, pack
      +

      Mode / Broadcast

      Launch the server in broadcast mode to synchronize browser state across users. +Open /demo in multiple browsers and watch them synchronize in realtime.

      from h2o_wave import main, app, Q, ui, pack
      -
      async def serve(q: Q):
      count = q.app.count or 0
      if 'increment' in q.args:
      count += 1
      q.app.count = count
      +
      @app('/demo', mode='broadcast')
      async def serve(q: Q):
      count = q.app.count or 0
      if 'increment' in q.args:
      count += 1
      q.app.count = count
      items = pack([ui.button(name='increment', label=f'Count={count}')])
      if count > 0:
      form = q.page['example']
      form.items = items
      else:
      q.page['example'] = ui.form_card(box='1 1 12 10', items=items)
      -
      await q.page.save()
      -
      -
      listen('/demo', serve, mode='broadcast')
      Edit this page
      - - - - - - - - - - +
      await q.page.save()
      Edit this page
      + + + + + + + + + + \ No newline at end of file diff --git a/docs/docs/examples/counter-global/index.html b/docs/docs/examples/counter-global/index.html index 1ec62786d7..6f203ac1f8 100644 --- a/docs/docs/examples/counter-global/index.html +++ b/docs/docs/examples/counter-global/index.html @@ -5,38 +5,36 @@ Mode / Broadcast / Global | H2O Wave - - - - - - - - - - + + + + + + + + + +
      -

      Mode / Broadcast / Global

      Launch the server in broadcast mode to synchronize browser state across users. Global variables can be used to manage state. -Open /demo in multiple browsers and watch them synchronize in realtime.

      from h2o_wave import Q, listen, ui, pack
      +

      Mode / Broadcast / Global

      Launch the server in broadcast mode to synchronize browser state across users. Global variables can be used to manage state. +Open /demo in multiple browsers and watch them synchronize in realtime.

      from h2o_wave import main, app, Q, ui, pack
      count = 0
      -
      async def serve(q: Q):
      global count
      if 'increment' in q.args:
      count += 1
      +
      @app('/demo', mode='broadcast')
      async def serve(q: Q):
      global count
      if 'increment' in q.args:
      count += 1
      items = pack([ui.button(name='increment', label=f'Count={count}')])
      if count > 0:
      form = q.page['example']
      form.items = items
      else:
      q.page['example'] = ui.form_card(box='1 1 12 10', items=items)
      -
      await q.page.save()
      -
      -
      listen('/demo', serve, mode='broadcast')
      Edit this page
      - - - - - - - - - - +
      await q.page.save()
      Edit this page
      + + + + + + + + + + \ No newline at end of file diff --git a/docs/docs/examples/counter-multicast/index.html b/docs/docs/examples/counter-multicast/index.html index 7dbfd35c8d..48be116ad2 100644 --- a/docs/docs/examples/counter-multicast/index.html +++ b/docs/docs/examples/counter-multicast/index.html @@ -5,37 +5,35 @@ Mode / Multicast | H2O Wave - - - - - - - - - - + + + + + + + + + +
      -

      Mode / Multicast

      Launch the server in multicast mode to synchronize browser state across a user's clients. -Open /demo in multiple browsers and watch them synchronize in realtime.

      from h2o_wave import Q, listen, ui, pack
      +

      Mode / Multicast

      Launch the server in multicast mode to synchronize browser state across a user's clients. +Open /demo in multiple browsers and watch them synchronize in realtime.

      from h2o_wave import main, app, Q, ui, pack
      -
      async def serve(q: Q):
      count = q.user.count or 0
      if 'increment' in q.args:
      count += 1
      q.user.count = count
      +
      @app('/demo', mode='multicast')
      async def serve(q: Q):
      count = q.user.count or 0
      if 'increment' in q.args:
      count += 1
      q.user.count = count
      items = pack([ui.button(name='increment', label=f'Count={count}')])
      if count > 0:
      form = q.page['example']
      form.items = items
      else:
      q.page['example'] = ui.form_card(box='1 1 12 10', items=items)
      -
      await q.page.save()
      -
      -
      listen('/demo', serve, mode='multicast')
      Edit this page
      - - - - - - - - - - +
      await q.page.save()
      Edit this page
      + + + + + + + + + + \ No newline at end of file diff --git a/docs/docs/examples/counter-unicast/index.html b/docs/docs/examples/counter-unicast/index.html index 5501254951..fc007b1984 100644 --- a/docs/docs/examples/counter-unicast/index.html +++ b/docs/docs/examples/counter-unicast/index.html @@ -5,36 +5,34 @@ Mode / Unicast | H2O Wave - - - - - - - - - - + + + + + + + + + +
      -

      Mode / Unicast

      Launch the server in unicast mode and use q.client to manage client-local state.

      from h2o_wave import Q, listen, ui, pack
      +

      Mode / Unicast

      Launch the server in unicast mode and use q.client to manage client-local state.

      from h2o_wave import main, app, Q, ui
      -
      async def serve(q: Q):
      count = q.client.count or 0
      if 'increment' in q.args:
      count += 1
      q.client.count = count
      -
      items = pack([ui.button(name='increment', label=f'Count={count}')])
      -
      if count > 0:
      form = q.page['example']
      form.items = items
      else:
      q.page['example'] = ui.form_card(box='1 1 12 10', items=items)
      -
      await q.page.save()
      -
      -
      listen('/demo', serve)
      Edit this page
      - - - - - - - - - - +
      @app('/demo')
      async def serve(q: Q):
      count = q.client.count or 0
      +
      if not q.client.initialized:
      q.page['example'] = ui.form_card(box='1 1 -1 -1', items=[
      ui.button(name='increment', label=f'Count={count}')
      ])
      q.client.initialized = True
      +
      if q.args.increment:
      q.client.count = count = count + 1
      q.page['example'].items[0].button.label = f'Count={count}'
      +
      await q.page.save()
      Edit this page
      + + + + + + + + + + \ No newline at end of file diff --git a/docs/docs/examples/dashboard/index.html b/docs/docs/examples/dashboard/index.html index 5f7ec1ad27..f940d4822e 100644 --- a/docs/docs/examples/dashboard/index.html +++ b/docs/docs/examples/dashboard/index.html @@ -5,20 +5,20 @@ Dashboard | H2O Wave - - - - - - - - - - + + + + + + + + + +
      -

      Dashboard

      Make a dashboard using a multitude of cards and update them live.

      from faker import Faker
      import time
      from h2o_wave import site, data, ui
      from synth import FakePercent, FakeCategoricalSeries
      +

      Dashboard

      Make a dashboard using a multitude of cards and update them live.

      from faker import Faker
      import time
      from h2o_wave import site, data, ui
      from synth import FakePercent, FakeCategoricalSeries
      fake = Faker()
      light_theme_colors = '$red $pink $purple $violet $indigo $blue $azure $cyan $teal $mint $green $amber $orange $tangerine'.split()
      dark_theme_colors = '$red $pink $blue $azure $cyan $teal $mint $green $lime $yellow $amber $orange $tangerine'.split()
      _color_index = -1
      colors = dark_theme_colors
      @@ -55,15 +55,15 @@
      page.save()
      create_dashboard(update_freq=0.25)
      Edit this page
      - - - - - - - - - - + + + + + + + + + + \ No newline at end of file diff --git a/docs/docs/examples/date-picker-trigger/index.html b/docs/docs/examples/date-picker-trigger/index.html index c980063586..31035aa9ad 100644 --- a/docs/docs/examples/date-picker-trigger/index.html +++ b/docs/docs/examples/date-picker-trigger/index.html @@ -5,33 +5,31 @@ Form / Date Picker / Trigger | H2O Wave - - - - - - - - - - + + + + + + + + + +
      -

      Form / Date Picker / Trigger

      To handle live changes to a date picker, enable the trigger attribute.

      from h2o_wave import Q, listen, ui
      +

      Form / Date Picker / Trigger

      To handle live changes to a date picker, enable the trigger attribute.

      from h2o_wave import main, app, Q, ui
      -
      async def main(q: Q):
      if not q.client.initialized:
      q.page['example'] = ui.form_card(box='1 1 4 10', items=[
      ui.text(f'date_trigger={q.args.date_trigger}'),
      ui.date_picker(name='date_trigger', label='Pick a date', trigger=True),
      ])
      q.client.initialized = True
      else:
      q.page['example'].items[0].text.content = f'Selected date: {q.args.date_trigger}'
      q.page['example'].items[1].date_picker.value = q.args.date_trigger
      await q.page.save()
      -
      -
      if __name__ == '__main__':
      listen('/demo', main)
      Edit this page
      - - - - - - - - - - +
      @app('/demo')
      async def serve(q: Q):
      if not q.client.initialized:
      q.page['example'] = ui.form_card(box='1 1 4 10', items=[
      ui.text(f'date_trigger={q.args.date_trigger}'),
      ui.date_picker(name='date_trigger', label='Pick a date', trigger=True),
      ])
      q.client.initialized = True
      else:
      q.page['example'].items[0].text.content = f'Selected date: {q.args.date_trigger}'
      q.page['example'].items[1].date_picker.value = q.args.date_trigger
      await q.page.save()
      Edit this page
      + + + + + + + + + + \ No newline at end of file diff --git a/docs/docs/examples/date-picker/index.html b/docs/docs/examples/date-picker/index.html index b331fbe00e..1244aaf63f 100644 --- a/docs/docs/examples/date-picker/index.html +++ b/docs/docs/examples/date-picker/index.html @@ -5,33 +5,31 @@ Form / Date Picker | H2O Wave - - - - - - - - - - + + + + + + + + + +
      -

      Form / Date Picker

      Use date pickers to allow users to pick dates.

      from h2o_wave import Q, listen, ui
      +

      Form / Date Picker

      Use date pickers to allow users to pick dates.

      from h2o_wave import main, app, Q, ui
      -
      async def serve(q: Q):
      if q.args.show_inputs:
      q.page['example'].items = [
      ui.text(f'date={q.args.date}'),
      ui.text(f'date_placeholder={q.args.date_placeholder}'),
      ui.text(f'date_disabled={q.args.date_disabled}'),
      ui.button(name='show_form', label='Back', primary=True),
      ]
      else:
      q.page['example'] = ui.form_card(box='1 1 4 10', items=[
      ui.date_picker(name='date', label='Standard date picker', value='2017-10-19'),
      ui.date_picker(name='date_placeholder', label='Date picker with placeholder', placeholder='Pick a date'),
      ui.date_picker(name='date_disabled', label='Disabled date picker', value='2017-10-19', disabled=True),
      ui.button(name='show_inputs', label='Submit', primary=True),
      ])
      await q.page.save()
      -
      -
      listen('/demo', serve)
      Edit this page
      - - - - - - - - - - +
      @app('/demo')
      async def serve(q: Q):
      if q.args.show_inputs:
      q.page['example'].items = [
      ui.text(f'date={q.args.date}'),
      ui.text(f'date_placeholder={q.args.date_placeholder}'),
      ui.text(f'date_disabled={q.args.date_disabled}'),
      ui.button(name='show_form', label='Back', primary=True),
      ]
      else:
      q.page['example'] = ui.form_card(box='1 1 4 10', items=[
      ui.date_picker(name='date', label='Standard date picker', value='2017-10-19'),
      ui.date_picker(name='date_placeholder', label='Date picker with placeholder', placeholder='Pick a date'),
      ui.date_picker(name='date_disabled', label='Disabled date picker', value='2017-10-19', disabled=True),
      ui.button(name='show_inputs', label='Submit', primary=True),
      ])
      await q.page.save()
      Edit this page
      + + + + + + + + + + \ No newline at end of file diff --git a/docs/docs/examples/dropdown/index.html b/docs/docs/examples/dropdown/index.html index 046be2cd99..4248d2cb22 100644 --- a/docs/docs/examples/dropdown/index.html +++ b/docs/docs/examples/dropdown/index.html @@ -5,34 +5,32 @@ Form / Dropdown | H2O Wave - - - - - - - - - - + + + + + + + + + +
      -

      Form / Dropdown

      Use dropdowns to allow users to choose between available choices.

      from h2o_wave import Q, listen, ui
      +

      Form / Dropdown

      Use dropdowns to allow users to choose between available choices.

      from h2o_wave import main, app, Q, ui
      choices = [
      ui.choice('A', 'Option A'),
      ui.choice('B', 'Option B'),
      ui.choice('C', 'Option C', disabled=True),
      ui.choice('D', 'Option D'),
      ]
      -
      async def serve(q: Q):
      if q.args.show_inputs:
      q.page['example'].items = [
      ui.text(f'dropdown={q.args.dropdown}'),
      ui.text(f'dropdown_multi={q.args.dropdown_multi}'),
      ui.text(f'dropdown_disabled={q.args.dropdown_disabled}'),
      ui.button(name='show_form', label='Back', primary=True),
      ]
      else:
      q.page['example'] = ui.form_card(box='1 1 4 10', items=[
      ui.dropdown(name='dropdown', label='Pick one', value='B', required=True, choices=choices),
      ui.dropdown(name='dropdown_multi', label='Pick multiple', values=['B', 'D'], required=True,
      choices=choices),
      ui.dropdown(name='dropdown_disabled', label='Pick one (Disabled)', value='B', choices=choices,
      disabled=True),
      ui.button(name='show_inputs', label='Submit', primary=True),
      ])
      await q.page.save()
      -
      -
      listen('/demo', serve)
      Edit this page
      - - - - - - - - - - +
      @app('/demo')
      async def serve(q: Q):
      if q.args.show_inputs:
      q.page['example'].items = [
      ui.text(f'dropdown={q.args.dropdown}'),
      ui.text(f'dropdown_multi={q.args.dropdown_multi}'),
      ui.text(f'dropdown_disabled={q.args.dropdown_disabled}'),
      ui.button(name='show_form', label='Back', primary=True),
      ]
      else:
      q.page['example'] = ui.form_card(box='1 1 4 10', items=[
      ui.dropdown(name='dropdown', label='Pick one', value='B', required=True, choices=choices),
      ui.dropdown(name='dropdown_multi', label='Pick multiple', values=['B', 'D'], required=True,
      choices=choices),
      ui.dropdown(name='dropdown_disabled', label='Pick one (Disabled)', value='B', choices=choices,
      disabled=True),
      ui.button(name='show_inputs', label='Submit', primary=True),
      ])
      await q.page.save()
      Edit this page
      + + + + + + + + + + \ No newline at end of file diff --git a/docs/docs/examples/file-upload/index.html b/docs/docs/examples/file-upload/index.html index 811603c4b1..7d84830b26 100644 --- a/docs/docs/examples/file-upload/index.html +++ b/docs/docs/examples/file-upload/index.html @@ -5,32 +5,32 @@ Form / File Upload | H2O Wave - - - - - - - - - - + + + + + + + + + +
      -

      Form / File Upload

      Use a file upload component to allow users to upload files.

      from h2o_wave import site, ui
      +

      Form / File Upload

      Use a file upload component to allow users to upload files.

      from h2o_wave import site, ui
      page = site['/demo']
      -
      page['example'] = ui.form_card(
      box='1 1 4 10',
      items=[
      ui.file_upload(name='file_upload', label='Upload!', multiple=True,
      file_extensions=['csv', 'gz'], max_file_size=10, max_size=15)
      ]
      )
      +
      page['example'] = ui.form_card(
      box='1 1 4 10',
      items=[
      ui.file_upload(name='file_upload', label='Upload!', multiple=True,
      file_extensions=['csv', 'gz'], max_file_size=10, max_size=15)
      ]
      )
      page.save()
      Edit this page
      - - - - - - - - - - + + + + + + + + + + \ No newline at end of file diff --git a/docs/docs/examples/form-frame-path/index.html b/docs/docs/examples/form-frame-path/index.html index 98d4afccdc..f029b94c3c 100644 --- a/docs/docs/examples/form-frame-path/index.html +++ b/docs/docs/examples/form-frame-path/index.html @@ -5,32 +5,32 @@ Form / Frame / Path | H2O Wave - - - - - - - - - - + + + + + + + + + +
      -

      Form / Frame / Path

      Use a frame component in a form card to display external web pages.

      from h2o_wave import site, ui
      +

      Form / Frame / Path

      Use a frame component in a form card to display external web pages.

      from h2o_wave import site, ui
      page = site['/demo']
      page['example'] = ui.form_card(
      box='1 1 6 5',
      items=[
      ui.frame(path='https://example.com', height='400px')
      ]
      )
      page.save()
      Edit this page
      - - - - - - - - - - + + + + + + + + + + \ No newline at end of file diff --git a/docs/docs/examples/form-frame/index.html b/docs/docs/examples/form-frame/index.html index 158b9cd30a..5b767977f7 100644 --- a/docs/docs/examples/form-frame/index.html +++ b/docs/docs/examples/form-frame/index.html @@ -5,33 +5,33 @@ Form / Frame | H2O Wave - - - - - - - - - - + + + + + + + + + +
      -

      Form / Frame

      Use a frame component in a form card to display HTML content inline.

      from h2o_wave import site, ui
      +

      Form / Frame

      Use a frame component in a form card to display HTML content inline.

      from h2o_wave import site, ui
      html = '''
      <!DOCTYPE html>
      <html>
      <body>
      <h1>Hello World!</h1>
      </body>
      </html>
      '''
      page = site['/demo']
      page['example'] = ui.form_card(
      box='1 1 2 2',
      items=[
      ui.frame(content=html, height='100px')
      ]
      )
      page.save()
      Edit this page
      - - - - - - - - - - + + + + + + + + + + \ No newline at end of file diff --git a/docs/docs/examples/form-markup/index.html b/docs/docs/examples/form-markup/index.html index 3bf3d1c4e1..2e440903cb 100644 --- a/docs/docs/examples/form-markup/index.html +++ b/docs/docs/examples/form-markup/index.html @@ -5,32 +5,32 @@ Form / Markup | H2O Wave - - - - - - - - - - + + + + + + + + + +
      -

      Form / Markup

      Use a markup component to display formatted content using HTML.

      from h2o_wave import site, ui
      +

      Form / Markup

      Use a markup component to display formatted content using HTML.

      from h2o_wave import site, ui
      page = site['/demo']
      menu = '''
      <ol>
      <li>Spam</li>
      <li>Ham</li>
      <li>Eggs</li>
      </ol>
      '''
      -
      page['example'] = ui.form_card(
      box='1 1 2 2',
      items=[
      ui.markup(content=menu)
      ]
      )
      page.save()
      Edit this page
      - - - - - - - - - - +
      page['example'] = ui.form_card(
      box='1 1 2 2',
      items=[
      ui.markup(content=menu)
      ]
      )
      page.save()
      Edit this page
      + + + + + + + + + + \ No newline at end of file diff --git a/docs/docs/examples/form-menu/index.html b/docs/docs/examples/form-menu/index.html index 21ce34e841..c71bed6ffc 100644 --- a/docs/docs/examples/form-menu/index.html +++ b/docs/docs/examples/form-menu/index.html @@ -5,38 +5,36 @@ Form / Menu | H2O Wave - - - - - - - - - - + + + + + + + + + +
      -

      Form / Menu

      Display context menus inside forms.

      import json
      from h2o_wave import Q, listen, ui, data
      +

      Form / Menu

      Display context menus inside forms.

      import json
      from h2o_wave import main, app, Q, ui, data
      # Vega lite spec for a bar plot, defaults to linear scale.
      spec_linear_scale = json.dumps(dict(
      mark='bar',
      encoding=dict(
      x=dict(field='a', type='ordinal'),
      y=dict(field='b', type='quantitative')
      )
      ))
      # Vega lite spec for a bar plot, log scaled.
      spec_log_scale = json.dumps(dict(
      mark='bar',
      encoding=dict(
      x=dict(field='a', type='ordinal'),
      y=dict(field='b', type='quantitative', scale=dict(type='log'))
      )
      ))
      # Data for our plot.
      plot_data = data(fields=["a", "b"], rows=[
      ["A", 28], ["B", 55], ["C", 43],
      ["D", 91], ["E", 81], ["F", 53],
      ["G", 19], ["H", 87], ["I", 52]
      ], pack=True)
      # Create a couple of context menu commands.
      log_scale_command = ui.command(
      name='to_log_scale',
      label='Log Scale',
      icon='LineChart',
      )
      linear_scale_command = ui.command(
      name='to_linear_scale',
      label='Linear Scale',
      icon='LineChart',
      )
      -
      async def serve(q: Q):
      if q.client.plot_added: # Have we already added a plot?
      example = q.page['example']
      if q.args.to_log_scale:
      # Change to log scale
      example.items[0].text_l.content = 'Plot (Log Scale)'
      example.items[0].text_l.commands = [linear_scale_command]
      example.items[1].vega_visualization.specification = spec_log_scale
      else:
      # Change to linear scale
      example.items[0].text_l.content = 'Plot (Linear Scale)'
      example.items[0].text_l.commands = [log_scale_command]
      example.items[1].vega_visualization.specification = spec_linear_scale
      else: # Add a new plot
      q.page['example'] = ui.form_card(
      box='1 1 2 8',
      items=[
      ui.text_l(content='Plot (Linear Scale)', commands=[log_scale_command]),
      ui.vega_visualization(specification=spec_linear_scale, data=plot_data, height='300px'),
      ],
      )
      # Flag to indicate that we've added a plot
      q.client.plot_added = True
      -
      await q.page.save()
      -
      -
      listen('/demo', serve)
      Edit this page
      - - - - - - - - - - +
      @app('/demo')
      async def serve(q: Q):
      if q.client.plot_added: # Have we already added a plot?
      example = q.page['example']
      if q.args.to_log_scale:
      # Change to log scale
      example.items[0].text_l.content = 'Plot (Log Scale)'
      example.items[0].text_l.commands = [linear_scale_command]
      example.items[1].vega_visualization.specification = spec_log_scale
      else:
      # Change to linear scale
      example.items[0].text_l.content = 'Plot (Linear Scale)'
      example.items[0].text_l.commands = [log_scale_command]
      example.items[1].vega_visualization.specification = spec_linear_scale
      else: # Add a new plot
      q.page['example'] = ui.form_card(
      box='1 1 2 8',
      items=[
      ui.text_l(content='Plot (Linear Scale)', commands=[log_scale_command]),
      ui.vega_visualization(specification=spec_linear_scale, data=plot_data, height='300px'),
      ],
      )
      # Flag to indicate that we've added a plot
      q.client.plot_added = True
      +
      await q.page.save()
      Edit this page
      + + + + + + + + + + \ No newline at end of file diff --git a/docs/docs/examples/form-template/index.html b/docs/docs/examples/form-template/index.html index 1d65cf71d0..f5b0b5b37e 100644 --- a/docs/docs/examples/form-template/index.html +++ b/docs/docs/examples/form-template/index.html @@ -5,32 +5,32 @@ Form / Template | H2O Wave - - - - - - - - - - + + + + + + + + + +
      -

      Form / Template

      Use a template component to render dynamic content using a HTML template.

      from h2o_wave import site, pack, ui
      +

      Form / Template

      Use a template component to render dynamic content using a HTML template.

      from h2o_wave import site, pack, ui
      page = site['/demo']
      page.drop()
      menu = '''
      <ol>
      {{#each dishes}}
      <li><strong>{{name}}</strong> costs {{price}}</li>
      {{/each}}
      </ol
      '''
      c = page.add('template_example', ui.form_card(
      box=f'1 1 2 2',
      items=[
      ui.template(
      content=menu,
      data=pack(dict(dishes=[
      dict(name='Spam', price='$2.00'),
      dict(name='Ham', price='$3.45'),
      dict(name='Eggs', price='$1.75'),
      ]))
      )
      ]))
      page.save()
      Edit this page
      - - - - - - - - - - + + + + + + + + + + \ No newline at end of file diff --git a/docs/docs/examples/form/index.html b/docs/docs/examples/form/index.html index ac48df14c2..99b2f77964 100644 --- a/docs/docs/examples/form/index.html +++ b/docs/docs/examples/form/index.html @@ -5,36 +5,34 @@ Form | H2O Wave - - - - - - - - - - + + + + + + + + + +
      -

      Form

      Use a form to collect data or show textual information.

      from synth import FakeCategoricalSeries
      from h2o_wave import Q, listen, ui, pack, data
      import random
      +

      Form

      Use a form to collect data or show textual information.

      from synth import FakeCategoricalSeries
      from h2o_wave import main, app, Q, ui, pack, data
      import random
      html = '''
      <ol>
      <li>Spam</li>
      <li>Ham</li>
      <li>Eggs</li>
      </ol>
      '''
      menu = '''
      <ol>
      {{#each dishes}}
      <li><strong>{{name}}</strong> costs {{price}}</li>
      {{/each}}
      </ol
      '''
      spec = '''
      {
      "description": "A simple bar plot with embedded data.",
      "mark": "bar",
      "encoding": {
      "x": {"field": "a", "type": "ordinal"},
      "y": {"field": "b", "type": "quantitative"}
      }
      }
      '''
      f = FakeCategoricalSeries()
      n = 20
      # Generate random datum between 1 and 100
      def rnd(): return random.randint(1, 100)
      -
      async def serve(q: Q):
      q.page['example'] = ui.form_card(box='1 1 4 10', items=[
      ui.text_xl(content='Extra-large text, for headings.'),
      ui.text_l(content='Large text, for sub-headings.'),
      ui.text_m(content='Body text, for paragraphs and other content.'),
      ui.text_s(content='Small text, for small print.'),
      ui.text_xs(content='Extra-small text, for really small print.'),
      ui.separator(label='A separator sections forms'),
      ui.progress(label='A progress bar'),
      ui.progress(label='A progress bar'),
      ui.message_bar(type='success', text='Message bar'),
      ui.textbox(name='textbox', label='Textbox'),
      ui.label(label='Checkboxes'),
      ui.checkbox(name='checkbox1', label='A checkbox'),
      ui.checkbox(name='checkbox1', label='Another checkbox'),
      ui.checkbox(name='checkbox1', label='Yet another checkbox'),
      ui.toggle(name='toggle', label='Toggle'),
      ui.choice_group(name='choice_group', label='Choice group', choices=[
      ui.choice(name=x, label=x) for x in ['Egg', 'Bacon', 'Spam']
      ]),
      ui.checklist(name='checklist', label='Checklist', choices=[
      ui.choice(name=x, label=x) for x in ['Egg', 'Bacon', 'Spam']
      ]),
      ui.dropdown(name='dropdown', label='Dropdown', choices=[
      ui.choice(name=x, label=x) for x in ['Egg', 'Bacon', 'Spam']
      ]),
      ui.dropdown(name='dropdown', label='Multi-valued Dropdown', values=[], choices=[
      ui.choice(name=x, label=x) for x in ['Egg', 'Bacon', 'Spam']
      ]),
      ui.combobox(name='combobox', label='Combobox', choices=['Choice 1', 'Choice 2', 'Choice 3']),
      ui.slider(name='slider', label='Slider'),
      ui.range_slider(name='range_slider', label='Range slider', max=99),
      ui.spinbox(name='spinbox', label='Spinbox'),
      ui.date_picker(name='date_picker', label='Date picker'),
      ui.color_picker(name='color_picker', label='Color picker'),
      ui.buttons([
      ui.button(name='primary_button', label='Primary', primary=True),
      ui.button(name='standard_button', label='Standard'),
      ui.button(name='standard_disabled_button', label='Standard', disabled=True),
      ]),
      ui.file_upload(name='file_upload', label='File upload'),
      ui.table(name='table', columns=[
      ui.table_column(name='col1', label='Column 1'),
      ui.table_column(name='col2', label='Column 2'),
      ], rows=[
      ui.table_row(name='row1', cells=['Text A', 'Text B']),
      ui.table_row(name='row2', cells=['Text C', 'Text D']),
      ui.table_row(name='row3', cells=['Text E', 'Text F']),
      ]),
      ui.link(label='Link'),
      ui.tabs(name='tabs', items=[
      ui.tab(name='email', label='Mail', icon='Mail'),
      ui.tab(name='events', label='Events', icon='Calendar'),
      ui.tab(name='spam', label='Spam'),
      ]),
      ui.expander(name='expander', label='Expander'),
      ui.frame(path='https://example.com'),
      ui.markup(content=html),
      ui.template(
      content=menu,
      data=pack(dict(dishes=[
      dict(name='Spam', price='$2.00'),
      dict(name='Ham', price='$3.45'),
      dict(name='Eggs', price='$1.75'),
      ]))
      ),
      ui.picker(name='picker', label='Picker', choices=[
      ui.choice('choice1', label='Choice 1'),
      ui.choice('choice2', label='Choice 2'),
      ui.choice('choice3', label='Choice 3'),
      ]),
      ui.stepper(name='stepper', items=[
      ui.step(label='Step 1', icon='MailLowImportance'),
      ui.step(label='Step 2', icon='TaskManagerMirrored'),
      ui.step(label='Step 3', icon='Cafe'),
      ]),
      ui.visualization(
      plot=ui.plot([ui.mark(type='interval', x='=product', y='=price', y_min=0)]),
      data=data(fields='product price', rows=[(c, x) for c, x, _ in [f.next() for _ in range(n)]], pack=True),
      ),
      ui.vega_visualization(
      specification=spec,
      data=data(fields=["a", "b"], rows=[
      ["A", rnd()], ["B", rnd()], ["C", rnd()],
      ["D", rnd()], ["E", rnd()], ["F", rnd()],
      ["G", rnd()], ["H", rnd()], ["I", rnd()]
      ], pack=True),
      ),
      ui.button(name='show_inputs', label='Submit', primary=True),
      ])
      await q.page.save()
      -
      -
      listen('/demo', serve)
      Edit this page
      - - - - - - - - - - +
      @app('/demo')
      async def serve(q: Q):
      q.page['example'] = ui.form_card(box='1 1 4 10', items=[
      ui.text_xl(content='Extra-large text, for headings.'),
      ui.text_l(content='Large text, for sub-headings.'),
      ui.text_m(content='Body text, for paragraphs and other content.'),
      ui.text_s(content='Small text, for small print.'),
      ui.text_xs(content='Extra-small text, for really small print.'),
      ui.separator(label='A separator sections forms'),
      ui.progress(label='A progress bar'),
      ui.progress(label='A progress bar'),
      ui.message_bar(type='success', text='Message bar'),
      ui.textbox(name='textbox', label='Textbox'),
      ui.label(label='Checkboxes'),
      ui.checkbox(name='checkbox1', label='A checkbox'),
      ui.checkbox(name='checkbox1', label='Another checkbox'),
      ui.checkbox(name='checkbox1', label='Yet another checkbox'),
      ui.toggle(name='toggle', label='Toggle'),
      ui.choice_group(name='choice_group', label='Choice group', choices=[
      ui.choice(name=x, label=x) for x in ['Egg', 'Bacon', 'Spam']
      ]),
      ui.checklist(name='checklist', label='Checklist', choices=[
      ui.choice(name=x, label=x) for x in ['Egg', 'Bacon', 'Spam']
      ]),
      ui.dropdown(name='dropdown', label='Dropdown', choices=[
      ui.choice(name=x, label=x) for x in ['Egg', 'Bacon', 'Spam']
      ]),
      ui.dropdown(name='dropdown', label='Multi-valued Dropdown', values=[], choices=[
      ui.choice(name=x, label=x) for x in ['Egg', 'Bacon', 'Spam']
      ]),
      ui.combobox(name='combobox', label='Combobox', choices=['Choice 1', 'Choice 2', 'Choice 3']),
      ui.slider(name='slider', label='Slider'),
      ui.range_slider(name='range_slider', label='Range slider', max=99),
      ui.spinbox(name='spinbox', label='Spinbox'),
      ui.date_picker(name='date_picker', label='Date picker'),
      ui.color_picker(name='color_picker', label='Color picker'),
      ui.buttons([
      ui.button(name='primary_button', label='Primary', primary=True),
      ui.button(name='standard_button', label='Standard'),
      ui.button(name='standard_disabled_button', label='Standard', disabled=True),
      ]),
      ui.file_upload(name='file_upload', label='File upload'),
      ui.table(name='table', columns=[
      ui.table_column(name='col1', label='Column 1'),
      ui.table_column(name='col2', label='Column 2'),
      ], rows=[
      ui.table_row(name='row1', cells=['Text A', 'Text B']),
      ui.table_row(name='row2', cells=['Text C', 'Text D']),
      ui.table_row(name='row3', cells=['Text E', 'Text F']),
      ]),
      ui.link(label='Link'),
      ui.tabs(name='tabs', items=[
      ui.tab(name='email', label='Mail', icon='Mail'),
      ui.tab(name='events', label='Events', icon='Calendar'),
      ui.tab(name='spam', label='Spam'),
      ]),
      ui.expander(name='expander', label='Expander'),
      ui.frame(path='https://example.com'),
      ui.markup(content=html),
      ui.template(
      content=menu,
      data=pack(dict(dishes=[
      dict(name='Spam', price='$2.00'),
      dict(name='Ham', price='$3.45'),
      dict(name='Eggs', price='$1.75'),
      ]))
      ),
      ui.picker(name='picker', label='Picker', choices=[
      ui.choice('choice1', label='Choice 1'),
      ui.choice('choice2', label='Choice 2'),
      ui.choice('choice3', label='Choice 3'),
      ]),
      ui.stepper(name='stepper', items=[
      ui.step(label='Step 1', icon='MailLowImportance'),
      ui.step(label='Step 2', icon='TaskManagerMirrored'),
      ui.step(label='Step 3', icon='Cafe'),
      ]),
      ui.visualization(
      plot=ui.plot([ui.mark(type='interval', x='=product', y='=price', y_min=0)]),
      data=data(fields='product price', rows=[(c, x) for c, x, _ in [f.next() for _ in range(n)]], pack=True),
      ),
      ui.vega_visualization(
      specification=spec,
      data=data(fields=["a", "b"], rows=[
      ["A", rnd()], ["B", rnd()], ["C", rnd()],
      ["D", rnd()], ["E", rnd()], ["F", rnd()],
      ["G", rnd()], ["H", rnd()], ["I", rnd()]
      ], pack=True),
      ),
      ui.button(name='show_inputs', label='Submit', primary=True),
      ])
      await q.page.save()
      Edit this page
      + + + + + + + + + + \ No newline at end of file diff --git a/docs/docs/examples/frame-path/index.html b/docs/docs/examples/frame-path/index.html index 400d2cdc40..34b04e55ba 100644 --- a/docs/docs/examples/frame-path/index.html +++ b/docs/docs/examples/frame-path/index.html @@ -5,32 +5,32 @@ Frame / Path | H2O Wave - - - - - - - - - - + + + + + + + + + +
      -

      Frame / Path

      Use a frame card to display external web pages.

      from h2o_wave import site, ui
      +

      Frame / Path

      Use a frame card to display external web pages.

      from h2o_wave import site, ui
      page = site['/demo']
      page['example'] = ui.frame_card(
      box='1 1 6 5',
      title='Example',
      path='https://example.com',
      )
      page.save()
      Edit this page
      - - - - - - - - - - + + + + + + + + + + \ No newline at end of file diff --git a/docs/docs/examples/frame/index.html b/docs/docs/examples/frame/index.html index 9aaf0c466e..bfd1070b6f 100644 --- a/docs/docs/examples/frame/index.html +++ b/docs/docs/examples/frame/index.html @@ -5,33 +5,33 @@ Frame | H2O Wave - - - - - - - - - - + + + + + + + + + +
      -

      Frame

      Use a frame card to display HTML content.

      from h2o_wave import site, ui
      +

      Frame

      Use a frame card to display HTML content.

      from h2o_wave import site, ui
      html = '''
      <!DOCTYPE html>
      <html>
      <body>
      <h1>Hello World!</h1>
      </body>
      </html>
      '''
      page = site['/demo']
      page['example'] = ui.frame_card(
      box='1 1 2 2',
      title='Example',
      content=html,
      )
      page.save()
      Edit this page
      - - - - - - - - - - + + + + + + + + + + \ No newline at end of file diff --git a/docs/docs/examples/glider-gun/index.html b/docs/docs/examples/glider-gun/index.html index 02f324e364..4d372d0132 100644 --- a/docs/docs/examples/glider-gun/index.html +++ b/docs/docs/examples/glider-gun/index.html @@ -5,20 +5,20 @@ Graphics / Glider Gun | H2O Wave - - - - - - - - - - + + + + + + + + + +
      -

      Graphics / Glider Gun

      Use the graphics API to play Conway's Game of Life - Gosper's Glider Gun +

      Graphics / Glider Gun

      Use the graphics API to play Conway's Game of Life - Gosper's Glider Gun https://en.wikipedia.org/wiki/Conway%27s_Game_of_Life

      import time
      from copy import deepcopy
      from h2o_wave import site, ui, graphics as g
      def get_neighbors(row, col):
      neighbors = [
      (r, c) for r in range(row - 1, row + 2) for c in range(col - 1, col + 2)
      ]
      neighbors.remove((row, col))
      return neighbors
      @@ -51,15 +51,15 @@
      def make_glider_gun(r, c):
      return [
      (r, c + 24),
      (r + 1, c + 22),
      (r + 1, c + 24),
      (r + 2, c + 12),
      (r + 2, c + 13),
      (r + 2, c + 20),
      (r + 2, c + 21),
      (r + 2, c + 34),
      (r + 2, c + 35),
      (r + 3, c + 11),
      (r + 3, c + 15),
      (r + 3, c + 20),
      (r + 3, c + 21),
      (r + 3, c + 34),
      (r + 3, c + 35),
      (r + 4, c + 0),
      (r + 4, c + 1),
      (r + 4, c + 10),
      (r + 4, c + 16),
      (r + 4, c + 20),
      (r + 4, c + 21),
      (r + 5, c + 0),
      (r + 5, c + 1),
      (r + 5, c + 10),
      (r + 5, c + 14),
      (r + 5, c + 16),
      (r + 5, c + 17),
      (r + 5, c + 22),
      (r + 5, c + 24),
      (r + 6, c + 10),
      (r + 6, c + 16),
      (r + 6, c + 24),
      (r + 7, c + 11),
      (r + 7, c + 15),
      (r + 8, c + 12),
      (r + 8, c + 13),
      ]
      render(make_glider_gun(2, 2))
      Edit this page
      - - - - - - - - - - + + + + + + + + + + \ No newline at end of file diff --git a/docs/docs/examples/graphics-clock/index.html b/docs/docs/examples/graphics-clock/index.html index f3f74fe1ff..ff5ec98802 100644 --- a/docs/docs/examples/graphics-clock/index.html +++ b/docs/docs/examples/graphics-clock/index.html @@ -5,20 +5,20 @@ Graphics / Clock | H2O Wave - - - - - - - - - - + + + + + + + + + +
      -

      Graphics / Clock

      Use the graphics API to make a clock. +

      Graphics / Clock

      Use the graphics API to make a clock. Source: https://codepen.io/dudleystorey/pen/HLBki

      import time
      import datetime
      from h2o_wave import site, ui, graphics as g
      page = site['/demo']
      page['example'] = ui.graphics_card(
      box='1 1 2 3', view_box='0 0 100 100', width='100%', height='100%',
      stage=g.stage(
      face=g.circle(cx='50', cy='50', r='45', fill='#111', stroke_width='2px', stroke='#f55'),
      ),
      scene=g.scene(
      hour=g.rect(x='47.5', y='12.5', width='5', height='40', rx='2.5', fill='#333', stroke='#555'),
      min=g.rect(x='48.5', y='12.5', width='3', height='40', rx='2', fill='#333', stroke='#555'),
      sec=g.line(x1='50', y1='50', x2='50', y2='16', stroke='#f55', stroke_width='1px'),
      ),
      )
      page.save()
      @@ -26,15 +26,15 @@
      def rotate(deg): return f'rotate({deg} 50 50)'
      scene = page['example'].scene
      while True:
      time.sleep(1)
      now = datetime.datetime.now()
      g.draw(scene.hour, transform=rotate(30 * (now.hour % 12) + now.minute / 2))
      g.draw(scene.min, transform=rotate(6 * now.minute))
      g.draw(scene.sec, transform=rotate(6 * now.second))
      page.save()
      Edit this page
      - - - - - - - - - - + + + + + + + + + + \ No newline at end of file diff --git a/docs/docs/examples/graphics-hilbert/index.html b/docs/docs/examples/graphics-hilbert/index.html index cf406876a2..e896828135 100644 --- a/docs/docs/examples/graphics-hilbert/index.html +++ b/docs/docs/examples/graphics-hilbert/index.html @@ -5,20 +5,20 @@ Graphics / Hilbert | H2O Wave - - - - - - - - - - + + + + + + + + + +
      -

      Graphics / Hilbert

      Use turtle graphics recursively to draw Hilbert curves.

      from h2o_wave import ui, listen, Q, graphics as g
      +

      Graphics / Hilbert

      Use turtle graphics recursively to draw Hilbert curves.

      from h2o_wave import ui, main, app, Q, graphics as g
      def hilbert(t: g.Turtle, width: float, depth: int, reverse=False): # recursive
      angle = -90 if reverse else 90
      if depth == 0:
      t.f(width).r(angle).f(width).r(angle).f(width)
      return
      @@ -27,20 +27,18 @@
      def make_hilbert_curve(width: float, depth: int):
      t = g.turtle().f(0).pd()
      hilbert(t, width, depth)
      return t.d()
      -
      async def serve(q: Q):
      hilbert_curve = make_hilbert_curve(300, q.args.depth or 5)
      +
      @app('/demo')
      async def serve(q: Q):
      hilbert_curve = make_hilbert_curve(300, q.args.depth or 5)
      if not q.client.initialized:
      q.page['curve'] = ui.graphics_card(
      box='1 1 4 6', view_box='0 0 300 300', width='100%', height='100%',
      scene=g.scene(
      hilbert_curve=g.path(d=hilbert_curve, fill='none', stroke='#333')
      ),
      )
      q.page['form'] = ui.form_card(
      box='1 7 4 1', items=[
      ui.slider(name='depth', label='Play with this Hilbert curve!', min=1, max=6, value=5, trigger=True),
      ],
      )
      q.client.initialized = True
      else:
      g.draw(q.page['curve'].scene.hilbert_curve, d=hilbert_curve)
      -
      await q.page.save()
      -
      -
      listen('/demo', serve)
      Edit this page
      - - - - - - - - - - +
      await q.page.save()
      Edit this page
      + + + + + + + + + + \ No newline at end of file diff --git a/docs/docs/examples/graphics-path/index.html b/docs/docs/examples/graphics-path/index.html index 2e2b8e16af..230b91fa12 100644 --- a/docs/docs/examples/graphics-path/index.html +++ b/docs/docs/examples/graphics-path/index.html @@ -5,32 +5,32 @@ Graphics / Path | H2O Wave - - - - - - - - - - + + + + + + + + + +
      -

      Graphics / Path

      Use the graphics API to draw a red square.

      from h2o_wave import site, ui, graphics as g
      +

      Graphics / Path

      Use the graphics API to draw a red square.

      from h2o_wave import site, ui, graphics as g
      # Use relative coords to draw a square, sort of like Python's turtle package.
      red_square = g.p().m(25, 25).h(50).v(50).h(-50).z().path(fill='red')
      page = site['/demo']
      page['example'] = ui.graphics_card(
      box='1 1 2 3', view_box='0 0 100 100', width='100%', height='100%',
      scene=g.scene(foo=red_square),
      )
      page.save()
      Edit this page
      - - - - - - - - - - + + + + + + + + + + \ No newline at end of file diff --git a/docs/docs/examples/graphics-primitives/index.html b/docs/docs/examples/graphics-primitives/index.html index b6035586a3..6e387bfc7f 100644 --- a/docs/docs/examples/graphics-primitives/index.html +++ b/docs/docs/examples/graphics-primitives/index.html @@ -5,35 +5,35 @@ Graphics / Primitives | H2O Wave - - - - - - - - - - + + + + + + + + + +
      -

      Graphics / Primitives

      Use the graphics module to render and update shapes.

      from h2o_wave import site, ui, graphics as g
      +

      Graphics / Primitives

      Use the graphics module to render and update shapes.

      from h2o_wave import site, ui, graphics as g
      # Create some shapes
      arc = g.arc(r1=25, r2=50, a1=90, a2=180)
      circle = g.circle(cx=25, cy=25, r=25)
      ellipse = g.ellipse(cx=25, cy=25, rx=25, ry=20)
      image = g.image(width=50, height=50, href='https://www.python.org/static/community_logos/python-powered-h-140x182.png')
      line = g.line(x1=0, y1=0, x2=50, y2=50)
      path = g.path(d='M 0,0 L 50,50 L 50,0 L 0,50 z')
      path2 = g.path(d=g.p().M(0, 0).L(50, 50).L(50, 0).L(0, 50).z().d()) # same effect as above, but programmable.
      path3 = g.p().M(0, 0).L(50, 50).L(50, 0).L(0, 50).z().path() # same effect as above, but a tad more concise.
      polygon = g.polygon(points='0,0 50,50 50,0 0,50')
      polyline = g.polyline(points='0,0 50,50 50,0 0,50')
      rect = g.rect(x=0, y=0, width=50, height=50)
      rounded_rect = g.rect(x=0, y=0, width=50, height=50, rx=10)
      text = g.text(x=0, y=48, text='Z', font_size='4em')
      # Collect 'em all
      shapes = [arc, circle, ellipse, image, line, path, path2, path3, polygon, polyline, rect, rounded_rect, text]
      # Apply fill/stroke for each shape
      for shape in shapes:
      shape.fill = 'none' if g.type_of(shape) == 'polyline' else 'crimson'
      shape.stroke = 'darkred'
      shape.stroke_width = 5
      # Lay out shapes vertically
      y = 10
      for shape in shapes:
      shape.transform = f'translate(10,{y})'
      y += 60
      # Add shapes to the graphics card
      page = site['/demo']
      page['example'] = ui.graphics_card(
      box='1 1 1 10', view_box='0 0 70 800', width='100%', height='100%',
      stage=g.stage(
      arc=arc,
      circle=circle,
      ellipse=ellipse,
      image=image,
      line=line,
      path=path,
      path2=path2,
      path3=path3,
      polygon=polygon,
      polyline=polyline,
      rect=rect,
      rounded_rect=rounded_rect,
      text=text,
      ),
      )
      -
      page.save()
      Edit this page
      - - - - - - - - - - +
      page.save()
      Edit this page
      + + + + + + + + + + \ No newline at end of file diff --git a/docs/docs/examples/graphics-spline/index.html b/docs/docs/examples/graphics-spline/index.html index c38ec3a6f1..8e1c51a2ba 100644 --- a/docs/docs/examples/graphics-spline/index.html +++ b/docs/docs/examples/graphics-spline/index.html @@ -5,34 +5,34 @@ Graphics / Spline | H2O Wave - - - - - - - - - - + + + + + + + + + +
      -

      Graphics / Spline

      Use the graphics module to render splines.

      import random
      from h2o_wave import site, ui, graphics as g
      +

      Graphics / Spline

      Use the graphics module to render splines.

      import random
      from h2o_wave import site, ui, graphics as g
      x = [i * 20 for i in range(50)]
      y = [
      88, 100, 116, 128, 126, 128, 118, 108, 121, 120, 99, 113, 117, 103, 98, 90, 104, 98, 82, 102, 104, 89, 87, 69,
      88, 97, 91, 105, 98, 86, 90, 107, 97, 107, 108, 128, 144, 148, 126, 106, 89, 99, 78, 70, 69, 64, 45, 29, 27, 38
      ]
      y0 = [v - random.randint(5, min(y)) for v in y]
      line_style = dict(fill='none', stroke='crimson', stroke_width=4)
      area_style = dict(fill='crimson')
      splines = [
      # Lines
      g.spline(x=x, y=y, **line_style), # same as curve='linear'
      g.spline(x=x, y=y, curve='basis', **line_style),
      g.spline(x=x, y=y, curve='basis-closed', **line_style),
      g.spline(x=x, y=y, curve='basis-open', **line_style),
      g.spline(x=x, y=y, curve='cardinal', **line_style),
      g.spline(x=x, y=y, curve='cardinal-closed', **line_style),
      g.spline(x=x, y=y, curve='cardinal-open', **line_style),
      g.spline(x=x, y=y, curve='smooth', **line_style),
      g.spline(x=x, y=y, curve='smooth-closed', **line_style),
      g.spline(x=x, y=y, curve='smooth-open', **line_style),
      g.spline(x=x, y=y, curve='linear', **line_style),
      g.spline(x=x, y=y, curve='linear-closed', **line_style),
      g.spline(x=x, y=y, curve='monotone-x', **line_style),
      g.spline(x=x, y=y, curve='monotone-y', **line_style),
      g.spline(x=x, y=y, curve='natural', **line_style),
      g.spline(x=x, y=y, curve='step', **line_style),
      g.spline(x=x, y=y, curve='step-after', **line_style),
      g.spline(x=x, y=y, curve='step-before', **line_style),
      # Areas
      g.spline(x=x, y=y, y0=y0, **area_style), # same as curve='linear'
      g.spline(x=x, y=y, y0=y0, curve='basis', **area_style),
      g.spline(x=x, y=y, y0=[], curve='basis', **area_style),
      g.spline(x=x, y=y, y0=y0, curve='basis-open', **area_style),
      g.spline(x=x, y=y, y0=y0, curve='cardinal', **area_style),
      g.spline(x=x, y=y, y0=[], curve='cardinal', **area_style),
      g.spline(x=x, y=y, y0=y0, curve='cardinal-open', **area_style),
      g.spline(x=x, y=y, y0=y0, curve='smooth', **area_style),
      g.spline(x=x, y=y, y0=[], curve='smooth', **area_style),
      g.spline(x=x, y=y, y0=y0, curve='smooth-open', **area_style),
      g.spline(x=x, y=y, y0=y0, curve='linear', **area_style),
      g.spline(x=x, y=y, y0=[], curve='linear', **area_style),
      g.spline(x=x, y=y, y0=y0, curve='monotone-x', **area_style),
      g.spline(x=x, y=y, y0=y0, curve='monotone-y', **area_style),
      g.spline(x=x, y=y, y0=y0, curve='natural', **area_style),
      g.spline(x=x, y=y, y0=y0, curve='step', **area_style),
      g.spline(x=x, y=y, y0=y0, curve='step-after', **area_style),
      g.spline(x=x, y=y, y0=y0, curve='step-before', **area_style),
      ]
      page = site['/demo']
      row, col = 1, 1
      for spline in splines:
      page[f'spline_{col}_{row}'] = ui.graphics_card(
      box=f'{col} {row} 3 1', view_box='0 0 1000 150', width='100%', height='100%',
      stage=g.stage(
      text=g.text(text=spline.curve or '', y=40, font_size=40),
      spline=spline,
      ),
      )
      col += 3
      if col > 11:
      row, col = row + 1, 1
      page.save()
      Edit this page
      - - - - - - - - - - + + + + + + + + + + \ No newline at end of file diff --git a/docs/docs/examples/graphics-turtle/index.html b/docs/docs/examples/graphics-turtle/index.html index 85ed46e55b..a59098c304 100644 --- a/docs/docs/examples/graphics-turtle/index.html +++ b/docs/docs/examples/graphics-turtle/index.html @@ -5,33 +5,33 @@ Graphics / Turtle | H2O Wave - - - - - - - - - - + + + + + + + + + +
      -

      Graphics / Turtle

      Use turtle graphics to draw paths. +

      Graphics / Turtle

      Use turtle graphics to draw paths. Original example: https://docs.python.org/3/library/turtle.html

      from h2o_wave import site, ui, graphics as g
      t = g.turtle().f(100).r(90).pd()
      for _ in range(36):
      t.f(200).l(170)
      spirograph = t.pu(1).path(stroke='red', fill='yellow')
      page = site['/demo']
      page['example'] = ui.graphics_card(
      box='1 1 2 3', view_box='0 0 220 220', width='100%', height='100%',
      scene=g.scene(foo=spirograph),
      )
      page.save()
      Edit this page
      - - - - - - - - - - + + + + + + + + + + \ No newline at end of file diff --git a/docs/docs/examples/hash-routing/index.html b/docs/docs/examples/hash-routing/index.html index 4111aedf6b..1e332db49d 100644 --- a/docs/docs/examples/hash-routing/index.html +++ b/docs/docs/examples/hash-routing/index.html @@ -5,33 +5,31 @@ Routing | H2O Wave - - - - - - - - - - + + + + + + + + + +
      -

      Routing

      Use the browser's location hash for routing using URLs.

      The location hash can be accessed using q.args['#'].

      from h2o_wave import Q, listen, ui
      +

      Routing

      Use the browser's location hash for routing using URLs.

      The location hash can be accessed using q.args['#'].

      from h2o_wave import main, app, Q, ui
      -
      async def serve(q: Q):
      hash = q.args['#']
      if hash:
      blurb = q.page['blurb']
      if hash == 'menu/spam':
      blurb.content = "Sorry, we're out of spam!"
      elif hash == 'menu/ham':
      blurb.content = "Sorry, we're out of ham!"
      elif hash == 'menu/eggs':
      blurb.content = "Sorry, we're out of eggs!"
      elif hash == 'about':
      blurb.content = 'Everything here is gluten-free!'
      else:
      q.page['nav'] = ui.markdown_card(
      box='1 1 4 1',
      title='Links!',
      content='[Spam](#menu/spam) | [Ham](#menu/ham) | [Eggs](#menu/eggs) | [About](#about)',
      )
      q.page['blurb'] = ui.markdown_card(
      box='1 2 4 2',
      title='Store',
      content='Welcome to our store!',
      )
      await q.page.save()
      -
      -
      listen('/demo', serve)
      Edit this page
      - - - - - - - - - - +
      @app('/demo')
      async def serve(q: Q):
      hash = q.args['#']
      if hash:
      blurb = q.page['blurb']
      if hash == 'menu/spam':
      blurb.content = "Sorry, we're out of spam!"
      elif hash == 'menu/ham':
      blurb.content = "Sorry, we're out of ham!"
      elif hash == 'menu/eggs':
      blurb.content = "Sorry, we're out of eggs!"
      elif hash == 'about':
      blurb.content = 'Everything here is gluten-free!'
      else:
      q.page['nav'] = ui.markdown_card(
      box='1 1 4 1',
      title='Links!',
      content='[Spam](#menu/spam) | [Ham](#menu/ham) | [Eggs](#menu/eggs) | [About](#about)',
      )
      q.page['blurb'] = ui.markdown_card(
      box='1 2 4 2',
      title='Store',
      content='Welcome to our store!',
      )
      await q.page.save()
      Edit this page
      + + + + + + + + + + \ No newline at end of file diff --git a/docs/docs/examples/header/index.html b/docs/docs/examples/header/index.html index c0ff21c5a0..0eb9ef417b 100644 --- a/docs/docs/examples/header/index.html +++ b/docs/docs/examples/header/index.html @@ -5,30 +5,30 @@ Header | H2O Wave - - - - - - - - - - + + + + + + + + + +
      -

      Header

      Use a header card to display a page header.

      from h2o_wave import site, ui
      +

      Header

      Use a header card to display a page header.

      from h2o_wave import site, ui
      page = site['/demo']
      page['header1'] = ui.header_card(
      box='1 1 3 1',
      title='The Amazing Gonkulator',
      subtitle='And now for something completely different!',
      )
      page['header2'] = ui.header_card(
      box='1 2 3 1',
      title='The Amazing Gonkulator',
      subtitle='And now for something completely different!',
      icon='Design',
      )
      page['header3'] = ui.header_card(
      box='1 3 3 1',
      title='The Amazing Gonkulator',
      subtitle='And now for something completely different!',
      icon='Cycling',
      icon_color='$violet',
      )
      page['header4'] = ui.header_card(
      box='1 4 3 1',
      title='The Amazing Gonkulator',
      subtitle='And now for something completely different!',
      icon='ExploreData',
      icon_color='$red',
      )
      page.save()
      Edit this page
      - - - - - - - - - - + + + + + + + + + + \ No newline at end of file diff --git a/docs/docs/examples/hello-world/index.html b/docs/docs/examples/hello-world/index.html index 9b1763372d..11a96b6b7a 100644 --- a/docs/docs/examples/hello-world/index.html +++ b/docs/docs/examples/hello-world/index.html @@ -5,32 +5,32 @@ Hello World! | H2O Wave - - - - - - - - - - + + + + + + + + + +
      -

      Hello World!

      A simple example to get you started with Q.

      # Import `Site` and the `ui` module from the `h2o_wave` package
      from h2o_wave import site, ui
      +

      Hello World!

      A simple example to get you started with Q.

      # Import `Site` and the `ui` module from the `h2o_wave` package
      from h2o_wave import site, ui
      # Get the web page at route '/demo'.
      # If you're running this example on your local machine,
      # this page will refer to http://localhost:55555/demo.
      page = site['/demo']
      # Add a Markdown card named `hello` to the page.
      page['hello'] = ui.markdown_card(
      box='1 1 2 2',
      title='Hello World!',
      content='And now for something completely different!',
      )
      # Finally, sync the page to send our changes to the server.
      page.save()
      Edit this page
      - - - - - - - - - - + + + + + + + + + + \ No newline at end of file diff --git a/docs/docs/examples/image/index.html b/docs/docs/examples/image/index.html index 65a4f80cc5..0da7d2dfc5 100644 --- a/docs/docs/examples/image/index.html +++ b/docs/docs/examples/image/index.html @@ -5,33 +5,33 @@ Image | H2O Wave - - - - - - - - - - + + + + + + + + + +
      -

      Image

      Use an image card to display a base64-encoded image.

      from h2o_wave import site, ui
      import io
      import base64
      import numpy as np
      import matplotlib.pyplot as plt
      +

      Image

      Use an image card to display a base64-encoded image.

      from h2o_wave import site, ui
      import io
      import base64
      import numpy as np
      import matplotlib.pyplot as plt
      np.random.seed(19680801)
      n = 25
      plt.figure(figsize=(3, 3))
      plt.scatter(
      np.random.rand(n), np.random.rand(n),
      s=(30 * np.random.rand(n)) ** 2,
      c=np.random.rand(n),
      alpha=0.5,
      )
      buf = io.BytesIO()
      plt.savefig(buf, format='png')
      buf.seek(0)
      image = base64.b64encode(buf.read()).decode('utf-8')
      page = site['/demo']
      page['example'] = ui.image_card(
      box='1 1 3 5',
      title='An image',
      type='png',
      image=image,
      )
      page.save()
      Edit this page
      - - - - - - - - - - + + + + + + + + + + \ No newline at end of file diff --git a/docs/docs/examples/index.html b/docs/docs/examples/index.html index 7363a785bc..ebf65289cf 100644 --- a/docs/docs/examples/index.html +++ b/docs/docs/examples/index.html @@ -5,29 +5,29 @@ Gallery | H2O Wave - - - - - - - - - - + + + + + + + + + +
      -

      Gallery

      Hello World!
      To-do List App
      Wizard
      Issue Tracker
      Dashboard
      Stat / Small
      Stat / Large
      Stat / Gauge / Wide
      Stat / Gauge / Tall
      Stat / Bar / Wide
      Stat / Bar / Large
      Stat / Series / Small / Area
      Stat / Series / Small / Interval
      Stat / Series / Wide / Area
      Stat / Series / Wide / Interval
      Stat / Series / Tall / Area
      Stat / Series / Tall / Interval
      Layout / Position
      Layout / Size
      Form
      Form / Text
      Form / Text / Sizes
      Form / Label
      Form / Link
      Form / Progress
      Form / Progress / Updating
      Form / Message Bar
      Form / Textbox
      Form / Textbox / Trigger
      Form / Button
      Form / Buttons
      Form / Checkbox
      Form / Checklist
      Form / Picker
      Form / Picker / Selection
      Form / Dropdown
      Form / Choice Group
      Form / Combobox
      Form / Toggle
      Form / Spinbox
      Form / Slider
      Form / Range Slider
      Form / Date Picker
      Form / Date Picker / Trigger
      Form / Color Picker
      Form / Swatch Picker
      Form / Tabs
      Form / Separator
      Form / File Upload
      Form / Frame
      Form / Frame / Path
      Form / Menu
      Form / Template
      Form / Markup
      Stepper
      Table / Markdown
      Table
      Table / Sort
      Table / Search
      Table / Filter
      Table / Filter / Backend
      Table / Download
      Table / Group by
      Table / Preselection
      Image
      Frame
      Frame / Path
      Template
      Template / Data
      Markdown
      Markdown / Data
      Markup
      Nav
      Toolbar
      Tab
      Tab / Links
      Tabs / Navigation
      Breadcrumbs
      Header
      Routing
      Routing / Toolbar
      Routing / Tabs
      Context Menu
      Plot / Point
      Plot / Point / Shapes
      Plot / Point / Sizes
      Plot / Point / Map
      Plot / Point / Groups
      Plot / Point / Annotation
      Plot / Point / Custom
      Plot / Interval
      Plot / Interval / Transpose
      Plot / Interval / Groups
      Plot / Interval / Groups / Transpose
      Plot / Interval / Labels
      Plot / Interval / Range
      Plot / Interval / Range / Transpose
      Plot / Interval / Stacked
      Plot / Interval / Stacked / Transpose
      Plot / Interval / Stacked / Grouped
      Plot / Interval / Stacked / Grouped / Transpose
      Plot / Interval / Polar
      Plot / Interval / Polar / Stacked
      Plot / Interval / Theta
      Plot / Interval / Helix
      Plot / Interval / Annotation
      Plot / Interval / Annotation / Transpose
      Plot / Line
      Plot / Line / Groups
      Plot / Line / Smooth
      Plot / Line / Step
      Plot / Line / Step / After
      Plot / Line / Step / Before
      Plot / Line / Labels
      Plot / Line / Labels/ Stroked
      Plot / Line / Labels / Occlusion
      Plot / Line / Annotation
      Plot / Path
      Plot / Path / Point
      Plot / Path / Smooth
      Plot / Area
      Plot / Area / Groups
      Plot / Area / Negative
      Plot / Area / Range
      Plot / Area / Smooth
      Plot / Area / Stacked
      Plot / Area + Line
      Plot / Area + Line / Smooth
      Plot / Area + Line / Groups
      Plot / Polygon
      Plot / Histogram
      Plot / Axis Titles
      Plot / Form
      Plot / Vega-lite
      Plot / Vega-lite / Update
      Plot / Vega-lite / Form
      Plot / Altair
      Plot / Bokeh
      Plot / Matplotlib
      Plot / Plotly
      Plot / D3.js
      Pixel Art
      Uploads
      Uploads / Async
      Uploads / UI
      Uploads / Download
      Meta / Title
      Meta / Notification
      Meta / Refresh
      Meta / Redirect
      Mode / Broadcast / Global
      Mode / Broadcast
      Mode / Multicast
      Mode / Unicast
      Graphics / Primitives
      Graphics / Spline
      Graphics / Clock
      Graphics / Path
      Graphics / Turtle
      Graphics / Hilbert
      Graphics / Glider Gun
      Edit this page
      - - - - - - - - - - +

      Gallery

      Hello World!
      To-do List App
      Wizard
      Issue Tracker
      Dashboard
      Stat / Small
      Stat / Large
      Stat / Gauge / Wide
      Stat / Gauge / Tall
      Stat / Bar / Wide
      Stat / Bar / Large
      Stat / Series / Small / Area
      Stat / Series / Small / Interval
      Stat / Series / Wide / Area
      Stat / Series / Wide / Interval
      Stat / Series / Tall / Area
      Stat / Series / Tall / Interval
      Layout / Position
      Layout / Size
      Form
      Form / Text
      Form / Text / Sizes
      Form / Label
      Form / Link
      Form / Progress
      Form / Progress / Updating
      Form / Message Bar
      Form / Textbox
      Form / Textbox / Trigger
      Form / Button
      Form / Buttons
      Form / Checkbox
      Form / Checklist
      Form / Picker
      Form / Picker / Selection
      Form / Dropdown
      Form / Choice Group
      Form / Combobox
      Form / Toggle
      Form / Spinbox
      Form / Slider
      Form / Range Slider
      Form / Date Picker
      Form / Date Picker / Trigger
      Form / Color Picker
      Form / Swatch Picker
      Form / Tabs
      Form / Separator
      Form / File Upload
      Form / Frame
      Form / Frame / Path
      Form / Menu
      Form / Template
      Form / Markup
      Form / Stepper
      Table / Markdown
      Table
      Table / Sort
      Table / Search
      Table / Filter
      Table / Filter / Backend
      Table / Download
      Table / Group by
      Table / Preselection
      Image
      Frame
      Frame / Path
      Template
      Template / Data
      Markdown
      Markdown / Data
      Markup
      Nav
      Toolbar
      Tab
      Tab / Links
      Tabs / Navigation
      Breadcrumbs
      Header
      Routing
      Routing / Toolbar
      Routing / Tabs
      Context Menu
      Plot / Point
      Plot / Point / Shapes
      Plot / Point / Sizes
      Plot / Point / Map
      Plot / Point / Groups
      Plot / Point / Annotation
      Plot / Point / Custom
      Plot / Interval
      Plot / Interval / Transpose
      Plot / Interval / Groups
      Plot / Interval / Groups / Transpose
      Plot / Interval / Labels
      Plot / Interval / Range
      Plot / Interval / Range / Transpose
      Plot / Interval / Stacked
      Plot / Interval / Stacked / Transpose
      Plot / Interval / Stacked / Grouped
      Plot / Interval / Stacked / Grouped / Transpose
      Plot / Interval / Polar
      Plot / Interval / Polar / Stacked
      Plot / Interval / Theta
      Plot / Interval / Helix
      Plot / Interval / Annotation
      Plot / Interval / Annotation / Transpose
      Plot / Line
      Plot / Line / Groups
      Plot / Line / Smooth
      Plot / Line / Step
      Plot / Line / Step / After
      Plot / Line / Step / Before
      Plot / Line / Labels
      Plot / Line / Labels/ Stroked
      Plot / Line / Labels / Occlusion
      Plot / Line / Annotation
      Plot / Path
      Plot / Path / Point
      Plot / Path / Smooth
      Plot / Area
      Plot / Area / Groups
      Plot / Area / Negative
      Plot / Area / Range
      Plot / Area / Smooth
      Plot / Area / Stacked
      Plot / Area + Line
      Plot / Area + Line / Smooth
      Plot / Area + Line / Groups
      Plot / Polygon
      Plot / Histogram
      Plot / Axis Titles
      Plot / Form
      Plot / Vega-lite
      Plot / Vega-lite / Update
      Plot / Vega-lite / Form
      Plot / Altair
      Plot / Bokeh
      Plot / Matplotlib
      Plot / Plotly
      Plot / D3.js
      Pixel Art
      Uploads
      Uploads / Async
      Uploads / UI
      Uploads / Download
      Meta / Title
      Meta / Icon
      Meta / Notification
      Meta / Refresh
      Meta / Redirect
      Mode / Broadcast / Global
      Mode / Broadcast
      Mode / Multicast
      Mode / Unicast
      Background Tasks
      Background Tasks / Executor
      Site / Async
      Graphics / Primitives
      Graphics / Spline
      Graphics / Clock
      Graphics / Path
      Graphics / Turtle
      Graphics / Hilbert
      Graphics / Glider Gun
      Edit this page
      + + + + + + + + + + \ No newline at end of file diff --git a/docs/docs/examples/issue-tracker/index.html b/docs/docs/examples/issue-tracker/index.html index 7ecec8dad0..48b90a0546 100644 --- a/docs/docs/examples/issue-tracker/index.html +++ b/docs/docs/examples/issue-tracker/index.html @@ -5,20 +5,20 @@ Issue Tracker | H2O Wave - - - - - - - - - - + + + + + + + + + +
      -

      Issue Tracker

      Implement a simple issue tracker using a table to create master-detail views.

      from h2o_wave import Q, listen, ui
      from faker import Faker
      +

      Issue Tracker

      Implement a simple issue tracker using a table to create master-detail views.

      from h2o_wave import main, app, Q, ui
      from faker import Faker
      fake = Faker()
      _id = 0
      @@ -47,18 +47,16 @@
      async def reopen_issues(q: Q):
      for issue_id in q.args.issues:
      issue = issue_lookup[issue_id]
      issue.status = 'Open'
      await show_issues(q)
      -
      async def serve(q: Q):
      if q.args.edit_multiple:
      await edit_multiple(q)
      elif q.args.reopen_issues:
      await reopen_issues(q)
      elif q.args.close_issues:
      await close_issues(q)
      elif q.args.reopen_issue:
      await reopen_issue(q)
      elif q.args.close_issue:
      await close_issue(q)
      elif q.args.issues: # An issue was clicked on
      await show_issue(q, q.args.issues[0])
      else:
      await show_issues(q)
      -
      -
      listen('/demo', serve)
      Edit this page
      - - - - - - - - - - +
      @app('/demo')
      async def serve(q: Q):
      if q.args.edit_multiple:
      await edit_multiple(q)
      elif q.args.reopen_issues:
      await reopen_issues(q)
      elif q.args.close_issues:
      await close_issues(q)
      elif q.args.reopen_issue:
      await reopen_issue(q)
      elif q.args.close_issue:
      await close_issue(q)
      elif q.args.issues: # An issue was clicked on
      await show_issue(q, q.args.issues[0])
      else:
      await show_issues(q)
      Edit this page
      + + + + + + + + + + \ No newline at end of file diff --git a/docs/docs/examples/label/index.html b/docs/docs/examples/label/index.html index 8674e69ebb..6e81014bf5 100644 --- a/docs/docs/examples/label/index.html +++ b/docs/docs/examples/label/index.html @@ -5,31 +5,31 @@ Form / Label | H2O Wave - - - - - - - - - - + + + + + + + + + +
      -

      Form / Label

      Use labels to give a name to a component or a group of components in a form.

      from h2o_wave import site, ui
      +

      Form / Label

      Use labels to give a name to a component or a group of components in a form.

      from h2o_wave import site, ui
      page = site['/demo']
      page['example'] = ui.form_card(
      box='1 1 4 -1',
      items=[
      ui.label(label='Standard Label'),
      ui.label(label='Required Label', required=True),
      ui.label(label='Disabled Label', disabled=True),
      ]
      )
      page.save()
      Edit this page
      - - - - - - - - - - + + + + + + + + + + \ No newline at end of file diff --git a/docs/docs/examples/layout-size/index.html b/docs/docs/examples/layout-size/index.html index 8ce8219681..79dcc1bc5f 100644 --- a/docs/docs/examples/layout-size/index.html +++ b/docs/docs/examples/layout-size/index.html @@ -5,35 +5,35 @@ Layout / Size | H2O Wave - - - - - - - - - - + + + + + + + + + +
      -

      Layout / Size

      How to adjust the size of cards on a page.

      from h2o_wave import site, ui
      +

      Layout / Size

      How to adjust the size of cards on a page.

      from h2o_wave import site, ui
      # Every page has a grid system in place.
      # The grid has 12 columns and 10 rows.
      # A column is 134 pixels wide.
      # A row is 76 pixels high.
      # The gap between rows and columns is set to 15 pixels.
      # Cards have a `box` attribute that specifies its column, row, width and height.
      # box = 'column row width height'
      # They indicate the 1-based column/row to position the top-left corner of the card.
      # In this example, we place multiple cards on a page to demonstrate their `box` values.
      page = site['/demo']
      boxes = [
      '1 1 1 1',
      '2 1 2 1',
      '4 1 3 1',
      '7 1 4 1',
      '11 1 2 2',
      '1 2 1 9',
      '2 2 1 4',
      '3 2 1 2',
      '2 6 1 5',
      '3 4 1 7',
      '4 2 7 9',
      '11 9 2 2',
      '11 3 2 6',
      ]
      for box in boxes:
      page[f'card_{box.replace(" ", "_")}'] = ui.markdown_card(box=box, title=box, content='')
      page.save()
      Edit this page
      - - - - - - - - - - + + + + + + + + + + \ No newline at end of file diff --git a/docs/docs/examples/layout/index.html b/docs/docs/examples/layout/index.html index 0ba44701eb..8499b018d3 100644 --- a/docs/docs/examples/layout/index.html +++ b/docs/docs/examples/layout/index.html @@ -5,35 +5,35 @@ Layout / Position | H2O Wave - - - - - - - - - - + + + + + + + + + +
      -

      Layout / Position

      How to adjust the position of cards on a page.

      from h2o_wave import site, ui
      +

      Layout / Position

      How to adjust the position of cards on a page.

      from h2o_wave import site, ui
      # Every page has a grid system in place.
      # The grid has 12 columns and 10 rows.
      # A column is 134 pixels wide.
      # A row is 76 pixels high.
      # The gap between rows and columns is set to 15 pixels.
      # Cards have a `box` attribute that specifies its column, row, width and height.
      # box = 'column row width height'
      # They indicate the 1-based column/row to position the top-left corner of the card.
      # In this example, we place a 1x1 card in each column/row on a page
      # to demonstrate their column/row values.
      page = site['/demo']
      columns = 12
      rows = 10
      for column in range(1, columns + 1):
      for row in range(1, rows + 1):
      box = f'{column} {row} 1 1'
      page[f'card_{column}_{row}'] = ui.markdown_card(box=box, title=box, content='')
      page.save()
      Edit this page
      - - - - - - - - - - + + + + + + + + + + \ No newline at end of file diff --git a/docs/docs/examples/link/index.html b/docs/docs/examples/link/index.html index b2d48b9cc3..64ad65aac5 100644 --- a/docs/docs/examples/link/index.html +++ b/docs/docs/examples/link/index.html @@ -5,31 +5,31 @@ Form / Link | H2O Wave - - - - - - - - - - + + + + + + + + + +
      -

      Form / Link

      Use links to allow navigation to internal and external URLs.

      from h2o_wave import site, ui
      +

      Form / Link

      Use links to allow navigation to internal and external URLs.

      from h2o_wave import site, ui
      page = site['/demo']
      page['example'] = ui.form_card(
      box='1 1 4 -1',
      items=[
      ui.link(label='Internal link', path='/starred'),
      ui.link(label='Internal link, disabled', path='/starred', disabled=True),
      ui.link(label='External link', path='https://h2o.ai'),
      ui.link(label='External link, disabled', path='https://h2o.ai', disabled=True),
      ]
      )
      page.save()
      Edit this page
      - - - - - - - - - - + + + + + + + + + + \ No newline at end of file diff --git a/docs/docs/examples/markdown-data/index.html b/docs/docs/examples/markdown-data/index.html index 40fc77f78c..295a3c0b8f 100644 --- a/docs/docs/examples/markdown-data/index.html +++ b/docs/docs/examples/markdown-data/index.html @@ -5,35 +5,35 @@ Markdown / Data | H2O Wave - - - - - - - - - - + + + + + + + + + +
      -

      Markdown / Data

      Display dynamic formatted content using markdown.

      import time
      from h2o_wave import site, ui
      +

      Markdown / Data

      Display dynamic formatted content using markdown.

      import time
      from h2o_wave import site, ui
      page = site['/demo']
      beer_verse = '''
      {{before}} bottles of beer on the wall, {{before}} bottles of beer.
      Take one down, pass it around, {{after}} bottles of beer on the wall...
      '''
      beer_card = page.add('example', ui.markdown_card(
      box='1 1 4 2',
      title='99 Bottles of Beer',
      content='=' + beer_verse, # Make the verse a template expression by prefixing a '='.
      data=dict(before='99', after='98'),
      ))
      page.save()
      for i in range(98, 2, -1):
      time.sleep(1)
      beer_card.data.before = str(i)
      beer_card.data.after = str(i - 1)
      page.save()
      Edit this page
      - - - - - - - - - - + + + + + + + + + + \ No newline at end of file diff --git a/docs/docs/examples/markdown/index.html b/docs/docs/examples/markdown/index.html index def42ffcaf..ed5d4baf14 100644 --- a/docs/docs/examples/markdown/index.html +++ b/docs/docs/examples/markdown/index.html @@ -5,20 +5,20 @@ Markdown | H2O Wave - - - - - - - - - - + + + + + + + + + +
      -

      Markdown

      Use a markdown card to display formatted content using markdown.

      from h2o_wave import site, ui
      +

      Markdown

      Use a markdown card to display formatted content using markdown.

      from h2o_wave import site, ui
      page = site['/demo']
      sample_markdown = '''=
      The **quick** _brown_ fox jumped over the lazy dog.
      Block quote:
      @@ -33,15 +33,15 @@
      | Column 1 | Column 2 | Column 3 |
      | -------- | -------- | -------- |
      | Item 1 | Item 2 | Item 3 |
      | Item 1 | Item 2 | Item 3 |
      | Item 1 | Item 2 | Item 3 |
      '''
      page['example'] = ui.markdown_card(
      box='1 1 3 -1',
      title='I was made using markdown!',
      content=sample_markdown,
      )
      page.save()
      Edit this page
      - - - - - - - - - - + + + + + + + + + + \ No newline at end of file diff --git a/docs/docs/examples/markup/index.html b/docs/docs/examples/markup/index.html index 6d575ebf28..294b9f19bb 100644 --- a/docs/docs/examples/markup/index.html +++ b/docs/docs/examples/markup/index.html @@ -5,32 +5,32 @@ Markup | H2O Wave - - - - - - - - - - + + + + + + + + + +
      -

      Markup

      Use a markup card to display formatted content using HTML.

      from h2o_wave import site, ui
      +

      Markup

      Use a markup card to display formatted content using HTML.

      from h2o_wave import site, ui
      page = site['/demo']
      menu = '''
      <ol>
      <li>Spam</li>
      <li>Ham</li>
      <li>Eggs</li>
      </ol>
      '''
      page['example'] = ui.markup_card(
      box='1 1 2 2',
      title='Menu',
      content=menu,
      )
      page.save()
      Edit this page
      - - - - - - - - - - + + + + + + + + + + \ No newline at end of file diff --git a/docs/docs/examples/message-bar/index.html b/docs/docs/examples/message-bar/index.html index 60ab3ded31..4620ebfbcc 100644 --- a/docs/docs/examples/message-bar/index.html +++ b/docs/docs/examples/message-bar/index.html @@ -5,31 +5,31 @@ Form / Message Bar | H2O Wave - - - - - - - - - - + + + + + + + + + +
      -

      Form / Message Bar

      Use message bars to indicate relevant status information.

      from h2o_wave import site, ui
      +

      Form / Message Bar

      Use message bars to indicate relevant status information.

      from h2o_wave import site, ui
      page = site['/demo']
      page['example'] = ui.form_card(
      box='1 1 4 -1',
      items=[
      ui.message_bar(type='blocked', text='This action is blocked.'),
      ui.message_bar(type='error', text='This is an error message'),
      ui.message_bar(type='warning', text='This is a warning message.'),
      ui.message_bar(type='info', text='This is an information message.'),
      ui.message_bar(type='success', text='This is an success message.'),
      ui.message_bar(type='danger', text='This is a danger message.'),
      ]
      )
      page.save()
      Edit this page
      - - - - - - - - - - + + + + + + + + + + \ No newline at end of file diff --git a/docs/docs/examples/meta-icon/index.html b/docs/docs/examples/meta-icon/index.html new file mode 100644 index 0000000000..a2648db796 --- /dev/null +++ b/docs/docs/examples/meta-icon/index.html @@ -0,0 +1,38 @@ + + + + + + +Meta / Icon | H2O Wave + + + + + + + + + + + + +
      +

      Meta / Icon

      Set the browser window icon for a page

      from h2o_wave import site, ui
      +
      page = site['/demo']
      +
      page['meta'] = ui.meta_card(box='', icon='https://en.wikipedia.org/static/apple-touch/wikipedia.png')
      +
      # You can also upload and assign an icon, like this:
      # icon_path, = site.upload(['path/to/my/icon.png'])
      # page['meta'] = ui.meta_card(box='', icon=icon_path)
      +
      page['example'] = ui.markdown_card(
      box='1 1 2 2',
      title='',
      content='<a href="/demo" target="_blank">Open this page in a new window</a> to view its icon.',
      )
      +
      page.save()
      Edit this page
      + + + + + + + + + + + + \ No newline at end of file diff --git a/docs/docs/examples/meta-notification/index.html b/docs/docs/examples/meta-notification/index.html index 5007704c8b..2a5ec78f44 100644 --- a/docs/docs/examples/meta-notification/index.html +++ b/docs/docs/examples/meta-notification/index.html @@ -5,35 +5,35 @@ Meta / Notification | H2O Wave - - - - - - - - - - + + + + + + + + + +
      -

      Meta / Notification

      Display a desktop notification.

      import time
      +

      Meta / Notification

      Display a desktop notification.

      import time
      from h2o_wave import site, ui
      page = site['/demo']
      page['meta'] = ui.meta_card(box='')
      page['example'] = ui.markdown_card(
      box='1 1 2 2',
      title='Desktop Notifications',
      content='This page should display a desktop notification in a few seconds. Wait for it...',
      )
      page.save()
      time.sleep(5)
      page['meta'].notification = 'And now for something completely different!'
      -
      page.save()
      Edit this page
      - - - - - - - - - - +
      page.save()
      Edit this page
      + + + + + + + + + + \ No newline at end of file diff --git a/docs/docs/examples/meta-redirect/index.html b/docs/docs/examples/meta-redirect/index.html index 394360ac95..fa551e407e 100644 --- a/docs/docs/examples/meta-redirect/index.html +++ b/docs/docs/examples/meta-redirect/index.html @@ -5,35 +5,35 @@ Meta / Redirect | H2O Wave - - - - - - - - - - + + + + + + + + + +
      -

      Meta / Redirect

      Redirect the page to a new URL or hash.

      import time
      +

      Meta / Redirect

      Redirect the page to a new URL or hash.

      import time
      from h2o_wave import site, ui
      page = site['/demo']
      page['meta'] = ui.meta_card(box='')
      page['example'] = ui.markdown_card(
      box='1 1 2 2',
      title='Redirect a page',
      content='This page should redirect to Wikipedia in a few seconds. Wait for it...',
      )
      page.save()
      time.sleep(3)
      # Redirect to a hash.
      page['meta'].redirect = '#widgets'
      page.save()
      time.sleep(3)
      # Redirect to a URL.
      page['meta'].redirect = 'https://www.wikipedia.org'
      page.save()
      Edit this page
      - - - - - - - - - - + + + + + + + + + + \ No newline at end of file diff --git a/docs/docs/examples/meta-refresh/index.html b/docs/docs/examples/meta-refresh/index.html index 99440ac465..f530e1cd44 100644 --- a/docs/docs/examples/meta-refresh/index.html +++ b/docs/docs/examples/meta-refresh/index.html @@ -5,33 +5,33 @@ Meta / Refresh | H2O Wave - - - - - - - - - - + + + + + + + + + +
      -

      Meta / Refresh

      Turn off live updates for static pages to conserve server resources.

      from h2o_wave import site, ui
      +

      Meta / Refresh

      Turn off live updates for static pages to conserve server resources.

      from h2o_wave import site, ui
      page = site['/demo']
      # Set refresh rate to zero ("no updates")
      page['meta'] = ui.meta_card(box='', refresh=0)
      page['example'] = ui.markdown_card(
      box='1 1 2 2',
      title='No updates for you',
      content='This page stops receiving updates once loaded.',
      )
      page.save()
      Edit this page
      - - - - - - - - - - + + + + + + + + + + \ No newline at end of file diff --git a/docs/docs/examples/meta-title/index.html b/docs/docs/examples/meta-title/index.html index 72f66310d9..73dfa4cd00 100644 --- a/docs/docs/examples/meta-title/index.html +++ b/docs/docs/examples/meta-title/index.html @@ -5,33 +5,33 @@ Meta / Title | H2O Wave - - - - - - - - - - + + + + + + + + + +
      -

      Meta / Title

      Set the browser window title for a page

      from h2o_wave import site, ui
      +

      Meta / Title

      Set the browser window title for a page

      from h2o_wave import site, ui
      page = site['/demo']
      page['meta'] = ui.meta_card(box='', title='And now for something completely different!')
      page['example'] = ui.markdown_card(
      box='1 1 2 2',
      title='',
      content='<a href="/demo" target="_blank">Open this page in a new window</a> to view its title.',
      )
      -
      page.save()
      Edit this page
      - - - - - - - - - - +
      page.save()
      Edit this page
      + + + + + + + + + + \ No newline at end of file diff --git a/docs/docs/examples/nav/index.html b/docs/docs/examples/nav/index.html index fde301d5b2..3e9d68e44c 100644 --- a/docs/docs/examples/nav/index.html +++ b/docs/docs/examples/nav/index.html @@ -5,32 +5,32 @@ Nav | H2O Wave - - - - - - - - - - + + + + + + + + + +
      -

      Nav

      Use nav cards to display sidebar navigation.

      from h2o_wave import site, ui
      +

      Nav

      Use nav cards to display sidebar navigation.

      from h2o_wave import site, ui
      page = site['/demo']
      page['tabs'] = ui.nav_card(
      box='1 1 2 5',
      items=[
      ui.nav_group('Menu', items=[
      ui.nav_item(name='#menu/spam', label='Spam'),
      ui.nav_item(name='#menu/ham', label='Ham'),
      ui.nav_item(name='#menu/eggs', label='Eggs'),
      ]),
      ui.nav_group('Help', items=[
      ui.nav_item(name='#about', label='About'),
      ui.nav_item(name='#support', label='Support'),
      ])
      ],
      )
      page.save()
      Edit this page
      - - - - - - - - - - + + + + + + + + + + \ No newline at end of file diff --git a/docs/docs/examples/picker-selection/index.html b/docs/docs/examples/picker-selection/index.html index d7af374f69..c6a42697ce 100644 --- a/docs/docs/examples/picker-selection/index.html +++ b/docs/docs/examples/picker-selection/index.html @@ -5,33 +5,31 @@ Form / Picker / Selection | H2O Wave - - - - - - - - - - + + + + + + + + + +
      -

      Form / Picker / Selection

      Pre-select choices while displaying a picker.

      from h2o_wave import Q, listen, ui
      +

      Form / Picker / Selection

      Pre-select choices while displaying a picker.

      from h2o_wave import main, app, Q, ui
      -
      async def serve(q: Q):
      if q.args.show_inputs:
      q.page['example'].items = [
      ui.text(f'selected={q.args.picker}'),
      ui.button(name='show_form', label='Back', primary=True),
      ]
      else:
      q.page['example'] = ui.form_card(box='1 1 4 10', items=[
      ui.picker(name='picker', label='Picker with initial values', choices=[
      ui.choice(name='spam', label='Spam'),
      ui.choice(name='eggs', label= 'Eggs'),
      ui.choice(name='ham', label= 'Ham'),
      ui.choice(name='cheese', label='Cheese'),
      ui.choice(name='beans', label='Beans'),
      ui.choice(name='toast', label='Toast'),
      ], values=['spam','eggs']),
      ui.button(name='show_inputs', label='Submit', primary=True),
      ])
      await q.page.save()
      -
      -
      listen('/demo', serve)
      Edit this page
      - - - - - - - - - - +
      @app('/demo')
      async def serve(q: Q):
      if q.args.show_inputs:
      q.page['example'].items = [
      ui.text(f'selected={q.args.picker}'),
      ui.button(name='show_form', label='Back', primary=True),
      ]
      else:
      q.page['example'] = ui.form_card(box='1 1 4 10', items=[
      ui.picker(name='picker', label='Picker with initial values', choices=[
      ui.choice(name='spam', label='Spam'),
      ui.choice(name='eggs', label='Eggs'),
      ui.choice(name='ham', label='Ham'),
      ui.choice(name='cheese', label='Cheese'),
      ui.choice(name='beans', label='Beans'),
      ui.choice(name='toast', label='Toast'),
      ], values=['spam', 'eggs']),
      ui.button(name='show_inputs', label='Submit', primary=True),
      ])
      await q.page.save()
      Edit this page
      + + + + + + + + + + \ No newline at end of file diff --git a/docs/docs/examples/picker/index.html b/docs/docs/examples/picker/index.html index e8537e086e..d0c6ed0fa1 100644 --- a/docs/docs/examples/picker/index.html +++ b/docs/docs/examples/picker/index.html @@ -5,33 +5,31 @@ Form / Picker | H2O Wave - - - - - - - - - - + + + + + + + + + +
      -

      Form / Picker

      Use pickers to allow users to select one or more choices, such as tags or files, from a list.

      from h2o_wave import Q, listen, ui
      +

      Form / Picker

      Use pickers to allow users to select one or more choices, such as tags or files, from a list.

      from h2o_wave import main, app, Q, ui
      -
      async def serve(q: Q):
      if q.args.show_inputs:
      q.page['example'].items = [
      ui.text(f'selected={q.args.picker}'),
      ui.button(name='show_form', label='Back', primary=True),
      ]
      else:
      q.page['example'] = ui.form_card(box='1 1 4 10', items=[
      ui.picker(name='picker', label='Place an order (try Spam, Eggs or Ham):', choices=[
      ui.choice(name='spam', label='Spam'),
      ui.choice(name='eggs', label='Eggs'),
      ui.choice(name='ham', label='Ham'),
      ui.choice(name='cheese', label='Cheese'),
      ui.choice(name='beans', label='Beans'),
      ui.choice(name='toast', label='Toast'),
      ]),
      ui.button(name='show_inputs', label='Submit', primary=True),
      ])
      await q.page.save()
      -
      -
      listen('/demo', serve)
      Edit this page
      - - - - - - - - - - +
      @app('/demo')
      async def serve(q: Q):
      if q.args.show_inputs:
      q.page['example'].items = [
      ui.text(f'selected={q.args.picker}'),
      ui.button(name='show_form', label='Back', primary=True),
      ]
      else:
      q.page['example'] = ui.form_card(box='1 1 4 10', items=[
      ui.picker(name='picker', label='Place an order (try Spam, Eggs or Ham):', choices=[
      ui.choice(name='spam', label='Spam'),
      ui.choice(name='eggs', label='Eggs'),
      ui.choice(name='ham', label='Ham'),
      ui.choice(name='cheese', label='Cheese'),
      ui.choice(name='beans', label='Beans'),
      ui.choice(name='toast', label='Toast'),
      ]),
      ui.button(name='show_inputs', label='Submit', primary=True),
      ])
      await q.page.save()
      Edit this page
      + + + + + + + + + + \ No newline at end of file diff --git a/docs/docs/examples/pixel-art/index.html b/docs/docs/examples/pixel-art/index.html index 44b68f240b..1dffc3d199 100644 --- a/docs/docs/examples/pixel-art/index.html +++ b/docs/docs/examples/pixel-art/index.html @@ -5,32 +5,32 @@ Pixel Art | H2O Wave - - - - - - - - - - + + + + + + + + + +
      -

      Pixel Art

      A card that demonstrates collaborative editing in Q. +

      Pixel Art

      A card that demonstrates collaborative editing in Q. Open /demo in multiple browsers and watch them synchronize in realtime.

      from h2o_wave import site, data, ui
      page = site['/demo']
      page.drop()
      page.add('example', ui.pixel_art_card(
      box='1 1 4 6',
      title='Art',
      data=data('color', 16 * 16),
      ))
      page.save()
      Edit this page
      - - - - - - - - - - + + + + + + + + + + \ No newline at end of file diff --git a/docs/docs/examples/plot-altair/index.html b/docs/docs/examples/plot-altair/index.html index 59594daa68..9992794b06 100644 --- a/docs/docs/examples/plot-altair/index.html +++ b/docs/docs/examples/plot-altair/index.html @@ -5,33 +5,33 @@ Plot / Altair | H2O Wave - - - - - - - - - - + + + + + + + + + +
      -

      Plot / Altair

      Use Altair to create plot specifications for the Vega card.

      import altair
      from vega_datasets import data
      from h2o_wave import site, ui
      +

      Plot / Altair

      Use Altair to create plot specifications for the Vega card.

      import altair
      from vega_datasets import data
      from h2o_wave import site, ui
      spec = altair.Chart(data.cars()).mark_circle(size=60).encode(
      x='Horsepower',
      y='Miles_per_Gallon',
      color='Origin',
      tooltip=['Name', 'Origin', 'Horsepower', 'Miles_per_Gallon']
      ).interactive().to_json()
      page = site['/demo']
      page['example'] = ui.vega_card(
      box='1 1 4 5',
      title='Altair Example',
      specification=spec,
      )
      page.save()
      Edit this page
      - - - - - - - - - - + + + + + + + + + + \ No newline at end of file diff --git a/docs/docs/examples/plot-area-groups/index.html b/docs/docs/examples/plot-area-groups/index.html index 76311bd7aa..c3b5fb0f74 100644 --- a/docs/docs/examples/plot-area-groups/index.html +++ b/docs/docs/examples/plot-area-groups/index.html @@ -5,33 +5,33 @@ Plot / Area / Groups | H2O Wave - - - - - - - - - - + + + + + + + + + +
      -

      Plot / Area / Groups

      Make an area plot showing multiple categories.

      from synth import FakeMultiTimeSeries
      from h2o_wave import site, data, ui
      +

      Plot / Area / Groups

      Make an area plot showing multiple categories.

      from synth import FakeMultiTimeSeries
      from h2o_wave import site, data, ui
      page = site['/demo']
      n = 50
      f = FakeMultiTimeSeries()
      v = page.add('example', ui.plot_card(
      box='1 1 4 5',
      title='Area, groups',
      data=data('product date price', n * 5),
      plot=ui.plot([ui.mark(type='area', x_scale='time', x='=date', y='=price', color='=product', y_min=0)])
      ))
      v.data = [(g, t, x) for x in [f.next() for _ in range(n)] for g, t, x, dx in x]
      page.save()
      Edit this page
      - - - - - - - - - - + + + + + + + + + + \ No newline at end of file diff --git a/docs/docs/examples/plot-area-line-groups/index.html b/docs/docs/examples/plot-area-line-groups/index.html index 264c8459d2..75bed532fe 100644 --- a/docs/docs/examples/plot-area-line-groups/index.html +++ b/docs/docs/examples/plot-area-line-groups/index.html @@ -5,33 +5,33 @@ Plot / Area + Line / Groups | H2O Wave - - - - - - - - - - + + + + + + + + + +
      -

      Plot / Area + Line / Groups

      Make an combined area + line plot showing multiple categories.

      from synth import FakeMultiTimeSeries
      from h2o_wave import site, data, ui
      +

      Plot / Area + Line / Groups

      Make an combined area + line plot showing multiple categories.

      from synth import FakeMultiTimeSeries
      from h2o_wave import site, data, ui
      page = site['/demo']
      n = 50
      f = FakeMultiTimeSeries()
      v = page.add('example', ui.plot_card(
      box='1 1 4 5',
      title='Area + Line, groups',
      data=data('product date price', n * 5),
      plot=ui.plot([
      ui.mark(type='area', x_scale='time', x='=date', y='=price', color='=product', y_min=0),
      ui.mark(type='line', x='=date', y='=price', color='=product')
      ])
      ))
      v.data = [(g, t, x) for x in [f.next() for _ in range(n)] for g, t, x, dx in x]
      page.save()
      Edit this page
      - - - - - - - - - - + + + + + + + + + + \ No newline at end of file diff --git a/docs/docs/examples/plot-area-line-smooth/index.html b/docs/docs/examples/plot-area-line-smooth/index.html index 63d9f220be..d81d5248f7 100644 --- a/docs/docs/examples/plot-area-line-smooth/index.html +++ b/docs/docs/examples/plot-area-line-smooth/index.html @@ -5,32 +5,32 @@ Plot / Area + Line / Smooth | H2O Wave - - - - - - - - - - + + + + + + + + + +
      -

      Plot / Area + Line / Smooth

      Make a combined area + line plot using a smooth curve.

      from synth import FakeTimeSeries
      from h2o_wave import site, data, ui
      +

      Plot / Area + Line / Smooth

      Make a combined area + line plot using a smooth curve.

      from synth import FakeTimeSeries
      from h2o_wave import site, data, ui
      page = site['/demo']
      n = 50
      f = FakeTimeSeries()
      v = page.add('example', ui.plot_card(
      box='1 1 4 5',
      title='Area + Line, smooth',
      data=data('date price', n),
      plot=ui.plot([
      ui.mark(type='area', x_scale='time', x='=date', y='=price', curve='smooth', y_min=0),
      ui.mark(type='line', x='=date', y='=price', curve='smooth')
      ])
      ))
      v.data = [(t, x) for t, x, dx in [f.next() for _ in range(n)]]
      page.save()
      Edit this page
      - - - - - - - - - - + + + + + + + + + + \ No newline at end of file diff --git a/docs/docs/examples/plot-area-line/index.html b/docs/docs/examples/plot-area-line/index.html index 139958db8e..ae814279ad 100644 --- a/docs/docs/examples/plot-area-line/index.html +++ b/docs/docs/examples/plot-area-line/index.html @@ -5,32 +5,32 @@ Plot / Area + Line | H2O Wave - - - - - - - - - - + + + + + + + + + +
      -

      Plot / Area + Line

      Make an area plot with an additional line layer on top.

      from synth import FakeTimeSeries
      from h2o_wave import site, data, ui
      +

      Plot / Area + Line

      Make an area plot with an additional line layer on top.

      from synth import FakeTimeSeries
      from h2o_wave import site, data, ui
      page = site['/demo']
      n = 50
      f = FakeTimeSeries()
      v = page.add('example', ui.plot_card(
      box='1 1 4 5',
      title='Area + Line',
      data=data('date price', n),
      plot=ui.plot([
      ui.mark(type='area', x_scale='time', x='=date', y='=price', y_min=0),
      ui.mark(type='line', x='=date', y='=price')
      ])
      ))
      v.data = [(t, x) for t, x, dx in [f.next() for _ in range(n)]]
      page.save()
      Edit this page
      - - - - - - - - - - + + + + + + + + + + \ No newline at end of file diff --git a/docs/docs/examples/plot-area-negative/index.html b/docs/docs/examples/plot-area-negative/index.html index ce4f052725..3368f0b73a 100644 --- a/docs/docs/examples/plot-area-negative/index.html +++ b/docs/docs/examples/plot-area-negative/index.html @@ -5,32 +5,32 @@ Plot / Area / Negative | H2O Wave - - - - - - - - - - + + + + + + + + + +
      -

      Plot / Area / Negative

      Make an area plot showing positive and negative values.

      from synth import FakeTimeSeries
      from h2o_wave import site, data, ui
      +

      Plot / Area / Negative

      Make an area plot showing positive and negative values.

      from synth import FakeTimeSeries
      from h2o_wave import site, data, ui
      page = site['/demo']
      n = 50
      f = FakeTimeSeries(min=-50, max=50, start=0)
      v = page.add('example', ui.plot_card(
      box='1 1 4 5',
      title='Area, negative values',
      data=data('date price', n),
      plot=ui.plot([ui.mark(type='area', x_scale='time', x='=date', y='=price')])
      ))
      v.data = [(t, x) for t, x, dx in [f.next() for _ in range(n)]]
      page.save()
      Edit this page
      - - - - - - - - - - + + + + + + + + + + \ No newline at end of file diff --git a/docs/docs/examples/plot-area-range/index.html b/docs/docs/examples/plot-area-range/index.html index 43bba6976e..18fd5303c3 100644 --- a/docs/docs/examples/plot-area-range/index.html +++ b/docs/docs/examples/plot-area-range/index.html @@ -5,33 +5,33 @@ Plot / Area / Range | H2O Wave - - - - - - - - - - + + + + + + + + + +
      -

      Plot / Area / Range

      Make an area plot representing a range (band) of values.

      import random
      +

      Plot / Area / Range

      Make an area plot representing a range (band) of values.

      import random
      from synth import FakeTimeSeries
      from h2o_wave import site, data, ui
      page = site['/demo']
      n = 50
      f = FakeTimeSeries()
      v = page.add('example', ui.plot_card(
      box='1 1 4 5',
      title='Area, range',
      data=data('date low high', n),
      plot=ui.plot([ui.mark(type='area', x_scale='time', x='=date', y0='=low', y='=high')])
      ))
      v.data = [(t, x - random.randint(3, 8), x + random.randint(3, 8)) for t, x, dx in [f.next() for _ in range(n)]]
      page.save()
      Edit this page
      - - - - - - - - - - + + + + + + + + + + \ No newline at end of file diff --git a/docs/docs/examples/plot-area-smooth/index.html b/docs/docs/examples/plot-area-smooth/index.html index 0fa0b3b976..72d04698bf 100644 --- a/docs/docs/examples/plot-area-smooth/index.html +++ b/docs/docs/examples/plot-area-smooth/index.html @@ -5,32 +5,32 @@ Plot / Area / Smooth | H2O Wave - - - - - - - - - - + + + + + + + + + +
      -

      Plot / Area / Smooth

      Make an area plot with a smooth curve.

      from synth import FakeTimeSeries
      from h2o_wave import site, data, ui
      +

      Plot / Area / Smooth

      Make an area plot with a smooth curve.

      from synth import FakeTimeSeries
      from h2o_wave import site, data, ui
      page = site['/demo']
      n = 50
      f = FakeTimeSeries()
      v = page.add('example', ui.plot_card(
      box='1 1 4 5',
      title='Area, smooth',
      data=data('date price', n),
      plot=ui.plot([ui.mark(type='area', x_scale='time', x='=date', y='=price', curve='smooth', y_min=0)])
      ))
      v.data = [(t, x) for t, x, dx in [f.next() for _ in range(n)]]
      page.save()
      Edit this page
      - - - - - - - - - - + + + + + + + + + + \ No newline at end of file diff --git a/docs/docs/examples/plot-area-stacked/index.html b/docs/docs/examples/plot-area-stacked/index.html index aebc80af28..e533e6b65f 100644 --- a/docs/docs/examples/plot-area-stacked/index.html +++ b/docs/docs/examples/plot-area-stacked/index.html @@ -5,33 +5,33 @@ Plot / Area / Stacked | H2O Wave - - - - - - - - - - + + + + + + + + + +
      -

      Plot / Area / Stacked

      Make a stacked area plot.

      from synth import FakeMultiTimeSeries
      from h2o_wave import site, data, ui
      +

      Plot / Area / Stacked

      Make a stacked area plot.

      from synth import FakeMultiTimeSeries
      from h2o_wave import site, data, ui
      page = site['/demo']
      n = 50
      f = FakeMultiTimeSeries()
      v = page.add('example', ui.plot_card(
      box='1 1 4 5',
      title='Area, stacked',
      data=data('product date price', n * 5),
      plot=ui.plot(
      [ui.mark(type='area', x_scale='time', x='=date', y='=price', color='=product', stack='auto', y_min=0)])
      ))
      v.data = [(g, t, x) for x in [f.next() for _ in range(n)] for g, t, x, dx in x]
      page.save()
      Edit this page
      - - - - - - - - - - + + + + + + + + + + \ No newline at end of file diff --git a/docs/docs/examples/plot-area/index.html b/docs/docs/examples/plot-area/index.html index 5bf0b328b9..1a7b35df1c 100644 --- a/docs/docs/examples/plot-area/index.html +++ b/docs/docs/examples/plot-area/index.html @@ -5,32 +5,32 @@ Plot / Area | H2O Wave - - - - - - - - - - + + + + + + + + + +
      -

      Plot / Area

      Make an area plot.

      from synth import FakeTimeSeries
      from h2o_wave import site, data, ui
      +

      Plot / Area

      Make an area plot.

      from synth import FakeTimeSeries
      from h2o_wave import site, data, ui
      page = site['/demo']
      n = 50
      f = FakeTimeSeries()
      v = page.add('example', ui.plot_card(
      box='1 1 4 5',
      title='Area',
      data=data('date price', n),
      plot=ui.plot([ui.mark(type='area', x_scale='time', x='=date', y='=price', y_min=0)])
      ))
      v.data = [(t, x) for t, x, dx in [f.next() for _ in range(n)]]
      page.save()
      Edit this page
      - - - - - - - - - - + + + + + + + + + + \ No newline at end of file diff --git a/docs/docs/examples/plot-axis-title/index.html b/docs/docs/examples/plot-axis-title/index.html index a2e4deaaf2..9fce6b66cc 100644 --- a/docs/docs/examples/plot-axis-title/index.html +++ b/docs/docs/examples/plot-axis-title/index.html @@ -5,32 +5,32 @@ Plot / Axis Titles | H2O Wave - - - - - - - - - - + + + + + + + + + +
      -

      Plot / Axis Titles

      Display custom axis titles on a plot.

      from synth import FakeTimeSeries
      from h2o_wave import site, data, ui
      +

      Plot / Axis Titles

      Display custom axis titles on a plot.

      from synth import FakeTimeSeries
      from h2o_wave import site, data, ui
      page = site['/demo']
      n = 50
      f = FakeTimeSeries()
      v = page.add('example', ui.plot_card(
      box='1 1 4 5',
      title='Line',
      data=data('date price', n),
      plot=ui.plot(
      [ui.mark(type='line', x_scale='time', x='=date', y='=price', y_min=0, x_title='Date', y_title='Price')])
      ))
      v.data = [(t, x) for t, x, dx in [f.next() for _ in range(n)]]
      page.save()
      Edit this page
      - - - - - - - - - - + + + + + + + + + + \ No newline at end of file diff --git a/docs/docs/examples/plot-bokeh/index.html b/docs/docs/examples/plot-bokeh/index.html index 1d5c5375fd..2056a372f1 100644 --- a/docs/docs/examples/plot-bokeh/index.html +++ b/docs/docs/examples/plot-bokeh/index.html @@ -5,33 +5,33 @@ Plot / Bokeh | H2O Wave - - - - - - - - - - + + + + + + + + + +
      -

      Plot / Bokeh

      Use Bokeh to create plots.

      import numpy as np
      from bokeh.models import HoverTool
      from bokeh.plotting import figure
      from bokeh.resources import CDN
      from bokeh.embed import file_html
      +

      Plot / Bokeh

      Use Bokeh to create plots.

      import numpy as np
      from bokeh.models import HoverTool
      from bokeh.plotting import figure
      from bokeh.resources import CDN
      from bokeh.embed import file_html
      from h2o_wave import site, ui
      n = 500
      x = 2 + 2 * np.random.standard_normal(n)
      y = 2 + 2 * np.random.standard_normal(n)
      p = figure(
      match_aspect=True,
      tools="wheel_zoom,reset",
      background_fill_color='#440154'
      )
      p.grid.visible = False
      r, bins = p.hexbin(x, y, size=0.5, hover_color="pink", hover_alpha=0.8)
      p.circle(x, y, color="white", size=1)
      p.add_tools(HoverTool(
      tooltips=[("count", "@c"), ("(q,r)", "(@q, @r)")],
      mode="mouse",
      point_policy="follow_mouse",
      renderers=[r]
      ))
      # Export html for our frame card
      html = file_html(p, CDN, "plot")
      page = site['/demo']
      page['example'] = ui.frame_card(
      box='1 1 5 8',
      title='Hexbin for 500 points',
      content=html,
      )
      page.save()
      Edit this page
      - - - - - - - - - - + + + + + + + + + + \ No newline at end of file diff --git a/docs/docs/examples/plot-d3/index.html b/docs/docs/examples/plot-d3/index.html index 97d7f3c91b..b04f84a02c 100644 --- a/docs/docs/examples/plot-d3/index.html +++ b/docs/docs/examples/plot-d3/index.html @@ -5,35 +5,35 @@ Plot / D3.js | H2O Wave - - - - - - - - - - + + + + + + + + + +
      -

      Plot / D3.js

      Create custom plots using D3.js.

      import json
      import os.path
      from h2o_wave import site, ui
      +

      Plot / D3.js

      Create custom plots using D3.js.

      import json
      import os.path
      from h2o_wave import site, ui
      # The example D3 Javascript file is located in the same directory as this example; get its path
      d3_js_script_filename = os.path.join(os.path.dirname(__file__), 'plot_d3.js')
      # Upload the script to the server. Typically, you'd do this only once, when your app is installed.
      d3_js_script_path, = site.upload([d3_js_script_filename])
      html_template = '''
      <!DOCTYPE html>
      <html>
      <head>
      <script src="https://d3js.org/d3.v5.min.js"></script>
      </head>
      <body style="margin:0; padding:0">
      <script src="{script_path}"></script>
      <script>render({data})</script>
      </body>
      </html>
      '''
      # This data is hard-coded here for simplicity.
      # During production use, this data would be the output of some compute routine.
      data = [
      [11975, 5871, 8916, 2868],
      [1951, 10048, 2060, 6171],
      [8010, 16145, 8090, 8045],
      [1013, 990, 940, 6907],
      ]
      # Plug JSON-serialized data into our html template
      html = html_template.format(script_path=d3_js_script_path, data=json.dumps(data))
      page = site['/demo']
      page['example'] = ui.frame_card(
      box='1 1 5 8',
      title='D3 Chord Diagram',
      content=html,
      )
      page.save()
      Edit this page
      - - - - - - - - - - + + + + + + + + + + \ No newline at end of file diff --git a/docs/docs/examples/plot-form/index.html b/docs/docs/examples/plot-form/index.html index b042b0f126..b108c3711c 100644 --- a/docs/docs/examples/plot-form/index.html +++ b/docs/docs/examples/plot-form/index.html @@ -5,32 +5,32 @@ Plot / Form | H2O Wave - - - - - - - - - - + + + + + + + + + +
      -

      Plot / Form

      Display a plot inside a form.

      from synth import FakeCategoricalSeries
      from h2o_wave import site, data, ui
      +

      Plot / Form

      Display a plot inside a form.

      from synth import FakeCategoricalSeries
      from h2o_wave import site, data, ui
      page = site['/demo']
      n = 20
      f = FakeCategoricalSeries()
      v = page.add('example', ui.form_card(
      box='1 1 4 5',
      items=[
      ui.text_xl('Example 1'),
      ui.visualization(
      plot=ui.plot([ui.mark(type='interval', x='=product', y='=price', y_min=0)]),
      data=data(fields='product price', rows=[(c, x) for c, x, _ in [f.next() for _ in range(n)]], pack=True),
      ),
      ui.text_xl('Example 2'),
      ui.visualization(
      plot=ui.plot([ui.mark(type='interval', x='=product', y='=price', y_min=0)]),
      data=data(fields='product price', rows=[(c, x) for c, x, _ in [f.next() for _ in range(n)]], pack=True),
      ),
      ],
      ))
      page.save()
      Edit this page
      - - - - - - - - - - + + + + + + + + + + \ No newline at end of file diff --git a/docs/docs/examples/plot-histogram/index.html b/docs/docs/examples/plot-histogram/index.html index 3abb5fd57d..76d310d00f 100644 --- a/docs/docs/examples/plot-histogram/index.html +++ b/docs/docs/examples/plot-histogram/index.html @@ -5,32 +5,32 @@ Plot / Histogram | H2O Wave - - - - - - - - - - + + + + + + + + + +
      -

      Plot / Histogram

      Make a histogram.

      from synth import FakeCategoricalSeries
      from h2o_wave import site, data, ui
      +

      Plot / Histogram

      Make a histogram.

      from synth import FakeCategoricalSeries
      from h2o_wave import site, data, ui
      page = site['/demo']
      n = 10
      f = FakeCategoricalSeries()
      v = page.add('example', ui.plot_card(
      box='1 1 4 5',
      title='Histogram',
      data=data('lo hi price', n),
      plot=ui.plot([ui.mark(type='interval', y='=price', x1='=lo', x2='=hi', y_min=0)])
      ))
      v.data = [(i * 10, i * 10 + 10, x) for i, (c, x, dx) in enumerate([f.next() for _ in range(n)])]
      page.save()
      Edit this page
      - - - - - - - - - - + + + + + + + + + + \ No newline at end of file diff --git a/docs/docs/examples/plot-interval-annotation-transpose/index.html b/docs/docs/examples/plot-interval-annotation-transpose/index.html index 8a652521e7..8f617e6471 100644 --- a/docs/docs/examples/plot-interval-annotation-transpose/index.html +++ b/docs/docs/examples/plot-interval-annotation-transpose/index.html @@ -5,32 +5,32 @@ Plot / Interval / Annotation / Transpose | H2O Wave - - - - - - - - - - + + + + + + + + + +
      -

      Plot / Interval / Annotation / Transpose

      Add annotations to a bar plot.

      from synth import FakeCategoricalSeries
      from h2o_wave import site, data, ui
      +

      Plot / Interval / Annotation / Transpose

      Add annotations to a bar plot.

      from synth import FakeCategoricalSeries
      from h2o_wave import site, data, ui
      page = site['/demo']
      n = 20
      f = FakeCategoricalSeries()
      v = page.add('example', ui.plot_card(
      box='1 1 4 5',
      title='Categorical-Numeric',
      data=data('product price', n),
      plot=ui.plot([
      ui.mark(type='interval', y='=product', x='=price', x_min=0, x_max=100),
      ui.mark(y='C10', x=80, label='point'),
      ui.mark(y='C13', label='vertical line'),
      ui.mark(x=40, label='horizontal line'),
      ui.mark(y='C6', y0='C3', label='vertical region'),
      ui.mark(x=70, x0=60, label='horizontal region')
      ])
      ))
      v.data = [(c, x) for c, x, dx in [f.next() for _ in range(n)]]
      page.save()
      Edit this page
      - - - - - - - - - - + + + + + + + + + + \ No newline at end of file diff --git a/docs/docs/examples/plot-interval-annotation/index.html b/docs/docs/examples/plot-interval-annotation/index.html index 87d5a73245..af466a1834 100644 --- a/docs/docs/examples/plot-interval-annotation/index.html +++ b/docs/docs/examples/plot-interval-annotation/index.html @@ -5,32 +5,32 @@ Plot / Interval / Annotation | H2O Wave - - - - - - - - - - + + + + + + + + + +
      -

      Plot / Interval / Annotation

      Add annotations to a column plot.

      from synth import FakeCategoricalSeries
      from h2o_wave import site, data, ui
      +

      Plot / Interval / Annotation

      Add annotations to a column plot.

      from synth import FakeCategoricalSeries
      from h2o_wave import site, data, ui
      page = site['/demo']
      n = 20
      f = FakeCategoricalSeries()
      v = page.add('example', ui.plot_card(
      box='1 1 4 5',
      title='Categorical-Numeric',
      data=data('product price', n),
      plot=ui.plot([
      ui.mark(type='interval', x='=product', y='=price', y_min=0, y_max=100),
      ui.mark(x='C10', y=80, label='point'),
      ui.mark(x='C13', label='vertical line'),
      ui.mark(y=40, label='horizontal line'),
      ui.mark(x='C6', x0='C3', label='vertical region'),
      ui.mark(y=70, y0=60, label='horizontal region')
      ])
      ))
      v.data = [(c, x) for c, x, dx in [f.next() for _ in range(n)]]
      page.save()
      Edit this page
      - - - - - - - - - - + + + + + + + + + + \ No newline at end of file diff --git a/docs/docs/examples/plot-interval-groups-transpose/index.html b/docs/docs/examples/plot-interval-groups-transpose/index.html index 021f39da5b..be0c3815fa 100644 --- a/docs/docs/examples/plot-interval-groups-transpose/index.html +++ b/docs/docs/examples/plot-interval-groups-transpose/index.html @@ -5,33 +5,33 @@ Plot / Interval / Groups / Transpose | H2O Wave - - - - - - - - - - + + + + + + + + + +
      -

      Plot / Interval / Groups / Transpose

      Make a grouped bar plot.

      from synth import FakeMultiCategoricalSeries
      from h2o_wave import site, data, ui
      +

      Plot / Interval / Groups / Transpose

      Make a grouped bar plot.

      from synth import FakeMultiCategoricalSeries
      from h2o_wave import site, data, ui
      page = site['/demo']
      n = 10
      k = 3
      f = FakeMultiCategoricalSeries(groups=k)
      v = page.add('example', ui.plot_card(
      box='1 1 4 5',
      title='Intervals, groups',
      data=data('country product price', n * k),
      plot=ui.plot([ui.mark(type='interval', x='=price', y='=product', color='=country', dodge='auto', y_min=0)])
      ))
      v.data = [(g, t, x) for x in [f.next() for _ in range(n)] for g, t, x, dx in x]
      page.save()
      Edit this page
      - - - - - - - - - - + + + + + + + + + + \ No newline at end of file diff --git a/docs/docs/examples/plot-interval-groups/index.html b/docs/docs/examples/plot-interval-groups/index.html index 6bf29afbd8..b4fe7c4dca 100644 --- a/docs/docs/examples/plot-interval-groups/index.html +++ b/docs/docs/examples/plot-interval-groups/index.html @@ -5,33 +5,33 @@ Plot / Interval / Groups | H2O Wave - - - - - - - - - - + + + + + + + + + +
      -

      Plot / Interval / Groups

      Make a grouped column plot.

      from synth import FakeMultiCategoricalSeries
      from h2o_wave import site, data, ui
      +

      Plot / Interval / Groups

      Make a grouped column plot.

      from synth import FakeMultiCategoricalSeries
      from h2o_wave import site, data, ui
      page = site['/demo']
      n = 10
      k = 3
      f = FakeMultiCategoricalSeries(groups=k)
      v = page.add('example', ui.plot_card(
      box='1 1 4 5',
      title='Intervals, groups',
      data=data('country product price', n * k),
      plot=ui.plot([ui.mark(type='interval', x='=product', y='=price', color='=country', dodge='auto', y_min=0)])
      ))
      v.data = [(g, t, x) for x in [f.next() for _ in range(n)] for g, t, x, dx in x]
      page.save()
      Edit this page
      - - - - - - - - - - + + + + + + + + + + \ No newline at end of file diff --git a/docs/docs/examples/plot-interval-helix/index.html b/docs/docs/examples/plot-interval-helix/index.html index db8a9b9d0f..be793dd419 100644 --- a/docs/docs/examples/plot-interval-helix/index.html +++ b/docs/docs/examples/plot-interval-helix/index.html @@ -5,32 +5,32 @@ Plot / Interval / Helix | H2O Wave - - - - - - - - - - + + + + + + + + + +
      -

      Plot / Interval / Helix

      Make a bar plot in helical coordinates.

      from synth import FakeCategoricalSeries
      from h2o_wave import site, data, ui
      +

      Plot / Interval / Helix

      Make a bar plot in helical coordinates.

      from synth import FakeCategoricalSeries
      from h2o_wave import site, data, ui
      page = site['/demo']
      n = 200
      f = FakeCategoricalSeries()
      v = page.add('example', ui.plot_card(
      box='1 1 4 5',
      title='Interval, helix',
      data=data('product price', n),
      plot=ui.plot([ui.mark(coord='helix', type='interval', x='=product', y='=price', y_min=0)])
      ))
      v.data = [(c, x) for c, x, dx in [f.next() for _ in range(n)]]
      page.save()
      Edit this page
      - - - - - - - - - - + + + + + + + + + + \ No newline at end of file diff --git a/docs/docs/examples/plot-interval-labels/index.html b/docs/docs/examples/plot-interval-labels/index.html index c9deee1dc3..9d0fdb697a 100644 --- a/docs/docs/examples/plot-interval-labels/index.html +++ b/docs/docs/examples/plot-interval-labels/index.html @@ -5,32 +5,32 @@ Plot / Interval / Labels | H2O Wave - - - - - - - - - - + + + + + + + + + +
      -

      Plot / Interval / Labels

      Make a column plot with labels on each bar.

      from synth import FakeCategoricalSeries
      from h2o_wave import site, data, ui
      +

      Plot / Interval / Labels

      Make a column plot with labels on each bar.

      from synth import FakeCategoricalSeries
      from h2o_wave import site, data, ui
      page = site['/demo']
      n = 20
      f = FakeCategoricalSeries()
      v = page.add('example', ui.plot_card(
      box='1 1 4 5',
      title='Label Customization',
      data=data('product price', n),
      plot=ui.plot([
      ui.mark(type='interval', x='=product',
      y='=${{intl price minimum_fraction_digits=2 maximum_fraction_digits=2}}', y_min=0,
      color='#333333',
      label='=${{intl price minimum_fraction_digits=2 maximum_fraction_digits=2}}',
      label_offset=0, label_position='middle', label_rotation='-90', label_fill_color='#fff',
      label_font_weight='bold')])
      ))
      v.data = [(c, x) for c, x, dx in [f.next() for _ in range(n)]]
      page.save()
      Edit this page
      - - - - - - - - - - + + + + + + + + + + \ No newline at end of file diff --git a/docs/docs/examples/plot-interval-polar-stacked/index.html b/docs/docs/examples/plot-interval-polar-stacked/index.html index 8937a0ea3d..468417d1dc 100644 --- a/docs/docs/examples/plot-interval-polar-stacked/index.html +++ b/docs/docs/examples/plot-interval-polar-stacked/index.html @@ -5,33 +5,33 @@ Plot / Interval / Polar / Stacked | H2O Wave - - - - - - - - - - + + + + + + + + + +
      -

      Plot / Interval / Polar / Stacked

      Make a stacked rose plot (a stacked bar plot in polar coordinates).

      from synth import FakeMultiCategoricalSeries
      from h2o_wave import site, data, ui
      +

      Plot / Interval / Polar / Stacked

      Make a stacked rose plot (a stacked bar plot in polar coordinates).

      from synth import FakeMultiCategoricalSeries
      from h2o_wave import site, data, ui
      page = site['/demo']
      n = 10
      k = 5
      f = FakeMultiCategoricalSeries(groups=k)
      v = page.add('example', ui.plot_card(
      box='1 1 4 5',
      title='Intervals, polar, stacked',
      data=data('country product price', n * k),
      plot=ui.plot([
      ui.mark(coord='polar', type='interval', x='=product', y='=price', color='=country', stack='auto', y_min=0)])
      ))
      v.data = [(g, t, x) for x in [f.next() for _ in range(n)] for g, t, x, dx in x]
      page.save()
      Edit this page
      - - - - - - - - - - + + + + + + + + + + \ No newline at end of file diff --git a/docs/docs/examples/plot-interval-polar/index.html b/docs/docs/examples/plot-interval-polar/index.html index 9fc7e2d6a2..b5c35971eb 100644 --- a/docs/docs/examples/plot-interval-polar/index.html +++ b/docs/docs/examples/plot-interval-polar/index.html @@ -5,32 +5,32 @@ Plot / Interval / Polar | H2O Wave - - - - - - - - - - + + + + + + + + + +
      -

      Plot / Interval / Polar

      Make a rose plot (a bar plot in polar coordinates).

      from synth import FakeCategoricalSeries
      from h2o_wave import site, data, ui
      +

      Plot / Interval / Polar

      Make a rose plot (a bar plot in polar coordinates).

      from synth import FakeCategoricalSeries
      from h2o_wave import site, data, ui
      page = site['/demo']
      n = 24
      f = FakeCategoricalSeries()
      v = page.add('example', ui.plot_card(
      box='1 1 4 5',
      title='Interval, polar',
      data=data('product price', n),
      plot=ui.plot([ui.mark(coord='polar', type='interval', x='=product', y='=price', y_min=0)])
      ))
      v.data = [(c, x) for c, x, dx in [f.next() for _ in range(n)]]
      page.save()
      Edit this page
      - - - - - - - - - - + + + + + + + + + + \ No newline at end of file diff --git a/docs/docs/examples/plot-interval-range-transpose/index.html b/docs/docs/examples/plot-interval-range-transpose/index.html index ec15b1ef9c..8156b28d45 100644 --- a/docs/docs/examples/plot-interval-range-transpose/index.html +++ b/docs/docs/examples/plot-interval-range-transpose/index.html @@ -5,33 +5,33 @@ Plot / Interval / Range / Transpose | H2O Wave - - - - - - - - - - + + + + + + + + + +
      -

      Plot / Interval / Range / Transpose

      Make a bar plot with each bar representing high/low (or start/end) values. Transposing this produces a gantt plot.

      import random
      +

      Plot / Interval / Range / Transpose

      Make a bar plot with each bar representing high/low (or start/end) values. Transposing this produces a gantt plot.

      import random
      from synth import FakeCategoricalSeries
      from h2o_wave import site, data, ui
      page = site['/demo']
      n = 20
      f = FakeCategoricalSeries()
      v = page.add('example', ui.plot_card(
      box='1 1 4 5',
      title='Interval, range',
      data=data('product low high', n),
      plot=ui.plot([ui.mark(type='interval', x0='=low', x='=high', y='=product', )])
      ))
      v.data = [(c, x - random.randint(3, 10), x + random.randint(3, 10)) for c, x, dx in [f.next() for _ in range(n)]]
      page.save()
      Edit this page
      - - - - - - - - - - + + + + + + + + + + \ No newline at end of file diff --git a/docs/docs/examples/plot-interval-range/index.html b/docs/docs/examples/plot-interval-range/index.html index f47796ed48..9a9f98d482 100644 --- a/docs/docs/examples/plot-interval-range/index.html +++ b/docs/docs/examples/plot-interval-range/index.html @@ -5,33 +5,33 @@ Plot / Interval / Range | H2O Wave - - - - - - - - - - + + + + + + + + + +
      -

      Plot / Interval / Range

      Make a column plot with each bar representing high/low (or start/end) values. Transposing this produces a gantt plot.

      import random
      +

      Plot / Interval / Range

      Make a column plot with each bar representing high/low (or start/end) values. Transposing this produces a gantt plot.

      import random
      from synth import FakeCategoricalSeries
      from h2o_wave import site, data, ui
      page = site['/demo']
      n = 20
      f = FakeCategoricalSeries()
      v = page.add('example', ui.plot_card(
      box='1 1 4 5',
      title='Interval, range',
      data=data('product low high', n),
      plot=ui.plot([ui.mark(type='interval', x='=product', y0='=low', y='=high')])
      ))
      v.data = [(c, x - random.randint(3, 10), x + random.randint(3, 10)) for c, x, dx in [f.next() for _ in range(n)]]
      page.save()
      Edit this page
      - - - - - - - - - - + + + + + + + + + + \ No newline at end of file diff --git a/docs/docs/examples/plot-interval-stacked-grouped-transpose/index.html b/docs/docs/examples/plot-interval-stacked-grouped-transpose/index.html index e4d96f5982..8e7f7b7118 100644 --- a/docs/docs/examples/plot-interval-stacked-grouped-transpose/index.html +++ b/docs/docs/examples/plot-interval-stacked-grouped-transpose/index.html @@ -5,33 +5,33 @@ Plot / Interval / Stacked / Grouped / Transpose | H2O Wave - - - - - - - - - - + + + + + + + + + +
      -

      Plot / Interval / Stacked / Grouped / Transpose

      Make a bar plot with both stacked and grouped bars.

      from synth import FakeMultiCategoricalSeries
      from h2o_wave import site, data, ui
      +

      Plot / Interval / Stacked / Grouped / Transpose

      Make a bar plot with both stacked and grouped bars.

      from synth import FakeMultiCategoricalSeries
      from h2o_wave import site, data, ui
      page = site['/demo']
      n = 5
      k = 5
      f1 = FakeMultiCategoricalSeries(groups=k)
      f2 = FakeMultiCategoricalSeries(groups=k)
      v = page.add('example', ui.plot_card(
      box='1 1 4 5',
      title='Intervals, stacked and dodged',
      data=data('category country product price', n * k * 2),
      plot=ui.plot([
      ui.mark(type='interval', x='=price', y='=product', color='=country', stack='auto', dodge='=category', x_min=0)])
      ))
      data1 = [('A', g, t, x) for x in [f1.next() for _ in range(n)] for g, t, x, _ in x]
      data2 = [('B', g, t, x) for x in [f2.next() for _ in range(n)] for g, t, x, _ in x]
      v.data = data1 + data2
      page.save()
      Edit this page
      - - - - - - - - - - + + + + + + + + + + \ No newline at end of file diff --git a/docs/docs/examples/plot-interval-stacked-grouped/index.html b/docs/docs/examples/plot-interval-stacked-grouped/index.html index 52151acdcd..cecf8959e1 100644 --- a/docs/docs/examples/plot-interval-stacked-grouped/index.html +++ b/docs/docs/examples/plot-interval-stacked-grouped/index.html @@ -5,33 +5,33 @@ Plot / Interval / Stacked / Grouped | H2O Wave - - - - - - - - - - + + + + + + + + + +
      -

      Plot / Interval / Stacked / Grouped

      Make a column plot with both stacked and grouped bars.

      from synth import FakeMultiCategoricalSeries
      from h2o_wave import site, data, ui
      +

      Plot / Interval / Stacked / Grouped

      Make a column plot with both stacked and grouped bars.

      from synth import FakeMultiCategoricalSeries
      from h2o_wave import site, data, ui
      page = site['/demo']
      n = 5
      k = 5
      f1 = FakeMultiCategoricalSeries(groups=k)
      f2 = FakeMultiCategoricalSeries(groups=k)
      v = page.add('example', ui.plot_card(
      box='1 1 4 5',
      title='Intervals, stacked and dodged',
      data=data('category country product price', n * k * 2),
      plot=ui.plot([
      ui.mark(type='interval', x='=product', y='=price', color='=country', stack='auto', dodge='=category', y_min=0)])
      ))
      data1 = [('A', g, t, x) for x in [f1.next() for _ in range(n)] for g, t, x, _ in x]
      data2 = [('B', g, t, x) for x in [f2.next() for _ in range(n)] for g, t, x, _ in x]
      v.data = data1 + data2
      page.save()
      Edit this page
      - - - - - - - - - - + + + + + + + + + + \ No newline at end of file diff --git a/docs/docs/examples/plot-interval-stacked-transpose/index.html b/docs/docs/examples/plot-interval-stacked-transpose/index.html index 48064a617a..d8a7e80ddc 100644 --- a/docs/docs/examples/plot-interval-stacked-transpose/index.html +++ b/docs/docs/examples/plot-interval-stacked-transpose/index.html @@ -5,33 +5,33 @@ Plot / Interval / Stacked / Transpose | H2O Wave - - - - - - - - - - + + + + + + + + + +
      -

      Plot / Interval / Stacked / Transpose

      Make a stacked bar plot.

      from synth import FakeMultiCategoricalSeries
      from h2o_wave import site, data, ui
      +

      Plot / Interval / Stacked / Transpose

      Make a stacked bar plot.

      from synth import FakeMultiCategoricalSeries
      from h2o_wave import site, data, ui
      page = site['/demo']
      n = 10
      k = 5
      f = FakeMultiCategoricalSeries(groups=k)
      v = page.add('example', ui.plot_card(
      box='1 1 4 5',
      title='Intervals, stacked',
      data=data('country product price', n * k),
      plot=ui.plot([ui.mark(type='interval', x='=price', y='=product', color='=country', stack='auto', y_min=0)])
      ))
      v.data = [(g, t, x) for x in [f.next() for _ in range(n)] for g, t, x, dx in x]
      page.save()
      Edit this page
      - - - - - - - - - - + + + + + + + + + + \ No newline at end of file diff --git a/docs/docs/examples/plot-interval-stacked/index.html b/docs/docs/examples/plot-interval-stacked/index.html index cfcbc68649..5fd10ac0fa 100644 --- a/docs/docs/examples/plot-interval-stacked/index.html +++ b/docs/docs/examples/plot-interval-stacked/index.html @@ -5,33 +5,33 @@ Plot / Interval / Stacked | H2O Wave - - - - - - - - - - + + + + + + + + + +
      -

      Plot / Interval / Stacked

      Make a stacked column plot.

      from synth import FakeMultiCategoricalSeries
      from h2o_wave import site, data, ui
      +

      Plot / Interval / Stacked

      Make a stacked column plot.

      from synth import FakeMultiCategoricalSeries
      from h2o_wave import site, data, ui
      page = site['/demo']
      n = 10
      k = 5
      f = FakeMultiCategoricalSeries(groups=k)
      v = page.add('example', ui.plot_card(
      box='1 1 4 5',
      title='Intervals, stacked',
      data=data('country product price', n * k),
      plot=ui.plot([ui.mark(type='interval', x='=product', y='=price', color='=country', stack='auto', y_min=0)])
      ))
      v.data = [(g, t, x) for x in [f.next() for _ in range(n)] for g, t, x, dx in x]
      page.save()
      Edit this page
      - - - - - - - - - - + + + + + + + + + + \ No newline at end of file diff --git a/docs/docs/examples/plot-interval-theta/index.html b/docs/docs/examples/plot-interval-theta/index.html index b398df2cc8..263c417c4f 100644 --- a/docs/docs/examples/plot-interval-theta/index.html +++ b/docs/docs/examples/plot-interval-theta/index.html @@ -5,32 +5,32 @@ Plot / Interval / Theta | H2O Wave - - - - - - - - - - + + + + + + + + + +
      -

      Plot / Interval / Theta

      Make a "racetrack" plot (a bar plot in polar coordinates, transposed).

      from synth import FakeMultiCategoricalSeries
      from h2o_wave import site, data, ui
      +

      Plot / Interval / Theta

      Make a "racetrack" plot (a bar plot in polar coordinates, transposed).

      from synth import FakeMultiCategoricalSeries
      from h2o_wave import site, data, ui
      page = site['/demo']
      n = 10
      k = 5
      f = FakeMultiCategoricalSeries(groups=k)
      v = page.add('example', ui.plot_card(
      box='1 1 4 5',
      title='Intervals, theta, stacked',
      data=data('country product price', n * k),
      plot=ui.plot([
      ui.mark(coord='theta', type='interval', x='=product', y='=price', color='=country', stack='auto', y_min=0)])
      ))
      v.data = [(g, t, x) for x in [f.next() for _ in range(n)] for g, t, x, dx in x]
      page.save()
      Edit this page
      - - - - - - - - - - + + + + + + + + + + \ No newline at end of file diff --git a/docs/docs/examples/plot-interval-transpose/index.html b/docs/docs/examples/plot-interval-transpose/index.html index b7360f0703..9a2fab57e2 100644 --- a/docs/docs/examples/plot-interval-transpose/index.html +++ b/docs/docs/examples/plot-interval-transpose/index.html @@ -5,32 +5,32 @@ Plot / Interval / Transpose | H2O Wave - - - - - - - - - - + + + + + + + + + +
      -

      Plot / Interval / Transpose

      Make a bar plot.

      from synth import FakeCategoricalSeries
      from h2o_wave import site, data, ui
      +

      Plot / Interval / Transpose

      Make a bar plot.

      from synth import FakeCategoricalSeries
      from h2o_wave import site, data, ui
      page = site['/demo']
      n = 20
      f = FakeCategoricalSeries()
      v = page.add('example', ui.plot_card(
      box='1 1 4 5',
      title='Interval',
      data=data('product price', n),
      plot=ui.plot([ui.mark(type='interval', x='=price', y='=product', y_min=0)])
      ))
      v.data = [(c, x) for c, x, dx in [f.next() for _ in range(n)]]
      page.save()
      Edit this page
      - - - - - - - - - - + + + + + + + + + + \ No newline at end of file diff --git a/docs/docs/examples/plot-interval/index.html b/docs/docs/examples/plot-interval/index.html index a089bb93fb..abefb45180 100644 --- a/docs/docs/examples/plot-interval/index.html +++ b/docs/docs/examples/plot-interval/index.html @@ -5,32 +5,32 @@ Plot / Interval | H2O Wave - - - - - - - - - - + + + + + + + + + +
      -

      Plot / Interval

      Make a column plot.

      from synth import FakeCategoricalSeries
      from h2o_wave import site, data, ui
      +

      Plot / Interval

      Make a column plot.

      from synth import FakeCategoricalSeries
      from h2o_wave import site, data, ui
      page = site['/demo']
      n = 20
      f = FakeCategoricalSeries()
      v = page.add('example', ui.plot_card(
      box='1 1 4 5',
      title='Interval',
      data=data('product price', n),
      plot=ui.plot([ui.mark(type='interval', x='=product', y='=price', y_min=0)])
      ))
      v.data = [(c, x) for c, x, dx in [f.next() for _ in range(n)]]
      page.save()
      Edit this page
      - - - - - - - - - - + + + + + + + + + + \ No newline at end of file diff --git a/docs/docs/examples/plot-line-annotation/index.html b/docs/docs/examples/plot-line-annotation/index.html index 85ff438769..9cd1d0b5e2 100644 --- a/docs/docs/examples/plot-line-annotation/index.html +++ b/docs/docs/examples/plot-line-annotation/index.html @@ -5,32 +5,32 @@ Plot / Line / Annotation | H2O Wave - - - - - - - - - - + + + + + + + + + +
      -

      Plot / Line / Annotation

      Add annotations to a line plot.

      from synth import FakeTimeSeries
      from h2o_wave import site, data, ui
      +

      Plot / Line / Annotation

      Add annotations to a line plot.

      from synth import FakeTimeSeries
      from h2o_wave import site, data, ui
      page = site['/demo']
      n = 50
      f = FakeTimeSeries()
      v = page.add('example', ui.plot_card(
      box='1 1 4 5',
      title='Time-Numeric',
      data=data('date price', n),
      plot=ui.plot([
      ui.mark(type='line', x_scale='time', x='=date', y='=price', y_min=0, y_max=100),
      ui.mark(x=50, y=50, label='point'),
      ui.mark(x='2010-05-15T19:59:21.000000Z', label='vertical line'),
      ui.mark(y=40, label='horizontal line'),
      ui.mark(x='2010-05-24T19:59:21.000000Z', x0='2010-05-20T19:59:21.000000Z', label='vertical region'),
      ui.mark(y=70, y0=60, label='horizontal region'),
      ui.mark(x='2010-05-10T19:59:21.000000Z', x0='2010-05-05T19:59:21.000000Z', y=30, y0=20,
      label='rectangular region')
      ])
      ))
      v.data = [(t, x) for t, x, dx in [f.next() for _ in range(n)]]
      page.save()
      Edit this page
      - - - - - - - - - - + + + + + + + + + + \ No newline at end of file diff --git a/docs/docs/examples/plot-line-groups/index.html b/docs/docs/examples/plot-line-groups/index.html index 35e388205e..a026e06415 100644 --- a/docs/docs/examples/plot-line-groups/index.html +++ b/docs/docs/examples/plot-line-groups/index.html @@ -5,33 +5,33 @@ Plot / Line / Groups | H2O Wave - - - - - - - - - - + + + + + + + + + +
      -

      Plot / Line / Groups

      Make a multi-series line plot.

      from synth import FakeMultiTimeSeries
      from h2o_wave import site, data, ui
      +

      Plot / Line / Groups

      Make a multi-series line plot.

      from synth import FakeMultiTimeSeries
      from h2o_wave import site, data, ui
      page = site['/demo']
      n = 50
      f = FakeMultiTimeSeries()
      v = page.add('example', ui.plot_card(
      box='1 1 4 5',
      title='Line, groups',
      data=data('product date price', n * 5),
      plot=ui.plot([ui.mark(type='line', x_scale='time', x='=date', y='=price', color='=product', y_min=0)])
      ))
      v.data = [(g, t, x) for x in [f.next() for _ in range(n)] for g, t, x, dx in x]
      page.save()
      Edit this page
      - - - - - - - - - - + + + + + + + + + + \ No newline at end of file diff --git a/docs/docs/examples/plot-line-labels-no-overlap/index.html b/docs/docs/examples/plot-line-labels-no-overlap/index.html index 4d2647889f..75d59b48ef 100644 --- a/docs/docs/examples/plot-line-labels-no-overlap/index.html +++ b/docs/docs/examples/plot-line-labels-no-overlap/index.html @@ -5,32 +5,32 @@ Plot / Line / Labels / Occlusion | H2O Wave - - - - - - - - - - + + + + + + + + + +
      -

      Plot / Line / Labels / Occlusion

      Make a line plot with non-overlapping labels.

      from synth import FakeTimeSeries
      from h2o_wave import site, data, ui
      +

      Plot / Line / Labels / Occlusion

      Make a line plot with non-overlapping labels.

      from synth import FakeTimeSeries
      from h2o_wave import site, data, ui
      page = site['/demo']
      n = 50
      f = FakeTimeSeries()
      v = page.add('example', ui.plot_card(
      box='1 1 4 5',
      title='Remove overlapping labels',
      data=data('date price', n),
      plot=ui.plot([ui.mark(type='line', x_scale='time', x='=date', y='=price', y_min=0,
      label='=${{intl price minimum_fraction_digits=2 maximum_fraction_digits=2}}',
      label_overlap='hide')])
      ))
      v.data = [(t, x) for t, x, dx in [f.next() for _ in range(n)]]
      page.save()
      Edit this page
      - - - - - - - - - - + + + + + + + + + + \ No newline at end of file diff --git a/docs/docs/examples/plot-line-labels-stroked/index.html b/docs/docs/examples/plot-line-labels-stroked/index.html index 4cc56c042a..8cac6f89c0 100644 --- a/docs/docs/examples/plot-line-labels-stroked/index.html +++ b/docs/docs/examples/plot-line-labels-stroked/index.html @@ -5,32 +5,32 @@ Plot / Line / Labels/ Stroked | H2O Wave - - - - - - - - - - + + + + + + + + + +
      -

      Plot / Line / Labels/ Stroked

      Customize label rendering: add a subtle outline to labels to improve readability.

      from synth import FakeTimeSeries
      from h2o_wave import site, data, ui
      +

      Plot / Line / Labels/ Stroked

      Customize label rendering: add a subtle outline to labels to improve readability.

      from synth import FakeTimeSeries
      from h2o_wave import site, data, ui
      page = site['/demo']
      n = 50
      f = FakeTimeSeries()
      v = page.add('example', ui.plot_card(
      box='1 1 4 5',
      title='Labels, less messy',
      data=data('date price', n),
      plot=ui.plot([ui.mark(type='line', x_scale='time', x='=date', y='=price', y_min=0,
      label='=${{intl price minimum_fraction_digits=2 maximum_fraction_digits=2}}',
      label_fill_color='rgba(0,0,0,0.65)', label_stroke_color='#fff', label_stroke_size=2)])
      ))
      v.data = [(t, x) for t, x, dx in [f.next() for _ in range(n)]]
      page.save()
      Edit this page
      - - - - - - - - - - + + + + + + + + + + \ No newline at end of file diff --git a/docs/docs/examples/plot-line-labels/index.html b/docs/docs/examples/plot-line-labels/index.html index 4c83deebf7..d055fd6d2f 100644 --- a/docs/docs/examples/plot-line-labels/index.html +++ b/docs/docs/examples/plot-line-labels/index.html @@ -5,32 +5,32 @@ Plot / Line / Labels | H2O Wave - - - - - - - - - - + + + + + + + + + +
      -

      Plot / Line / Labels

      Add labels to a line plot.

      from synth import FakeTimeSeries
      from h2o_wave import site, data, ui
      +

      Plot / Line / Labels

      Add labels to a line plot.

      from synth import FakeTimeSeries
      from h2o_wave import site, data, ui
      page = site['/demo']
      n = 50
      f = FakeTimeSeries()
      v = page.add('example', ui.plot_card(
      box='1 1 4 5',
      title='Labels',
      data=data('date price', n),
      plot=ui.plot([ui.mark(type='line', x_scale='time', x='=date', y='=price', y_min=0,
      label='=${{intl price minimum_fraction_digits=2 maximum_fraction_digits=2}}')])
      ))
      v.data = [(t, x) for t, x, dx in [f.next() for _ in range(n)]]
      page.save()
      Edit this page
      - - - - - - - - - - + + + + + + + + + + \ No newline at end of file diff --git a/docs/docs/examples/plot-line-smooth/index.html b/docs/docs/examples/plot-line-smooth/index.html index 885846445e..769952b7c8 100644 --- a/docs/docs/examples/plot-line-smooth/index.html +++ b/docs/docs/examples/plot-line-smooth/index.html @@ -5,32 +5,32 @@ Plot / Line / Smooth | H2O Wave - - - - - - - - - - + + + + + + + + + +
      -

      Plot / Line / Smooth

      Make a line plot using a smooth curve.

      from synth import FakeTimeSeries
      from h2o_wave import site, data, ui
      +

      Plot / Line / Smooth

      Make a line plot using a smooth curve.

      from synth import FakeTimeSeries
      from h2o_wave import site, data, ui
      page = site['/demo']
      n = 50
      f = FakeTimeSeries()
      v = page.add('example', ui.plot_card(
      box='1 1 4 5',
      title='Line, smooth',
      data=data('date price', n),
      plot=ui.plot([ui.mark(type='line', x_scale='time', x='=date', y='=price', curve='smooth', y_min=0)])
      ))
      v.data = [(t, x) for t, x, dx in [f.next() for _ in range(n)]]
      page.save()
      Edit this page
      - - - - - - - - - - + + + + + + + + + + \ No newline at end of file diff --git a/docs/docs/examples/plot-line/index.html b/docs/docs/examples/plot-line/index.html index 2bc30fae6a..39fd72c21f 100644 --- a/docs/docs/examples/plot-line/index.html +++ b/docs/docs/examples/plot-line/index.html @@ -5,32 +5,32 @@ Plot / Line | H2O Wave - - - - - - - - - - + + + + + + + + + +
      -

      Plot / Line

      Make a line plot.

      from synth import FakeTimeSeries
      from h2o_wave import site, data, ui
      +

      Plot / Line

      Make a line plot.

      from synth import FakeTimeSeries
      from h2o_wave import site, data, ui
      page = site['/demo']
      n = 50
      f = FakeTimeSeries()
      v = page.add('example', ui.plot_card(
      box='1 1 4 5',
      title='Line',
      data=data('date price', n),
      plot=ui.plot([ui.mark(type='line', x_scale='time', x='=date', y='=price', y_min=0)])
      ))
      v.data = [(t, x) for t, x, dx in [f.next() for _ in range(n)]]
      page.save()
      Edit this page
      - - - - - - - - - - + + + + + + + + + + \ No newline at end of file diff --git a/docs/docs/examples/plot-matplotlib/index.html b/docs/docs/examples/plot-matplotlib/index.html index 7767e3a734..238347f496 100644 --- a/docs/docs/examples/plot-matplotlib/index.html +++ b/docs/docs/examples/plot-matplotlib/index.html @@ -5,24 +5,24 @@ Plot / Matplotlib | H2O Wave - - - - - - - - - - + + + + + + + + + +
      -

      Plot / Matplotlib

      Use matplotlib to create plots. Also demonstrates how to provide live control over plots.

      import uuid
      import os
      import numpy as np
      import matplotlib.pyplot as plt
      -
      from h2o_wave import ui, listen, Q
      +

      Plot / Matplotlib

      Use matplotlib to create plots. Also demonstrates how to provide live control over plots.

      import uuid
      import os
      import numpy as np
      import matplotlib.pyplot as plt
      +
      from h2o_wave import ui, main, app, Q
      np.random.seed(19680801)
      -
      async def serve(q: Q):
      if not q.client.initialized: # First visit
      q.client.initialized = True
      q.client.points = 25
      q.client.alpha = 50
      +
      @app('/demo')
      async def serve(q: Q):
      if not q.client.initialized: # First visit
      q.client.initialized = True
      q.client.points = 25
      q.client.alpha = 50
      q.page['controls'] = ui.form_card(
      box='1 1 2 3',
      items=[
      ui.text_xl("Lets make some plots"),
      ui.slider(name='points', label='Points', min=5, max=50, step=1, value=q.client.points, trigger=True),
      ui.slider(name='alpha', label='Alpha', min=5, max=100, step=1, value=q.client.alpha, trigger=True),
      ]
      )
      q.page['plot'] = ui.markdown_card(box='3 1 2 3', title='Your plot!', content='')
      if q.args.points:
      q.client.points = q.args.points
      if q.args.alpha:
      q.client.alpha = q.args.alpha
      @@ -31,18 +31,16 @@
      # Upload
      image_path, = await q.site.upload([image_filename])
      # Clean up
      os.remove(image_filename)
      # Display our plot in our markdown card
      q.page['plot'].content = f'![plot]({image_path})'
      -
      # Save page
      await q.page.save()
      -
      -
      listen('/demo', serve)
      Edit this page
      - - - - - - - - - - +
      # Save page
      await q.page.save()
      Edit this page
      + + + + + + + + + + \ No newline at end of file diff --git a/docs/docs/examples/plot-path-point/index.html b/docs/docs/examples/plot-path-point/index.html index fa27bfad80..97483badce 100644 --- a/docs/docs/examples/plot-path-point/index.html +++ b/docs/docs/examples/plot-path-point/index.html @@ -5,32 +5,32 @@ Plot / Path / Point | H2O Wave - - - - - - - - - - + + + + + + + + + +
      -

      Plot / Path / Point

      Make a path plot with an additional layer of points.

      from synth import FakeScatter
      from h2o_wave import site, data, ui
      +

      Plot / Path / Point

      Make a path plot with an additional layer of points.

      from synth import FakeScatter
      from h2o_wave import site, data, ui
      page = site['/demo']
      n = 50
      f = FakeScatter()
      v = page.add('example', ui.plot_card(
      box='1 1 4 5',
      title='Path + Point',
      data=data('profit sales', n),
      plot=ui.plot([
      ui.mark(type='path', x='=profit', y='=sales'),
      ui.mark(type='point', x='=profit', y='=sales'),
      ])
      ))
      v.data = [(x, y) for x, y in [f.next() for _ in range(n)]]
      page.save()
      Edit this page
      - - - - - - - - - - + + + + + + + + + + \ No newline at end of file diff --git a/docs/docs/examples/plot-path-smooth/index.html b/docs/docs/examples/plot-path-smooth/index.html index b535eef985..e013c47000 100644 --- a/docs/docs/examples/plot-path-smooth/index.html +++ b/docs/docs/examples/plot-path-smooth/index.html @@ -5,32 +5,32 @@ Plot / Path / Smooth | H2O Wave - - - - - - - - - - + + + + + + + + + +
      -

      Plot / Path / Smooth

      Make a path plot with a smooth curve.

      from synth import FakeScatter
      from h2o_wave import site, data, ui
      +

      Plot / Path / Smooth

      Make a path plot with a smooth curve.

      from synth import FakeScatter
      from h2o_wave import site, data, ui
      page = site['/demo']
      n = 50
      f = FakeScatter()
      v = page.add('example', ui.plot_card(
      box='1 1 4 5',
      title='Path, smooth',
      data=data('profit sales', n),
      plot=ui.plot([ui.mark(type='path', x='=profit', y='=sales', curve='smooth')])
      ))
      v.data = [(x, y) for x, y in [f.next() for _ in range(n)]]
      page.save()
      Edit this page
      - - - - - - - - - - + + + + + + + + + + \ No newline at end of file diff --git a/docs/docs/examples/plot-path/index.html b/docs/docs/examples/plot-path/index.html index 658936543c..e26bddb6e9 100644 --- a/docs/docs/examples/plot-path/index.html +++ b/docs/docs/examples/plot-path/index.html @@ -5,32 +5,32 @@ Plot / Path | H2O Wave - - - - - - - - - - + + + + + + + + + +
      -

      Plot / Path

      Make a path plot.

      from synth import FakeScatter
      from h2o_wave import site, data, ui
      +

      Plot / Path

      Make a path plot.

      from synth import FakeScatter
      from h2o_wave import site, data, ui
      page = site['/demo']
      n = 50
      f = FakeScatter()
      v = page.add('example', ui.plot_card(
      box='1 1 4 5',
      title='Path',
      data=data('profit sales', n),
      plot=ui.plot([ui.mark(type='path', x='=profit', y='=sales')])
      ))
      v.data = [(x, y) for x, y in [f.next() for _ in range(n)]]
      page.save()
      Edit this page
      - - - - - - - - - - + + + + + + + + + + \ No newline at end of file diff --git a/docs/docs/examples/plot-plotly/index.html b/docs/docs/examples/plot-plotly/index.html index da3968b174..5602bf6e82 100644 --- a/docs/docs/examples/plot-plotly/index.html +++ b/docs/docs/examples/plot-plotly/index.html @@ -5,42 +5,40 @@ Plot / Plotly | H2O Wave - - - - - - - - - - + + + + + + + + + +
      -

      Plot / Plotly

      Use plotly to create plots. Also demonstrates how to provide live control over plots.

      import numpy as np
      from plotly import graph_objects as go
      from plotly import io as pio
      -
      from h2o_wave import ui, listen, Q
      +

      Plot / Plotly

      Use plotly to create plots. Also demonstrates how to provide live control over plots.

      import numpy as np
      from plotly import graph_objects as go
      from plotly import io as pio
      +
      from h2o_wave import ui, main, app, Q
      np.random.seed(19680801)
      -
      async def serve(q: Q):
      if not q.client.initialized: # First visit
      q.client.initialized = True
      q.client.points = 25
      q.client.plotly_controls = False
      +
      @app('/demo')
      async def serve(q: Q):
      if not q.client.initialized: # First visit
      q.client.initialized = True
      q.client.points = 25
      q.client.plotly_controls = False
      q.page['controls'] = ui.form_card(
      box='1 1 4 2',
      items=[
      ui.slider(name='points', label='Points', min=5, max=50, step=1, value=q.client.points, trigger=True),
      ui.toggle(name='plotly_controls', label='Plotly Controls', trigger=True),
      ]
      )
      q.page['plot'] = ui.frame_card(box='1 3 4 5', title='', content='')
      if q.args.points:
      q.client.points = q.args.points
      if q.args.plotly_controls is not None:
      q.client.plotly_controls = q.args.plotly_controls
      n = q.client.points
      # Create plot with plotly
      fig = go.Figure(data=go.Scatter(
      x=np.random.rand(n),
      y=np.random.rand(n),
      mode='markers',
      marker=dict(size=(8 * np.random.rand(n)) ** 2,
      color=np.random.rand(n)),
      opacity=0.8,
      ))
      _ = fig.update_layout(
      width=4 * 134 - 10,
      height=5 * 76 - 10,
      margin=dict(l=10, r=10, t=10, b=10),
      paper_bgcolor='rgb(255, 255, 255)',
      plot_bgcolor='rgb(255, 255, 255)',
      )
      config = {'scrollZoom': q.client.plotly_controls,
      'showLink': q.client.plotly_controls,
      'displayModeBar': q.client.plotly_controls}
      html = pio.to_html(fig, validate=False, include_plotlyjs='cdn', config=config)
      q.page['plot'].content = html
      -
      # Save page
      await q.page.save()
      -
      -
      listen('/demo', serve)
      Edit this page
      - - - - - - - - - - +
      # Save page
      await q.page.save()
      Edit this page
      + + + + + + + + + + \ No newline at end of file diff --git a/docs/docs/examples/plot-point-annotation/index.html b/docs/docs/examples/plot-point-annotation/index.html index 61a1160fa9..f49f7ef14a 100644 --- a/docs/docs/examples/plot-point-annotation/index.html +++ b/docs/docs/examples/plot-point-annotation/index.html @@ -5,32 +5,32 @@ Plot / Point / Annotation | H2O Wave - - - - - - - - - - + + + + + + + + + +
      -

      Plot / Point / Annotation

      Add annotations (points, lines and regions) to a plot.

      from synth import FakeScatter
      from h2o_wave import site, data, ui
      +

      Plot / Point / Annotation

      Add annotations (points, lines and regions) to a plot.

      from synth import FakeScatter
      from h2o_wave import site, data, ui
      page = site['/demo']
      n = 50
      f = FakeScatter()
      v = page.add('example', ui.plot_card(
      box='1 1 4 5',
      title='Numeric-Numeric',
      data=data('price performance', n),
      plot=ui.plot([
      ui.mark(type='point', x='=price', y='=performance', x_min=0, x_max=100, y_min=0, y_max=100), # the plot
      ui.mark(x=50, y=50, label='point'), # A single reference point
      ui.mark(x=40, label='vertical line'),
      ui.mark(y=40, label='horizontal line'),
      ui.mark(x=70, x0=60, label='vertical region'),
      ui.mark(y=70, y0=60, label='horizontal region'),
      ui.mark(x=30, x0=20, y=30, y0=20, label='rectangular region')
      ])
      ))
      v.data = [f.next() for _ in range(n)]
      page.save()
      Edit this page
      - - - - - - - - - - + + + + + + + + + + \ No newline at end of file diff --git a/docs/docs/examples/plot-point-custom/index.html b/docs/docs/examples/plot-point-custom/index.html index 0db11e423f..e7fdc13cf1 100644 --- a/docs/docs/examples/plot-point-custom/index.html +++ b/docs/docs/examples/plot-point-custom/index.html @@ -5,33 +5,33 @@ Plot / Point / Custom | H2O Wave - - - - - - - - - - + + + + + + + + + +
      -

      Plot / Point / Custom

      Customize a plot's fill/stroke color, size and opacity.

      import random
      +

      Plot / Point / Custom

      Customize a plot's fill/stroke color, size and opacity.

      import random
      from synth import FakeScatter
      from h2o_wave import site, data, ui
      page = site['/demo']
      n = 40
      f = FakeScatter()
      v = page.add('example', ui.plot_card(
      box='1 1 4 5',
      title='Point, custom',
      data=data('price performance discount', n),
      plot=ui.plot([ui.mark(type='point', x='=price', y='=performance', size='=discount', size_range='4 30',
      fill_color='#eb4559', stroke_color='#eb4559', stroke_size=1, fill_opacity=0.3,
      stroke_opacity=1)])
      ))
      v.data = [(x, y, random.randint(1, 10)) for x, y in [f.next() for _ in range(n)]]
      page.save()
      Edit this page
      - - - - - - - - - - + + + + + + + + + + \ No newline at end of file diff --git a/docs/docs/examples/plot-point-groups/index.html b/docs/docs/examples/plot-point-groups/index.html index 3fae68a600..85c108e4ad 100644 --- a/docs/docs/examples/plot-point-groups/index.html +++ b/docs/docs/examples/plot-point-groups/index.html @@ -5,35 +5,35 @@ Plot / Point / Groups | H2O Wave - - - - - - - - - - + + + + + + + + + +
      -

      Plot / Point / Groups

      Make a scatterplot with categories encoded as colors.

      from synth import FakeScatter
      from h2o_wave import site, data, ui
      +

      Plot / Point / Groups

      Make a scatterplot with categories encoded as colors.

      from synth import FakeScatter
      from h2o_wave import site, data, ui
      page = site['/demo']
      def create_fake_row(g, f, n):
      return [(g, x, y) for x, y in [f.next() for _ in range(n)]]
      n = 30
      f1, f2, f3 = FakeScatter(), FakeScatter(), FakeScatter()
      v = page.add('example', ui.plot_card(
      box='1 1 4 5',
      title='Point, groups',
      data=data('product price performance', n * 3),
      plot=ui.plot([ui.mark(type='point', x='=price', y='=performance', color='=product', shape='circle')])
      ))
      v.data = create_fake_row('G1', f1, n) + create_fake_row('G2', f1, n) + create_fake_row('G3', f1, n)
      page.save()
      Edit this page
      - - - - - - - - - - + + + + + + + + + + \ No newline at end of file diff --git a/docs/docs/examples/plot-point-map/index.html b/docs/docs/examples/plot-point-map/index.html index f2dc807875..259b7f2980 100644 --- a/docs/docs/examples/plot-point-map/index.html +++ b/docs/docs/examples/plot-point-map/index.html @@ -5,32 +5,32 @@ Plot / Point / Map | H2O Wave - - - - - - - - - - + + + + + + + + + +
      -

      Plot / Point / Map

      Make a plot to compare quantities across categories. Similar to a heatmap, but using size-encoding instead of color-encoding.

      from synth import FakeSeries
      from h2o_wave import site, data, ui
      +

      Plot / Point / Map

      Make a plot to compare quantities across categories. Similar to a heatmap, but using size-encoding instead of color-encoding.

      from synth import FakeSeries
      from h2o_wave import site, data, ui
      page = site['/demo']
      k1, k2 = 20, 10
      f = FakeSeries()
      v = page.add('example', ui.plot_card(
      box='1 1 4 5',
      title='Points, size-encoded',
      data=data('country product profit', k1 * k2),
      plot=ui.plot([ui.mark(type='point', x='=country', y='=product', size='=profit', shape='circle')])
      ))
      rows = []
      for i in range(k1):
      for j in range(k2):
      x, dx = f.next()
      rows.append((f'A{i + 1}', f'B{j + 1}', x))
      v.data = rows
      page.save()
      Edit this page
      - - - - - - - - - - + + + + + + + + + + \ No newline at end of file diff --git a/docs/docs/examples/plot-point-shapes/index.html b/docs/docs/examples/plot-point-shapes/index.html index 15eb02768f..ff6f7f5c44 100644 --- a/docs/docs/examples/plot-point-shapes/index.html +++ b/docs/docs/examples/plot-point-shapes/index.html @@ -5,35 +5,35 @@ Plot / Point / Shapes | H2O Wave - - - - - - - - - - + + + + + + + + + +
      -

      Plot / Point / Shapes

      Make a scatterplot with categories encoded as mark shapes.

      from synth import FakeScatter
      from h2o_wave import site, data, ui
      +

      Plot / Point / Shapes

      Make a scatterplot with categories encoded as mark shapes.

      from synth import FakeScatter
      from h2o_wave import site, data, ui
      page = site['/demo']
      def create_fake_row(g, f, n):
      return [(g, x, y) for x, y in [f.next() for _ in range(n)]]
      n = 30
      f1, f2 = FakeScatter(), FakeScatter()
      v = page.add('example', ui.plot_card(
      box='1 1 4 5',
      title='Point, shapes',
      data=data('product price performance', n * 2),
      plot=ui.plot([ui.mark(type='point', x='=price', y='=performance', shape='=product', shape_range='circle square')])
      ))
      v.data = create_fake_row('G1', f1, n) + create_fake_row('G2', f1, n)
      page.save()
      Edit this page
      - - - - - - - - - - + + + + + + + + + + \ No newline at end of file diff --git a/docs/docs/examples/plot-point-sizes/index.html b/docs/docs/examples/plot-point-sizes/index.html index 32112ac8fe..815bd1d996 100644 --- a/docs/docs/examples/plot-point-sizes/index.html +++ b/docs/docs/examples/plot-point-sizes/index.html @@ -5,33 +5,33 @@ Plot / Point / Sizes | H2O Wave - - - - - - - - - - + + + + + + + + + +
      -

      Plot / Point / Sizes

      Make a scatterplot with mark sizes mapped to a continuous variable (a "bubble plot").

      import random
      +

      Plot / Point / Sizes

      Make a scatterplot with mark sizes mapped to a continuous variable (a "bubble plot").

      import random
      from synth import FakeScatter
      from h2o_wave import site, data, ui
      page = site['/demo']
      n = 40
      f = FakeScatter()
      v = page.add('example', ui.plot_card(
      box='1 1 4 5',
      title='Point, sized',
      data=data('price performance discount', n),
      plot=ui.plot([ui.mark(type='point', x='=price', y='=performance', size='=discount')])
      ))
      v.data = [(x, y, random.randint(1, 10)) for x, y in [f.next() for _ in range(n)]]
      page.save()
      Edit this page
      - - - - - - - - - - + + + + + + + + + + \ No newline at end of file diff --git a/docs/docs/examples/plot-point/index.html b/docs/docs/examples/plot-point/index.html index b47df35d0f..3fc7a4fc3a 100644 --- a/docs/docs/examples/plot-point/index.html +++ b/docs/docs/examples/plot-point/index.html @@ -5,32 +5,32 @@ Plot / Point | H2O Wave - - - - - - - - - - + + + + + + + + + +
      -

      Plot / Point

      Make a scatterplot.

      from synth import FakeScatter
      from h2o_wave import site, data, ui
      +

      Plot / Point

      Make a scatterplot.

      from synth import FakeScatter
      from h2o_wave import site, data, ui
      page = site['/demo']
      n = 50
      f = FakeScatter()
      v = page.add('example', ui.plot_card(
      box='1 1 4 5',
      title='Point',
      data=data('price performance', n),
      plot=ui.plot([
      ui.mark(type='point', x='=price', y='=performance')
      ])
      ))
      v.data = [f.next() for i in range(n)]
      page.save()
      Edit this page
      - - - - - - - - - - + + + + + + + + + + \ No newline at end of file diff --git a/docs/docs/examples/plot-polygon/index.html b/docs/docs/examples/plot-polygon/index.html index 73fa376bed..4cc4e1b93d 100644 --- a/docs/docs/examples/plot-polygon/index.html +++ b/docs/docs/examples/plot-polygon/index.html @@ -5,32 +5,32 @@ Plot / Polygon | H2O Wave - - - - - - - - - - + + + + + + + + + +
      -

      Plot / Polygon

      Make a heatmap.

      from synth import FakeSeries
      from h2o_wave import site, data, ui
      +

      Plot / Polygon

      Make a heatmap.

      from synth import FakeSeries
      from h2o_wave import site, data, ui
      page = site['/demo']
      k1, k2 = 20, 10
      f = FakeSeries()
      v = page.add('example', ui.plot_card(
      box='1 1 4 5',
      title='Heatmap',
      data=data('country product profit', k1 * k2),
      plot=ui.plot([
      ui.mark(type='polygon', x='=country', y='=product', color='=profit',
      color_range='#fee8c8 #fdbb84 #e34a33')])
      ))
      rows = []
      for i in range(k1):
      for j in range(k2):
      x, dx = f.next()
      rows.append((f'A{i + 1}', f'B{j + 1}', x))
      v.data = rows
      page.save()
      Edit this page
      - - - - - - - - - - + + + + + + + + + + \ No newline at end of file diff --git a/docs/docs/examples/plot-step-after/index.html b/docs/docs/examples/plot-step-after/index.html index 97d927ee3d..ede7d9daf3 100644 --- a/docs/docs/examples/plot-step-after/index.html +++ b/docs/docs/examples/plot-step-after/index.html @@ -5,32 +5,32 @@ Plot / Line / Step / After | H2O Wave - - - - - - - - - - + + + + + + + + + +
      -

      Plot / Line / Step / After

      Make a line plot with a step-after curve.

      from synth import FakeTimeSeries
      from h2o_wave import site, data, ui
      +

      Plot / Line / Step / After

      Make a line plot with a step-after curve.

      from synth import FakeTimeSeries
      from h2o_wave import site, data, ui
      page = site['/demo']
      n = 50
      f = FakeTimeSeries()
      v = page.add('example', ui.plot_card(
      box='1 1 4 5',
      title='Line, step-right',
      data=data('date price', n),
      plot=ui.plot([ui.mark(type='line', x_scale='time', x='=date', y='=price', curve='step-after', y_min=0)])
      ))
      v.data = [(t, x) for t, x, dx in [f.next() for _ in range(n)]]
      page.save()
      Edit this page
      - - - - - - - - - - + + + + + + + + + + \ No newline at end of file diff --git a/docs/docs/examples/plot-step-before/index.html b/docs/docs/examples/plot-step-before/index.html index 02297bca61..867457f5f5 100644 --- a/docs/docs/examples/plot-step-before/index.html +++ b/docs/docs/examples/plot-step-before/index.html @@ -5,32 +5,32 @@ Plot / Line / Step / Before | H2O Wave - - - - - - - - - - + + + + + + + + + +
      -

      Plot / Line / Step / Before

      Make a line plot with a step-before curve.

      from synth import FakeTimeSeries
      from h2o_wave import site, data, ui
      +

      Plot / Line / Step / Before

      Make a line plot with a step-before curve.

      from synth import FakeTimeSeries
      from h2o_wave import site, data, ui
      page = site['/demo']
      n = 50
      f = FakeTimeSeries()
      v = page.add('example', ui.plot_card(
      box='1 1 4 5',
      title='Line, step-left',
      data=data('date price', n),
      plot=ui.plot([ui.mark(type='line', x_scale='time', x='=date', y='=price', curve='step-before', y_min=0)])
      ))
      v.data = [(t, x) for t, x, dx in [f.next() for _ in range(n)]]
      page.save()
      Edit this page
      - - - - - - - - - - + + + + + + + + + + \ No newline at end of file diff --git a/docs/docs/examples/plot-step/index.html b/docs/docs/examples/plot-step/index.html index 50e5618c3e..42d4f86ffc 100644 --- a/docs/docs/examples/plot-step/index.html +++ b/docs/docs/examples/plot-step/index.html @@ -5,33 +5,33 @@ Plot / Line / Step | H2O Wave - - - - - - - - - - + + + + + + + + + +
      -

      Plot / Line / Step

      Make a line plot with a step curve.

      from synth import FakeTimeSeries
      from h2o_wave import site, data, ui
      +

      Plot / Line / Step

      Make a line plot with a step curve.

      from synth import FakeTimeSeries
      from h2o_wave import site, data, ui
      page = site['/demo']
      n = 50
      f = FakeTimeSeries()
      v = page.add('example', ui.plot_card(
      box='1 1 4 5',
      title='Line, step',
      data=data('date price', n),
      plot=ui.plot([ui.mark(type='line', x_scale='time', x='=date', y='=price', curve='step', y_min=0)])
      ))
      v.data = [(t, x) for t, x, dx in [f.next() for _ in range(n)]]
      page.save()
      Edit this page
      - - - - - - - - - - + + + + + + + + + + \ No newline at end of file diff --git a/docs/docs/examples/plot-vegalite-form/index.html b/docs/docs/examples/plot-vegalite-form/index.html index 891e45127d..6e7f243067 100644 --- a/docs/docs/examples/plot-vegalite-form/index.html +++ b/docs/docs/examples/plot-vegalite-form/index.html @@ -5,20 +5,20 @@ Plot / Vega-lite / Form | H2O Wave - - - - - - - - - - + + + + + + + + + +
      -

      Plot / Vega-lite / Form

      Display a Vega-lite plot inside a form card

      from h2o_wave import site, data, ui
      import random
      import time
      +

      Plot / Vega-lite / Form

      Display a Vega-lite plot inside a form card

      from h2o_wave import site, data, ui
      import random
      import time
      page = site['/demo']
      spec = '''
      {
      "description": "A simple bar plot with embedded data.",
      "mark": "bar",
      "encoding": {
      "x": {"field": "a", "type": "ordinal"},
      "y": {"field": "b", "type": "quantitative"}
      }
      }
      '''
      @@ -28,15 +28,15 @@
      page['example'] = ui.form_card(
      box='1 1 2 -1',
      items=[
      ui.text_xl('Example 1'),
      ui.vega_visualization(
      specification=spec,
      data=data(fields=["a", "b"], rows=poll(), pack=True),
      ),
      ui.text_xl('Example 2'),
      ui.vega_visualization(
      specification=spec,
      data=data(fields=["a", "b"], rows=poll(), pack=True),
      ),
      ui.text_xl('Example 3'),
      ui.vega_visualization(
      specification=spec,
      data=data(fields=["a", "b"], rows=poll(), pack=True),
      ),
      ],
      )
      page.save()
      Edit this page
      - - - - - - - - - - + + + + + + + + + + \ No newline at end of file diff --git a/docs/docs/examples/plot-vegalite-update/index.html b/docs/docs/examples/plot-vegalite-update/index.html index 5e4cc9b176..5c8639240e 100644 --- a/docs/docs/examples/plot-vegalite-update/index.html +++ b/docs/docs/examples/plot-vegalite-update/index.html @@ -5,20 +5,20 @@ Plot / Vega-lite / Update | H2O Wave - - - - - - - - - - + + + + + + + + + +
      -

      Plot / Vega-lite / Update

      Periodically update a Vega-lite plot.

      from h2o_wave import site, data, ui
      import random
      import time
      +

      Plot / Vega-lite / Update

      Periodically update a Vega-lite plot.

      from h2o_wave import site, data, ui
      import random
      import time
      page = site['/demo']
      spec = '''
      {
      "description": "A simple bar plot with embedded data.",
      "mark": "bar",
      "encoding": {
      "x": {"field": "a", "type": "ordinal"},
      "y": {"field": "b", "type": "quantitative"}
      }
      }
      '''
      @@ -29,15 +29,15 @@
      vis = page.add('external', ui.vega_card(
      box='1 1 2 4',
      title='Plot with external data',
      specification=spec,
      data=data(fields=["a", "b"], rows=poll()),
      ))
      page.save()
      while True:
      time.sleep(1)
      # Update the plot's data rows
      vis.data = poll()
      page.save()
      Edit this page
      - - - - - - - - - - + + + + + + + + + + \ No newline at end of file diff --git a/docs/docs/examples/plot-vegalite/index.html b/docs/docs/examples/plot-vegalite/index.html index 7768db3ef8..883af9dcea 100644 --- a/docs/docs/examples/plot-vegalite/index.html +++ b/docs/docs/examples/plot-vegalite/index.html @@ -5,20 +5,20 @@ Plot / Vega-lite | H2O Wave - - - - - - - - - - + + + + + + + + + +
      -

      Plot / Vega-lite

      Make a plot using Vega-lite.

      from h2o_wave import site, data, ui
      +

      Plot / Vega-lite

      Make a plot using Vega-lite.

      from h2o_wave import site, data, ui
      page = site['/demo']
      spec1 = '''
      {
      "description": "A simple bar plot with embedded data.",
      "data": {
      "values": [
      {"a": "A","b": 28}, {"a": "B","b": 55}, {"a": "C","b": 43},
      {"a": "D","b": 91}, {"a": "E","b": 81}, {"a": "F","b": 53},
      {"a": "G","b": 19}, {"a": "H","b": 87}, {"a": "I","b": 52}
      ]
      },
      "mark": "bar",
      "encoding": {
      "x": {"field": "a", "type": "ordinal"},
      "y": {"field": "b", "type": "quantitative"}
      }
      }
      '''
      page.add('embedded', ui.vega_card(
      box='1 1 2 4',
      title='Plot with embedded data',
      specification=spec1,
      ))
      @@ -26,15 +26,15 @@
      data2 = data(fields=["a", "b"], rows=[
      ["A", 28], ["B", 55], ["C", 43],
      ["D", 91], ["E", 81], ["F", 53],
      ["G", 19], ["H", 87], ["I", 52]
      ])
      page.add('external', ui.vega_card(
      box='1 5 2 4',
      title='Plot with external data',
      specification=spec2,
      data=data2,
      ))
      page.save()
      Edit this page
      - - - - - - - - - - + + + + + + + + + + \ No newline at end of file diff --git a/docs/docs/examples/progress-update/index.html b/docs/docs/examples/progress-update/index.html index b84935d5c7..fdd3775522 100644 --- a/docs/docs/examples/progress-update/index.html +++ b/docs/docs/examples/progress-update/index.html @@ -5,35 +5,35 @@ Form / Progress / Updating | H2O Wave - - - - - - - - - - + + + + + + + + + +
      -

      Form / Progress / Updating

      Update a progress bar's completion status periodically.

      import time
      +

      Form / Progress / Updating

      Update a progress bar's completion status periodically.

      import time
      from h2o_wave import site, ui
      page = site['/demo']
      page['example'] = ui.form_card(
      box='1 1 4 -1',
      items=[
      ui.progress(label='Basic Progress'),
      ]
      )
      page.save()
      for i in range(1, 11):
      time.sleep(1)
      page['example'].items = [
      ui.progress(label='Basic Progress', caption=f'{i * 10}% complete', value=i / 10),
      ]
      # This will work, too:
      # page['example'].items[0].progress.value = i/10
      page.save()
      Edit this page
      - - - - - - - - - - + + + + + + + + + + \ No newline at end of file diff --git a/docs/docs/examples/progress/index.html b/docs/docs/examples/progress/index.html index a973a9e040..81f9bf1d17 100644 --- a/docs/docs/examples/progress/index.html +++ b/docs/docs/examples/progress/index.html @@ -5,31 +5,31 @@ Form / Progress | H2O Wave - - - - - - - - - - + + + + + + + + + +
      -

      Form / Progress

      Use a progress bar to indicate completion status of an operation.

      from h2o_wave import site, ui
      +

      Form / Progress

      Use a progress bar to indicate completion status of an operation.

      from h2o_wave import site, ui
      page = site['/demo']
      page['example'] = ui.form_card(
      box='1 1 4 -1',
      items=[
      ui.progress(label='Indeterminate Progress', caption='Goes on forever'),
      ui.progress(label='Standard Progress', caption='Downloading the interwebs...', value=0.25),
      ]
      )
      page.save()
      Edit this page
      - - - - - - - - - - + + + + + + + + + + \ No newline at end of file diff --git a/docs/docs/examples/range-slider/index.html b/docs/docs/examples/range-slider/index.html index 4883f190ae..98158a307f 100644 --- a/docs/docs/examples/range-slider/index.html +++ b/docs/docs/examples/range-slider/index.html @@ -5,33 +5,31 @@ Form / Range Slider | H2O Wave - - - - - - - - - - + + + + + + + + + +
      -

      Form / Range Slider

      Use a range slider to allow users to select a value range (from, to).

      from h2o_wave import Q, listen, ui
      +

      Form / Range Slider

      Use a range slider to allow users to select a value range (from, to).

      from h2o_wave import main, app, Q, ui
      -
      async def serve(q: Q):
      if q.args.show_inputs:
      q.page['example'].items = [
      ui.text(f'range_slider={q.args.range_slider}'),
      ui.text(f'range_slider_step={q.args.range_slider_step}'),
      ui.text(f'range_slider_disabled={q.args.range_slider_disabled}'),
      ui.button(name='show_form', label='Back', primary=True),
      ]
      else:
      q.page['example'] = ui.form_card(box='1 1 4 10', items=[
      ui.range_slider(name='range_slider', label='Default slider'),
      ui.range_slider(name='range_slider_step', label='Step slider', min=0, max=1000, step=100, min_value=0, max_value=100),
      ui.range_slider(name='range_slider_disabled', label='Disabled slider', min=0, max=100, step=10, min_value=0,
      max_value=70, disabled=True),
      ui.button(name='show_inputs', label='Submit', primary=True),
      ])
      await q.page.save()
      -
      -
      listen('/demo', serve)
      Edit this page
      - - - - - - - - - - +
      @app('/demo')
      async def serve(q: Q):
      if q.args.show_inputs:
      q.page['example'].items = [
      ui.text(f'range_slider={q.args.range_slider}'),
      ui.text(f'range_slider_step={q.args.range_slider_step}'),
      ui.text(f'range_slider_disabled={q.args.range_slider_disabled}'),
      ui.button(name='show_form', label='Back', primary=True),
      ]
      else:
      q.page['example'] = ui.form_card(box='1 1 4 10', items=[
      ui.range_slider(name='range_slider', label='Default slider'),
      ui.range_slider(name='range_slider_step', label='Step slider', min=0, max=1000, step=100, min_value=0,
      max_value=100),
      ui.range_slider(name='range_slider_disabled', label='Disabled slider', min=0, max=100, step=10, min_value=0,
      max_value=70, disabled=True),
      ui.button(name='show_inputs', label='Submit', primary=True),
      ])
      await q.page.save()
      Edit this page
      + + + + + + + + + + \ No newline at end of file diff --git a/docs/docs/examples/separator/index.html b/docs/docs/examples/separator/index.html index e76cb7de61..b2e165c960 100644 --- a/docs/docs/examples/separator/index.html +++ b/docs/docs/examples/separator/index.html @@ -5,32 +5,32 @@ Form / Separator | H2O Wave - - - - - - - - - - + + + + + + + + + +
      -

      Form / Separator

      Use a separator to visually separate content into groups.

      from h2o_wave import site, ui
      +

      Form / Separator

      Use a separator to visually separate content into groups.

      from h2o_wave import site, ui
      page = site['/demo']
      page['example'] = ui.form_card(
      box='1 1 2 5',
      items=[
      ui.separator(label='Separator 1'),
      ui.text('The quick brown fox jumps over the lazy dog.'),
      ui.separator(label='Separator 2'),
      ui.text('The quick brown fox jumps over the lazy dog.'),
      ui.separator(label='Separator 3'),
      ui.text('The quick brown fox jumps over the lazy dog.'),
      ]
      )
      page.save()
      Edit this page
      - - - - - - - - - - + + + + + + + + + + \ No newline at end of file diff --git a/docs/docs/examples/site-async/index.html b/docs/docs/examples/site-async/index.html new file mode 100644 index 0000000000..a081c306b5 --- /dev/null +++ b/docs/docs/examples/site-async/index.html @@ -0,0 +1,43 @@ + + + + + + +Site / Async | H2O Wave + + + + + + + + + + + + +
      +

      Site / Async

      Update any page on a site from within an app using an AsyncSite instance.

      from .synth import FakePercent
      from h2o_wave import Q, app, main, ui, AsyncSite
      +
      site = AsyncSite()
      +
      # Grab a reference to the /stats page
      stats_page = site['/stats']
      +
      # A flag to indicate whether to pause or resume updating the page at '/stats'
      update_stats = False
      +
      +
      async def update_stats_page(q, page):
      f = FakePercent()
      card = page['example']
      while update_stats:
      await q.sleep(1)
      price, percent = f.next()
      card.data.price = price
      card.data.percent = percent
      card.progress = percent
      await page.save()
      +
      +
      @app('/demo')
      async def serve(q: Q):
      if not q.client.initialized:
      # Set up up the page at /stats
      stats_page.drop() # Clear any existing page
      stats_page['example'] = ui.wide_gauge_stat_card(
      box='1 1 2 1',
      title='Stats',
      value='=${{intl price minimum_fraction_digits=2 maximum_fraction_digits=2}}',
      aux_value='={{intl percent style="percent" minimum_fraction_digits=2 maximum_fraction_digits=2}}',
      plot_color='$red',
      progress=0,
      data=dict(price=0, percent=0),
      )
      await stats_page.save()
      +
      # Set up this app's UI
      q.page['form'] = ui.form_card(box='1 1 -1 -1', items=[
      ui.frame(path='/stats', height='110px'),
      ui.button(name='toggle', label='Toggle Updates', primary=True),
      ])
      await q.page.save()
      +
      q.client.initialized = True
      +
      if q.args.toggle:
      global update_stats
      update_stats = not update_stats
      await update_stats_page(q, stats_page)
      Edit this page
      + + + + + + + + + + + + \ No newline at end of file diff --git a/docs/docs/examples/slider/index.html b/docs/docs/examples/slider/index.html index fe3efdd604..ba35f7bca5 100644 --- a/docs/docs/examples/slider/index.html +++ b/docs/docs/examples/slider/index.html @@ -5,33 +5,31 @@ Form / Slider | H2O Wave - - - - - - - - - - + + + + + + + + + +
      -

      Form / Slider

      Use a slider to allow users to set a value within a specific range.

      from h2o_wave import Q, listen, ui
      +

      Form / Slider

      Use a slider to allow users to set a value within a specific range.

      from h2o_wave import main, app, Q, ui
      -
      async def serve(q: Q):
      if q.args.show_inputs:
      q.page['example'].items = [
      ui.text(f'slider={q.args.slider}'),
      ui.text(f'slider_zero={q.args.slider_zero}'),
      ui.text(f'slider_disabled={q.args.slider_disabled}'),
      ui.button(name='show_form', label='Back', primary=True),
      ]
      else:
      q.page['example'] = ui.form_card(box='1 1 4 10', items=[
      ui.slider(name='slider', label='Standard slider', min=0, max=100, step=10, value=30),
      ui.slider(name='slider_zero', label='Origin from zero', min=-10, max=10, step=1, value=-3),
      ui.slider(name='slider_disabled', label='Disabled slider', min=0, max=100, step=10, value=30,
      disabled=True),
      ui.button(name='show_inputs', label='Submit', primary=True),
      ])
      await q.page.save()
      -
      -
      listen('/demo', serve)
      Edit this page
      - - - - - - - - - - +
      @app('/demo')
      async def serve(q: Q):
      if q.args.show_inputs:
      q.page['example'].items = [
      ui.text(f'slider={q.args.slider}'),
      ui.text(f'slider_zero={q.args.slider_zero}'),
      ui.text(f'slider_disabled={q.args.slider_disabled}'),
      ui.button(name='show_form', label='Back', primary=True),
      ]
      else:
      q.page['example'] = ui.form_card(box='1 1 4 10', items=[
      ui.slider(name='slider', label='Standard slider', min=0, max=100, step=10, value=30),
      ui.slider(name='slider_zero', label='Origin from zero', min=-10, max=10, step=1, value=-3),
      ui.slider(name='slider_disabled', label='Disabled slider', min=0, max=100, step=10, value=30,
      disabled=True),
      ui.button(name='show_inputs', label='Submit', primary=True),
      ])
      await q.page.save()
      Edit this page
      + + + + + + + + + + \ No newline at end of file diff --git a/docs/docs/examples/spinbox/index.html b/docs/docs/examples/spinbox/index.html index dec59494be..8fc9e7573b 100644 --- a/docs/docs/examples/spinbox/index.html +++ b/docs/docs/examples/spinbox/index.html @@ -5,33 +5,31 @@ Form / Spinbox | H2O Wave - - - - - - - - - - + + + + + + + + + +
      -

      Form / Spinbox

      Use a spinbox to allow users to incrementally adjust a value in small steps.

      from h2o_wave import Q, listen, ui
      +

      Form / Spinbox

      Use a spinbox to allow users to incrementally adjust a value in small steps.

      from h2o_wave import main, app, Q, ui
      -
      async def serve(q: Q):
      if q.args.show_inputs:
      q.page['example'].items = [
      ui.text(f'spinbox={q.args.spinbox}'),
      ui.text(f'spinbox_disabled={q.args.spinbox_disabled}'),
      ui.button(name='show_form', label='Back', primary=True),
      ]
      else:
      q.page['example'] = ui.form_card(box='1 1 4 10', items=[
      ui.spinbox(name='spinbox', label='Standard spinbox', min=0, max=100, step=10, value=30),
      ui.spinbox(name='spinbox_disabled', label='Disabled spinbox', min=0, max=100, step=10, value=30,
      disabled=True),
      ui.button(name='show_inputs', label='Submit', primary=True),
      ])
      await q.page.save()
      -
      -
      listen('/demo', serve)
      Edit this page
      - - - - - - - - - - +
      @app('/demo')
      async def serve(q: Q):
      if q.args.show_inputs:
      q.page['example'].items = [
      ui.text(f'spinbox={q.args.spinbox}'),
      ui.text(f'spinbox_disabled={q.args.spinbox_disabled}'),
      ui.button(name='show_form', label='Back', primary=True),
      ]
      else:
      q.page['example'] = ui.form_card(box='1 1 4 10', items=[
      ui.spinbox(name='spinbox', label='Standard spinbox', min=0, max=100, step=10, value=30),
      ui.spinbox(name='spinbox_disabled', label='Disabled spinbox', min=0, max=100, step=10, value=30,
      disabled=True),
      ui.button(name='show_inputs', label='Submit', primary=True),
      ])
      await q.page.save()
      Edit this page
      + + + + + + + + + + \ No newline at end of file diff --git a/docs/docs/examples/stat-large-bar/index.html b/docs/docs/examples/stat-large-bar/index.html index 6b18086352..c8e3dd1e1b 100644 --- a/docs/docs/examples/stat-large-bar/index.html +++ b/docs/docs/examples/stat-large-bar/index.html @@ -5,34 +5,34 @@ Stat / Bar / Large | H2O Wave - - - - - - - - - - + + + + + + + + + +
      -

      Stat / Bar / Large

      Create a large captioned card displaying a primary value, an auxiliary value and a progress bar, with captions for each value.

      import time
      +

      Stat / Bar / Large

      Create a large captioned card displaying a primary value, an auxiliary value and a progress bar, with captions for each value.

      import time
      from faker import Faker
      from synth import FakePercent
      from h2o_wave import site, ui
      page = site['/demo']
      fake = Faker()
      f = FakePercent()
      val, pc = f.next()
      c = page.add(f'example', ui.large_bar_stat_card(
      box='1 1 2 2',
      title=fake.cryptocurrency_name(),
      value='=${{intl foo minimum_fraction_digits=2 maximum_fraction_digits=2}}',
      value_caption='This Month',
      aux_value='={{intl bar style="percent" minimum_fraction_digits=2 maximum_fraction_digits=2}}',
      aux_value_caption='Previous Month',
      plot_color='$red',
      progress=pc,
      data=dict(foo=val, bar=pc),
      caption=' '.join(fake.sentences(2)),
      ))
      page.save()
      while True:
      time.sleep(1)
      val, pc = f.next()
      c.data.foo = val
      c.data.bar = pc
      c.progress = pc
      page.save()
      Edit this page
      - - - - - - - - - - + + + + + + + + + + \ No newline at end of file diff --git a/docs/docs/examples/stat-large/index.html b/docs/docs/examples/stat-large/index.html index 0aa5d97d10..e255db9c49 100644 --- a/docs/docs/examples/stat-large/index.html +++ b/docs/docs/examples/stat-large/index.html @@ -5,34 +5,34 @@ Stat / Large | H2O Wave - - - - - - - - - - + + + + + + + + + +
      -

      Stat / Large

      Create a stat card displaying a primary value, an auxiliary value and a caption.

      import time
      +

      Stat / Large

      Create a stat card displaying a primary value, an auxiliary value and a caption.

      import time
      from faker import Faker
      from synth import FakePercent
      from h2o_wave import site, ui
      page = site['/demo']
      fake = Faker()
      f = FakePercent()
      val, pc = f.next()
      c = page.add(f'example', ui.large_stat_card(
      box='1 1 2 2',
      title=fake.cryptocurrency_name(),
      value='=${{intl qux minimum_fraction_digits=2 maximum_fraction_digits=2}}',
      aux_value='={{intl quux style="percent" minimum_fraction_digits=1 maximum_fraction_digits=1}}',
      data=dict(qux=val, quux=pc),
      caption=' '.join(fake.sentences()),
      ))
      page.save()
      while True:
      time.sleep(1)
      val, pc = f.next()
      c.data.qux = val
      c.data.quux = pc
      page.save()
      Edit this page
      - - - - - - - - - - + + + + + + + + + + \ No newline at end of file diff --git a/docs/docs/examples/stat-small-series-area/index.html b/docs/docs/examples/stat-small-series-area/index.html index 7f7d3c3f93..0a939ca4cb 100644 --- a/docs/docs/examples/stat-small-series-area/index.html +++ b/docs/docs/examples/stat-small-series-area/index.html @@ -5,34 +5,34 @@ Stat / Series / Small / Area | H2O Wave - - - - - - - - - - + + + + + + + + + +
      -

      Stat / Series / Small / Area

      Create a small stat card displaying a primary value and a series plot.

      import time
      +

      Stat / Series / Small / Area

      Create a small stat card displaying a primary value and a series plot.

      import time
      from faker import Faker
      from synth import FakeCategoricalSeries
      from h2o_wave import site, ui, data
      page = site['/demo']
      colors = '$red $pink $blue $azure $cyan $teal $mint $green $lime $yellow $amber $orange $tangerine'.split()
      curves = 'linear smooth step step-after step-before'.split()
      fake = Faker()
      cards = []
      for i in range(len(curves)):
      f = FakeCategoricalSeries()
      cat, val, pc = f.next()
      c = page.add(f'example{i}', ui.small_series_stat_card(
      box=f'1 {i + 1} 1 1',
      title=fake.cryptocurrency_name(),
      value='=${{intl qux minimum_fraction_digits=2 maximum_fraction_digits=2}}',
      data=dict(qux=val, quux=pc),
      plot_category='foo',
      plot_type='area',
      plot_value='qux',
      plot_color=colors[i],
      plot_data=data('foo qux', -15),
      plot_zero_value=0,
      plot_curve=curves[i],
      ))
      cards.append((f, c))
      page.save()
      while True:
      time.sleep(1)
      for f, c in cards:
      cat, val, pc = f.next()
      c.data.qux = val
      c.data.quux = pc
      c.plot_data[-1] = [cat, val]
      page.save()
      Edit this page
      - - - - - - - - - - + + + + + + + + + + \ No newline at end of file diff --git a/docs/docs/examples/stat-small-series-interval/index.html b/docs/docs/examples/stat-small-series-interval/index.html index 2addadb74a..92468fe6fa 100644 --- a/docs/docs/examples/stat-small-series-interval/index.html +++ b/docs/docs/examples/stat-small-series-interval/index.html @@ -5,34 +5,34 @@ Stat / Series / Small / Interval | H2O Wave - - - - - - - - - - + + + + + + + + + +
      -

      Stat / Series / Small / Interval

      Create a small stat card displaying a primary value and a series plot.

      import time
      +

      Stat / Series / Small / Interval

      Create a small stat card displaying a primary value and a series plot.

      import time
      from faker import Faker
      from synth import FakeCategoricalSeries
      from h2o_wave import site, ui, data
      page = site['/demo']
      fake = Faker()
      f = FakeCategoricalSeries()
      cat, val, pc = f.next()
      c = page.add(f'example', ui.small_series_stat_card(
      box='1 1 1 1',
      title=fake.cryptocurrency_name(),
      value='=${{intl qux minimum_fraction_digits=2 maximum_fraction_digits=2}}',
      data=dict(qux=val, quux=pc),
      plot_category='foo',
      plot_type='interval',
      plot_value='qux',
      plot_color='$red',
      plot_data=data('foo qux', -20),
      plot_zero_value=0,
      ))
      page.save()
      while True:
      time.sleep(1)
      cat, val, pc = f.next()
      c.data.qux = val
      c.data.quux = pc
      c.plot_data[-1] = [cat, val]
      page.save()
      Edit this page
      - - - - - - - - - - + + + + + + + + + + \ No newline at end of file diff --git a/docs/docs/examples/stat-small/index.html b/docs/docs/examples/stat-small/index.html index 37a6dd75d7..dacd58488d 100644 --- a/docs/docs/examples/stat-small/index.html +++ b/docs/docs/examples/stat-small/index.html @@ -5,34 +5,34 @@ Stat / Small | H2O Wave - - - - - - - - - - + + + + + + + + + +
      -

      Stat / Small

      Create a stat card displaying a single value.

      import time
      +

      Stat / Small

      Create a stat card displaying a single value.

      import time
      from faker import Faker
      from synth import FakePercent
      from h2o_wave import site, ui
      page = site['/demo']
      fake = Faker()
      f = FakePercent()
      val, _ = f.next()
      c = page.add('example', ui.small_stat_card(
      box=f'1 1 1 1',
      title=fake.cryptocurrency_name(),
      value=f'${val:.2f}',
      ))
      page.save()
      while True:
      time.sleep(1)
      val, _ = f.next()
      c.value = f'${val:.2f}'
      page.save()
      Edit this page
      - - - - - - - - - - + + + + + + + + + + \ No newline at end of file diff --git a/docs/docs/examples/stat-tall-gauge/index.html b/docs/docs/examples/stat-tall-gauge/index.html index 52499678b1..5dadf2e7d9 100644 --- a/docs/docs/examples/stat-tall-gauge/index.html +++ b/docs/docs/examples/stat-tall-gauge/index.html @@ -5,34 +5,34 @@ Stat / Gauge / Tall | H2O Wave - - - - - - - - - - + + + + + + + + + +
      -

      Stat / Gauge / Tall

      Create a tall stat card displaying a primary value, an auxiliary value and a progress gauge.

      import time
      +

      Stat / Gauge / Tall

      Create a tall stat card displaying a primary value, an auxiliary value and a progress gauge.

      import time
      from faker import Faker
      from synth import FakePercent
      from h2o_wave import site, ui
      page = site['/demo']
      fake = Faker()
      f = FakePercent()
      val, pc = f.next()
      c = page.add(f'example', ui.tall_gauge_stat_card(
      box='1 1 1 2',
      title=fake.cryptocurrency_name(),
      value='=${{intl foo minimum_fraction_digits=2 maximum_fraction_digits=2}}',
      aux_value='={{intl bar style="percent" minimum_fraction_digits=2 maximum_fraction_digits=2}}',
      plot_color='$red',
      progress=pc,
      data=dict(foo=val, bar=pc),
      ))
      page.save()
      while True:
      time.sleep(1)
      val, pc = f.next()
      c.data.foo = val
      c.data.bar = pc
      c.progress = pc
      page.save()
      Edit this page
      - - - - - - - - - - + + + + + + + + + + \ No newline at end of file diff --git a/docs/docs/examples/stat-tall-series-area/index.html b/docs/docs/examples/stat-tall-series-area/index.html index d062eac9e7..635ddc1dbf 100644 --- a/docs/docs/examples/stat-tall-series-area/index.html +++ b/docs/docs/examples/stat-tall-series-area/index.html @@ -5,34 +5,34 @@ Stat / Series / Tall / Area | H2O Wave - - - - - - - - - - + + + + + + + + + +
      -

      Stat / Series / Tall / Area

      Create a tall stat card displaying a primary value, an auxiliary value and a series plot.

      import time
      +

      Stat / Series / Tall / Area

      Create a tall stat card displaying a primary value, an auxiliary value and a series plot.

      import time
      from faker import Faker
      from synth import FakeCategoricalSeries
      from h2o_wave import site, ui, data
      page = site['/demo']
      colors = '$red $pink $blue $azure $cyan $teal $mint $green $lime $yellow $amber $orange $tangerine'.split()
      curves = 'linear smooth step step-after step-before'.split()
      fake = Faker()
      cards = []
      for i in range(len(curves)):
      f = FakeCategoricalSeries()
      cat, val, pc = f.next()
      c = page.add(f'example{i}', ui.tall_series_stat_card(
      box=f'{i + 1} 1 1 2',
      title=fake.cryptocurrency_name(),
      value='=${{intl qux minimum_fraction_digits=2 maximum_fraction_digits=2}}',
      aux_value='={{intl quux style="percent" minimum_fraction_digits=1 maximum_fraction_digits=1}}',
      data=dict(qux=val, quux=pc / 100),
      plot_type='area',
      plot_category='foo',
      plot_value='qux',
      plot_color=colors[i],
      plot_data=data('foo qux', -15),
      plot_zero_value=0,
      plot_curve=curves[i],
      ))
      cards.append((f, c))
      page.save()
      while True:
      time.sleep(1)
      for f, c in cards:
      cat, val, pc = f.next()
      c.data.qux = val
      c.data.quux = pc / 100
      c.plot_data[-1] = [cat, val]
      page.save()
      Edit this page
      - - - - - - - - - - + + + + + + + + + + \ No newline at end of file diff --git a/docs/docs/examples/stat-tall-series-interval/index.html b/docs/docs/examples/stat-tall-series-interval/index.html index 5045317e95..a7b435c109 100644 --- a/docs/docs/examples/stat-tall-series-interval/index.html +++ b/docs/docs/examples/stat-tall-series-interval/index.html @@ -5,34 +5,34 @@ Stat / Series / Tall / Interval | H2O Wave - - - - - - - - - - + + + + + + + + + +
      -

      Stat / Series / Tall / Interval

      Create a tall stat card displaying a primary value, an auxiliary value and a series plot.

      import time
      +

      Stat / Series / Tall / Interval

      Create a tall stat card displaying a primary value, an auxiliary value and a series plot.

      import time
      from faker import Faker
      from synth import FakeCategoricalSeries
      from h2o_wave import site, ui, data
      page = site['/demo']
      fake = Faker()
      f = FakeCategoricalSeries()
      cat, val, pc = f.next()
      c = page.add(f'example', ui.tall_series_stat_card(
      box='1 1 1 2',
      title=fake.cryptocurrency_name(),
      value='=${{intl qux minimum_fraction_digits=2 maximum_fraction_digits=2}}',
      aux_value='={{intl quux style="percent" minimum_fraction_digits=1 maximum_fraction_digits=1}}',
      data=dict(qux=val, quux=pc / 100),
      plot_category='foo',
      plot_type='interval',
      plot_value='qux',
      plot_color='$red',
      plot_data=data('foo qux', -20),
      plot_zero_value=0,
      ))
      page.save()
      while True:
      time.sleep(1)
      cat, val, pc = f.next()
      c.data.qux = val
      c.data.quux = pc / 100
      c.plot_data[-1] = [cat, val]
      page.save()
      Edit this page
      - - - - - - - - - - + + + + + + + + + + \ No newline at end of file diff --git a/docs/docs/examples/stat-wide-bar/index.html b/docs/docs/examples/stat-wide-bar/index.html index bf40e69cf6..f59d087c2b 100644 --- a/docs/docs/examples/stat-wide-bar/index.html +++ b/docs/docs/examples/stat-wide-bar/index.html @@ -5,34 +5,34 @@ Stat / Bar / Wide | H2O Wave - - - - - - - - - - + + + + + + + + + +
      -

      Stat / Bar / Wide

      Create a wide stat card displaying a primary value, an auxiliary value and a progress bar.

      import time
      +

      Stat / Bar / Wide

      Create a wide stat card displaying a primary value, an auxiliary value and a progress bar.

      import time
      from faker import Faker
      from synth import FakePercent
      from h2o_wave import site, ui
      page = site['/demo']
      fake = Faker()
      f = FakePercent()
      val, pc = f.next()
      c = page.add(f'example', ui.wide_bar_stat_card(
      box='1 1 2 1',
      title=fake.cryptocurrency_name(),
      value='=${{intl foo minimum_fraction_digits=2 maximum_fraction_digits=2}}',
      aux_value='={{intl bar style="percent" minimum_fraction_digits=2 maximum_fraction_digits=2}}',
      plot_color='$red',
      progress=pc,
      data=dict(foo=val, bar=pc),
      ))
      page.save()
      while True:
      time.sleep(1)
      val, pc = f.next()
      c.data.foo = val
      c.data.bar = pc
      c.progress = pc
      page.save()
      Edit this page
      - - - - - - - - - - + + + + + + + + + + \ No newline at end of file diff --git a/docs/docs/examples/stat-wide-gauge/index.html b/docs/docs/examples/stat-wide-gauge/index.html index b5bb1f9a16..d4b1f3b226 100644 --- a/docs/docs/examples/stat-wide-gauge/index.html +++ b/docs/docs/examples/stat-wide-gauge/index.html @@ -5,34 +5,34 @@ Stat / Gauge / Wide | H2O Wave - - - - - - - - - - + + + + + + + + + +
      -

      Stat / Gauge / Wide

      Create a wide stat card displaying a primary value, an auxiliary value and a progress gauge.

      import time
      +

      Stat / Gauge / Wide

      Create a wide stat card displaying a primary value, an auxiliary value and a progress gauge.

      import time
      from faker import Faker
      from synth import FakePercent
      from h2o_wave import site, ui
      page = site['/demo']
      fake = Faker()
      f = FakePercent()
      val, pc = f.next()
      c = page.add(f'example', ui.wide_gauge_stat_card(
      box='1 1 2 1',
      title=fake.cryptocurrency_name(),
      value='=${{intl foo minimum_fraction_digits=2 maximum_fraction_digits=2}}',
      aux_value='={{intl bar style="percent" minimum_fraction_digits=2 maximum_fraction_digits=2}}',
      plot_color='$red',
      progress=pc,
      data=dict(foo=val, bar=pc),
      ))
      page.save()
      while True:
      time.sleep(1)
      val, pc = f.next()
      c.data.foo = val
      c.data.bar = pc
      c.progress = pc
      page.save()
      Edit this page
      - - - - - - - - - - + + + + + + + + + + \ No newline at end of file diff --git a/docs/docs/examples/stat-wide-series-area/index.html b/docs/docs/examples/stat-wide-series-area/index.html index 369bcb1d3d..2d51572152 100644 --- a/docs/docs/examples/stat-wide-series-area/index.html +++ b/docs/docs/examples/stat-wide-series-area/index.html @@ -5,34 +5,34 @@ Stat / Series / Wide / Area | H2O Wave - - - - - - - - - - + + + + + + + + + +
      -

      Stat / Series / Wide / Area

      Create a wide stat card displaying a primary value, an auxiliary value and a series plot.

      import time
      +

      Stat / Series / Wide / Area

      Create a wide stat card displaying a primary value, an auxiliary value and a series plot.

      import time
      from faker import Faker
      from synth import FakeCategoricalSeries
      from h2o_wave import site, ui, data
      page = site['/demo']
      colors = '$red $pink $blue $azure $cyan $teal $mint $green $lime $yellow $amber $orange $tangerine'.split()
      curves = 'linear smooth step step-after step-before'.split()
      fake = Faker()
      cards = []
      for i in range(len(curves)):
      f = FakeCategoricalSeries()
      cat, val, pc = f.next()
      c = page.add(f'example{i}', ui.wide_series_stat_card(
      box=f'1 {i + 1} 2 1',
      title=fake.cryptocurrency_name(),
      value='=${{intl qux minimum_fraction_digits=2 maximum_fraction_digits=2}}',
      aux_value='={{intl quux style="percent" minimum_fraction_digits=1 maximum_fraction_digits=1}}',
      data=dict(qux=val, quux=pc / 100),
      plot_category='foo',
      plot_type='area',
      plot_value='qux',
      plot_color=colors[i],
      plot_data=data('foo qux', -15),
      plot_zero_value=0,
      plot_curve=curves[i],
      ))
      cards.append((f, c))
      page.save()
      while True:
      time.sleep(1)
      for f, c in cards:
      cat, val, pc = f.next()
      c.data.qux = val
      c.data.quux = pc / 100
      c.plot_data[-1] = [cat, val]
      page.save()
      Edit this page
      - - - - - - - - - - + + + + + + + + + + \ No newline at end of file diff --git a/docs/docs/examples/stat-wide-series-interval/index.html b/docs/docs/examples/stat-wide-series-interval/index.html index 673d861702..0d6a91064d 100644 --- a/docs/docs/examples/stat-wide-series-interval/index.html +++ b/docs/docs/examples/stat-wide-series-interval/index.html @@ -5,34 +5,34 @@ Stat / Series / Wide / Interval | H2O Wave - - - - - - - - - - + + + + + + + + + +
      -

      Stat / Series / Wide / Interval

      Create a wide stat card displaying a primary value, an auxiliary value and a series plot.

      import time
      +

      Stat / Series / Wide / Interval

      Create a wide stat card displaying a primary value, an auxiliary value and a series plot.

      import time
      from faker import Faker
      from synth import FakeCategoricalSeries
      from h2o_wave import site, ui, data
      page = site['/demo']
      fake = Faker()
      f = FakeCategoricalSeries()
      cat, val, pc = f.next()
      c = page.add(f'example', ui.wide_series_stat_card(
      box='1 1 2 1',
      title=fake.cryptocurrency_name(),
      value='=${{intl qux minimum_fraction_digits=2 maximum_fraction_digits=2}}',
      aux_value='={{intl quux style="percent" minimum_fraction_digits=1 maximum_fraction_digits=1}}',
      data=dict(qux=val, quux=pc / 100),
      plot_category='foo',
      plot_type='interval',
      plot_value='qux',
      plot_color='$red',
      plot_data=data('foo qux', -15),
      plot_zero_value=0,
      ))
      page.save()
      while True:
      time.sleep(1)
      cat, val, pc = f.next()
      c.data.qux = val
      c.data.quux = pc / 100
      c.plot_data[-1] = [cat, val]
      page.save()
      Edit this page
      - - - - - - - - - - + + + + + + + + + + \ No newline at end of file diff --git a/docs/docs/examples/stepper/index.html b/docs/docs/examples/stepper/index.html index 9c7711b8c0..7a2af5a609 100644 --- a/docs/docs/examples/stepper/index.html +++ b/docs/docs/examples/stepper/index.html @@ -4,34 +4,32 @@ -Stepper | H2O Wave - - - - - - - - - - +Form / Stepper | H2O Wave + + + + + + + + + +
      -

      Stepper

      Use Stepper to show progress through numbered steps.

      from h2o_wave import Q, listen, ui
      +

      Form / Stepper

      Use Stepper to show progress through numbered steps.

      from h2o_wave import main, app, Q, ui
      -
      async def serve(q: Q):
      q.page['basic-stepper'] = ui.form_card(
      box='1 1 4 1',
      items=[
      ui.stepper(name='basic-stepper', items=[
      ui.step(label='Step 1'),
      ui.step(label='Step 2'),
      ui.step(label='Step 3'),
      ])
      ]
      )
      q.page['icon-stepper'] = ui.form_card(
      box='1 2 4 1',
      items=[
      ui.stepper(name='icon-stepper', items=[
      ui.step(label='Step 1', icon='MailLowImportance'),
      ui.step(label='Step 2', icon='TaskManagerMirrored'),
      ui.step(label='Step 3', icon='Cafe'),
      ])
      ]
      )
      q.page['almost-done-stepper'] = ui.form_card(
      box='1 3 4 1',
      items=[
      ui.stepper(name='almost-done-stepper', items=[
      ui.step(label='Step 1', done=True),
      ui.step(label='Step 2', done=True),
      ui.step(label='Step 3'),
      ])
      ]
      )
      await q.page.save()
      -
      -
      listen('/demo', serve)
      Edit this page
      - - - - - - - - - - +
      @app('/demo')
      async def serve(q: Q):
      q.page['basic-stepper'] = ui.form_card(
      box='1 1 4 1',
      items=[
      ui.stepper(name='basic-stepper', items=[
      ui.step(label='Step 1'),
      ui.step(label='Step 2'),
      ui.step(label='Step 3'),
      ])
      ]
      )
      q.page['icon-stepper'] = ui.form_card(
      box='1 2 4 1',
      items=[
      ui.stepper(name='icon-stepper', items=[
      ui.step(label='Step 1', icon='MailLowImportance'),
      ui.step(label='Step 2', icon='TaskManagerMirrored'),
      ui.step(label='Step 3', icon='Cafe'),
      ])
      ]
      )
      q.page['almost-done-stepper'] = ui.form_card(
      box='1 3 4 1',
      items=[
      ui.stepper(name='almost-done-stepper', items=[
      ui.step(label='Step 1', done=True),
      ui.step(label='Step 2', done=True),
      ui.step(label='Step 3'),
      ])
      ]
      )
      await q.page.save()
      Edit this page
      + + + + + + + + + + \ No newline at end of file diff --git a/docs/docs/examples/swatch-picker/index.html b/docs/docs/examples/swatch-picker/index.html index 29c7711c8e..49270be36e 100644 --- a/docs/docs/examples/swatch-picker/index.html +++ b/docs/docs/examples/swatch-picker/index.html @@ -5,33 +5,31 @@ Form / Swatch Picker | H2O Wave - - - - - - - - - - + + + + + + + + + +
      -

      Form / Swatch Picker

      Use a swatch picker to allow users to choose a from a specific set of colors.

      from h2o_wave import Q, listen, ui
      +

      Form / Swatch Picker

      Use a swatch picker to allow users to choose a from a specific set of colors.

      from h2o_wave import main, app, Q, ui
      -
      async def serve(q: Q):
      if q.args.show_inputs:
      q.page['example'].items = [
      ui.text(f'swatch={q.args.swatch}'),
      ui.button(name='show_form', label='Back', primary=True),
      ]
      else:
      q.page['example'] = ui.form_card(box='1 1 4 10', items=[
      ui.color_picker(
      name='swatch',
      label='Pick a swatch',
      choices=[
      '#011627', '#2EC4B6', '#E71D36', '#FF9F1C', '#50514F',
      '#F25F5C', '#FFE066', '#247BA0', '#70C1B3', '#FDFFFC',
      ]),
      ui.button(name='show_inputs', label='Submit', primary=True),
      ])
      await q.page.save()
      -
      -
      listen('/demo', serve)
      Edit this page
      - - - - - - - - - - +
      @app('/demo')
      async def serve(q: Q):
      if q.args.show_inputs:
      q.page['example'].items = [
      ui.text(f'swatch={q.args.swatch}'),
      ui.button(name='show_form', label='Back', primary=True),
      ]
      else:
      q.page['example'] = ui.form_card(box='1 1 4 10', items=[
      ui.color_picker(
      name='swatch',
      label='Pick a swatch',
      choices=[
      '#011627', '#2EC4B6', '#E71D36', '#FF9F1C', '#50514F',
      '#F25F5C', '#FFE066', '#247BA0', '#70C1B3', '#FDFFFC',
      ]),
      ui.button(name='show_inputs', label='Submit', primary=True),
      ])
      await q.page.save()
      Edit this page
      + + + + + + + + + + \ No newline at end of file diff --git a/docs/docs/examples/tab-delete/index.html b/docs/docs/examples/tab-delete/index.html index 050f259a47..ac8825d59c 100644 --- a/docs/docs/examples/tab-delete/index.html +++ b/docs/docs/examples/tab-delete/index.html @@ -5,41 +5,39 @@ Tabs / Navigation | H2O Wave - - - - - - - - - - + + + + + + + + + +
      -

      Tabs / Navigation

      Navigate between two or more tabs. -Delete the cards when switching between tabs.

      from h2o_wave import Q, listen, ui
      +

      Tabs / Navigation

      Navigate between two or more tabs. +Delete the cards when switching between tabs.

      from h2o_wave import main, app, Q, ui
      TABS = 'abcde'
      async def display_tab(q):
      q.page[f'example_{q.client.tab}'] = ui.markup_card(
      box='1 2 4 3',
      title=q.client.tab.upper(),
      content='\n'.join([''.join([q.client.tab] * 10) for _ in range(50)])
      )
      await q.page.save()
      async def remove_cards(q: Q):
      for tab in TABS:
      del q.page[f'example_{tab}']
      await q.page.save()
      -
      async def serve(q: Q):
      if not q.client.initialized:
      q.client.tab = 'a'
      q.page['tabs'] = ui.tab_card( # Initialize once
      box='1 1 4 1',
      items=[ui.tab(name=f'#{t}', label=t.upper()) for t in TABS]
      )
      q.client.initialized = True
      +
      @app('/demo')
      async def serve(q: Q):
      if not q.client.initialized:
      q.client.tab = 'a'
      q.page['tabs'] = ui.tab_card( # Initialize once
      box='1 1 4 1',
      items=[ui.tab(name=f'#{t}', label=t.upper()) for t in TABS]
      )
      q.client.initialized = True
      if q.args['#']:
      q.client.tab = str(q.args['#'])
      -
      await remove_cards(q)
      await display_tab(q)
      await q.page.save()
      -
      -
      listen('/demo', serve)
      Edit this page
      - - - - - - - - - - +
      await remove_cards(q)
      await display_tab(q)
      await q.page.save()
      Edit this page
      + + + + + + + + + + \ No newline at end of file diff --git a/docs/docs/examples/tab-link/index.html b/docs/docs/examples/tab-link/index.html index 8ec9e336db..212c74551a 100644 --- a/docs/docs/examples/tab-link/index.html +++ b/docs/docs/examples/tab-link/index.html @@ -5,33 +5,33 @@ Tab / Links | H2O Wave - - - - - - - - - - + + + + + + + + + +
      -

      Tab / Links

      Use tab cards to display tabs on a page. +

      Tab / Links

      Use tab cards to display tabs on a page. This examples render tabs styled as links.

      from h2o_wave import site, ui
      page = site['/demo']
      page['tabs'] = ui.tab_card(
      box='1 1 4 1',
      items=[
      ui.tab(name='#menu/spam', label='Spam'),
      ui.tab(name='#menu/ham', label='Ham'),
      ui.tab(name='#menu/eggs', label='Eggs'),
      ui.tab(name='#about', label='About'),
      ],
      link=True,
      )
      page.save()
      Edit this page
      - - - - - - - - - - + + + + + + + + + + \ No newline at end of file diff --git a/docs/docs/examples/tab-routing/index.html b/docs/docs/examples/tab-routing/index.html index 5fbd44758d..a27ef38cc0 100644 --- a/docs/docs/examples/tab-routing/index.html +++ b/docs/docs/examples/tab-routing/index.html @@ -5,34 +5,32 @@ Routing / Tabs | H2O Wave - - - - - - - - - - + + + + + + + + + +
      -

      Routing / Tabs

      This example demonstrates how you can observe and handle changes to the browser's -location hash

      The location hash can be accessed using q.args['#'].

      from h2o_wave import Q, listen, ui
      +

      Routing / Tabs

      This example demonstrates how you can observe and handle changes to the browser's +location hash

      The location hash can be accessed using q.args['#'].

      from h2o_wave import main, app, Q, ui
      -
      async def serve(q: Q):
      hash = q.args['#']
      if hash:
      blurb = q.page['blurb']
      if hash == 'menu/spam':
      blurb.content = "Sorry, we're out of spam!"
      elif hash == 'menu/ham':
      blurb.content = "Sorry, we're out of ham!"
      elif hash == 'menu/eggs':
      blurb.content = "Sorry, we're out of eggs!"
      elif hash == 'about':
      blurb.content = 'Everything here is gluten-free!'
      else:
      q.page['nav'] = ui.tab_card(
      box='1 1 4 1',
      items=[
      ui.tab(name='#menu/spam', label='Spam'),
      ui.tab(name='#menu/ham', label='Ham'),
      ui.tab(name='#menu/eggs', label='Eggs'),
      ui.tab(name='#about', label='About'),
      ],
      )
      q.page['blurb'] = ui.markdown_card(
      box='1 2 4 2',
      title='Store',
      content='Welcome to our store!',
      )
      await q.page.save()
      -
      -
      listen('/demo', serve)
      Edit this page
      - - - - - - - - - - +
      @app('/demo')
      async def serve(q: Q):
      hash = q.args['#']
      if hash:
      blurb = q.page['blurb']
      if hash == 'menu/spam':
      blurb.content = "Sorry, we're out of spam!"
      elif hash == 'menu/ham':
      blurb.content = "Sorry, we're out of ham!"
      elif hash == 'menu/eggs':
      blurb.content = "Sorry, we're out of eggs!"
      elif hash == 'about':
      blurb.content = 'Everything here is gluten-free!'
      else:
      q.page['nav'] = ui.tab_card(
      box='1 1 4 1',
      items=[
      ui.tab(name='#menu/spam', label='Spam'),
      ui.tab(name='#menu/ham', label='Ham'),
      ui.tab(name='#menu/eggs', label='Eggs'),
      ui.tab(name='#about', label='About'),
      ],
      )
      q.page['blurb'] = ui.markdown_card(
      box='1 2 4 2',
      title='Store',
      content='Welcome to our store!',
      )
      await q.page.save()
      Edit this page
      + + + + + + + + + + \ No newline at end of file diff --git a/docs/docs/examples/tab/index.html b/docs/docs/examples/tab/index.html index 1c4c9165c2..4088926b20 100644 --- a/docs/docs/examples/tab/index.html +++ b/docs/docs/examples/tab/index.html @@ -5,32 +5,32 @@ Tab | H2O Wave - - - - - - - - - - + + + + + + + + + +
      -

      Tab

      Use tab cards to display tabs on a page.

      from h2o_wave import site, ui
      +

      Tab

      Use tab cards to display tabs on a page.

      from h2o_wave import site, ui
      page = site['/demo']
      page['tabs'] = ui.tab_card(
      box='1 1 4 1',
      items=[
      ui.tab(name='#menu/spam', label='Spam'),
      ui.tab(name='#menu/ham', label='Ham'),
      ui.tab(name='#menu/eggs', label='Eggs'),
      ui.tab(name='#about', label='About'),
      ],
      )
      page.save()
      Edit this page
      - - - - - - - - - - + + + + + + + + + + \ No newline at end of file diff --git a/docs/docs/examples/table-download/index.html b/docs/docs/examples/table-download/index.html index 2766126abb..55f77d25a7 100644 --- a/docs/docs/examples/table-download/index.html +++ b/docs/docs/examples/table-download/index.html @@ -5,20 +5,20 @@ Table / Download | H2O Wave - - - - - - - - - - + + + + + + + + + +
      -

      Table / Download

      Allow downloading a table's data as CSV file.

      import random
      from faker import Faker
      from h2o_wave import Q, listen, ui
      +

      Table / Download

      Allow downloading a table's data as CSV file.

      import random
      from faker import Faker
      from h2o_wave import main, app, Q, ui
      fake = Faker()
      _id = 0
      @@ -27,18 +27,16 @@
      # Create some issues
      issues = [
      Issue(
      text=fake.sentence(),
      status=('Closed' if i % 2 == 0 else 'Open'),
      progress=random.random(),
      icon=('BoxCheckmarkSolid' if random.random() > 0.5 else 'BoxMultiplySolid'),
      notifications=('Off' if random.random() > 0.5 else 'On')) for i in range(100)
      ]
      # Create columns for our issue table.
      columns = [
      ui.table_column(name='text', label='Issue'),
      ui.table_column(name='status', label='Status'),
      ui.table_column(name='notifications', label='Notifications'),
      ui.table_column(name='done', label='Done', cell_type=ui.icon_table_cell_type()),
      ui.table_column(name='views', label='Views'),
      ui.table_column(name='progress', label='Progress', cell_type=ui.progress_table_cell_type()),
      ]
      -
      async def serve(q: Q):
      q.page['form'] = ui.form_card(box='1 1 -1 11', items=[
      ui.table(
      name='issues',
      columns=columns,
      rows=[ui.table_row(
      name=issue.id,
      cells=[issue.text, issue.status, issue.notifications, issue.icon, str(issue.views), issue.progress]) for
      issue in issues],
      downloadable=True,
      )
      ])
      await q.page.save()
      -
      -
      listen('/demo', serve)
      Edit this page
      - - - - - - - - - - +
      @app('/demo')
      async def serve(q: Q):
      q.page['form'] = ui.form_card(box='1 1 -1 11', items=[
      ui.table(
      name='issues',
      columns=columns,
      rows=[ui.table_row(
      name=issue.id,
      cells=[issue.text, issue.status, issue.notifications, issue.icon, str(issue.views), issue.progress]) for
      issue in issues],
      downloadable=True,
      )
      ])
      await q.page.save()
      Edit this page
      + + + + + + + + + + \ No newline at end of file diff --git a/docs/docs/examples/table-filter-backend/index.html b/docs/docs/examples/table-filter-backend/index.html index 5346680686..8ef818fd42 100644 --- a/docs/docs/examples/table-filter-backend/index.html +++ b/docs/docs/examples/table-filter-backend/index.html @@ -5,20 +5,20 @@ Table / Filter / Backend | H2O Wave - - - - - - - - - - + + + + + + + + + +
      -

      Table / Filter / Backend

      Filter table using Python

      import pandas as pd
      from faker import Faker
      from h2o_wave import Q, listen, ui
      +

      Table / Filter / Backend

      Filter table using Python

      import pandas as pd
      from faker import Faker
      from h2o_wave import main, app, Q, ui
      fake = Faker()
      N = 50 # number of rows
      # Make a synthetic data frame
      addresses = pd.DataFrame(dict(
      ID=[i + 1 for i in range(N)],
      Name=[fake.name() for _ in range(N)],
      Language=[fake.language_name() for _ in range(N)],
      Job=[fake.job() for _ in range(N)],
      Address=[fake.address() for _ in range(N)],
      City=[fake.city() for _ in range(N)],
      ))
      @@ -28,19 +28,17 @@
      def search_df(df: pd.DataFrame, term: str):
      str_cols = df.select_dtypes(include=[object])
      return df[str_cols.apply(lambda column: column.str.contains(term, case=False, na=False)).any(axis=1)]
      -
      async def serve(q: Q):
      if not q.client.initialized:
      q.page['form'] = ui.form_card(box='1 1 -1 11', items=[
      ui.textbox(name='search', label='Search', placeholder='Enter a keyword...', trigger=True),
      ui.table(
      name='issues',
      columns=[ui.table_column(name=name, label=name) for name in column_names],
      rows=df_to_rows(addresses)
      )
      ])
      q.client.initialized = True
      else:
      items = q.page['form'].items
      search_box = items[0].textbox
      table = items[1].table
      term: str = q.args.search
      term = term.strip() if term else ''
      search_box.value = term
      table.rows = df_to_rows(search_df(addresses, term) if len(term) else addresses)
      -
      await q.page.save()
      -
      -
      listen('/demo', serve)
      Edit this page
      - - - - - - - - - - +
      @app('/demo')
      async def serve(q: Q):
      if not q.client.initialized:
      q.page['form'] = ui.form_card(box='1 1 -1 11', items=[
      ui.textbox(name='search', label='Search', placeholder='Enter a keyword...', trigger=True),
      ui.table(
      name='issues',
      columns=[ui.table_column(name=name, label=name) for name in column_names],
      rows=df_to_rows(addresses)
      )
      ])
      q.client.initialized = True
      else:
      items = q.page['form'].items
      search_box = items[0].textbox
      table = items[1].table
      term: str = q.args.search
      term = term.strip() if term else ''
      search_box.value = term
      table.rows = df_to_rows(search_df(addresses, term) if len(term) else addresses)
      +
      await q.page.save()
      Edit this page
      + + + + + + + + + + \ No newline at end of file diff --git a/docs/docs/examples/table-filter/index.html b/docs/docs/examples/table-filter/index.html index 853aa4b5a1..f187a22211 100644 --- a/docs/docs/examples/table-filter/index.html +++ b/docs/docs/examples/table-filter/index.html @@ -5,20 +5,20 @@ Table / Filter | H2O Wave - - - - - - - - - - + + + + + + + + + +
      -

      Table / Filter

      Enable filtering values for specific columns.

      import random
      from faker import Faker
      from h2o_wave import Q, listen, ui
      +

      Table / Filter

      Enable filtering values for specific columns.

      import random
      from faker import Faker
      from h2o_wave import main, app, Q, ui
      fake = Faker()
      _id = 0
      @@ -27,18 +27,16 @@
      # Create some issues
      issues = [
      Issue(
      text=fake.sentence(),
      status=('Closed' if i % 2 == 0 else 'Open'),
      progress=random.random(),
      icon=('BoxCheckmarkSolid' if random.random() > 0.5 else 'BoxMultiplySolid'),
      notifications=('Off' if random.random() > 0.5 else 'On')) for i in range(100)
      ]
      # Create columns for our issue table.
      columns = [
      ui.table_column(name='text', label='Issue'),
      ui.table_column(name='status', label='Status', filterable=True),
      ui.table_column(name='notifications', label='Notifications', filterable=True),
      ui.table_column(name='done', label='Done', cell_type=ui.icon_table_cell_type()),
      ui.table_column(name='views', label='Views'),
      ui.table_column(name='progress', label='Progress', cell_type=ui.progress_table_cell_type()),
      ]
      -
      async def serve(q: Q):
      q.page['form'] = ui.form_card(box='1 1 -1 11', items=[
      ui.table(
      name='issues',
      columns=columns,
      rows=[ui.table_row(
      name=issue.id,
      cells=[issue.text, issue.status, issue.notifications, issue.icon, str(issue.views), issue.progress]) for
      issue in issues]
      )
      ])
      await q.page.save()
      -
      -
      listen('/demo', serve)
      Edit this page
      - - - - - - - - - - +
      @app('/demo')
      async def serve(q: Q):
      q.page['form'] = ui.form_card(box='1 1 -1 11', items=[
      ui.table(
      name='issues',
      columns=columns,
      rows=[ui.table_row(
      name=issue.id,
      cells=[issue.text, issue.status, issue.notifications, issue.icon, str(issue.views), issue.progress]) for
      issue in issues]
      )
      ])
      await q.page.save()
      Edit this page
      + + + + + + + + + + \ No newline at end of file diff --git a/docs/docs/examples/table-groupby/index.html b/docs/docs/examples/table-groupby/index.html index b368815a03..cfe86283a2 100644 --- a/docs/docs/examples/table-groupby/index.html +++ b/docs/docs/examples/table-groupby/index.html @@ -5,20 +5,20 @@ Table / Group by | H2O Wave - - - - - - - - - - + + + + + + + + + +
      -

      Table / Group by

      Allow grouping a table by column values.

      import random
      from faker import Faker
      from h2o_wave import Q, listen, ui
      +

      Table / Group by

      Allow grouping a table by column values.

      import random
      from faker import Faker
      from h2o_wave import main, app, Q, ui
      fake = Faker()
      _id = 0
      @@ -27,18 +27,16 @@
      # Create some issues
      issues = [
      Issue(
      text=fake.sentence(),
      status=('Closed' if i % 2 == 0 else 'Open'),
      progress=random.random(),
      icon=('BoxCheckmarkSolid' if random.random() > 0.5 else 'BoxMultiplySolid'),
      notifications=('Off' if random.random() > 0.5 else 'On')) for i in range(100)
      ]
      # Create columns for our issue table.
      columns = [
      ui.table_column(name='text', label='Issue'),
      ui.table_column(name='status', label='Status'),
      ui.table_column(name='notifications', label='Notifications'),
      ui.table_column(name='done', label='Done', cell_type=ui.icon_table_cell_type()),
      ui.table_column(name='views', label='Views'),
      ui.table_column(name='progress', label='Progress', cell_type=ui.progress_table_cell_type()),
      ]
      -
      async def serve(q: Q):
      q.page['form'] = ui.form_card(box='1 1 -1 11', items=[
      ui.table(
      name='issues',
      columns=columns,
      rows=[ui.table_row(
      name=issue.id,
      cells=[issue.text, issue.status, issue.notifications, issue.icon, str(issue.views), issue.progress]) for
      issue in issues],
      groupable=True,
      )])
      await q.page.save()
      -
      -
      listen('/demo', serve)
      Edit this page
      - - - - - - - - - - +
      @app('/demo')
      async def serve(q: Q):
      q.page['form'] = ui.form_card(box='1 1 -1 11', items=[
      ui.table(
      name='issues',
      columns=columns,
      rows=[ui.table_row(
      name=issue.id,
      cells=[issue.text, issue.status, issue.notifications, issue.icon, str(issue.views), issue.progress]) for
      issue in issues],
      groupable=True,
      )])
      await q.page.save()
      Edit this page
      + + + + + + + + + + \ No newline at end of file diff --git a/docs/docs/examples/table-markdown/index.html b/docs/docs/examples/table-markdown/index.html index e8ab9f2082..6d4eca1534 100644 --- a/docs/docs/examples/table-markdown/index.html +++ b/docs/docs/examples/table-markdown/index.html @@ -5,20 +5,20 @@ Table / Markdown | H2O Wave - - - - - - - - - - + + + + + + + + + +
      -

      Table / Markdown

      Display a table using markdown.

      from h2o_wave import site, ui
      +

      Table / Markdown

      Display a table using markdown.

      from h2o_wave import site, ui
      air_passengers_fields = ['Year', 'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun']
      air_passengers_rows = [
      ['1949', '112', '118', '132', '129', '121', '135'],
      ['1950', '115', '126', '141', '135', '125', '149'],
      ['1951', '145', '150', '178', '163', '172', '178'],
      ['1952', '171', '180', '193', '181', '183', '218'],
      ['1953', '196', '196', '236', '235', '229', '243'],
      ['1954', '204', '188', '235', '227', '234', '264'],
      ['1955', '242', '233', '267', '269', '270', '315'],
      ['1956', '284', '277', '317', '313', '318', '374'],
      ['1957', '315', '301', '356', '348', '355', '422'],
      ['1958', '340', '318', '362', '348', '363', '435'],
      ['1959', '360', '342', '406', '396', '420', '472'],
      ['1960', '417', '391', '419', '461', '472', '535'],
      ]
      def make_markdown_row(values):
      return f"| {' | '.join([str(x) for x in values])} |"
      @@ -27,16 +27,16 @@
      page = site['/demo']
      v = page.add('example', ui.form_card(
      box='1 1 4 5',
      items=[
      ui.text(make_markdown_table(
      fields=air_passengers_fields,
      rows=air_passengers_rows,
      )),
      ],
      ))
      -
      page.save()
      Edit this page
      - - - - - - - - - - +
      page.save()
      Edit this page
      + + + + + + + + + + \ No newline at end of file diff --git a/docs/docs/examples/table-search/index.html b/docs/docs/examples/table-search/index.html index 4eaa1f12a9..068a38d221 100644 --- a/docs/docs/examples/table-search/index.html +++ b/docs/docs/examples/table-search/index.html @@ -5,20 +5,20 @@ Table / Search | H2O Wave - - - - - - - - - - + + + + + + + + + +
      -

      Table / Search

      Enable searching a table across specific columns.

      import random
      from faker import Faker
      from h2o_wave import Q, listen, ui
      +

      Table / Search

      Enable searching a table across specific columns.

      import random
      from faker import Faker
      from h2o_wave import main, app, Q, ui
      fake = Faker()
      _id = 0
      @@ -27,18 +27,16 @@
      # Create some issues
      issues = [
      Issue(
      text=fake.sentence(),
      status=('Closed' if i % 2 == 0 else 'Open'),
      progress=random.random(),
      icon=('BoxCheckmarkSolid' if random.random() > 0.5 else 'BoxMultiplySolid'),
      notifications=('Off' if random.random() > 0.5 else 'On')) for i in range(100)
      ]
      # Create columns for our issue table.
      columns = [
      ui.table_column(name='text', label='Issue', searchable=True),
      ui.table_column(name='status', label='Status'),
      ui.table_column(name='notifications', label='Notifications'),
      ui.table_column(name='done', label='Done', cell_type=ui.icon_table_cell_type()),
      ui.table_column(name='views', label='Views'),
      ui.table_column(name='progress', label='Progress', cell_type=ui.progress_table_cell_type()),
      ]
      -
      async def serve(q: Q):
      q.page['form'] = ui.form_card(box='1 1 -1 11', items=[
      ui.table(
      name='issues',
      columns=columns,
      rows=[ui.table_row(
      name=issue.id,
      cells=[issue.text, issue.status, issue.notifications, issue.icon, str(issue.views), issue.progress]) for
      issue in issues],
      )
      ])
      await q.page.save()
      -
      -
      listen('/demo', serve)
      Edit this page
      - - - - - - - - - - +
      @app('/demo')
      async def serve(q: Q):
      q.page['form'] = ui.form_card(box='1 1 -1 11', items=[
      ui.table(
      name='issues',
      columns=columns,
      rows=[ui.table_row(
      name=issue.id,
      cells=[issue.text, issue.status, issue.notifications, issue.icon, str(issue.views), issue.progress]) for
      issue in issues],
      )
      ])
      await q.page.save()
      Edit this page
      + + + + + + + + + + \ No newline at end of file diff --git a/docs/docs/examples/table-select/index.html b/docs/docs/examples/table-select/index.html index 48e7105864..73eab26441 100644 --- a/docs/docs/examples/table-select/index.html +++ b/docs/docs/examples/table-select/index.html @@ -5,20 +5,20 @@ Table / Preselection | H2O Wave - - - - - - - - - - + + + + + + + + + +
      -

      Table / Preselection

      Use a table as an advanced multi-select. Specify rownames in 'values' for preselection.

      from faker import Faker
      from h2o_wave import Q, listen, ui
      +

      Table / Preselection

      Use a table as an advanced multi-select. Specify rownames in 'values' for preselection.

      from faker import Faker
      from h2o_wave import main, app, Q, ui
      fake = Faker()
      _id = 0
      @@ -27,18 +27,16 @@
      # Create some issues
      issues = [Issue(text=fake.sentence()) for i in range(10)]
      # Create columns for our issue table.
      columns = [ui.table_column(name='text', label='Issue', min_width='300px')]
      -
      async def main(q: Q):
      if q.args.show_inputs:
      q.page['example'].items = [
      ui.text(f'selected={q.args.issues}'),
      ui.button(name='show_form', label='Back', primary=True),
      ]
      else:
      q.page['example'] = ui.form_card(box='1 1 -1 11', items=[
      ui.table(
      name='issues',
      columns=columns,
      rows=[ui.table_row(name=issue.id, cells=[issue.text]) for issue in issues],
      values=['I1', 'I2', 'I3']
      ),
      ui.button(name='show_inputs', label='Submit', primary=True)
      ])
      await q.page.save()
      -
      -
      listen('/demo', main)
      Edit this page
      - - - - - - - - - - +
      @app('/demo')
      async def serve(q: Q):
      if q.args.show_inputs:
      q.page['example'].items = [
      ui.text(f'selected={q.args.issues}'),
      ui.button(name='show_form', label='Back', primary=True),
      ]
      else:
      q.page['example'] = ui.form_card(box='1 1 -1 11', items=[
      ui.table(
      name='issues',
      columns=columns,
      rows=[ui.table_row(name=issue.id, cells=[issue.text]) for issue in issues],
      values=['I1', 'I2', 'I3']
      ),
      ui.button(name='show_inputs', label='Submit', primary=True)
      ])
      await q.page.save()
      Edit this page
      + + + + + + + + + + \ No newline at end of file diff --git a/docs/docs/examples/table-sort/index.html b/docs/docs/examples/table-sort/index.html index bb50a21129..a8f3615c02 100644 --- a/docs/docs/examples/table-sort/index.html +++ b/docs/docs/examples/table-sort/index.html @@ -5,20 +5,20 @@ Table / Sort | H2O Wave - - - - - - - - - - + + + + + + + + + +
      -

      Table / Sort

      Allow sorting a table by specific columns.

      import random
      from faker import Faker
      from h2o_wave import Q, listen, ui
      +

      Table / Sort

      Allow sorting a table by specific columns.

      import random
      from faker import Faker
      from h2o_wave import main, app, Q, ui
      fake = Faker()
      _id = 0
      @@ -27,18 +27,16 @@
      # Create some issues
      issues = [
      Issue(
      text=fake.sentence(),
      status=('Closed' if i % 2 == 0 else 'Open'),
      progress=random.random(),
      icon=('BoxCheckmarkSolid' if random.random() > 0.5 else 'BoxMultiplySolid'),
      notifications=('Off' if random.random() > 0.5 else 'On')) for i in range(100)
      ]
      # Create columns for our issue table.
      columns = [
      ui.table_column(name='text', label='Issue', sortable=True, ),
      ui.table_column(name='status', label='Status'),
      ui.table_column(name='notifications', label='Notifications'),
      ui.table_column(name='done', label='Done', cell_type=ui.icon_table_cell_type()),
      ui.table_column(name='views', label='Views', sortable=True),
      ui.table_column(name='progress', label='Progress', cell_type=ui.progress_table_cell_type()),
      ]
      -
      async def serve(q: Q):
      q.page['form'] = ui.form_card(box='1 1 -1 11', items=[
      ui.table(
      name='issues',
      columns=columns,
      rows=[ui.table_row(
      name=issue.id,
      cells=[issue.text, issue.status, issue.notifications, issue.icon, str(issue.views), issue.progress]) for
      issue in issues],
      )
      ])
      await q.page.save()
      -
      -
      listen('/demo', serve)
      Edit this page
      - - - - - - - - - - +
      @app('/demo')
      async def serve(q: Q):
      q.page['form'] = ui.form_card(box='1 1 -1 11', items=[
      ui.table(
      name='issues',
      columns=columns,
      rows=[ui.table_row(
      name=issue.id,
      cells=[issue.text, issue.status, issue.notifications, issue.icon, str(issue.views), issue.progress]) for
      issue in issues],
      )
      ])
      await q.page.save()
      Edit this page
      + + + + + + + + + + \ No newline at end of file diff --git a/docs/docs/examples/table/index.html b/docs/docs/examples/table/index.html index 2e2105337c..0f1bc0d6be 100644 --- a/docs/docs/examples/table/index.html +++ b/docs/docs/examples/table/index.html @@ -5,20 +5,20 @@ Table | H2O Wave - - - - - - - - - - + + + + + + + + + +
      -

      Table

      Use a table to display tabular data.

      import random
      from faker import Faker
      from h2o_wave import Q, listen, ui
      +

      Table

      Use a table to display tabular data.

      import random
      from faker import Faker
      from h2o_wave import main, app, Q, ui
      fake = Faker()
      _id = 0
      @@ -27,18 +27,16 @@
      # Create some issues
      issues = [
      Issue(
      text=fake.sentence(),
      status=('Closed' if i % 2 == 0 else 'Open'),
      progress=random.random(),
      icon=('BoxCheckmarkSolid' if random.random() > 0.5 else 'BoxMultiplySolid'),
      notifications=('Off' if random.random() > 0.5 else 'On')) for i in range(100)
      ]
      # Create columns for our issue table.
      columns = [
      ui.table_column(name='text', label='Issue', sortable=True, searchable=True, max_width='300'),
      ui.table_column(name='status', label='Status', filterable=True),
      ui.table_column(name='notifications', label='Notifications', filterable=True),
      ui.table_column(name='done', label='Done', cell_type=ui.icon_table_cell_type()),
      ui.table_column(name='views', label='Views', sortable=True),
      ui.table_column(name='progress', label='Progress', cell_type=ui.progress_table_cell_type()),
      ]
      -
      async def serve(q: Q):
      q.page['form'] = ui.form_card(box='1 1 -1 11', items=[
      ui.table(
      name='issues',
      columns=columns,
      rows=[ui.table_row(
      name=issue.id,
      cells=[issue.text, issue.status, issue.notifications, issue.icon, str(issue.views), issue.progress]) for
      issue in issues],
      groupable=True,
      downloadable=True,
      resettable=True,
      height='800px'
      )
      ])
      await q.page.save()
      -
      -
      listen('/demo', serve)
      Edit this page
      - - - - - - - - - - +
      @app('/demo')
      async def serve(q: Q):
      q.page['form'] = ui.form_card(box='1 1 -1 11', items=[
      ui.table(
      name='issues',
      columns=columns,
      rows=[ui.table_row(
      name=issue.id,
      cells=[issue.text, issue.status, issue.notifications, issue.icon, str(issue.views), issue.progress]) for
      issue in issues],
      groupable=True,
      downloadable=True,
      resettable=True,
      height='800px'
      )
      ])
      await q.page.save()
      Edit this page
      + + + + + + + + + + \ No newline at end of file diff --git a/docs/docs/examples/tabs/index.html b/docs/docs/examples/tabs/index.html index 63fea7db74..6a3d44855e 100644 --- a/docs/docs/examples/tabs/index.html +++ b/docs/docs/examples/tabs/index.html @@ -5,36 +5,34 @@ Form / Tabs | H2O Wave - - - - - - - - - - + + + + + + + + + +
      -

      Form / Tabs

      Use tabs within a form to navigate between two or more distinct content categories.

      from h2o_wave import Q, listen, ui
      +

      Form / Tabs

      Use tabs within a form to navigate between two or more distinct content categories.

      from h2o_wave import main, app, Q, ui
      tabs = [
      ui.tab(name='email', label='Mail', icon='Mail'),
      ui.tab(name='events', label='Events', icon='Calendar'),
      ui.tab(name='spam', label='Spam'),
      ]
      -
      async def serve(q: Q):
      if q.args.menu:
      q.page['example'].items = [
      ui.tabs(name='menu', value=q.args.menu, items=tabs),
      get_tab_content(q.args.menu),
      ]
      else:
      q.page['example'] = ui.form_card(box='1 1 4 10', items=[
      ui.tabs(name='menu', value='email', items=tabs),
      get_tab_content('email'),
      ])
      await q.page.save()
      +
      @app('/demo')
      async def serve(q: Q):
      if q.args.menu:
      q.page['example'].items = [
      ui.tabs(name='menu', value=q.args.menu, items=tabs),
      get_tab_content(q.args.menu),
      ]
      else:
      q.page['example'] = ui.form_card(box='1 1 4 10', items=[
      ui.tabs(name='menu', value='email', items=tabs),
      get_tab_content('email'),
      ])
      await q.page.save()
      -
      def get_tab_content(category: str):
      # Return a checklist of dummy items.
      items = [f'{category.title()} {i}' for i in range(1, 11)]
      return ui.checklist(name='items', choices=[ui.choice(name=item, label=item) for item in items])
      -
      -
      listen('/demo', serve)
      Edit this page
      - - - - - - - - - - +
      def get_tab_content(category: str):
      # Return a checklist of dummy items.
      items = [f'{category.title()} {i}' for i in range(1, 11)]
      return ui.checklist(name='items', choices=[ui.choice(name=item, label=item) for item in items])
      Edit this page
      + + + + + + + + + + \ No newline at end of file diff --git a/docs/docs/examples/template-data/index.html b/docs/docs/examples/template-data/index.html index c67155b259..a2af562eac 100644 --- a/docs/docs/examples/template-data/index.html +++ b/docs/docs/examples/template-data/index.html @@ -5,20 +5,20 @@ Template / Data | H2O Wave - - - - - - - - - - + + + + + + + + + +
      -

      Template / Data

      Update a template card's data periodically.

      import time
      import random
      from h2o_wave import site, ui
      +

      Template / Data

      Update a template card's data periodically.

      import time
      import random
      from h2o_wave import site, ui
      page = site['/demo']
      page.drop()
      menu = '''
      <ol>
      {{#each dishes}}
      <li><strong>{{name}}</strong> costs {{price}}</li>
      {{/each}}
      </ol
      '''
      menu_card = page.add('template_example', ui.template_card(
      box=f'1 1 2 2',
      title='Surge-priced Menu',
      content=menu,
      data=dict(dishes=[
      dict(name='Spam', price='$2.00'),
      dict(name='Ham', price='$3.45'),
      dict(name='Eggs', price='$1.75'),
      ]),
      ))
      page.save()
      @@ -26,15 +26,15 @@
      def rand_price(): return f'${random.randrange(0, 4)}.{random.randrange(10, 99)}'
      dishes = menu_card.data.dishes
      for i in range(98, 2, -1):
      time.sleep(1)
      dishes[0].price = rand_price()
      dishes[1].price = rand_price()
      dishes[2].price = rand_price()
      page.save()
      Edit this page
      - - - - - - - - - - + + + + + + + + + + \ No newline at end of file diff --git a/docs/docs/examples/template/index.html b/docs/docs/examples/template/index.html index 3ba7d1aff1..fa163260c4 100644 --- a/docs/docs/examples/template/index.html +++ b/docs/docs/examples/template/index.html @@ -5,32 +5,32 @@ Template | H2O Wave - - - - - - - - - - + + + + + + + + + +
      -

      Template

      Use a template card to render dynamic content using a HTML template.

      from h2o_wave import site, pack, ui
      +

      Template

      Use a template card to render dynamic content using a HTML template.

      from h2o_wave import site, pack, ui
      page = site['/demo']
      page.drop()
      menu = '''
      <ol>
      {{#each dishes}}
      <li><strong>{{name}}</strong> costs {{price}}</li>
      {{/each}}
      </ol
      '''
      c = page.add('template_example', ui.template_card(
      box=f'1 1 2 2',
      title='Menu',
      content=menu,
      data=pack(dict(dishes=[
      dict(name='Spam', price='$2.00'),
      dict(name='Ham', price='$3.45'),
      dict(name='Eggs', price='$1.75'),
      ])),
      ))
      page.save()
      Edit this page
      - - - - - - - - - - + + + + + + + + + + \ No newline at end of file diff --git a/docs/docs/examples/text-sizes/index.html b/docs/docs/examples/text-sizes/index.html index e5e6527b98..64ada22e7c 100644 --- a/docs/docs/examples/text-sizes/index.html +++ b/docs/docs/examples/text-sizes/index.html @@ -5,32 +5,32 @@ Form / Text / Sizes | H2O Wave - - - - - - - - - - + + + + + + + + + +
      -

      Form / Text / Sizes

      Use text size variants to display formatted text using predefined font sizes.

      from h2o_wave import site, ui
      +

      Form / Text / Sizes

      Use text size variants to display formatted text using predefined font sizes.

      from h2o_wave import site, ui
      page = site['/demo']
      page['example'] = ui.form_card(
      box='1 1 4 -1',
      items=[
      ui.separator('Separator'),
      ui.text_xl('Extra large text'),
      ui.text_l('Large text'),
      ui.text('Normal text'),
      ui.text_m('Medium text'),
      ui.text_s('Small text'),
      ui.text_xs('Extra small text'),
      # Using `ui.text()` with a `size` argument produces similar results:
      ui.separator('Separator'),
      ui.text('Extra large text', size='xl'),
      ui.text('Large text', size='l'),
      ui.text('Normal text'),
      ui.text('Medium text', size='m'),
      ui.text('Small text', size='s'),
      ui.text('Extra small text', size='xs'),
      ],
      )
      page.save()
      Edit this page
      - - - - - - - - - - + + + + + + + + + + \ No newline at end of file diff --git a/docs/docs/examples/text/index.html b/docs/docs/examples/text/index.html index edac563a84..497f137699 100644 --- a/docs/docs/examples/text/index.html +++ b/docs/docs/examples/text/index.html @@ -5,20 +5,20 @@ Form / Text | H2O Wave - - - - - - - - - - + + + + + + + + + +
      -

      Form / Text

      Use markdown in a text component to display formatted content within a form.

      from h2o_wave import site, ui
      +

      Form / Text

      Use markdown in a text component to display formatted content within a form.

      from h2o_wave import site, ui
      page = site['/demo']
      sample_markdown = '''
      The **quick** _brown_ fox jumped over the lazy dog.
      Block quote:
      @@ -34,15 +34,15 @@
      Table:
      | Column 1 | Column 2 | Column 3 |
      | -------- | -------- | -------- |
      | Item 1 | Item 2 | Item 3 |
      | Item 1 | Item 2 | Item 3 |
      | Item 1 | Item 2 | Item 3 |
      '''
      page['example'] = ui.form_card(
      box='1 1 4 -1',
      items=[ui.text(sample_markdown)]
      )
      page.save()
      Edit this page
      - - - - - - - - - - + + + + + + + + + + \ No newline at end of file diff --git a/docs/docs/examples/textbox-trigger/index.html b/docs/docs/examples/textbox-trigger/index.html index 7a03d37286..02d5a0326a 100644 --- a/docs/docs/examples/textbox-trigger/index.html +++ b/docs/docs/examples/textbox-trigger/index.html @@ -5,35 +5,33 @@ Form / Textbox / Trigger | H2O Wave - - - - - - - - - - + + + + + + + + + +
      -

      Form / Textbox / Trigger

      To handle live changes to a textbox, enable the trigger attribute.

      from h2o_wave import Q, listen, ui
      +

      Form / Textbox / Trigger

      To handle live changes to a textbox, enable the trigger attribute.

      from h2o_wave import main, app, Q, ui
      def to_pig_latin(text: str):
      if text is None:
      return ''
      words = text.lower().strip().split(" ")
      text = []
      for word in words:
      if word[0] in 'aeiou':
      text.append(f'{word}yay')
      else:
      for letter in word:
      if letter in 'aeiou':
      text.append(f'{word[word.index(letter):]}{word[:word.index(letter)]}ay')
      break
      return " ".join(text)
      -
      async def serve(q: Q):
      q.page['example'] = ui.form_card(box='1 1 4 10', items=[
      ui.textbox(name='text', label='English', value=q.args.text or '', multiline=True, trigger=True),
      ui.label('Pig Latin'),
      ui.text(to_pig_latin(q.args.text) or '*Type in some text above to translate to Pig Latin!*'),
      ])
      await q.page.save()
      -
      -
      listen('/demo', serve)
      Edit this page
      - - - - - - - - - - +
      @app('/demo')
      async def serve(q: Q):
      q.page['example'] = ui.form_card(box='1 1 4 10', items=[
      ui.textbox(name='text', label='English', value=q.args.text or '', multiline=True, trigger=True),
      ui.label('Pig Latin'),
      ui.text(to_pig_latin(q.args.text) or '*Type in some text above to translate to Pig Latin!*'),
      ])
      await q.page.save()
      Edit this page
      + + + + + + + + + + \ No newline at end of file diff --git a/docs/docs/examples/textbox/index.html b/docs/docs/examples/textbox/index.html index 66e1ed9d1a..991636f190 100644 --- a/docs/docs/examples/textbox/index.html +++ b/docs/docs/examples/textbox/index.html @@ -5,33 +5,31 @@ Form / Textbox | H2O Wave - - - - - - - - - - + + + + + + + + + +
      -

      Form / Textbox

      Use a textbox to allow users to provide text inputs.

      from h2o_wave import Q, listen, ui
      +

      Form / Textbox

      Use a textbox to allow users to provide text inputs.

      from h2o_wave import main, app, Q, ui
      -
      async def serve(q: Q):
      if q.args.show_inputs:
      q.page['example'].items = [
      ui.text(f'textbox={q.args.textbox}'),
      ui.text(f'textbox_disabled={q.args.textbox_disabled}'),
      ui.text(f'textbox_readonly={q.args.textbox_readonly}'),
      ui.text(f'textbox_required={q.args.textbox_required}'),
      ui.text(f'textbox_error={q.args.textbox_error}'),
      ui.text(f'textbox_mask={q.args.textbox_mask}'),
      ui.text(f'textbox_icon={q.args.textbox_icon}'),
      ui.text(f'textbox_prefix={q.args.textbox_prefix}'),
      ui.text(f'textbox_suffix={q.args.textbox_suffix}'),
      ui.text(f'textbox_placeholder={q.args.textbox_placeholder}'),
      ui.text(f'textbox_disabled_placeholder={q.args.textbox_disabled_placeholder}'),
      ui.text(f'textbox_multiline={q.args.textbox_multiline}'),
      ui.button(name='show_form', label='Back', primary=True),
      ]
      else:
      q.page['example'] = ui.form_card(box='1 1 4 10', items=[
      ui.textbox(name='textbox', label='Standard'),
      ui.textbox(name='textbox_disabled', label='Disabled', value='I am disabled', disabled=True),
      ui.textbox(name='textbox_readonly', label='Read-only', value='I am read-only', readonly=True),
      ui.textbox(name='textbox_required', label='Required', required=True),
      ui.textbox(name='textbox_error', label='With error message', error='I have an error'),
      ui.textbox(name='textbox_mask', label='With input mask', mask='(999) 999 - 9999'),
      ui.textbox(name='textbox_icon', label='With icon', icon='Calendar'),
      ui.textbox(name='textbox_prefix', label='With prefix', prefix='http://'),
      ui.textbox(name='textbox_suffix', label='With suffix', suffix='@h2o.ai'),
      ui.textbox(name='textbox_placeholder', label='With placeholder', placeholder='I need some input'),
      ui.textbox(name='textbox_disabled_placeholder', label='Disabled with placeholder', disabled=True,
      placeholder='I am disabled'),
      ui.textbox(name='textbox_multiline', label='Multiline textarea', multiline=True),
      ui.button(name='show_inputs', label='Submit', primary=True),
      ])
      await q.page.save()
      -
      -
      listen('/demo', serve)
      Edit this page
      - - - - - - - - - - +
      @app('/demo')
      async def serve(q: Q):
      if q.args.show_inputs:
      q.page['example'].items = [
      ui.text(f'textbox={q.args.textbox}'),
      ui.text(f'textbox_disabled={q.args.textbox_disabled}'),
      ui.text(f'textbox_readonly={q.args.textbox_readonly}'),
      ui.text(f'textbox_required={q.args.textbox_required}'),
      ui.text(f'textbox_error={q.args.textbox_error}'),
      ui.text(f'textbox_mask={q.args.textbox_mask}'),
      ui.text(f'textbox_icon={q.args.textbox_icon}'),
      ui.text(f'textbox_prefix={q.args.textbox_prefix}'),
      ui.text(f'textbox_suffix={q.args.textbox_suffix}'),
      ui.text(f'textbox_placeholder={q.args.textbox_placeholder}'),
      ui.text(f'textbox_disabled_placeholder={q.args.textbox_disabled_placeholder}'),
      ui.text(f'textbox_multiline={q.args.textbox_multiline}'),
      ui.button(name='show_form', label='Back', primary=True),
      ]
      else:
      q.page['example'] = ui.form_card(box='1 1 4 10', items=[
      ui.textbox(name='textbox', label='Standard'),
      ui.textbox(name='textbox_disabled', label='Disabled', value='I am disabled', disabled=True),
      ui.textbox(name='textbox_readonly', label='Read-only', value='I am read-only', readonly=True),
      ui.textbox(name='textbox_required', label='Required', required=True),
      ui.textbox(name='textbox_error', label='With error message', error='I have an error'),
      ui.textbox(name='textbox_mask', label='With input mask', mask='(999) 999 - 9999'),
      ui.textbox(name='textbox_icon', label='With icon', icon='Calendar'),
      ui.textbox(name='textbox_prefix', label='With prefix', prefix='http://'),
      ui.textbox(name='textbox_suffix', label='With suffix', suffix='@h2o.ai'),
      ui.textbox(name='textbox_placeholder', label='With placeholder', placeholder='I need some input'),
      ui.textbox(name='textbox_disabled_placeholder', label='Disabled with placeholder', disabled=True,
      placeholder='I am disabled'),
      ui.textbox(name='textbox_multiline', label='Multiline textarea', multiline=True),
      ui.button(name='show_inputs', label='Submit', primary=True),
      ])
      await q.page.save()
      Edit this page
      + + + + + + + + + + \ No newline at end of file diff --git a/docs/docs/examples/todo/index.html b/docs/docs/examples/todo/index.html index 26165064f0..e8b17c9f99 100644 --- a/docs/docs/examples/todo/index.html +++ b/docs/docs/examples/todo/index.html @@ -5,25 +5,25 @@ To-do List App | H2O Wave - - - - - - - - - - + + + + + + + + + +
      -

      To-do List App

      A simple multi-user To-do list application.

      from h2o_wave import Q, listen, ui
      from typing import List
      +

      To-do List App

      A simple multi-user To-do list application.

      from h2o_wave import main, app, Q, ui
      from typing import List
      _id = 0
      # A simple class that represents a to-do item.
      class TodoItem:
      def __init__(self, text):
      global _id
      _id += 1
      self.id = f'todo_{_id}'
      self.done = False
      self.text = text
      -
      async def serve(q: Q):
      if q.args.new_todo: # Display an input form.
      await new_todo(q)
      elif q.args.add_todo: # Add an item.
      await add_todo(q)
      else: # Show all items.
      await show_todos(q)
      +
      @app('/demo')
      async def serve(q: Q):
      if q.args.new_todo: # Display an input form.
      await new_todo(q)
      elif q.args.add_todo: # Add an item.
      await add_todo(q)
      else: # Show all items.
      await show_todos(q)
      async def show_todos(q: Q):
      # Get items for this user.
      todos: List[TodoItem] = q.user.todos
      # Create a sample list if we don't have any.
      if todos is None:
      q.user.todos = todos = [TodoItem('Do this'), TodoItem('Do that'), TodoItem('Do something else')]
      @@ -34,18 +34,16 @@
      async def add_todo(q: Q):
      # Insert a new item
      q.user.todos.insert(0, TodoItem(q.args.text or 'Untitled'))
      # Go back to our list.
      await show_todos(q)
      -
      async def new_todo(q: Q):
      # Display an input form
      q.page['form'] = ui.form_card(box='1 1 4 10', items=[
      ui.text_l('Add To Do'),
      ui.textbox(name='text', label='What needs to be done?', multiline=True),
      ui.buttons([
      ui.button(name='add_todo', label='Add', primary=True),
      ui.button(name='show_todos', label='Back'),
      ]),
      ])
      await q.page.save()
      -
      -
      listen('/demo', serve)
      Edit this page
      - - - - - - - - - - +
      async def new_todo(q: Q):
      # Display an input form
      q.page['form'] = ui.form_card(box='1 1 4 10', items=[
      ui.text_l('Add To Do'),
      ui.textbox(name='text', label='What needs to be done?', multiline=True),
      ui.buttons([
      ui.button(name='add_todo', label='Add', primary=True),
      ui.button(name='show_todos', label='Back'),
      ]),
      ])
      await q.page.save()
      Edit this page
      + + + + + + + + + + \ No newline at end of file diff --git a/docs/docs/examples/toggle/index.html b/docs/docs/examples/toggle/index.html index 749eb42bf0..651f40a673 100644 --- a/docs/docs/examples/toggle/index.html +++ b/docs/docs/examples/toggle/index.html @@ -5,33 +5,31 @@ Form / Toggle | H2O Wave - - - - - - - - - - + + + + + + + + + +
      -

      Form / Toggle

      Use a toggle to present users with two mutually exclusive options (to turn settings on and off).

      from h2o_wave import Q, listen, ui
      +

      Form / Toggle

      Use a toggle to present users with two mutually exclusive options (to turn settings on and off).

      from h2o_wave import main, app, Q, ui
      -
      async def serve(q: Q):
      if q.args.show_inputs:
      q.page['example'].items = [
      ui.text(f'toggle_unchecked={q.args.toggle_unchecked}'),
      ui.text(f'toggle_checked={q.args.toggle_checked}'),
      ui.text(f'toggle_unchecked_disabled={q.args.toggle_unchecked_disabled}'),
      ui.text(f'toggle_checked_disabled={q.args.toggle_checked_disabled}'),
      ui.button(name='show_form', label='Back', primary=True),
      ]
      else:
      q.page['example'] = ui.form_card(box='1 1 4 10', items=[
      ui.toggle(name='toggle_unchecked', label='Not checked'),
      ui.toggle(name='toggle_checked', label='Checked', value=True),
      ui.toggle(name='toggle_unchecked_disabled', label='Not checked (Disabled)', disabled=True),
      ui.toggle(name='toggle_checked_disabled', label='Checked (Disabled)', value=True, disabled=True),
      ui.button(name='show_inputs', label='Submit', primary=True),
      ])
      await q.page.save()
      -
      -
      listen('/demo', serve)
      Edit this page
      - - - - - - - - - - +
      @app('/demo')
      async def serve(q: Q):
      if q.args.show_inputs:
      q.page['example'].items = [
      ui.text(f'toggle_unchecked={q.args.toggle_unchecked}'),
      ui.text(f'toggle_checked={q.args.toggle_checked}'),
      ui.text(f'toggle_unchecked_disabled={q.args.toggle_unchecked_disabled}'),
      ui.text(f'toggle_checked_disabled={q.args.toggle_checked_disabled}'),
      ui.button(name='show_form', label='Back', primary=True),
      ]
      else:
      q.page['example'] = ui.form_card(box='1 1 4 10', items=[
      ui.toggle(name='toggle_unchecked', label='Not checked'),
      ui.toggle(name='toggle_checked', label='Checked', value=True),
      ui.toggle(name='toggle_unchecked_disabled', label='Not checked (Disabled)', disabled=True),
      ui.toggle(name='toggle_checked_disabled', label='Checked (Disabled)', value=True, disabled=True),
      ui.button(name='show_inputs', label='Submit', primary=True),
      ])
      await q.page.save()
      Edit this page
      + + + + + + + + + + \ No newline at end of file diff --git a/docs/docs/examples/toolbar-routing/index.html b/docs/docs/examples/toolbar-routing/index.html index 3d8389cecc..670f61e0c6 100644 --- a/docs/docs/examples/toolbar-routing/index.html +++ b/docs/docs/examples/toolbar-routing/index.html @@ -5,34 +5,32 @@ Routing / Toolbar | H2O Wave - - - - - - - - - - + + + + + + + + + +
      -

      Routing / Toolbar

      This example demonstrates how you can observe and handle changes to the browser's -location hash

      The location hash can be accessed using q.args['#'].

      from h2o_wave import Q, listen, ui
      +

      Routing / Toolbar

      This example demonstrates how you can observe and handle changes to the browser's +location hash

      The location hash can be accessed using q.args['#'].

      from h2o_wave import main, app, Q, ui
      -
      async def serve(q: Q):
      hash = q.args['#']
      if hash:
      blurb = q.page['blurb']
      if hash == 'menu/spam':
      blurb.content = "Sorry, we're out of spam!"
      elif hash == 'menu/ham':
      blurb.content = "Sorry, we're out of ham!"
      elif hash == 'menu/eggs':
      blurb.content = "Sorry, we're out of eggs!"
      elif hash == 'about':
      blurb.content = 'Everything here is gluten-free!'
      else:
      q.page['nav'] = ui.toolbar_card(
      box='1 1 4 1',
      items=[
      ui.command(name='#menu/spam', label='Spam'),
      ui.command(name='#menu/ham', label='Ham'),
      ui.command(name='#menu/eggs', label='Eggs'),
      ui.command(name='#about', label='About'),
      ],
      )
      q.page['blurb'] = ui.markdown_card(
      box='1 2 4 2',
      title='Store',
      content='Welcome to our store!',
      )
      await q.page.save()
      -
      -
      listen('/demo', serve)
      Edit this page
      - - - - - - - - - - +
      @app('/demo')
      async def serve(q: Q):
      hash = q.args['#']
      if hash:
      blurb = q.page['blurb']
      if hash == 'menu/spam':
      blurb.content = "Sorry, we're out of spam!"
      elif hash == 'menu/ham':
      blurb.content = "Sorry, we're out of ham!"
      elif hash == 'menu/eggs':
      blurb.content = "Sorry, we're out of eggs!"
      elif hash == 'about':
      blurb.content = 'Everything here is gluten-free!'
      else:
      q.page['nav'] = ui.toolbar_card(
      box='1 1 4 1',
      items=[
      ui.command(name='#menu/spam', label='Spam'),
      ui.command(name='#menu/ham', label='Ham'),
      ui.command(name='#menu/eggs', label='Eggs'),
      ui.command(name='#about', label='About'),
      ],
      )
      q.page['blurb'] = ui.markdown_card(
      box='1 2 4 2',
      title='Store',
      content='Welcome to our store!',
      )
      await q.page.save()
      Edit this page
      + + + + + + + + + + \ No newline at end of file diff --git a/docs/docs/examples/toolbar/index.html b/docs/docs/examples/toolbar/index.html index eb196686b2..8e5afbd13b 100644 --- a/docs/docs/examples/toolbar/index.html +++ b/docs/docs/examples/toolbar/index.html @@ -5,33 +5,31 @@ Toolbar | H2O Wave - - - - - - - - - - + + + + + + + + + +
      -

      Toolbar

      Use toolbars to provide commands that operate on the content of a page.

      from h2o_wave import Q, listen, ui
      +

      Toolbar

      Use toolbars to provide commands that operate on the content of a page.

      from h2o_wave import main, app, Q, ui
      -
      async def serve(q: Q):
      q.page['nav'] = ui.toolbar_card(
      box='1 1 4 1',
      items=[
      ui.command(
      name='new', label='New', icon='Add', items=[
      ui.command(name='email', label='Email Message', icon='Mail'),
      ui.command(name='calendar', label='Calendar Event', icon='Calendar'),
      ]
      ),
      ui.command(name='upload', label='Upload', icon='Upload'),
      ui.command(name='share', label='Share', icon='Share'),
      ui.command(name='download', label='Download', icon='Download'),
      ],
      secondary_items=[
      ui.command(name='tile', caption='Grid View', icon='Tiles'),
      ui.command(name='info', caption='Info', icon='Info'),
      ],
      overflow_items=[
      ui.command(name='move', label='Move to...', icon='MoveToFolder'),
      ui.command(name='copy', label='Copy to...', icon='Copy'),
      ui.command(name='rename', label='Rename', icon='Edit'),
      ],
      )
      await q.page.save()
      -
      -
      listen('/demo', serve)
      Edit this page
      - - - - - - - - - - +
      @app('/demo')
      async def serve(q: Q):
      q.page['nav'] = ui.toolbar_card(
      box='1 1 4 1',
      items=[
      ui.command(
      name='new', label='New', icon='Add', items=[
      ui.command(name='email', label='Email Message', icon='Mail'),
      ui.command(name='calendar', label='Calendar Event', icon='Calendar'),
      ]
      ),
      ui.command(name='upload', label='Upload', icon='Upload'),
      ui.command(name='share', label='Share', icon='Share'),
      ui.command(name='download', label='Download', icon='Download'),
      ],
      secondary_items=[
      ui.command(name='tile', caption='Grid View', icon='Tiles'),
      ui.command(name='info', caption='Info', icon='Info'),
      ],
      overflow_items=[
      ui.command(name='move', label='Move to...', icon='MoveToFolder'),
      ui.command(name='copy', label='Copy to...', icon='Copy'),
      ui.command(name='rename', label='Rename', icon='Edit'),
      ],
      )
      await q.page.save()
      Edit this page
      + + + + + + + + + + \ No newline at end of file diff --git a/docs/docs/examples/upload-async/index.html b/docs/docs/examples/upload-async/index.html index bc66df5f2b..3c6f567e95 100644 --- a/docs/docs/examples/upload-async/index.html +++ b/docs/docs/examples/upload-async/index.html @@ -5,36 +5,34 @@ Uploads / Async | H2O Wave - - - - - - - - - - + + + + + + + + + +
      -

      Uploads / Async

      Upload files from an interactive app.

      import os
      from h2o_wave import Q, listen, ui
      +

      Uploads / Async

      Upload files from an interactive app.

      import os
      from h2o_wave import main, app, Q, ui
      def write_csv(filename, rows):
      with open(filename, 'w') as f:
      f.write('\n'.join([','.join([str(x) for x in row]) for row in rows]))
      -
      async def serve(q: Q):
      if q.args.generate_csv:
      # Generate
      write_csv('squares.csv', [[x, x * x] for x in range(1, 1 + q.args.row_count)])
      # Upload
      download_path, = await q.site.upload(['squares.csv'])
      # Clean up
      os.remove('squares.csv')
      -
      # Display link
      q.page['example'].items = [
      ui.text_xl('Squares Generated!'),
      ui.text(f'[Download my {q.args.row_count} squares!]({download_path})'),
      ui.button(name='show_form', label='Back', primary=True),
      ]
      else:
      # Accept a row count from the user
      q.page['example'] = ui.form_card(box='1 1 4 10', items=[
      ui.text_xl('Square Generator'),
      ui.slider(name='row_count', label='Squares to generate', min=0, max=100, step=10, value=30),
      ui.button(name='generate_csv', label='Generate', primary=True),
      ])
      await q.page.save()
      -
      -
      listen('/demo', serve)
      Edit this page
      - - - - - - - - - - +
      @app('/demo')
      async def serve(q: Q):
      if q.args.generate_csv:
      # Generate
      write_csv('squares.csv', [[x, x * x] for x in range(1, 1 + q.args.row_count)])
      # Upload
      download_path, = await q.site.upload(['squares.csv'])
      # Clean up
      os.remove('squares.csv')
      +
      # Display link
      q.page['example'].items = [
      ui.text_xl('Squares Generated!'),
      ui.text(f'[Download my {q.args.row_count} squares!]({download_path})'),
      ui.button(name='show_form', label='Back', primary=True),
      ]
      else:
      # Accept a row count from the user
      q.page['example'] = ui.form_card(box='1 1 4 10', items=[
      ui.text_xl('Square Generator'),
      ui.slider(name='row_count', label='Squares to generate', min=0, max=100, step=10, value=30),
      ui.button(name='generate_csv', label='Generate', primary=True),
      ])
      await q.page.save()
      Edit this page
      + + + + + + + + + + \ No newline at end of file diff --git a/docs/docs/examples/upload-download/index.html b/docs/docs/examples/upload-download/index.html index e2c68a7d93..1cb3dfe42a 100644 --- a/docs/docs/examples/upload-download/index.html +++ b/docs/docs/examples/upload-download/index.html @@ -5,34 +5,33 @@ Uploads / Download | H2O Wave - - - - - - - - - - + + + + + + + + + +
      -

      Uploads / Download

      Accept files from the user and downloads them locally.

      import os
      import os.path
      from h2o_wave import Q, listen, ui
      -
      async def serve(q: Q):
      links = q.args.user_files
      if links:
      items = [ui.text_xl('Files uploaded!')]
      for link in links:
      local_path = await q.site.download(link, '.')
      #
      # The file is now available locally; process the file.
      # To keep this example simple, we just read the file size.
      #
      size = os.path.getsize(local_path)
      -
      items.append(ui.link(label=f'{os.path.basename(link)} ({size} bytes)', download=True, path=link))
      # Clean up
      os.remove(local_path)
      -
      items.append(ui.button(name='back', label='Back', primary=True))
      q.page['example'].items = items
      else:
      q.page['example'] = ui.form_card(box='1 1 4 10', items=[
      ui.text_xl('Upload some files'),
      ui.file_upload(name='user_files', label='Upload', multiple=True),
      ])
      await q.page.save()
      +

      Uploads / Download

      Accept files from the user and downloads them locally.

      import os
      import os.path
      from h2o_wave import main, app, Q, ui
      -
      listen('/demo', serve)
      Edit this page
      - - - - - - - - - - +
      @app('/demo')
      async def serve(q: Q):
      links = q.args.user_files
      if links:
      items = [ui.text_xl('Files uploaded!')]
      for link in links:
      local_path = await q.site.download(link, '.')
      #
      # The file is now available locally; process the file.
      # To keep this example simple, we just read the file size.
      #
      size = os.path.getsize(local_path)
      +
      items.append(ui.link(label=f'{os.path.basename(link)} ({size} bytes)', download=True, path=link))
      # Clean up
      os.remove(local_path)
      +
      items.append(ui.button(name='back', label='Back', primary=True))
      q.page['example'].items = items
      else:
      q.page['example'] = ui.form_card(box='1 1 4 10', items=[
      ui.text_xl('Upload some files'),
      ui.file_upload(name='user_files', label='Upload', multiple=True),
      ])
      await q.page.save()
      Edit this page
      + + + + + + + + + + \ No newline at end of file diff --git a/docs/docs/examples/upload-ui/index.html b/docs/docs/examples/upload-ui/index.html index ef90dd2155..611d984771 100644 --- a/docs/docs/examples/upload-ui/index.html +++ b/docs/docs/examples/upload-ui/index.html @@ -5,35 +5,33 @@ Uploads / UI | H2O Wave - - - - - - - - - - + + + + + + + + + +
      -

      Uploads / UI

      Accept files from the user.

      import os
      from h2o_wave import Q, listen, ui
      import os.path
      +

      Uploads / UI

      Accept files from the user.

      import os
      from h2o_wave import main, app, Q, ui
      import os.path
      def make_link_list(links):
      # Make a markdown list of links.
      return '\n'.join([f'- [{os.path.basename(link)}]({link})' for link in links])
      -
      async def serve(q: Q):
      if q.args.user_files:
      q.page['example'].items = [
      ui.text_xl('Files uploaded!'),
      ui.text(make_link_list(q.args.user_files)),
      ui.button(name='back', label='Back', primary=True),
      ]
      else:
      q.page['example'] = ui.form_card(box='1 1 4 10', items=[
      ui.text_xl('Upload some files'),
      ui.file_upload(name='user_files', label='Upload', multiple=True),
      ])
      await q.page.save()
      -
      -
      listen('/demo', serve)
      Edit this page
      - - - - - - - - - - +
      @app('/demo')
      async def serve(q: Q):
      if q.args.user_files:
      q.page['example'].items = [
      ui.text_xl('Files uploaded!'),
      ui.text(make_link_list(q.args.user_files)),
      ui.button(name='back', label='Back', primary=True),
      ]
      else:
      q.page['example'] = ui.form_card(box='1 1 4 10', items=[
      ui.text_xl('Upload some files'),
      ui.file_upload(name='user_files', label='Upload', multiple=True),
      ])
      await q.page.save()
      Edit this page
      + + + + + + + + + + \ No newline at end of file diff --git a/docs/docs/examples/upload/index.html b/docs/docs/examples/upload/index.html index acdf885508..0d4b8c2343 100644 --- a/docs/docs/examples/upload/index.html +++ b/docs/docs/examples/upload/index.html @@ -4,21 +4,21 @@ -Uploads | H2O Wave - - - - - - - - - - +Uploads | H2O Wave + + + + + + + + + +
      -

      Uploads

      Upload files to the Q server.

      import os
      from h2o_wave import site, ui
      +

      Uploads

      Upload files to the Wave server.

      import os
      from h2o_wave import site, ui
      def write_csv(filename, rows):
      with open(filename, 'w') as f:
      f.write('\n'.join([','.join([str(x) for x in row]) for row in rows]))
      @@ -26,15 +26,15 @@
      # Upload CSVs
      squares_path, cubes_path = site.upload(['squares.csv', 'cubes.csv'])
      # Delete local CSVs
      os.remove('squares.csv')
      os.remove('cubes.csv')
      # Display links to these CSVs
      page = site['/demo']
      page['example'] = ui.markdown_card(
      box='1 1 2 2',
      title='Download CSVs',
      content=f'[Squares]({squares_path}) [Cubes]({cubes_path})',
      )
      page.save()
      Edit this page
      - - - - - - - - - - + + + + + + + + + + \ No newline at end of file diff --git a/docs/docs/examples/wizard/index.html b/docs/docs/examples/wizard/index.html index 9c8ec8d5e7..a61cab1d55 100644 --- a/docs/docs/examples/wizard/index.html +++ b/docs/docs/examples/wizard/index.html @@ -5,37 +5,35 @@ Wizard | H2O Wave - - - - - - - - - - + + + + + + + + + +
      -

      Wizard

      Create a multi-step wizard using form cards.

      from h2o_wave import Q, ui, listen, cypress, Cypress
      +

      Wizard

      Create a multi-step wizard using form cards.

      from h2o_wave import Q, ui, main, app, cypress, Cypress
      -
      async def serve(q: Q):
      if not q.client.initialized: # First visit, create an empty form card for our wizard
      q.page['wizard'] = ui.form_card(box='1 1 2 4', items=[])
      q.client.initialized = True
      -
      wizard = q.page['wizard'] # Get a reference to the wizard form
      if q.args.step1:
      wizard.items = [
      ui.text_xl('Wizard - Step 1'),
      ui.text("What is your name?"),
      ui.textbox(name='nickname', label='My name is...', value='Gandalf'),
      ui.buttons([ui.button(name='step2', label='Next', primary=True)]),
      ]
      elif q.args.step2:
      q.client.nickname = q.args.nickname
      wizard.items = [
      ui.text_xl('Wizard - Step 2'),
      ui.text(f"Hi {q.args.nickname}! How do you feel right now?"),
      ui.textbox(name='feeling', label='I feel...', value='magical'),
      ui.buttons([ui.button(name='step3', label='Next', primary=True)]),
      ]
      elif q.args.step3:
      wizard.items = [
      ui.text_xl('Wizard - Done'),
      ui.text(f"What a coincidence, {q.client.nickname}! I feel {q.args.feeling} too!"),
      ui.buttons([ui.button(name='step1', label='Try Again', primary=True)]),
      ]
      else:
      wizard.items = [
      ui.text_xl('Wizard Example'),
      ui.text("Let's have a conversation, shall we?"),
      ui.buttons([ui.button(name='step1', label='Of course!', primary=True)]),
      ]
      +
      @app('/demo')
      async def serve(q: Q):
      if (
      not q.client.initialized
      ): # First visit, create an empty form card for our wizard
      q.page['wizard'] = ui.form_card(box='1 1 2 4', items=[])
      q.client.initialized = True
      +
      wizard = q.page['wizard'] # Get a reference to the wizard form
      if q.args.step1:
      wizard.items = [
      ui.text_xl('Wizard - Step 1'),
      ui.text('What is your name?', name='text'),
      ui.textbox(name='nickname', label='My name is...', value='Gandalf'),
      ui.buttons([ui.button(name='step2', label='Next', primary=True)]),
      ]
      elif q.args.step2:
      q.client.nickname = q.args.nickname
      wizard.items = [
      ui.text_xl('Wizard - Step 2'),
      ui.text(f'Hi {q.args.nickname}! How do you feel right now?', name='text'),
      ui.textbox(name='feeling', label='I feel...', value='magical'),
      ui.buttons([ui.button(name='step3', label='Next', primary=True)]),
      ]
      elif q.args.step3:
      wizard.items = [
      ui.text_xl('Wizard - Done'),
      ui.text(
      f'What a coincidence, {q.client.nickname}! I feel {q.args.feeling} too!',
      name='text',
      ),
      ui.buttons([ui.button(name='step1', label='Try Again', primary=True)]),
      ]
      else:
      wizard.items = [
      ui.text_xl('Wizard Example'),
      ui.text("Let's have a conversation, shall we?"),
      ui.buttons([ui.button(name='step1', label='Of course!', primary=True)]),
      ]
      await q.page.save()
      -
      @cypress('Walk through the wizard')
      def try_walk_through(cy: Cypress):
      cy.visit('/demo')
      cy.locate('step1').click()
      cy.locate('text').should('contain.text', 'What is your name?')
      cy.locate('nickname').clear().type('Fred')
      cy.locate('step2').click()
      cy.locate('text').should('contain.text', 'Hi Fred! How do you feel right now?')
      cy.locate('feeling').clear().type('quirky')
      cy.locate('step3').click()
      cy.locate('text').should('contain.text', 'What a coincidence, Fred! I feel quirky too!')
      -
      -
      listen('/demo', serve)
      Edit this page
      - - - - - - - - - - +
      @cypress('Walk through the wizard')
      def try_walk_through(cy: Cypress):
      cy.visit('/demo')
      cy.locate('step1').click()
      cy.locate('text').should('contain.text', 'What is your name?')
      cy.locate('nickname').clear().type('Fred')
      cy.locate('step2').click()
      cy.locate('text').should('contain.text', 'Hi Fred! How do you feel right now?')
      cy.locate('feeling').clear().type('quirky')
      cy.locate('step3').click()
      cy.locate('text').should(
      'contain.text', 'What a coincidence, Fred! I feel quirky too!'
      )
      Edit this page
      + + + + + + + + + + \ No newline at end of file diff --git a/docs/docs/expressions/index.html b/docs/docs/expressions/index.html index 3c8fd098e6..94c529f9fb 100644 --- a/docs/docs/expressions/index.html +++ b/docs/docs/expressions/index.html @@ -5,29 +5,29 @@ Data-binding | H2O Wave - - - - - - - - - - + + + + + + + + + +
      -

      Data-binding

      Some cards in the Wave SDK support data-binding expressions, a mini language that allows computing a card's attribute from the card's data.

      Rationale

      A card's attribute can be set directly when created:

      card = page.add(f'donut', ui.small_stat_card(
      box='1 1 2 2',
      title='Donut',
      value='2.99',
      ))

      The attribute can be updated later using:

      card.value = '3.49'

      The above approach works fine, but sometimes it's prudent to separate the data (what is displayed) from the presentation (how it is displayed). This is especially important if you care about internationalization and displaying language-sensitive number, date, and time formatting.

      The above example can be rewritten by pulling the donut price out into data, and pointing the value to the data using an expression:

      card = page.add(f'donut', ui.small_stat_card(
      box='1 1 2 2',
      title='Donut',
      value='=${{intl price minimum_fraction_digits=2 maximum_fraction_digits=2}}',
      data=dict(price=2.99),
      ))

      The attribute can be update later using:

      card.data.price = 3.49

      Syntax

      Data-binding expressions are indicated with a leading = (similar to spreadsheet formulae). For example, '={{price}}' is an expression, but '{{price}}' is not.

      Placeholders are enclosed between {{ and }}. The placeholder price in ={{price}} points to data.price. If data.price is 2.99:

      • ={{price}} translates to 2.99.
      • =${{price}} translates to $2.99.
      • =Donuts cost ${{price}} translates to Donuts cost $2.99.

      An expression can have multiple placeholders. For example, ={{product}} costs {{price}}

      If an expression has a placeholder and nothing else, the {{ and }} can be elided. For example, =price is shorthand for ={{price}}.

      Functions can be applied to placeholders using the general form {{function_name placeholder param1=arg1 param2=arg2 ...}}. For example {{intl price minimum_fraction_digits=2 maximum_fraction_digits=2}} applies the formatting function intl to price with arguments minimum_fraction_digits=2 and maximum_fraction_digits=2.

      Functions

      Expressions currently support only one function, intl, which provides language-sensitive number, date, and time formatting using the ECMAScript Internationalization API.

      tip

      Options in the Internationalization API are camelCased, but you can use both camelCased and snake_cased options in data-binding expressions. For example, both maximum_fraction_digits and maximumFractionDigits are valid.

      Edit this page
      - - - - - - - - - - +

      Data-binding

      Some cards in the Wave SDK support data-binding expressions, a mini language that allows computing a card's attribute from the card's data.

      Rationale

      A card's attribute can be set directly when created:

      card = page.add(f'donut', ui.small_stat_card(
      box='1 1 2 2',
      title='Donut',
      value='2.99',
      ))

      The attribute can be updated later using:

      card.value = '3.49'

      The above approach works fine, but sometimes it's prudent to separate the data (what is displayed) from the presentation (how it is displayed). This is especially important if you care about internationalization and displaying language-sensitive number, date, and time formatting.

      The above example can be rewritten by pulling the donut price out into data, and pointing the value to the data using an expression:

      card = page.add(f'donut', ui.small_stat_card(
      box='1 1 2 2',
      title='Donut',
      value='=${{intl price minimum_fraction_digits=2 maximum_fraction_digits=2}}',
      data=dict(price=2.99),
      ))

      The attribute can be update later using:

      card.data.price = 3.49

      Syntax

      Data-binding expressions are indicated with a leading = (similar to spreadsheet formulae). For example, '={{price}}' is an expression, but '{{price}}' is not.

      Placeholders are enclosed between {{ and }}. The placeholder price in ={{price}} points to data.price. If data.price is 2.99:

      • ={{price}} translates to 2.99.
      • =${{price}} translates to $2.99.
      • =Donuts cost ${{price}} translates to Donuts cost $2.99.

      An expression can have multiple placeholders. For example, ={{product}} costs {{price}}

      If an expression has a placeholder and nothing else, the {{ and }} can be elided. For example, =price is shorthand for ={{price}}.

      Functions can be applied to placeholders using the general form {{function_name placeholder param1=arg1 param2=arg2 ...}}. For example {{intl price minimum_fraction_digits=2 maximum_fraction_digits=2}} applies the formatting function intl to price with arguments minimum_fraction_digits=2 and maximum_fraction_digits=2.

      Functions

      Expressions currently support only one function, intl, which provides language-sensitive number, date, and time formatting using the ECMAScript Internationalization API.

      tip

      Options in the Internationalization API are camelCased, but you can use both camelCased and snake_cased options in data-binding expressions. For example, both maximum_fraction_digits and maximumFractionDigits are valid.

      Edit this page
      + + + + + + + + + + \ No newline at end of file diff --git a/docs/docs/files/index.html b/docs/docs/files/index.html index b0418c302f..e417cb48c6 100644 --- a/docs/docs/files/index.html +++ b/docs/docs/files/index.html @@ -5,33 +5,31 @@ Files | H2O Wave - - - - - - - - - - + + + + + + + + + +
      -

      Files

      Wave provides four functions to manage files from your app:

      • ui.file_upload() allows uploading files from the browser to the Wave server.
      • q.site.upload() uploads files from your app to the Wave server.
      • q.site.download() downloads a file from the Wave server to your app.
      • q.site.unload() deletes a file from the Wave server.

      Accept file uploads

      Use a file upload component (ui.file_upload()) to accept file uploads from the browser. Files get uploaded from the browser and get stored on the Wave server. Use q.site.download() to download files from the Wave server to your app.

      from h2o_wave import Q, listen, ui
      -
      async def serve(q: Q):
      paths = q.args.datasets
      if not paths:
      q.page['example'] = ui.form_card(box='1 1 4 10', items=[
      ui.text_xl('Upload datasets'),
      ui.file_upload(name='datasets', label='Upload', multiple=True),
      ])
      else:
      for path in paths:
      local_path = await q.site.download(path, '.')
      # Do something with the file located at local_path
      # ...
      await q.page.save()
      -
      listen('/uploads', serve)
      tip

      After a file is uploaded from the browser, it is stored forever on the Wave server. If you don't need the file any longer, use q.site.unload() to delete it from the Wave server.

      Provide file downloads

      Use q.site.upload() to upload files from your app to the Wave server. Use the returned paths to display download links in the browser.

      from h2o_wave import Q, listen, ui
      -
      async def serve(q: Q):
      download_path, = await q.site.upload(['results.csv'])
      q.page['download'] = ui.form_card(box='1 1 2 2', items = [
      ui.link(label='Download Results', path=download_path),
      ])
      await q.page.save()
      -
      listen('/downloads', serve)
      tip

      q.site.upload() accepts a list of file paths, so you can upload multiple files at a time.

      Edit this page
      - - - - - - - - - - +

      Files

      Wave provides four functions to manage files from your app:

      • ui.file_upload() allows uploading files from the browser to the Wave server.
      • q.site.upload() uploads files from your app to the Wave server.
      • q.site.download() downloads a file from the Wave server to your app.
      • q.site.unload() deletes a file from the Wave server.

      Accept file uploads

      Use a file upload component (ui.file_upload()) to accept file uploads from the browser. Files get uploaded from the browser and get stored on the Wave server. Use q.site.download() to download files from the Wave server to your app.

      from h2o_wave import Q, main, app, ui
      +
      @app('/uploads')
      async def serve(q: Q):
      paths = q.args.datasets
      if not paths:
      q.page['example'] = ui.form_card(box='1 1 4 10', items=[
      ui.text_xl('Upload datasets'),
      ui.file_upload(name='datasets', label='Upload', multiple=True),
      ])
      else:
      for path in paths:
      local_path = await q.site.download(path, '.')
      # Do something with the file located at local_path
      # ...
      await q.page.save()
      tip

      After a file is uploaded from the browser, it is stored forever on the Wave server. If you don't need the file any longer, use q.site.unload() to delete it from the Wave server.

      Provide file downloads

      Use q.site.upload() to upload files from your app to the Wave server. Use the returned paths to display download links in the browser.

      from h2o_wave import Q, main, app, ui
      +
      @app('/downloads')
      async def serve(q: Q):
      download_path, = await q.site.upload(['results.csv'])
      q.page['download'] = ui.form_card(box='1 1 2 2', items = [
      ui.link(label='Download Results', path=download_path),
      ])
      await q.page.save()
      tip

      q.site.upload() accepts a list of file paths, so you can upload multiple files at a time.

      Edit this page
      + + + + + + + + + + \ No newline at end of file diff --git a/docs/docs/getting-started/index.html b/docs/docs/getting-started/index.html index d7d9362969..95f376176f 100644 --- a/docs/docs/getting-started/index.html +++ b/docs/docs/getting-started/index.html @@ -5,34 +5,33 @@ Introduction | H2O Wave - - - - - - - - - - + + + + + + + + + +
      -

      Introduction

      H2O Wave lets you build and deploy amazing, realtime analytics with dramatically less effort.

      What is H2O Wave?

      H2O Wave is a software stack for building beautiful, low-latency, realtime, browser-based applications and dashboards entirely in Python without using HTML, Javascript, or CSS.

      It excels at capturing data, visualizations, and graphics from multiple sources and broadcasting them live over the web.

      What can I do with it?

      H2O Wave gives your Python programs the ability to push content to connected clients as it happens, in realtime. In other words, it lets your program display up-to-date information without asking your users to hit their browser's reload button.

      You can use H2O Wave for:

      • Dashboards and visualizations for live monitoring.
      • Live information displays: news, tickers, health, or performance data.
      • Apps that require instant notifications, updates, events, or alerts.
      • Apps that involve messaging: chat, bots, etc.
      • Collaborative apps: whiteboards, sharing, etc.

      You can also use H2O Wave when you find yourself reaching for a web application framework - it can handle regular (non-realtime) apps just fine.

      How do I use it?

      H2O Wave's mental model is simple, but powerful1:

      1. Your instance holds a collection of pages.
      2. To change a page, simply grab a reference to a page, change it, and save it.

      That's it. Your changes are now visible to everyone.

      This simplicity makes it fast, fun, and easy to rapidly build and deploy interactive applications without having to reason about client/server, HTTP request/response, browser quirks, or front-end development.

      The API is concise and elegant, freeing you to create in broad strokes, tackling high level ideas first and polishing up the details later.

      Show me some code!

      Here's a bean counter. Clicking the button increments the bean count:

      And here's how it's written:

      from h2o_wave import Q, listen, ui
      +

      Introduction

      H2O Wave lets you build and deploy amazing, realtime analytics with dramatically less effort.

      What is H2O Wave?

      H2O Wave is a software stack for building beautiful, low-latency, realtime, browser-based applications and dashboards entirely in Python without using HTML, Javascript, or CSS.

      It excels at capturing data, visualizations, and graphics from multiple sources and broadcasting them live over the web.

      What can I do with it?

      H2O Wave gives your Python programs the ability to push content to connected clients as it happens, in realtime. In other words, it lets your program display up-to-date information without asking your users to hit their browser's reload button.

      You can use H2O Wave for:

      • Dashboards and visualizations for live monitoring.
      • Live information displays: news, tickers, health, or performance data.
      • Apps that require instant notifications, updates, events, or alerts.
      • Apps that involve messaging: chat, bots, etc.
      • Collaborative apps: whiteboards, sharing, etc.

      You can also use H2O Wave when you find yourself reaching for a web application framework - it can handle regular (non-realtime) apps just fine.

      How do I use it?

      H2O Wave's mental model is simple, but powerful1:

      1. Your instance holds a collection of pages.
      2. To change a page, simply grab a reference to a page, change it, and save it.

      That's it. Your changes are now visible to everyone.

      This simplicity makes it fast, fun, and easy to rapidly build and deploy interactive applications without having to reason about client/server, HTTP request/response, browser quirks, or front-end development.

      The API is concise and elegant, freeing you to create in broad strokes, tackling high level ideas first and polishing up the details later.

      Show me some code!

      Here's a bean counter. Clicking the button increments the bean count:

      And here's how it's written:

      from h2o_wave import Q, main, app, ui
      bean_count = 0
      -
      async def serve(q: Q):
      global bean_count
      # Was the 'increment' button clicked?
      if q.args.increment:
      bean_count += 1
      -
      # Display a form on the page
      q.page['beans'] = ui.form_card(
      box='1 1 1 2',
      items=[
      ui.text_xl('Beans!'),
      ui.button(name='increment', label=f'{bean_count} beans'),
      ],
      )
      # Save the page
      await q.page.save()
      -
      listen('/counter', serve)

      What's included?

      The SDK ships batteries-included with a wide variety of user interface widgets and charts. You also get to use your favorite Python libraries seamlessly - anything that works in a Jupyter notebook works in H2O Wave - including Altair, Bokeh, H2O, Keras, Matplotlib, Plotly, PyTorch, Seaborn, TensorFlow, Vega-lite, and others. H2O Wave lets you use and broadcast results from all of these libraries, in realtime.

      H2O Wave is not only a programming toolkit but a programmable content server as well: it can capture, retain, and relay information efficiently in realtime. The content server (or Wave Server) is written in Go, a ~10MB static executable without runtime dependencies2. It currently ships with a Python language driver, but is language-agnostic (an R language driver is under development).

      The Wave Server stores all the content and acts as a hub between your user's web browser and your apps. Therefore, it must be up and running before you launch Wave apps. Typically, you only need one Wave Server to serve several apps.

      +---------+
      +------------->+ app1.py |
      | +---------+
      |
      +---------+ +----+-----+ +---------+
      | Browser +------>+ Server +------->+ app2.py |
      +---------+ +----+-----+ +---------+
      |
      | +---------+
      +------------->+ app3.py |
      +---------+
      +
      @app('/counter')
      async def serve(q: Q):
      global bean_count
      # Was the 'increment' button clicked?
      if q.args.increment:
      bean_count += 1
      +
      # Display a form on the page
      q.page['beans'] = ui.form_card(
      box='1 1 1 2',
      items=[
      ui.text_xl('Beans!'),
      ui.button(name='increment', label=f'{bean_count} beans'),
      ],
      )
      # Save the page
      await q.page.save()

      What's included?

      The SDK ships batteries-included with a wide variety of user interface widgets and charts. You also get to use your favorite Python libraries seamlessly - anything that works in a Jupyter notebook works in H2O Wave - including Altair, Bokeh, H2O, Keras, Matplotlib, Plotly, PyTorch, Seaborn, TensorFlow, Vega-lite, and others. H2O Wave lets you use and broadcast results from all of these libraries, in realtime.

      H2O Wave is not only a programming toolkit but a programmable content server as well: it can capture, retain, and relay information efficiently in realtime. The content server (or Wave server) is written in Go, a ~10MB static executable without runtime dependencies2. It currently ships with a Python language driver, but is language-agnostic (an R language driver is under development).

      The Wave server stores all the content and acts as a hub between your user's web browser and your apps. Therefore, it must be up and running before you launch Wave apps. Typically, you only need one Wave server to serve several apps.

      +---------+
      +------------->+ app1.py |
      | +---------+
      |
      +---------+ +----+-----+ +---------+
      | Browser +------>+ Server +------->+ app2.py |
      +---------+ +----+-----+ +---------+
      |
      | +---------+
      +------------->+ app3.py |
      +---------+

      In Summary

      H2O Wave is rapid application development for a more... civilized age3.

      Also, this page was mostly hyperbole, so let's download it and take it for a spin, shall we.

      1 The model parallels retained mode graphics, with compositing performed on an remote server.

      2 Runs anywhere Go executables run, which is almost everywhere.

      3 Hat tip to xkcd.

      Edit this page
      - - - - - - - - - - + + + + + + + + + + \ No newline at end of file diff --git a/docs/docs/graphics/index.html b/docs/docs/graphics/index.html index 6ae751ea1a..5ef0523248 100644 --- a/docs/docs/graphics/index.html +++ b/docs/docs/graphics/index.html @@ -5,33 +5,33 @@ Graphics | H2O Wave - - - - - - - - - - + + + + + + + + + +
      -

      Graphics

      Wave provides a versatile API for rendering vector graphics (SVG) backed by data buffers.

      Use the graphics card ui.graphics_card() to render graphics.

      Stages and scenes

      The graphics card has two attributes that control how graphics are rendered: stage and scene:

      • A stage holds static shapes that are rendered as part of the background (literally, behind the scene).
      • A scene holds shapes whose attributes need to be animated (causing a re-render, or, literally, cause a scene).

      Use ui.stage() and ui.scene() to create the stage and the scene:

      • ui.stage() creates a packed, static representation of its shapes (recall that the stage is not supposed to change).
      • ui.scene() declares a data buffer to efficiently update its shapes if changed (recall that the scene is animated).

      Here's an example that draws a clock with a circular face placed on the stage, and hour, min and sec hands placed in the scene:

      from h2o_wave import site, ui, graphics as g
      +

      Graphics

      Wave provides a versatile API for rendering vector graphics (SVG) backed by data buffers.

      Use the graphics card ui.graphics_card() to render graphics.

      Stages and scenes

      The graphics card has two attributes that control how graphics are rendered: stage and scene:

      • A stage holds static shapes that are rendered as part of the background (literally, behind the scene).
      • A scene holds shapes whose attributes need to be animated (causing a re-render, or, literally, cause a scene).

      Use ui.stage() and ui.scene() to create the stage and the scene:

      • ui.stage() creates a packed, static representation of its shapes (recall that the stage is not supposed to change).
      • ui.scene() declares a data buffer to efficiently update its shapes if changed (recall that the scene is animated).

      Here's an example that draws a clock with a circular face placed on the stage, and hour, min and sec hands placed in the scene:

      from h2o_wave import site, ui, graphics as g
      page = site['/demo']
      page['example'] = ui.graphics_card(
      box='1 1 2 3', view_box='0 0 100 100', width='100%', height='100%',
      stage=g.stage(
      face=g.circle(cx='50', cy='50', r='45', fill='#111', stroke_width='2px', stroke='#f55'),
      ),
      scene=g.scene(
      hour=g.rect(x='47.5', y='12.5', width='5', height='40', rx='2.5', fill='#333', stroke='#555'),
      min=g.rect(x='48.5', y='12.5', width='3', height='40', rx='2', fill='#333', stroke='#555'),
      sec=g.line(x1='50', y1='50', x2='50', y2='16', stroke='#f55', stroke_width='1px'),
      ),
      )

      Shapes

      Use drawing functions to add shapes to the stage or scene:

      PrimitiveUse
      arc()Circular or annular sector, as in a pie or donut chart
      circle()Circle
      ellipse()Ellipse
      image()Image
      line()Line
      path()Path
      polygon()Polygon
      polyline()Polyline
      spline()Curves (including radial curves) using various algorithms: basis, cardinal, smooth, linear, monotone, natural, step.
      rect()Rect
      text()Text

      Paths

      The path() function is special: it can draw arbitrary shapes. This is because SVG path elements support an attribute called d which holds drawing commands.

      Here's a path that represents a red square:

      g.path(d='m 25 25 h 50 v 50 h -50 z', fill='red')

      The above snippet produces:

      <path d='m 25 25 h 50 v 50 h -50 z' fill='red'/>

      The drawing commands in the above example work like this:

      1. m 25 25: Move 25px left, 25px down
      2. h 50: Draw a line 50px right
      3. v 50: Draw a line 50px down
      4. h -50: Draw a line 50px left
      5. z: Close the path (going back to where we started)

      The little drawing syntax above is part of the SVG specification, not something unique to Wave.

      Authoring path() drawing commands by hand is tedious, so Wave provides two utilities to make it easier: p() and turtle().

      Drawing with paths

      p() creates a path generator with convenience methods to draw step by step. For example, the following two lines are equivalent:

      red_square = g.path(d='m 25 25 h 50 v 50 h -50 z', fill='red')
      red_square = g.p().m(25, 25).h(50).v(50).h(-50).z().path(fill='red')

      Commands

      MethodUse
      M()Move, absolute
      H()Horizontal line, absolute
      V()Vertical line, absolute
      L()Line, absolute
      A()Elliptical arc, absolute
      C()Cubic Bézier curve, absolute
      S()Cubic Bézier curve, smooth, absolute
      Q()Quadratic Bézier curve, absolute
      T()Quadratic Bézier curve, smooth, absolute
      Z()Close path
      m()Move, relative
      h()Horizontal line, relative
      v()Vertical line, relative
      l()Line, relative
      a()Elliptical arc, relative
      c()Cubic Bézier curve, relative
      s()Cubic Bézier curve, smooth, relative
      q()Quadratic Bézier curve, relative
      t()Quadratic Bézier curve, smooth, relative
      z()Close path
      d()Serialize this path's commands into SVG path data.
      path()Create a SVG path element
      info

      The upper-cased commands use absolute coordinates. The lower-cased commands use relative coordinates. For example, L(4,2) means "draw a line to (4,2)", but l(4,2) means "draw a line 4px right, 2px down from the current position".

      Drawing with a turtle

      turtle() creates a path generator (similar to p()), but using Turtle Geometry.

      Commands

      MethodUse
      pd()Pen down
      pu()Pen up
      p()Set the turtle's position
      a()Set the turtle's orientation
      f()Move forward
      b()Move backward
      l()Turn left
      r()Turn right
      d()Serialize this turtle's movements into SVG path data
      path()Create a SVG path element

      Example

      Here is an example from Python's turtle module:

      star

      Here is the above example recreated in Wave:

      from turtle import *
      color('red', 'yellow')
      begin_fill()
      while True:
      forward(200)
      left(170)
      if abs(pos()) < 1:
      break
      end_fill()
      done()
      from h2o_wave import site, ui, graphics as g
      t = g.turtle().f(100).r(90).pd()
      for _ in range(36):
      t.f(200).l(170)
      spirograph = t.pu(1).path(stroke='red', fill='yellow')
      page = site['/demo']
      page['example'] = ui.graphics_card(
      box='1 1 2 3', view_box='0 0 220 220', width='100%', height='100%',
      scene=g.scene(foo=spirograph),
      )
      page.save()
      info

      Turtle graphics is not just kid stuff: See Turtle Geometry by Harold Abelson and Andrea diSessa.

      Edit this page
      - - - - - - - - - - + + + + + + + + + + \ No newline at end of file diff --git a/docs/docs/guide/index.html b/docs/docs/guide/index.html index e15177b388..c3d0ffa551 100644 --- a/docs/docs/guide/index.html +++ b/docs/docs/guide/index.html @@ -5,29 +5,29 @@ Introduction | H2O Wave - - - - - - - - - - + + + + + + + + + +
      -

      Introduction

      Welcome to the H2O Wave Guide! If you prefer to learn concepts step by step, you've come to the right place.

      info

      If you haven't already, it's worthwhile reading the Getting Started page, which offers a 5-minute overview of what H2O Wave is all about.

      Before you start

      If you prefer to learn by doing, start with our tutorials - they're short and simple, illustrate the most important concepts in a beginner-friendly way, and are the best way to get hands-on with Wave. Like any unfamiliar technology, Wave has a slight learning curve, but you will get the hang of it with practice and patience.

      Who is this for?

      This documentation assumes that you have some familiarity with the Python programming language. You don't have to be an expert, but it might be harder to learn both Wave and Python at the same time.

      If you already know Python, but have no experience authoring web apps, you'll probably find Wave a fun and easy way to get started, without the hassle of learning HTML, CSS, Javascript and client-server programming.

      If you have some experience building web apps using Python (or even other languages), you'll find that Wave offers an approach quite different from traditional client-server or request-reply programming. The mental model is much simpler, functional (in the functional programming sense), and lets you reason about your code in terms of a single tier (server-only) as opposed to two tiers (client and server). Additionally, Wave offers straightforward ways to integrate realtime features into your apps using the same programming model.

      Edit this page
      - - - - - - - - - - +

      Introduction

      Welcome to the H2O Wave Guide! If you prefer to learn concepts step by step, you've come to the right place.

      info

      If you haven't already, it's worthwhile reading the Getting Started page, which offers a 5-minute overview of what H2O Wave is all about.

      Before you start

      If you prefer to learn by doing, start with our tutorials - they're short and simple, illustrate the most important concepts in a beginner-friendly way, and are the best way to get hands-on with Wave. Like any unfamiliar technology, Wave has a slight learning curve, but you will get the hang of it with practice and patience.

      Who is this for?

      This documentation assumes that you have some familiarity with the Python programming language. You don't have to be an expert, but it might be harder to learn both Wave and Python at the same time.

      If you already know Python, but have no experience authoring web apps, you'll probably find Wave a fun and easy way to get started, without the hassle of learning HTML, CSS, Javascript and client-server programming.

      If you have some experience building web apps using Python (or even other languages), you'll find that Wave offers an approach quite different from traditional client-server or request-reply programming. The mental model is much simpler, functional (in the functional programming sense), and lets you reason about your code in terms of a single tier (server-only) as opposed to two tiers (client and server). Additionally, Wave offers straightforward ways to integrate realtime features into your apps using the same programming model.

      Edit this page
      + + + + + + + + + + \ No newline at end of file diff --git a/docs/docs/installation/index.html b/docs/docs/installation/index.html index 95f8cb54fc..f0f5ca2847 100644 --- a/docs/docs/installation/index.html +++ b/docs/docs/installation/index.html @@ -5,29 +5,29 @@ Installation | H2O Wave - - - - - - - - - - + + + + + + + + + +
      -

      Installation

      To set up H2O Wave, simply download and extract a release (~10MB). The release ships with a precompiled binary executable, so no explicit installation step is necessary.

      Prerequisites

      H2O Wave runs on Linux, macOS, and Windows, having Python 3.6.1 or later.

      Setup

      Step 1: Download

      Download the H2O Wave SDK for your platform.

      Step 2: Extract

      Extract your download.

      tar -xzf wave-x.y.z-linux-amd64.tar.gz

      Step 3: Move

      Move it to a convenient location, say $HOME/wave/.

      mv wave-x.y.z-linux-amd64 $HOME/wave
      note

      If you have a previous version of Wave installed, be sure to remove it before installing another. To remove it, simply delete the previous directory.

      Inspect your $HOME/wave directory. You should see the following content:

      .
      ├── docs/ ... Documentation
      ├── examples/ ... Examples
      ├── test/ ... Browser testing framework
      ├── www/ ... Wave server web root (do not modify!)
      └── wave ... Wave server executable

      Step 4: Run

      Go to your Wave directory.

      cd $HOME/wave

      Start the Wave server.

      ./wave
      2020/10/15 12:04:40 #
      2020/10/15 12:04:40 # ┌───────────────────┐
      2020/10/15 12:04:40 # │ ┬ ┬┌─┐┬ ┬┌─┐ │
      2020/10/15 12:04:40 # │ │││├─┤└┐┌┘├┤ │
      2020/10/15 12:04:40 # │ └┴┘┴ ┴ └┘ └─┘ │
      2020/10/15 12:04:40 # └───────────────────┘
      2020/10/15 12:04:40 #
      2020/10/15 12:04:40 # {"address":":55555","t":"listen","webroot":"/home/elp/wave/www"}
      info

      On Windows, run wave.exe to start the server.

      Step 5: Verify

      Finally, point your web browser to http://localhost:55555/. You should see an empty page with a spinner that looks like this:

      spinner

      Congratulations! Wave is now running, but doesn't have any content yet (hence the spinner).

      In the next few sections, we'll add some content and see what the fuss is all about.

      Edit this page
      - - - - - - - - - - +

      Installation

      To set up H2O Wave, simply download and extract a release (~10MB). The release ships with a precompiled binary executable, so no explicit installation step is necessary.

      Prerequisites

      H2O Wave runs on Linux, macOS, and Windows, having Python 3.6.1 or later.

      Setup

      Step 1: Download

      Download the H2O Wave SDK for your platform.

      Step 2: Extract

      Extract your download.

      tar -xzf wave-x.y.z-linux-amd64.tar.gz

      Step 3: Move

      Move it to a convenient location, say $HOME/wave/.

      mv wave-x.y.z-linux-amd64 $HOME/wave
      note

      If you have a previous version of Wave installed, be sure to remove it before installing another. To remove it, simply delete the previous directory.

      Inspect your $HOME/wave directory. You should see the following content:

      .
      ├── examples/ ... Examples
      ├── test/ ... Browser testing framework
      ├── www/ ... Wave server web root (do not modify!)
      └── waved ... Wave server executable

      Step 4: Run

      Go to your Wave directory.

      cd $HOME/wave

      Start the Wave server.

      ./waved
      2020/10/27 16:16:34 #
      2020/10/27 16:16:34 # ┌─────────────────────────┐
      2020/10/27 16:16:34 # │ ┌ ┌ ┌──┐ ┌ ┌ ┌──┐ │ H2O Wave
      2020/10/27 16:16:34 # │ │ ┌──┘ │──│ │ │ └┐ │ (version) (build)
      2020/10/27 16:16:34 # │ └─┘ ┘ ┘ └──┘ └─┘ │ © 2020 H2O.ai, Inc.
      2020/10/27 16:16:34 # └─────────────────────────┘
      2020/10/27 16:16:34 #
      2020/10/27 16:16:34 # {"address":":55555","t":"listen","webroot":"/home/elp/wave/www"}
      info

      On Windows, run waved.exe to start the server.

      Step 5: Verify

      Finally, point your web browser to http://localhost:55555/. You should see an empty page with a spinner that looks like this:

      spinner

      Congratulations! Wave is now running, but doesn't have any content yet (hence the spinner).

      In the next few sections, we'll add some content and see what the fuss is all about.

      Edit this page
      + + + + + + + + + + \ No newline at end of file diff --git a/docs/docs/layout/index.html b/docs/docs/layout/index.html index 6b047cb518..a18a61014c 100644 --- a/docs/docs/layout/index.html +++ b/docs/docs/layout/index.html @@ -5,29 +5,29 @@ Layout | H2O Wave - - - - - - - - - - + + + + + + + + + +
      -

      Layout

      This section illustrates how to lay out cards on a page.

      Grid system

      By default, every page has a grid system in place, designed to fit HD displays (1920 x 1080 pixels). The grid has 12 columns and 10 rows. A column is 134 pixels wide. A row is 76 pixels high. The gap between rows and columns is set to 15 pixels.

      The box attribute

      Every card has a box attribute that specifies how to position the card on the page, a string of the form 'column row width height', for example '1 1 2 4' or '8 7 3 6'.

      page['quote'] = ui.markdown_card(
      box='1 1 2 2',
      title='Hello World',
      content='"The Internet? Is that thing still around?" - *Homer Simpson*',
      )

      The column and row indicate which column and row to position the top-left corner of the card. The width and height indicate the width and height of the cards, respectively. The column and row are 1-based. The width and height are in spans (units) of columns or rows.

      AttributeValueInterpreted as
      columnNNth column
      rowNNth row
      widthNN columns wide
      heightNN rows high

      For example, a box of 1 2 3 4 is interpreted as:

      AttributeValueInterpreted as
      column11st column
      row22nd row
      width33 columns wide
      height44 rows high

      Why a fixed grid?

      A fixed grid like this ensures that your page layout looks exactly the same on every display, without surprises. That said, the default grid is designed to fit HD displays (1920 x 1080 pixels), so if you want your page to fit smaller displays, don't use up the entire grid. Instead, use up less columns and rows, like 8 columns x 6 rows.

      Other layout options

      A fixed grid system is great for dashboards, but limiting for apps that require more flexibility, including the ability to responsively fit various display sizes.

      We are working on additional layout mechanisms, slated for release by the end of 2020.

      See also

      Positioning and Sizing examples.

      Edit this page
      - - - - - - - - - - +

      Layout

      This section illustrates how to lay out cards on a page.

      Grid system

      By default, every page has a grid system in place, designed to fit HD displays (1920 x 1080 pixels). The grid has 12 columns and 10 rows. A column is 134 pixels wide. A row is 76 pixels high. The gap between rows and columns is set to 15 pixels.

      The box attribute

      Every card has a box attribute that specifies how to position the card on the page, a string of the form 'column row width height', for example '1 1 2 4' or '8 7 3 6'.

      page['quote'] = ui.markdown_card(
      box='1 1 2 2',
      title='Hello World',
      content='"The Internet? Is that thing still around?" - *Homer Simpson*',
      )

      The column and row indicate which column and row to position the top-left corner of the card. The width and height indicate the width and height of the cards, respectively. The column and row are 1-based. The width and height are in spans (units) of columns or rows.

      AttributeValueInterpreted as
      columnNNth column
      rowNNth row
      widthNN columns wide
      heightNN rows high

      For example, a box of 1 2 3 4 is interpreted as:

      AttributeValueInterpreted as
      column11st column
      row22nd row
      width33 columns wide
      height44 rows high

      Why a fixed grid?

      A fixed grid like this ensures that your page layout looks exactly the same on every display, without surprises. That said, the default grid is designed to fit HD displays (1920 x 1080 pixels), so if you want your page to fit smaller displays, don't use up the entire grid. Instead, use up less columns and rows, like 8 columns x 6 rows.

      Other layout options

      A fixed grid system is great for dashboards, but limiting for apps that require more flexibility, including the ability to responsively fit various display sizes.

      We are working on additional layout mechanisms, slated for release by the end of 2020.

      See also

      Positioning and Sizing examples.

      Edit this page
      + + + + + + + + + + \ No newline at end of file diff --git a/docs/docs/logging/index.html b/docs/docs/logging/index.html index ba9ca95f40..d0d7b6e5ac 100644 --- a/docs/docs/logging/index.html +++ b/docs/docs/logging/index.html @@ -5,32 +5,31 @@ Logging | H2O Wave - - - - - - - - - - + + + + + + + + + +
      -

      Logging

      Wave apps are plain Python programs. Use Python's built-in logging module to configure logging.

      Here's a basic configuration that logs a ISO8601 timestamp, log level, and message:

      from h2o_wave import Q, listen
      +

      Logging

      Wave apps are plain Python programs. Use Python's built-in logging module to configure logging.

      Here's a basic configuration that logs a ISO8601 timestamp, log level, and message:

      from h2o_wave import Q, main, app
      import logging
      logging.basicConfig(format='%(asctime)s %(levelname)s %(message)s')
      -
      async def serve(q: Q):
      logging.warning('All your base are belong to us')
      -
      listen('/demo', serve)

      The above snippet makes the app log a warning every time it is accessed. This is what the logged message look like:

      2010-12-12 11:41:42,612 WARNING All your base are belong to us
      info

      See Python's logging module for more information.

      Edit this page
      - - - - - - - - - - +
      @app('/demo')
      async def serve(q: Q):
      logging.warning('All your base are belong to us')

      The above snippet makes the app log a warning every time it is accessed. This is what the logged message look like:

      2010-12-12 11:41:42,612 WARNING All your base are belong to us
      info

      See Python's logging module for more information.

      Edit this page
      + + + + + + + + + + \ No newline at end of file diff --git a/docs/docs/migrating-0-8/index.html b/docs/docs/migrating-0-8/index.html new file mode 100644 index 0000000000..089cd5a4aa --- /dev/null +++ b/docs/docs/migrating-0-8/index.html @@ -0,0 +1,36 @@ + + + + + + +Migrating from 0.8 | H2O Wave + + + + + + + + + + + + +
      +

      Migrating from 0.8

      H2O Wave v0.9.0+ introduces significant improvements to application performance and concurrency, and brings us closer to a v1.0 release. v1.0 will include the ability to increase the number of worker processes to scale apps, while preserving the simplicity of the Wave API.

      Among other changes, the Wave server executable wave is now called waved (or waved.exe), and the h2o-wave Python package ships with a new CLI named wave.

      ASGI Compatibility

      Wave apps are now ASGI-compatible, based on the high-performance Uvicorn / Starlette duo.

      You can run Wave apps behind any ASGI server, like uvicorn, gunicorn, daphne, hypercorn, etc.

      Old way

      In versions <= v0.8.0, a skeleton app looked like this:

      foo.py
      from h2o_wave import listen, Q
      +
      async def serve(q: Q):
      pass
      +
      listen('/demo', serve)

      The above app could be run like this:

      (venv) $ python foo.py

      New way

      In versions v0.9.0+, a skeleton app looks like this:

      foo.py
      from h2o_wave import main, app, Q
      +
      @app('/demo')
      async def serve(q: Q):
      pass

      Notably:

      1. listen(route) has been replaced by an @app(route) decorator on the serve() function.
      2. main needs to be imported into the file (but you don't have to do anything with the symbol main other than simply import it).

      The above app can be run using wave run, built into the new wave command line interface.

      (venv) $ wave run foo

      The wave run command runs your app using live-reload, which means you can view your changes live as you code, without having to refresh your browser manually.

      To run your app without live-reload, simply pass --no-reload:

      (venv) $ wave run --no-reload foo

      To run your app using an ASGI server like uvicorn, append :main to the app argument:

      (venv) $ uvicorn foo:main
      Edit this page
      + + + + + + + + + + + + \ No newline at end of file diff --git a/docs/docs/migrating-0/index.html b/docs/docs/migrating-0/index.html index a74d795d07..c748a8e07f 100644 --- a/docs/docs/migrating-0/index.html +++ b/docs/docs/migrating-0/index.html @@ -5,20 +5,20 @@ Migrating from pre-alpha | H2O Wave - - - - - - - - - - + + + + + + + + + +
      -

      Migrating from pre-alpha

      Before you begin, it is highly recommended that you download a release and run the interactive tour.py that ships with the release to get a feel for what Wave programs look like in practice.

      What has changed?

      From an app-development perspective, the most important change is that Wave is more of a library rather than a framework.

      With the previous framework, the only way to execute an app was via the Q server. This limitation has been removed. The script/app you author is just a regular Python program in which you import h2o_wave and execute via:

      • The command line: python3 my_script.py.
      • In the Python REPL.
      • In a Jupyter notebook.
      • In your favorite IDE (PyCharm, VSCode, etc.).

      This also means that you can apply breakpoints and debug or step-through your program in your debugger of choice.

      From an information architecture perspective, control has been inverted: instead of your app being an extension to Wave's data/prep/search features, Wave's features are now optional additions to your app, and your app takes center stage. Implementation-wise, instead of your app running in a sidebar inside of Wave's UI, your app now occupies the entire UI.

      Breaking changes

      Removed: @Q.app, @Q.ui annotations.

      Instead, define a async request-handling function, say main(), and pass that function to listen(), like this:

      from h2o_wave import Q, listen
      +

      Migrating from pre-alpha

      Before you begin, it is highly recommended that you download a release and run the interactive tour.py that ships with the release to get a feel for what Wave programs look like in practice.

      What has changed?

      From an app-development perspective, the most important change is that Wave is more of a library rather than a framework.

      With the previous framework, the only way to execute an app was via the Q server. This limitation has been removed. The script/app you author is just a regular Python program in which you import h2o_wave and execute via:

      • The command line: python3 my_script.py.
      • In the Python REPL.
      • In a Jupyter notebook.
      • In your favorite IDE (PyCharm, VSCode, etc.).

      This also means that you can apply breakpoints and debug or step-through your program in your debugger of choice.

      From an information architecture perspective, control has been inverted: instead of your app being an extension to Wave's data/prep/search features, Wave's features are now optional additions to your app, and your app takes center stage. Implementation-wise, instead of your app running in a sidebar inside of Wave's UI, your app now occupies the entire UI.

      Breaking changes

      Removed: @Q.app, @Q.ui annotations.

      Instead, define a async request-handling function, say main(), and pass that function to listen(), like this:

      from h2o_wave import Q, listen
      async def main(q: Q):
      pass
      listen('/my/app/route', main)

      Removed: q.wait(), q.show(), q.fail(), q.exit().

      The above four methods were the primary mechanism to make changes to your app's UI. They have all been replaced with a single h2o_wave.core.Page.save() method.

      The new technique is:

      1. Access the page or card you want to modify.
      2. Modify the page or card.
      3. Call h2o_wave.core.Page.save() to save your changes and update the browser page.

      Before:

      q.wait(
      callback_function,
      ui.text('Step 1'),
      ui.button(name='next', label='Next'),
      )

      After:

      q.page['my_card'] = ui.form_card(
      # A card with its top-left corner at column 1, row 5; 2 columns wide and 4 rows high.
      box='1 5 2 4',
      items=[
      ui.text('Step 1'),
      ui.button(name='next', label='Next'),
      ],
      )
      await q.page.save()

      Note that the After example requires a box that specifies where to draw your form. This is because you are not limited to using a sidebar, and can use the entire width/length of the page.

      The same technique can be used to update the UI again (or display intermediate results):

      Before:

      q.wait(
      callback_function,
      ui.text('Step 2'),
      ui.button(name='next', label='Next'),
      )

      After:

      # Don't have to recreate the entire form again; simply replace its items and save the page.
      q.page['my_card'].items = [
      ui.text('Step 2'),
      ui.button(name='next', label='Next'),
      ]
      await q.page.save()

      Removed: callback functions for request-handling.

      Wave apps are 100% push-based, using duplex communication instead of a request/reply paradigm. There is no need to have a tangled mess of callbacks to handle UI events.

      Instead, all requests are routed to a single function, and you can decide how to organize your application logic by branching on q.args.*.

      Before:

      def step1(q: Q):
      q.wait(
      step2,
      ui.text('Step 1'),
      ui.button(name='next', label='Next'),
      )
      def step2(q: Q):
      q.wait(
      step3,
      ui.text('Step 2'),
      ui.button(name='next', label='Next'),
      )
      @@ -26,16 +26,16 @@
      q.page['my_card'].items = items
      await q.page.save()
      listen('/my/app/route', main)

      Removed: q.dashboard() and q.notebook().

      Every page in Wave is a dashboard page. Instead of creating a separate dashboard or notebook, simply add cards to a page and arrange it the way you want. Cards can be created by using one of the several ui.*_card() APIs. Also see the dashboard, layout and sizing examples to learn how to lay out several cards on a page.

      If you want to display a notebook-style vertical stack of markdown, html or other content, use h2o_wave.ui.text() and h2o_wave.ui.frame() contained inside a h2o_wave.ui.form_card(), like this:

      Before:

      ui.notebook([ui.notebook_section([
      ui.markdown_cell(content='Foo'),
      ui.frame_cell(source=html_foo, height='200px'),
      ui.markdown_cell(content='Bar'),
      ui.frame_cell(source=html_bar, height='200px'),
      ])])

      After: Note the parameter name change frame_cell(source=...) to frame(content=...).

      ui.form_card(
      box='1 5 2 4',
      items=[
      ui.text(content='Foo'),
      ui.frame(content=html_foo, height='200px'),
      ui.text(content='Bar'),
      ui.frame(content=html_bar, height='200px'),
      ],
      )

      Changed: ui.buttons(), ui.expander() and ui.tabs() accept a list of items instead of var args *args.

      Before:

      ui.buttons(ui.button(...), ui.button(...), ui.button(...))

      After:

      ui.buttons([ui.button(...), ui.button(...), ui.button(...)]) # Note enclosing [ ]

      Changed: q.upload() changed to q.site.upload().

      The upload() method has been moved to the h2o_wave.core.Site instance, since each h2o_wave.core.Site represents a distinct server, and makes it possible to control multiple sites from a single Python script.

      Changed: q.args.foo= changed to q.client.foo=.

      Setting attributes on q.args (e.g. q.args.foo = 'bar') is no longer preserved between requests. This was the primary mechanism employed previously to preserve data between requests.

      Instead, Wave provides 4 mechanisms for preserving data between requests:

      1. Process-level: Use global variables.
      2. App-level: Use q.app.foo = 'bar' to save; access q.app.foo to read it back again.
      3. User-level: Use q.user.foo = 'bar' to save; access q.user.foo to read it back again.
      4. Client-level: Use q.client.foo = 'bar' to save; access q.client.foo to read it back again.

      Here, Client refers to a distinct tab in a browser.

      If you want to rely on the old behavior of preserving q.args for the lifetime of the application, copy q.args to q.client like this:

      from h2o_wave import copy_expando
      -
      copy_expando(q.args, q.client, exclude_keys=['back2', 'select_target', 'restart'])

      Changed: No need to JSON-serialize values to preserve them between requests.

      q.args.foo= only supported JSON-serialized values. No such restrictions exist for the q.app, q.user and q.client containers. You could, for example, load a Pandas dataframe and set q.user.df = my_df, and the dataframe will be accessible across requests for the lifetime of the app.

      Edit this page
      - - - - - - - - - - +
      copy_expando(q.args, q.client, exclude_keys=['back2', 'select_target', 'restart'])

      Changed: No need to JSON-serialize values to preserve them between requests.

      q.args.foo= only supported JSON-serialized values. No such restrictions exist for the q.app, q.user and q.client containers. You could, for example, load a Pandas dataframe and set q.user.df = my_df, and the dataframe will be accessible across requests for the lifetime of the app.

      Edit this page
      + + + + + + + + + + \ No newline at end of file diff --git a/docs/docs/pages/index.html b/docs/docs/pages/index.html index 6f44894deb..95559e222f 100644 --- a/docs/docs/pages/index.html +++ b/docs/docs/pages/index.html @@ -5,29 +5,31 @@ Pages | H2O Wave - - - - - - - - - - + + + + + + + + + +
      -

      Pages

      The Wave server stores and manages content. Content is stored in a page cache, called a site. A Wave server contains exactly one site. A site holds a collection of pages. A page is composed of cards. Cards hold content and data buffers.

      To reference a site from within a Wave script, import site.

      from h2o_wave import site

      site is a dictionary-like object.

      To reference the current site from within a Wave app, use q.site.

      async def serve(q: Q):
      site = q.site

      To reference a page hosted at /foo, use site['/foo'].

      page = site['/foo']

      To reference the current page in a Wave app, use q.page.

      async def serve(q: Q):
      page = q.page

      page is also a dictionary-like object. To reference a card named foo, use page['foo'].

      card = page['foo']

      There are two ways to add a card to a page.

      The first way is to assign a new card to page['foo'].

      page['foo'] = card

      The second way is to use page.add(). This is useful when you want to add a card to a page and obtain a reference to the new card.

      card = page.add('foo', card)

      The following two forms are equivalent. The second form is more concise.

      page['foo'] = ui.form_card(...)
      card = page['foo']
      card = page.add('foo', ui.form_card(...)

      To delete a card named foo from a page, use del page['foo']:

      del page['foo']

      Assigning a card to page['foo'] replaces any previously assigned card named foo. Therefore, the following two forms are equivalent. The second form is more concise, hence preferred.

      page['foo'] = card1
      del page['foo']
      page['foo'] = card2
      page['foo'] = card1
      page['foo'] = card2

      To save a page from within a Wave script, use page.save().

      page.save()

      To save the active page from within a Wave app, use q.page.save().

      async def serve(q: Q):
      await q.page.save()
      caution

      q.page.save() is an async function, so you must await while calling it.

      You don't need to explicitly create a new page. A page is automatically created on save if it doesn't exist.

      To delete the page hosted at /foo, use page.drop() or del site['/foo']. The following three forms are equivalent.

      page = site['/foo']
      page.drop()
      site['/foo'].drop()
      del site['/foo']

      Deleting a page automatically drops all cards associated with that page. Conversely, to delete all cards from a page, simply delete the page.

      To clear all cards in the active page from within a Wave app, use q.page.drop():

      async def serve(q: Q):
      await q.page.drop()
      Edit this page
      - - - - - - - - - - +

      Pages

      The Wave server stores and manages content. Content is stored in a page cache, called a site. A Wave server contains exactly one site. A site holds a collection of pages. A page is composed of cards. Cards hold content and data buffers.

      To reference a site from within a Wave script, import site.

      from h2o_wave import site

      site is a dictionary-like object.

      To reference the current site from within a Wave app, use q.site.

      async def serve(q: Q):
      site = q.site

      To reference a page hosted at /foo, use site['/foo'].

      page = site['/foo']

      To reference the current page in a Wave app, use q.page.

      async def serve(q: Q):
      page = q.page

      page is also a dictionary-like object. To reference a card named foo, use page['foo'].

      card = page['foo']

      There are two ways to add a card to a page.

      The first way is to assign a new card to page['foo'].

      page['foo'] = card

      The second way is to use page.add(). This is useful when you want to add a card to a page and obtain a reference to the new card.

      card = page.add('foo', card)

      The following two forms are equivalent. The second form is more concise.

      page['foo'] = ui.form_card(...)
      card = page['foo']
      card = page.add('foo', ui.form_card(...)

      To delete a card named foo from a page, use del page['foo']:

      del page['foo']

      Assigning a card to page['foo'] replaces any previously assigned card named foo. Therefore, the following two forms are equivalent. The second form is more concise, hence preferred.

      page['foo'] = card1
      del page['foo']
      page['foo'] = card2
      page['foo'] = card1
      page['foo'] = card2

      To save a page from within a Wave script, use page.save().

      page.save()

      To save the active page from within a Wave app, use q.page.save().

      async def serve(q: Q):
      await q.page.save()
      caution

      q.page.save() is an async function, so you must await while calling it.

      You don't need to explicitly create a new page. A page is automatically created on save if it doesn't exist.

      To delete the page hosted at /foo, use page.drop() or del site['/foo']. The following three forms are equivalent.

      page = site['/foo']
      page.drop()
      site['/foo'].drop()
      del site['/foo']

      Deleting a page automatically drops all cards associated with that page. Conversely, to delete all cards from a page, simply delete the page.

      To clear all cards in the active page from within a Wave app, use q.page.drop():

      async def serve(q: Q):
      await q.page.drop()

      To update other (non-app) pages from within an app, use AsyncSite:

      from h2o_wave import Q, AsyncSite
      +
      site = AsyncSite()
      +
      async def serve(q: Q):
      page = site['/foo']
      page['bar'] = card
      await page.save()
      Edit this page
      + + + + + + + + + + \ No newline at end of file diff --git a/docs/docs/plotting/index.html b/docs/docs/plotting/index.html index 19cacf843f..f3d5033de6 100644 --- a/docs/docs/plotting/index.html +++ b/docs/docs/plotting/index.html @@ -5,31 +5,31 @@ Plots | H2O Wave - - - - - - - - - - + + + + + + + + + +
      -

      Plots

      Wave provides a versatile plotting API based on Leland Wilkinson's Grammar of Graphics.

      A plot is a layered graphic, created using ui.plot(). Each layer displays marks, described by ui.mark(). The layers are rendered on top of each other to produce the final plot.

      ui.mark() describes a collection of marks, not one mark. Since each ui.mark() describes one layer in the plot, it follows that all the marks on a layer are of the same type (its geometry). A mark's type can be one of point, interval, line, path, area, polygon, schema, edge.

      There are two ways to add plots to a page:

      • Use a plot card (ui.plot_card()) and set its plot attribute using ui.plot().
      • Use a form card (ui.form_card()), insert a visualization (ui.visualization()) and set its plot attribute using ui.plot().

      Here's a short example that renders a scatterplot of random values between [0, 1].

      import random
      from h2o_wave import site, data, ui
      +

      Plots

      Wave provides a versatile plotting API based on Leland Wilkinson's Grammar of Graphics.

      A plot is a layered graphic, created using ui.plot(). Each layer displays marks, described by ui.mark(). The layers are rendered on top of each other to produce the final plot.

      ui.mark() describes a collection of marks, not one mark. Since each ui.mark() describes one layer in the plot, it follows that all the marks on a layer are of the same type (its geometry). A mark's type can be one of point, interval, line, path, area, polygon, schema, edge.

      There are two ways to add plots to a page:

      • Use a plot card (ui.plot_card()) and set its plot attribute using ui.plot().
      • Use a form card (ui.form_card()), insert a visualization (ui.visualization()) and set its plot attribute using ui.plot().

      Here's a short example that renders a scatterplot of random values between [0, 1].

      import random
      from h2o_wave import site, data, ui
      page = site['/demo']
      v = page.add('example', ui.plot_card(
      box='1 1 4 5',
      title='Point',
      data=data('price performance', 50, rows=[(random.random(), random.random()) for _ in range(50)]),
      plot=ui.plot([
      ui.mark(type='point', x='=price', y='=performance')
      ])
      ))
      page.save()

      ui.plot() accepts a list of marks. This example renders annotations on top of a scatterplot, like this:

      ui.plot([
      ui.mark(type='point', x='=price', y='=performance', x_min=0, x_max=100, y_min=0, y_max=100), # the plot
      ui.mark(x=50, y=50, label='point'),
      ui.mark(x=40, label='vertical line'),
      ui.mark(y=40, label='horizontal line'),
      ui.mark(x=70, x0=60, label='vertical region'),
      ui.mark(y=70, y0=60, label='horizontal region'),
      ui.mark(x=30, x0=20, y=30, y0=20, label='rectangular region')
      ])

      Point

      • Basic: Make a scatterplot.
      • Shapes: Make a scatterplot with categories encoded as mark shapes.
      • Sizes: Make a scatterplot with mark sizes mapped to a continuous variable (a "bubble plot").
      • Map: Make a plot to compare quantities across categories. Similar to a heatmap, but using size-encoding instead of color-encoding.
      • Groups: Make a scatterplot with categories encoded as colors.
      • Annotation: Add annotations (points, lines and regions) to a plot.
      • Custom: Customize a plot's fill/stroke color, size and opacity.

      Interval

      Columns

      • Basic: Make a column plot.
      • Groups: Make a grouped column plot.
      • Range: Make a column plot with each bar representing high/low (or start/end) values. Transposing this produces a gantt plot.
      • Labels: Make a column plot with labels on each bar.
      • Stacked: Make a stacked column plot.
      • Stacked, Grouped: Make a column plot with both stacked and grouped bars.
      • Annotation: Add annotations to a column plot.
      • Theta: Make a "racetrack" plot (a column plot in polar coordinates).

      Bars

      • Basic: Make a bar plot.
      • Groups: Make a grouped bar plot.
      • Range: Make a bar plot with each bar representing high/low (or start/end) values. Transposing this produces a gantt plot.
      • Stacked: Make a stacked bar plot.
      • Stacked, Grouped: Make a bar plot with both stacked and grouped bars.
      • Annotation: Add annotations to a bar plot.
      • Polar: Make a rose plot (a bar plot in polar coordinates).
      • Polar, Stacked: Make a stacked rose plot (a stacked bar plot in polar coordinates).
      • Helix: Make a bar plot in helical coordinates.

      Line

      • Basic: Make a line plot.
      • Groups: Make a multi-series line plot.
      • Smooth: Make a line plot using a smooth curve.
      • Step: Make a line plot with a step curve.
      • Step, After: Make a line plot with a step-after curve.
      • Step, Before: Make a line plot with a step-before curve.
      • Labels: Add labels to a line plot.
      • Labels, Stroked: Customize label rendering: add a subtle outline to labels to improve readability.
      • Labels, Occlusion: Make a line plot with non-overlapping labels.
      • Annotation: Add annotations to a line plot.

      Path

      • Basic: Make a path plot.
      • Point: Make a path plot with an additional layer of points.
      • Smooth: Make a path plot with a smooth curve.

      Area

      • Basic: Make an area plot.
      • Groups: Make an area plot showing multiple categories.
      • Negative: Make an area plot showing positive and negative values.
      • Range: Make an area plot representing a range (band) of values.
      • Smooth: Make an area plot with a smooth curve.
      • Stacked: Make a stacked area plot.

      Area + Line

      • Area + Line: Make an area plot with an additional line layer on top.
      • Area + Smooth: Make a combined area + line plot using a smooth curve.
      • Area + Groups: Make an combined area + line plot showing multiple categories.

      Polygon

      Schema

      Other

      • Axis Titles: Display custom axis titles on a plot.
      • Form: Display a plot inside a form.
      Edit this page
      - - - - - - - - - - + + + + + + + + + + \ No newline at end of file diff --git a/docs/docs/realtime/index.html b/docs/docs/realtime/index.html index e695f99abd..9e0e194fd6 100644 --- a/docs/docs/realtime/index.html +++ b/docs/docs/realtime/index.html @@ -5,31 +5,30 @@ Realtime Sync | H2O Wave - - - - - - - - - - + + + + + + + + + +
      -

      Realtime Sync

      Wave's realtime sync feature enables all connected users to see up to date content.

      Pages created by Wave scripts are automatically synced across all users.

      Pages created by Wave apps need to explicitly enable realtime sync. This is because apps support multiple users and multiple clients (browser tabs) by default, and, depending on the problem you're trying to solve, it's up to you to decide whether your app's UI should be synced across all users, synced across one user, or not synced at all.

      To enable realtime sync in a Wave app, pass the mode argument to listen():

      • mode='broadcast' syncs across all users.
      • mode='multicast' syncs across one user (in other words, all the clients for that user).
      • mode='unicast' disables sync. This is the default.
      from h2o_wave import Q, listen, ui
      -
      async def serve(q: Q):
      pass
      -
      listen('/foo', serve, mode='broadcast')

      If you change the mode, make sure you store run-time state appropriate to the mode. Generally:

      modeStore state in
      broadcastq.app
      multicastq.user
      unicastq.client
      Edit this page
      - - - - - - - - - - +

      Realtime Sync

      Wave's realtime sync feature enables all connected users to see up to date content.

      Pages created by Wave scripts are automatically synced across all users.

      Pages created by Wave apps need to explicitly enable realtime sync. This is because apps support multiple users and multiple clients (browser tabs) by default, and, depending on the problem you're trying to solve, it's up to you to decide whether your app's UI should be synced across all users, synced across one user, or not synced at all.

      To enable realtime sync in a Wave app, pass the mode argument to @app():

      • mode='broadcast' syncs across all users.
      • mode='multicast' syncs across one user (in other words, all the clients for that user).
      • mode='unicast' disables sync. This is the default.
      from h2o_wave import Q, main, app, ui
      +
      @app('/foo', mode='broadcast')
      async def serve(q: Q):
      pass

      If you change the mode, make sure you store run-time state appropriate to the mode. Generally:

      modeStore state in
      broadcastq.app
      multicastq.user
      unicastq.client
      Edit this page
      + + + + + + + + + + \ No newline at end of file diff --git a/docs/docs/routing/index.html b/docs/docs/routing/index.html index 3b8a00624a..8a7bb4fff6 100644 --- a/docs/docs/routing/index.html +++ b/docs/docs/routing/index.html @@ -5,40 +5,36 @@ Routing | H2O Wave - - - - - - - - - - + + + + + + + + + +
      -

      Routing

      App routing

      Your Wave app gets hosted at the route you passed to listen().

      from h2o_wave import Q, listen
      -
      async def serve(q: Q):
      pass
      -
      listen('/foo', serve)

      To host your app at localhost:55555/foo or www.example.com/foo, pass /foo to listen().

      To host your app at localhost:55555 or www.example.com, pass / to listen(). Do this if you plan to host exactly one app and nothing else.

      You can host multiple apps behind a single Wave server.

      caution

      /foo and /foo/bar are two distinct paths. /foo/bar is not interpreted as a sub-path of /foo.

      Hash routing

      Wave apps support hash routing, a popular client-side mechanism where the location hash (the baz/qux in /foo/bar#baz/qux) can be used to decide which part of the UI to display.

      Setting the location hash

      To set the location hash, prefix # to the name attribute of command-like components. When the command is invoked, the location hash is set to the name of the command.

      For example, if a button is named foo is clicked, q.args.foo is set to True. Instead, if a button named #foo is clicked, the location hash is set to foo (q.args.foo is not set).

      from h2o_wave import Q, listen, ui
      -
      async def serve(q: Q):
      q.page['sides'] = ui.form_card(
      box='1 1 4 4',
      items=[
      ui.button(name='#heads', label='Heads'),
      ui.button(name='#tails', label='Tails'),
      ],
      )
      q.page.save()
      -
      listen('/toss', serve)

      Names don't have to be alphanumeric, so you can use names with nested sub-paths like #foo/bar, #foo/bar/baz, #foo/bar/baz/qux to make route-handling more manageable.

      The components that support setting a location hash are:

      • ui.button()
      • ui.command()
      • ui.nav_item()
      • ui.tab()
      • ui.breadcrumb()

      Getting the location hash

      To get the location hash, read q.args['#'] (a string). If the route in the browser's address bar is /foo/bar#baz/qux, q.args['#'] is set to baz/qux.

      from h2o_wave import Q, listen, ui
      -
      async def serve(q: Q):
      hash = q.args['#']
      if hash == 'heads':
      print('Heads!')
      elif hash == 'tails':
      print('Tails!')
      -
      q.page.save()
      -
      listen('/toss', serve)

      Hash route switching

      Combining the two examples above gives us a basic pattern for handling routes and updating the user interface:

      from h2o_wave import Q, listen, ui
      -
      async def serve(q: Q):
      hash = q.args['#']
      +

      Routing

      App routing

      Your Wave app gets hosted at the route you passed to @app().

      from h2o_wave import Q, main, app
      +
      @app('/foo')
      async def serve(q: Q):
      pass

      To host your app at localhost:55555/foo or www.example.com/foo, pass /foo to @app().

      To host your app at localhost:55555 or www.example.com, pass / to @app(). Do this if you plan to host exactly one app and nothing else.

      You can host multiple apps behind a single Wave server.

      caution

      /foo and /foo/bar are two distinct paths. /foo/bar is not interpreted as a sub-path of /foo.

      Hash routing

      Wave apps support hash routing, a popular client-side mechanism where the location hash (the baz/qux in /foo/bar#baz/qux) can be used to decide which part of the UI to display.

      Setting the location hash

      To set the location hash, prefix # to the name attribute of command-like components. When the command is invoked, the location hash is set to the name of the command.

      For example, if a button is named foo is clicked, q.args.foo is set to True. Instead, if a button named #foo is clicked, the location hash is set to foo (q.args.foo is not set).

      from h2o_wave import Q, main, app, ui
      +
      @app('/toss')
      async def serve(q: Q):
      q.page['sides'] = ui.form_card(
      box='1 1 4 4',
      items=[
      ui.button(name='#heads', label='Heads'),
      ui.button(name='#tails', label='Tails'),
      ],
      )
      q.page.save()

      Names don't have to be alphanumeric, so you can use names with nested sub-paths like #foo/bar, #foo/bar/baz, #foo/bar/baz/qux to make route-handling more manageable.

      The components that support setting a location hash are:

      • ui.button()
      • ui.command()
      • ui.nav_item()
      • ui.tab()
      • ui.breadcrumb()

      Getting the location hash

      To get the location hash, read q.args['#'] (a string). If the route in the browser's address bar is /foo/bar#baz/qux, q.args['#'] is set to baz/qux.

      from h2o_wave import Q, main, app, ui
      +
      @app('/toss')
      async def serve(q: Q):
      hash = q.args['#']
      if hash == 'heads':
      print('Heads!')
      elif hash == 'tails':
      print('Tails!')
      +
      q.page.save()

      Hash route switching

      Combining the two examples above gives us a basic pattern for handling routes and updating the user interface:

      from h2o_wave import Q, main, app, ui
      +
      @app('/toss')
      async def serve(q: Q):
      hash = q.args['#']
      if hash == 'heads':
      q.page['sides'].items = [ui.message_bar(text='Heads!')]
      elif hash == 'tails':
      q.page['sides'].items = [ui.message_bar(text='Tails!')]
      else:
      q.page['sides'] = ui.form_card(
      box='1 1 4 4',
      items=[
      ui.button(name='#heads', label='Heads'),
      ui.button(name='#tails', label='Tails'),
      ],
      )
      -
      q.page.save()
      -
      listen('/toss', serve)
      Edit this page
      - - - - - - - - - - +
      q.page.save()
      Edit this page
      + + + + + + + + + + \ No newline at end of file diff --git a/docs/docs/scripts/index.html b/docs/docs/scripts/index.html index cd8ecc38ec..d4767f1598 100644 --- a/docs/docs/scripts/index.html +++ b/docs/docs/scripts/index.html @@ -5,20 +5,20 @@ Wave Scripts | H2O Wave - - - - - - - - - - + + + + + + + + + +
      -

      Wave Scripts

      A Wave script is the simplest way to publish content in Q, especially live web content:

      • Dashboards and visualizations for live monitoring.
      • Live information displays: news, tickers, health, or performance data.

      A Wave script is one kind of program you can author to interact with Q. The other kind is a Wave App. The primary difference between an app and a script is that apps are interactive (able to handle user interactions) and scripts are not. If you are not interested in handling user interactions, and only want to publish content, use a Wave script.

      Here is the skeleton of a Wave script (example):

      from h2o_wave import site, ui
      +

      Wave Scripts

      A Wave script is the simplest way to publish content in Q, especially live web content:

      • Dashboards and visualizations for live monitoring.
      • Live information displays: news, tickers, health, or performance data.

      A Wave script is one kind of program you can author to interact with Q. The other kind is a Wave App. The primary difference between an app and a script is that apps are interactive (able to handle user interactions) and scripts are not. If you are not interested in handling user interactions, and only want to publish content, use a Wave script.

      Here is the skeleton of a Wave script (example):

      from h2o_wave import site, ui
      # Grab a reference to a page
      page = site['/foo']
      # Modify the page
      page['qux'] = ui.some_card()
      # Save the page
      page.save()

      Here is the skeleton of a Wave script that continuously updates a page (example):

      import time
      from h2o_wave import site, ui
      @@ -31,15 +31,15 @@
      # Read data from somewhere
      cpu_percent, mem_usage, disk_usage = read_system_stats()
      # Update card's data
      card.data[-1] = [cpu_percent, mem_usage, disk_usage]
      # Save the page
      page.save()

      Multiple Wave scripts running on multiple devices can update the same Wave page. You can use this capability to publish a single page that displays content originating from multiple sources. For example, a single page that displays stats for all the systems in your network, or a single page that displays tickers from different stock exchanges.

      Edit this page
      - - - - - - - - - - + + + + + + + + + + \ No newline at end of file diff --git a/docs/docs/security/index.html b/docs/docs/security/index.html index 11e4281297..1d523ec9a1 100644 --- a/docs/docs/security/index.html +++ b/docs/docs/security/index.html @@ -5,31 +5,30 @@ Security | H2O Wave - - - - - - - - - - + + + + + + + + + +
      -

      Security

      HTTPS

      To enable HTTP over TLS to secure your Wave server, pass the following flags when starting the Wave server:

      • -tls-cert-file: path to certificate file.
      • -tls-key-file: path to private key file.

      Self Signed Certificate

      To enable TLS during development, use a self-signed certificate.

      To create a private key and a self-signed certificate from scratch, use openssl:

      openssl req \
      -newkey rsa:2048 -nodes -keyout domain.key \
      -x509 -days 365 -out domain.crt

      The above command creates a 2048-bit private key (domain.key) and a self-signed x509 certificate (domain.crt) valid for 365 days.

      Single Sign On

      Wave has built-in support for OpenID Connect.

      To enable OpenID Connect, pass the following flags when starting the Wave server:

      • -oidc-provider-url: URL for authentication (the identity provider's URL).
      • -oidc-redirect-url: URL to redirect to after authentication.
      • -oidc-end-session-url: URL to log out (or sign out).
      • -oidc-client-id: Client ID (refer to your identity provider's documentation).
      • -oidc-client-secret: Client secret (refer to your identity provider's documentation).

      Once authenticated, you can access user's authentication and authorization information from your app using q.auth (see the Auth class for details):

      from h2o_wave import Q, listen
      -
      async def serve(q: Q):
      print(q.auth.username)
      print(q.auth.subject)
      -
      listen('/example', serve)
      Edit this page
      - - - - - - - - - - +

      Security

      HTTPS

      To enable HTTP over TLS to secure your Wave server, pass the following flags when starting the Wave server:

      • -tls-cert-file: path to certificate file.
      • -tls-key-file: path to private key file.

      Self Signed Certificate

      To enable TLS during development, use a self-signed certificate.

      To create a private key and a self-signed certificate from scratch, use openssl:

      openssl req \
      -newkey rsa:2048 -nodes -keyout domain.key \
      -x509 -days 365 -out domain.crt

      The above command creates a 2048-bit private key (domain.key) and a self-signed x509 certificate (domain.crt) valid for 365 days.

      Single Sign On

      Wave has built-in support for OpenID Connect.

      To enable OpenID Connect, pass the following flags when starting the Wave server:

      • -oidc-provider-url: URL for authentication (the identity provider's URL).
      • -oidc-redirect-url: URL to redirect to after authentication.
      • -oidc-end-session-url: URL to log out (or sign out).
      • -oidc-client-id: Client ID (refer to your identity provider's documentation).
      • -oidc-client-secret: Client secret (refer to your identity provider's documentation).

      Once authenticated, you can access user's authentication and authorization information from your app using q.auth (see the Auth class for details):

      from h2o_wave import Q, main, app
      +
      @app('/example')
      async def serve(q: Q):
      print(q.auth.username)
      print(q.auth.subject)
      Edit this page
      + + + + + + + + + + \ No newline at end of file diff --git a/docs/docs/state/index.html b/docs/docs/state/index.html index 157d3ca21f..d66b73a3f7 100644 --- a/docs/docs/state/index.html +++ b/docs/docs/state/index.html @@ -5,31 +5,30 @@ State | H2O Wave - - - - - - - - - - + + + + + + + + + +
      -

      State

      How you manage your Wave app's state depends on your app's requirements. In most cases, an app's data is best stored in a database or data store of some kind. But sometimes it's convenient to store run-time information in your app's memory, especially during prototyping when you're trying to iterate quickly and refine ideas.

      In a Wave app, you can store run-time information at three levels:

      • App-level: Information shared across all users.
      • User-level: Information private to a user, but shared across all browser tabs.
      • Client-level: Information private to a browser tab.

      In real world apps, the decision on whether to store information at the client, user, or app level depends on the problem you're trying to solve. For example, if you were building an online store, you'd probably want to store product inventory at the app level and shopping carts at the user level. Most other kinds of information - search results, past orders, or product details - are best stored at the client-level (searching for products in one tab and having search results appear in another tab would drive even your most loyal customers up the wall).

      In other words, your Wave app is multi-user by default, but how your app manages data at the app-level, at the user-level, and at the client-level is up to you.

      The Wave query context q (of type Q) carries q.app, q.user, and q.client, three dictionary-like objects for storing information at the app-level, user-level, and client-level, respectively.

      tip

      q.app, q.user, and q.client are all Expando instances, which means they behave both like dictionaries and objects: q.client['foo'] is the same as q.client.foo. q.client.foo is easier to read.

      In most non-trivial apps, you'll find yourself frequently copying values from q.args into q.client (or q.user, depending on the problem you're solving). If this gets too repetitive for your taste, use copy_expando() to copy everything in q.args to q.client at the beginning of your listen() handler:

      from h2o_wave import Q, listen, copy_expando
      -
      async def serve(q: Q):
      copy_expando(q.args, q.client)
      # Do something else...
      -
      listen('/foo', serve)
      Edit this page
      - - - - - - - - - - +

      State

      How you manage your Wave app's state depends on your app's requirements. In most cases, an app's data is best stored in a database or data store of some kind. But sometimes it's convenient to store run-time information in your app's memory, especially during prototyping when you're trying to iterate quickly and refine ideas.

      In a Wave app, you can store run-time information at three levels:

      • App-level: Information shared across all users.
      • User-level: Information private to a user, but shared across all browser tabs.
      • Client-level: Information private to a browser tab.

      In real world apps, the decision on whether to store information at the client, user, or app level depends on the problem you're trying to solve. For example, if you were building an online store, you'd probably want to store product inventory at the app level and shopping carts at the user level. Most other kinds of information - search results, past orders, or product details - are best stored at the client-level (searching for products in one tab and having search results appear in another tab would drive even your most loyal customers up the wall).

      In other words, your Wave app is multi-user by default, but how your app manages data at the app-level, at the user-level, and at the client-level is up to you.

      The Wave query context q (of type Q) carries q.app, q.user, and q.client, three dictionary-like objects for storing information at the app-level, user-level, and client-level, respectively.

      tip

      q.app, q.user, and q.client are all Expando instances, which means they behave both like dictionaries and objects: q.client['foo'] is the same as q.client.foo. q.client.foo is easier to read.

      In most non-trivial apps, you'll find yourself frequently copying values from q.args into q.client (or q.user, depending on the problem you're solving). If this gets too repetitive for your taste, use copy_expando() to copy everything in q.args to q.client at the beginning of your @app() handler:

      from h2o_wave import Q, main, app, copy_expando
      +
      @app('/foo')
      async def serve(q: Q):
      copy_expando(q.args, q.client)
      # Do something else...
      Edit this page
      + + + + + + + + + + \ No newline at end of file diff --git a/docs/docs/testing/index.html b/docs/docs/testing/index.html index b81c888b87..789e64541f 100644 --- a/docs/docs/testing/index.html +++ b/docs/docs/testing/index.html @@ -5,29 +5,29 @@ Testing | H2O Wave - - - - - - - - - - + + + + + + + + + +
      -

      Testing

      Edit this page
      - - - - - - - - - - +

      Testing

      Edit this page
      + + + + + + + + + + \ No newline at end of file diff --git a/docs/docs/tour/index.html b/docs/docs/tour/index.html index 08caf6db60..abf6ba240f 100644 --- a/docs/docs/tour/index.html +++ b/docs/docs/tour/index.html @@ -5,31 +5,31 @@ A Tour of Wave | H2O Wave - - - - - - - - - - - + + + + + + + + + + +
      -

      A Tour of Wave

      Your Wave release download ships with over 150 examples.

      You can play around with these examples in your browser using tour.py, a Python script (itself a Wave app) located in examples/:

      Contents of $HOME/wave
      wave/
      ├── docs/
      ├── examples/ <-- Examples live here.
      | └── tour.py <-- The Wave Tour.
      ├── test/
      ├── www/
      └── wave

      To run the tour, as with any Wave app, we need to start both the Wave server (wave) and the tour (tour.py). Let's go ahead and do that.

      Step 1: Start the Wave server

      To start the Wave server, simply open a new terminal window and execute wave (or wave.exe on Windows).

      cd $HOME/wave
      ./wave
      2020/10/15 12:04:40 #
      2020/10/15 12:04:40 # ┌───────────────────┐
      2020/10/15 12:04:40 # │ ┬ ┬┌─┐┬ ┬┌─┐ │
      2020/10/15 12:04:40 # │ │││├─┤└┐┌┘├┤ │
      2020/10/15 12:04:40 # │ └┴┘┴ ┴ └┘ └─┘ │
      2020/10/15 12:04:40 # └───────────────────┘
      2020/10/15 12:04:40 #
      2020/10/15 12:04:40 # {"address":":55555","t":"listen","webroot":"/home/elp/wave/www"}

      The Wave server should now be running at http://localhost:55555.

      Don't close this terminal window!

      To run any Wave app, you need the Wave server up and running at all times. Your web browser communicates with the Wave server, and the Wave server in turn communicates with the Wave app.

      Step 2: Run the tour

      To run the tour, create a virtual environment, install the tour's dependencies, and finally execute tour.py.

      important

      Do this from a new terminal window!

      cd $HOME/wave
      python3 -m venv venv
      ./venv/bin/pip install -r examples/requirements.txt
      ./venv/bin/python examples/tour.py

      On Windows:

      cd $HOME\wave
      python3 -m venv venv
      venv\Scripts\pip install -r examples\requirements.txt
      venv\Scripts\python examples\tour.py

      Step 3: Enjoy the tour

      Go to http://localhost:55555/tour to access the tour.

      tour

      tour.py is an ordinary Wave app that runs other apps. The tour itself runs at the route /tour, and each of the examples runs at /demo.

      tip

      To play with the tour's active example in isolation, simply open a new browser tab and head to http://localhost:55555/demo.

      Wrapping up

      In this section, we started the Wave server and then launched tour.py to experience the tour. In general, this is how you'd typically launch any app, including your own. There is nothing special about tour.py. In fact, to run any example, all you need to do is repeat the steps above in a new terminal window. For example, to run todo.py, simply run:

      cd $HOME/wave
      ./venv/bin/python examples/todo.py

      You can now access the example at http://localhost:55555/demo. Simple!

      Edit this page
      - - - - - - - - - - - +

      A Tour of Wave

      Your Wave release download ships with over 150 examples.

      You can play around with these examples in your browser using tour.py, a Python script (itself a Wave app) located in examples/:

      Contents of $HOME/wave
      wave/
      ├── examples/ <-- Examples live here.
      | └── tour.py <-- The Wave Tour.
      ├── test/
      ├── www/
      └── waved

      To run the tour, as with any Wave app, we need to start both the Wave server (waved) and the tour (tour.py). Let's go ahead and do that.

      Step 1: Start the Wave server

      To start the Wave server, simply open a new terminal window and execute waved (or waved.exe on Windows).

      cd $HOME/wave
      ./waved
      2020/10/27 16:16:34 #
      2020/10/27 16:16:34 # ┌─────────────────────────┐
      2020/10/27 16:16:34 # │ ┌ ┌ ┌──┐ ┌ ┌ ┌──┐ │ H2O Wave
      2020/10/27 16:16:34 # │ │ ┌──┘ │──│ │ │ └┐ │ (version) (build)
      2020/10/27 16:16:34 # │ └─┘ ┘ ┘ └──┘ └─┘ │ © 2020 H2O.ai, Inc.
      2020/10/27 16:16:34 # └─────────────────────────┘
      2020/10/27 16:16:34 #
      2020/10/27 16:16:34 # {"address":":55555","t":"listen","webroot":"/home/elp/wave/www"}

      The Wave server should now be running at http://localhost:55555.

      Don't close this terminal window!

      To run any Wave app, you need the Wave server up and running at all times. Your web browser communicates with the Wave server, and the Wave server in turn communicates with the Wave app.

      Step 2: Run the tour

      First, create a virtual environment, install the tour's dependencies.

      important

      Do this from a new terminal window!

      cd $HOME/wave
      python3 -m venv venv
      source venv/bin/activate
      pip install -r examples/requirements.txt

      On Windows:

      cd $HOME\wave
      python3 -m venv venv
      venv\Scripts\activate.bat
      pip install -r examples\requirements.txt

      Finally, run the tour:

      wave run --no-reload examples.tour

      Step 3: Enjoy the tour

      Go to http://localhost:55555/tour to access the tour.

      tour

      tour.py is an ordinary Wave app that runs other apps. The tour itself runs at the route /tour, and each of the examples runs at /demo.

      tip

      To play with the tour's active example in isolation, simply open a new browser tab and head to http://localhost:55555/demo.

      Wrapping up

      In this section, we started the Wave server and then launched tour.py to experience the tour. In general, this is how you'd typically launch any app, including your own. There is nothing special about tour.py. In fact, to run any example, all you need to do is repeat the steps above in a new terminal window. For example, to run todo.py, simply run:

      wave run examples.todo

      You can now access the example at http://localhost:55555/demo. Simple!

      Edit this page
      + + + + + + + + + + + \ No newline at end of file diff --git a/docs/docs/tutorial-beer/index.html b/docs/docs/tutorial-beer/index.html index a637454766..9ebf993b53 100644 --- a/docs/docs/tutorial-beer/index.html +++ b/docs/docs/tutorial-beer/index.html @@ -5,20 +5,20 @@ Tutorial: Beer Wall | H2O Wave - - - - - - - - - - + + + + + + + + + +
      -

      Tutorial: Beer Wall

      In this tutorial, we'll learn how to update a web page periodically and observe our changes live in the browser. Completing this tutorial should improve your understanding of how easy it is to use Wave to publish information in realtime.

      The program we'll be writing is a verse generator for the runaway mid-20th century smash hit, 99 Bottles of Beer, which looks something like this:

      99 bottles of beer on the wall, 99 bottles of beer.
      +

      Tutorial: Beer Wall

      In this tutorial, we'll learn how to update a web page periodically and observe our changes live in the browser. Completing this tutorial should improve your understanding of how easy it is to use Wave to publish information in realtime.

      The program we'll be writing is a verse generator for the runaway mid-20th century smash hit, 99 Bottles of Beer, which looks something like this:

      99 bottles of beer on the wall, 99 bottles of beer.
      Take one down, pass it around, 98 bottles of beer on the wall...

      98 bottles of beer on the wall, 98 bottles of beer.
      Take one down, pass it around, 97 bottles of beer on the wall...

      ...

      Our program will be analogous to our "Hello, World!" program, with the addition of a loop. We'll generate a verse every second, and observe the verse change in the browser in realtime. After that, we'll take a stab at making our program a bit more efficient, introducing how expressions work.

      (Incidentally, Donald Knuth proved that this song has a complexity of O(log N) in "The Complexity of Songs", but we won't let that little detail deter us for now.)

      Prerequisites

      This tutorial assumes your Wave server is up and running, and you have a working directory for authoring programs. If not, head over to the Hello World tutorial and complete steps 1 and 2.

      Step 1: Write your program

      Our program looks like this. It's mostly similar to the one in the Hello World tutorial, with one exception: we're setting the markdown card's content inside a for loop.

      $HOME/wave-apps/beer_wall.py
      import time
      from h2o_wave import site, ui
      page = site['/beer']
      @@ -31,15 +31,15 @@
      Take one down, pass it around, {{after}} bottles of beer on the wall...
      '''
      beer_card = page.add('wall', ui.markdown_card(
      box='1 1 4 2',
      title='99 Bottles of Beer',
      content=beer_verse,
      data=dict(before='99', after='98'),
      ))
      for i in range(99, 0, -1):
      beer_card.data.before = str(i)
      beer_card.data.after = str(i - 1)
      page.save()
      time.sleep(1)

      Run your program again. You should see the same results in your browser as before, but you'll notice that the information flowing through the Wave server is significantly less than before:

      2020/10/02 13:53:11 * /beer {"d":[{"k":"wall data before","v":"98"},{"k":"wall data after","v":"97"}]}
      2020/10/02 13:53:12 * /beer {"d":[{"k":"wall data before","v":"97"},{"k":"wall data after","v":"96"}]}
      2020/10/02 13:53:13 * /beer {"d":[{"k":"wall data before","v":"96"},{"k":"wall data after","v":"95"}]}
      2020/10/02 13:53:14 * /beer {"d":[{"k":"wall data before","v":"95"},{"k":"wall data after","v":"94"}]}
      2020/10/02 13:53:15 * /beer {"d":[{"k":"wall data before","v":"94"},{"k":"wall data after","v":"93"}]}
      2020/10/02 13:53:16 * /beer {"d":[{"k":"wall data before","v":"93"},{"k":"wall data after","v":"92"}]}

      Summary

      In this tutorial, we learned how to send periodic updates to the Wave server and observe changes in realtime.

      In the next tutorial, we'll put these principles to real-world use, popping up charts for a song instead of chart topping pop songs.

      Edit this page
      - - - - - - - - - - + + + + + + + + + + \ No newline at end of file diff --git a/docs/docs/tutorial-counter/index.html b/docs/docs/tutorial-counter/index.html index ee281568f8..b6b091c58d 100644 --- a/docs/docs/tutorial-counter/index.html +++ b/docs/docs/tutorial-counter/index.html @@ -5,61 +5,42 @@ Tutorial: Bean Counter | H2O Wave - - - - - - - - - - + + + + + + + + + +
      -

      Tutorial: Bean Counter

      In the previous tutorials, we've been authoring Wave scripts. A Wave script is a perfectly fine and dandy way to modify pages in Wave and build dashboards. However, to build interactive applications in Wave - user interfaces that can dynamically respond to events (the user's actions) - Wave apps are the way to go.

      In the fine tradition of keeping tutorials succinct and useful, we'll author a little app that counts beans of the virtual kind, or, a bean counter, not to be confused with dubiously intentioned financial officers.

      This tutorial outlines the basics of how to handle events, update the UI, manage state and easily add realtime sync capabilities to your app. It's probably the most important tutorial to wrap your head around if you're interesting in authoring interactive applications.

      Prerequisites

      This tutorial assumes your Wave server is up and running, and you have a working directory for authoring programs. If not, head over to the Hello World tutorial and complete steps 1 and 2.

      Step 1: Start listening

      The first step towards listening to events from the UI is to, literally, listen.

      $HOME/wave-apps/counter.py
      from h2o_wave import Q, listen
      -
      async def serve(q: Q):
      pass
      -
      listen('/counter', serve)

      listen() is a function that takes two required arguments:

      1. The route to listen to, in this case /counter (which translates to localhost:55555/counter or www.example.com/counter).
      2. The function to call when a event arrives from the UI, in this case serve() (but you can call it anything you please, like shoe_strings()).

      It's important to understand that serve() is called on every event from the UI. No matter how many event originate from the UI, they all pass through serve().

      caution

      serve() is an async function, and must be declared as async def serve(...) instead of plain def serve(...).

      Next, run your app:

      cd $HOME/wave-apps
      ./venv/bin/python counter.py

      At this point, your app will be up and running, but it doesn't do anything yet. Let's change that in a second.

      Step 2: Display a button

      Let's add a button to our app. Out goal is to increment and display the bean count each time the button is clicked.

      To do this, we declare a variable called bean_count, and use form_card() to add a form to our page. A form card is a special type of card that displays a vertical stack of components (also called widgets). In this case our form contains a solitary button named increment, with a caption showing the current bean_count. The button is marked as primary, which serves no other purpose than to make it look tall, dark, and handsome.

      $HOME/wave-apps/counter.py
      from h2o_wave import Q, listen, ui
      -
      -
      async def serve(q: Q):
      bean_count = 0
      -
      q.page['beans'] = ui.form_card(
      box='1 1 1 2',
      items=[
      ui.button(
      name='increment',
      label='Click me!',
      caption=f'{bean_count} beans',
      primary=True,
      ),
      ],
      )
      await q.page.save()
      -
      -
      listen('/counter', serve)

      Notice how the technique to modify and save pages in a Wave app is different from that of a Wave script.

      TaskWave ScriptWave App
      Access page at route /foopage = site['/foo']page = q.page
      Access card named foocard = page['foo']card = q.page['foo']
      Save pagepage.save()await q.page.save()

      In a Wave app, we always access the page using the query context q. The query context carries useful information about the active UI event, including who issued the event, what information was entered, which buttons were clicked, and so on; and q.page always refers to the page located at the route you passed to listen() (in this case, /counter).

      Restart your app (^C and run it again):

      cd $HOME/wave-apps
      ./venv/bin/python counter.py

      Point your browser to http://localhost:55555/counter. You should see a nice big button, waiting to be clicked on:

      Button

      If you click on the button, you'll notice that it doesn't do anything. This is because we haven't handled button clicks yet. Instead, when you click the button, the events are sent to your serve() function, but the serve() function blindly adds the form (with the button) to the page all over again and saves it, causing the page to display the same form all over again. Let's fix this next.

      Step 3: Handle button clicks

      Add a condition to check if the button is clicked, and if so, increment the bean count.

      $HOME/wave-apps/counter.py
      from h2o_wave import Q, listen, ui
      -
      -
      async def serve(q: Q):
      bean_count = q.client.bean_count or 0
      if q.args.increment:
      q.client.bean_count = bean_count = bean_count + 1
      -
      q.page['beans'] = ui.form_card(
      box='1 1 1 2',
      items=[
      ui.button(
      name='increment',
      label='Click me!',
      caption=f'{bean_count} beans',
      primary=True,
      ),
      ],
      )
      await q.page.save()
      -
      -
      listen('/counter', serve)

      The above edit introduces two important concepts: q.client and q.args.

      • q.client is a dictionary-like object for storing and retrieving arbitrary information related to the active client (a browser tab or browser session). Anything you put into q.client while handling a event can be read back while handling a subsequent event, provided the subsequent event originates from the same client. In our case, we read q.client.bean_count to get the bean count. If it's unavailable (which means this is a new client), we default the bean count to 0.
      • q.args, also a dictionary-like object, carries event arguments, which contains information about what the user did. In our case, if the user clicked on our button (named increment), q.args.increment will be True. If not, q.args.increment will be None. Therefore, if q.args.increment is True, we increment the client's bean_count. If not, we do nothing.
      note

      From now on, any time you see the term 'client', recall that it's a technical term for 'browser tab' or 'browser session'. In other words, any time you open a new browser tab to access your app, you're accessing your app from a new client.

      info

      Each component in the Wave component library populates q.args with its own value. For more information, see Components.

      Go ahead and restart your app (^C and run it again):

      cd $HOME/wave-apps
      ./venv/bin/python counter.py

      Point your browser to http://localhost:55555/counter. Your button should now count beans when clicked:

      Step 4: Make it more efficient

      Our program is accurate, but not necessarily efficient. On every button-click, it is recreating the form card and the button over and over again instead of updating the existing button's caption with the current bean count. You can observe how chatty the app is by gaping in abject horror at the Wave server's log.

      info

      To view the Wave server's log, switch to the terminal window running the Wave server.

      Let's wrinkle our noses in disgust and fix this gross inefficiency right away to make our little bean counter web-scale for great good.

      $HOME/wave-apps/counter.py
      from h2o_wave import Q, listen, ui
      -
      -
      async def serve(q: Q):
      bean_count = q.client.bean_count or 0
      if q.args.increment:
      q.client.bean_count = bean_count = bean_count + 1
      -
      if not q.client.initialized:
      q.client.initialized = True
      q.page['beans'] = ui.form_card(
      box='1 1 1 2',
      items=[
      ui.button(
      name='increment',
      label='Click me!',
      caption=f'{bean_count} beans',
      primary=True,
      ),
      ],
      )
      else:
      q.page['beans'].items[0].button.caption = f'{bean_count} beans'
      await q.page.save()
      -
      -
      listen('/counter', serve)

      In the above edit, we check for an arbitrary flag in q.client called initialized.

      • If the flag is not set, we assume that the request is originating from new, empty client. If so, we set initialized to True (to make a note to ourselves that the client is not empty anymore), then add our form card to the page.
      • If the flag is already set, we assume that the form card (and the button inside it) are already on the page, and simply update the button's caption with the new bean count.

      Intermission: Understanding state

      In the above steps, we learned about q.args (request arguments submitted from the browser) and q.client (arbitrary information associated with the client). Let's expand on these and introduce two new concepts: q.user and q.app.

      Before we do that, try accessing http://localhost:55555/counter from two different browser tabs and playing with them. You'll notice that each browser tab (or, each client) maintains separate bean counts.

      Maintaining separate bean counts per client is one way to count beans. You can also maintain bean counts at the user level and the app level.

      In real world apps, the decision on whether to store information at the client, user, or app level depends on the problem you're trying to solve. For example, if you were building an online store, you'd probably want to store product inventory at the app level and shopping carts at the user level. Most other kinds of information - search results, past orders, or product details - are best stored at the client-level (searching for products in one tab and having search results appear in another tab would drive even your most loyal customers up the wall).

      Similar to how q.client stores arbitrary information associated with the client, q.user and q.app store arbitrary information associated with the user and the app, respectively.

      In most apps, you'll end up using a mix of q.client, q.user and q.app to correctly handle requests originating from:

      1. Different users.
      2. Different browser tabs belonging to the same user (possibly from different devices).
      3. The same browser tab.

      In other words, your Wave app is multi-user by default, but how the app manages data at the app-level, at the user-level and at the client-level is up to you.

      Step 6: User-level realtime sync

      To maintain bean counts at the user level, all we have to do store bean_count in q.user instead of q.client.

      $HOME/wave-apps/counter.py
      from h2o_wave import Q, listen, ui
      -
      -
      async def serve(q: Q):
      bean_count = q.user.bean_count or 0
      if q.args.increment:
      q.user.bean_count = bean_count = bean_count + 1
      -
      if not q.client.initialized:
      q.client.initialized = True
      q.page['beans'] = ui.form_card(
      box='1 1 1 2',
      items=[
      ui.button(
      name='increment',
      label='Click me!',
      caption=f'{bean_count} beans',
      primary=True,
      ),
      ],
      )
      else:
      q.page['beans'].items[0].button.caption = f'{bean_count} beans'
      await q.page.save()
      -
      -
      listen('/counter', serve)

      If we run this app, we'll see that the counts are being maintained across browser tabs, but the updated counts don't show up immediately across all tabs. Instead, they show up only when you interact with the other tabs, or reload them.

      This would be considered normal behavior for a typical web application, and most users familiar with the interwebs are also familiar with the reload button, but we can do better, because having to hit the reload button to get updates is about as exciting as waiting for paint to dry.

      This is easier done than said - simply change the server mode to multicast to enable realtime sync across clients:

      $HOME/wave-apps/counter.py
      from h2o_wave import Q, listen, ui
      -
      -
      async def serve(q: Q):
      bean_count = q.user.bean_count or 0
      if q.args.increment:
      q.user.bean_count = bean_count = bean_count + 1
      -
      if not q.client.initialized:
      q.client.initialized = True
      q.page['beans'] = ui.form_card(
      box='1 1 1 2',
      items=[
      ui.button(
      name='increment',
      label='Click me!',
      caption=f'{bean_count} beans',
      primary=True,
      ),
      ],
      )
      else:
      q.page['beans'].items[0].button.caption = f'{bean_count} beans'
      await q.page.save()
      -
      -
      listen('/counter', serve, mode='multicast')
      info

      The default server mode for apps is unicast, which means "don't sync across clients". On the other hand, multicast means "sync across clients". There's also a third mode, broadcast, which means "sync across users", which we'll see in the next step.

      Re-running our app proves that the user-level bean count indeed syncs across tabs:

      Step 7: App-level realtime sync

      Going from user-level bean counting to app-level bean counting is easy: simply store bean_count on q.app instead of q.user, and switch the server mode to broadcast:

      $HOME/wave-apps/counter.py
      from h2o_wave import Q, listen, ui
      -
      -
      async def serve(q: Q):
      bean_count = q.app.bean_count or 0
      if q.args.increment:
      q.app.bean_count = bean_count = bean_count + 1
      -
      if not q.client.initialized:
      q.client.initialized = True
      q.page['beans'] = ui.form_card(
      box='1 1 1 2',
      items=[
      ui.button(
      name='increment',
      label='Click me!',
      caption=f'{bean_count} beans',
      primary=True,
      ),
      ],
      )
      else:
      q.page['beans'].items[0].button.caption = f'{bean_count} beans'
      await q.page.save()
      -
      -
      listen('/counter', serve, mode='broadcast')
      tip

      The broadcast mode can be used to build collaborative apps that need to synchronize state across all users, like group chat or multiplayer games.

      Summary

      In this tutorial, we learned how to author interactive applications, or apps, and easily add realtime sync capabilities to our apps. More importantly, we learned how to deal with events and manage state using four dictionary-like objects:

      AttributeTypeUse
      q.argsRead-onlyStores command arguments
      q.clientRead/WriteStores client-level state
      q.userRead/WriteStores user-level state
      q.appRead/WriteStores app-level state

      Also, we built ourselves a little app that counts beans, and you can now put that knowledge to good use, like build an online voting app for the upcoming elections in the banana republic you're running on your private island (a smidgen of democracy can't hurt).

      In the next section, we'll build something a bit more substantial and useful: a to-do list with realtime sync.

      Edit this page
      - - - - - - - - - - +

      Tutorial: Bean Counter

      In the previous tutorials, we've been authoring Wave scripts. A Wave script is a perfectly fine and dandy way to modify pages in Wave and build dashboards. However, to build interactive applications in Wave - user interfaces that can dynamically respond to events (the user's actions) - Wave apps are the way to go.

      In the fine tradition of keeping tutorials succinct and useful, we'll author a little app that counts beans of the virtual kind, or, a bean counter, not to be confused with dubiously intentioned financial officers.

      This tutorial outlines the basics of how to handle events, update the UI, manage state and easily add realtime sync capabilities to your app. It's probably the most important tutorial to wrap your head around if you're interesting in authoring interactive applications.

      Prerequisites

      This tutorial assumes your Wave server is up and running, and you have a working directory for authoring programs. If not, head over to the Hello World tutorial and complete steps 1 and 2.

      Step 1: Start listening

      The first step towards listening to events from the UI is to define an @app function:

      $HOME/wave-apps/counter.py
      from h2o_wave import Q, main, app
      +
      @app('/counter')
      async def serve(q: Q):
      pass

      @app is a decorator that takes one required argument - the route to listen to, in this case /counter (which translates to localhost:55555/counter or www.example.com/counter).

      The @app function, in this case serve(), is called on every event from the UI. No matter how many events originate from the UI, they all pass through serve().

      We named our @app function serve(), but you can call it anything you please, like shoe_strings().

      caution

      serve() is an async function, and must be declared as async def serve(...) instead of plain def serve(...).

      To run your app, use wave run:

      cd $HOME/wave-apps
      source venv/bin/activate
      wave run counter

      The wave run command runs your app in development mode, and the app is automatically reloaded when edited. The argument counter:main indicates that we want to use the main() function in counter.py to serve the app.

      info

      You don't have to do anything with main except import it into your .py file. main() is an ASGI-compatible function that you can use with any ASGI server like uvicorn or gunicorn. See Deployment.

      At this point, your app will be up and running, but it doesn't do anything yet. Let's change that in a second.

      Step 2: Display a button

      Let's add a button to our app. Out goal is to increment and display the bean count each time the button is clicked.

      To do this, we declare a variable called bean_count, and use form_card() to add a form to our page. A form card is a special type of card that displays a vertical stack of components (also called widgets). In this case our form contains a solitary button named increment, with a caption showing the current bean_count. The button is marked as primary, which serves no other purpose than to make it look tall, dark, and handsome.

      $HOME/wave-apps/counter.py
      from h2o_wave import Q, main, app, ui
      +
      @app('/counter')
      async def serve(q: Q):
      bean_count = 0
      +
      q.page['beans'] = ui.form_card(
      box='1 1 1 2',
      items=[
      ui.button(
      name='increment',
      label='Click me!',
      caption=f'{bean_count} beans',
      primary=True,
      ),
      ],
      )
      await q.page.save()

      Notice how the technique to modify and save pages in a Wave app is different from that of a Wave script.

      TaskWave ScriptWave App
      Access page at route /foopage = site['/foo']page = q.page
      Access card named foocard = page['foo']card = q.page['foo']
      Save pagepage.save()await q.page.save()

      In a Wave app, we always access the page using the query context q. The query context carries useful information about the active UI event, including who issued the event, what information was entered, which buttons were clicked, and so on; and q.page always refers to the page located at the route you passed to @app() (in this case).

      Point your browser to http://localhost:55555/counter. You should see a nice big button, waiting to be clicked on:

      Button

      If you click on the button, you'll notice that it doesn't do anything. This is because we haven't handled button clicks yet. Instead, when you click the button, the events are sent to your serve() function, but the serve() function blindly adds the form (with the button) to the page all over again and saves it, causing the page to display the same form all over again. Let's fix this next.

      Step 3: Handle button clicks

      Add a condition to check if the button is clicked, and if so, increment the bean count.

      $HOME/wave-apps/counter.py
      from h2o_wave import Q, main, app, ui
      +
      @app('/counter')
      async def serve(q: Q):
      bean_count = q.client.bean_count or 0
      if q.args.increment:
      q.client.bean_count = bean_count = bean_count + 1
      +
      q.page['beans'] = ui.form_card(
      box='1 1 1 2',
      items=[
      ui.button(
      name='increment',
      label='Click me!',
      caption=f'{bean_count} beans',
      primary=True,
      ),
      ],
      )
      await q.page.save()

      The above edit introduces two important concepts: q.client and q.args.

      • q.client is a dictionary-like object for storing and retrieving arbitrary information related to the active client (a browser tab or browser session). Anything you put into q.client while handling a event can be read back while handling a subsequent event, provided the subsequent event originates from the same client. In our case, we read q.client.bean_count to get the bean count. If it's unavailable (which means this is a new client), we default the bean count to 0.
      • q.args, also a dictionary-like object, carries event arguments, which contains information about what the user did. In our case, if the user clicked on our button (named increment), q.args.increment will be True. If not, q.args.increment will be None. Therefore, if q.args.increment is True, we increment the client's bean_count. If not, we do nothing.
      note

      From now on, any time you see the term 'client', recall that it's a technical term for 'browser tab' or 'browser session'. In other words, any time you open a new browser tab to access your app, you're accessing your app from a new client.

      info

      Each component in the Wave component library populates q.args with its own value. For more information, see Components.

      Your button should now count beans when clicked:

      Step 4: Make it more efficient

      Our program is accurate, but not necessarily efficient. On every button-click, it is recreating the form card and the button over and over again instead of updating the existing button's caption with the current bean count. You can observe how chatty the app is by gaping in abject horror at the Wave server's log.

      info

      To view the Wave server's log, switch to the terminal window running the Wave server.

      Let's wrinkle our noses in disgust and fix this gross inefficiency right away to make our little bean counter web-scale for great good.

      $HOME/wave-apps/counter.py
      from h2o_wave import Q, main, app, ui
      +
      @app('/counter')
      async def serve(q: Q):
      bean_count = q.client.bean_count or 0
      if q.args.increment:
      q.client.bean_count = bean_count = bean_count + 1
      +
      if not q.client.initialized:
      q.client.initialized = True
      q.page['beans'] = ui.form_card(
      box='1 1 1 2',
      items=[
      ui.button(
      name='increment',
      label='Click me!',
      caption=f'{bean_count} beans',
      primary=True,
      ),
      ],
      )
      else:
      q.page['beans'].items[0].button.caption = f'{bean_count} beans'
      await q.page.save()

      In the above edit, we check for an arbitrary flag in q.client called initialized.

      • If the flag is not set, we assume that the request is originating from new, empty client. If so, we set initialized to True (to make a note to ourselves that the client is not empty anymore), then add our form card to the page.
      • If the flag is already set, we assume that the form card (and the button inside it) are already on the page, and simply update the button's caption with the new bean count.

      Intermission: Understanding state

      In the above steps, we learned about q.args (request arguments submitted from the browser) and q.client (arbitrary information associated with the client). Let's expand on these and introduce two new concepts: q.user and q.app.

      Before we do that, try accessing http://localhost:55555/counter from two different browser tabs and playing with them. You'll notice that each browser tab (or, each client) maintains separate bean counts.

      Maintaining separate bean counts per client is one way to count beans. You can also maintain bean counts at the user level and the app level.

      In real world apps, the decision on whether to store information at the client, user, or app level depends on the problem you're trying to solve. For example, if you were building an online store, you'd probably want to store product inventory at the app level and shopping carts at the user level. Most other kinds of information - search results, past orders, or product details - are best stored at the client-level (searching for products in one tab and having search results appear in another tab would drive even your most loyal customers up the wall).

      Similar to how q.client stores arbitrary information associated with the client, q.user and q.app store arbitrary information associated with the user and the app, respectively.

      In most apps, you'll end up using a mix of q.client, q.user and q.app to correctly handle requests originating from:

      1. Different users.
      2. Different browser tabs belonging to the same user (possibly from different devices).
      3. The same browser tab.

      In other words, your Wave app is multi-user by default, but how the app manages data at the app-level, at the user-level and at the client-level is up to you.

      Step 5: User-level realtime sync

      To maintain bean counts at the user level, all we have to do store bean_count in q.user instead of q.client.

      $HOME/wave-apps/counter.py
      from h2o_wave import Q, main, app, ui
      +
      @app('/counter')
      async def serve(q: Q):
      bean_count = q.user.bean_count or 0
      if q.args.increment:
      q.user.bean_count = bean_count = bean_count + 1
      +
      if not q.client.initialized:
      q.client.initialized = True
      q.page['beans'] = ui.form_card(
      box='1 1 1 2',
      items=[
      ui.button(
      name='increment',
      label='Click me!',
      caption=f'{bean_count} beans',
      primary=True,
      ),
      ],
      )
      else:
      q.page['beans'].items[0].button.caption = f'{bean_count} beans'
      await q.page.save()

      Now when you play with your app, you'll see that the counts are being maintained across browser tabs, but the updated counts don't show up immediately across all tabs. Instead, they show up only when you interact with the other tabs, or reload them.

      This would be considered normal behavior for a typical web application, and most users familiar with the interwebs are also familiar with the reload button, but we can do better, because having to hit the reload button to get updates is about as exciting as waiting for paint to dry.

      This is easier done than said - simply change the server mode to multicast to enable realtime sync across clients:

      $HOME/wave-apps/counter.py
      from h2o_wave import Q, main, app, ui
      +
      @app('/counter')
      async def serve(q: Q):
      bean_count = q.user.bean_count or 0
      if q.args.increment:
      q.user.bean_count = bean_count = bean_count + 1
      +
      if not q.client.initialized:
      q.client.initialized = True
      q.page['beans'] = ui.form_card(
      box='1 1 1 2',
      items=[
      ui.button(
      name='increment',
      label='Click me!',
      caption=f'{bean_count} beans',
      primary=True,
      ),
      ],
      )
      else:
      q.page['beans'].items[0].button.caption = f'{bean_count} beans'
      await q.page.save()
      info

      The default server mode for apps is unicast, which means "don't sync across clients". On the other hand, multicast means "sync across clients". There's also a third mode, broadcast, which means "sync across users", which we'll see in the next step.

      If you play with your app now, you'll see that the user-level bean count indeed syncs across tabs:

      Step 6: App-level realtime sync

      Going from user-level bean counting to app-level bean counting is easy: simply store bean_count on q.app instead of q.user, and switch the server mode to broadcast:

      $HOME/wave-apps/counter.py
      from h2o_wave import Q, main, app, ui
      +
      @app('/counter')
      async def serve(q: Q):
      bean_count = q.app.bean_count or 0
      if q.args.increment:
      q.app.bean_count = bean_count = bean_count + 1
      +
      if not q.client.initialized:
      q.client.initialized = True
      q.page['beans'] = ui.form_card(
      box='1 1 1 2',
      items=[
      ui.button(
      name='increment',
      label='Click me!',
      caption=f'{bean_count} beans',
      primary=True,
      ),
      ],
      )
      else:
      q.page['beans'].items[0].button.caption = f'{bean_count} beans'
      await q.page.save()
      tip

      The broadcast mode can be used to build collaborative apps that need to synchronize state across all users, like group chat or multiplayer games.

      Summary

      In this tutorial, we learned how to author interactive applications, or apps, and easily add realtime sync capabilities to our apps. More importantly, we learned how to deal with events and manage state using four dictionary-like objects:

      AttributeTypeUse
      q.argsRead-onlyStores command arguments
      q.clientRead/WriteStores client-level state
      q.userRead/WriteStores user-level state
      q.appRead/WriteStores app-level state

      Also, we built ourselves a little app that counts beans, and you can now put that knowledge to good use, like build an online voting app for the upcoming elections in the banana republic you're running on your private island (a smidgen of democracy can't hurt).

      In the next section, we'll build something a bit more substantial and useful: a to-do list with realtime sync.

      Edit this page
      + + + + + + + + + + \ No newline at end of file diff --git a/docs/docs/tutorial-hello/index.html b/docs/docs/tutorial-hello/index.html index e5732914ba..df30a67136 100644 --- a/docs/docs/tutorial-hello/index.html +++ b/docs/docs/tutorial-hello/index.html @@ -5,34 +5,34 @@ Tutorial: Hello World | H2O Wave - - - - - - - - - - - + + + + + + + + + + +
      -

      Tutorial: Hello World

      In this section, we'll learn how to author our first Wave program from scratch, and understand the basics of how to display content in a web browser.

      note

      These tutorials assume that you have some familiarity with the Python programming language. You don't have to be an expert, but it might be harder to learn both Wave and Python at the same time.

      Step 1: Start the Wave Server

      To start the Wave server, simply open a new terminal window and execute wave (or wave.exe on Windows).

      cd $HOME/wave
      ./wave
      2020/10/15 12:04:40 #
      2020/10/15 12:04:40 # ┌───────────────────┐
      2020/10/15 12:04:40 # │ ┬ ┬┌─┐┬ ┬┌─┐ │
      2020/10/15 12:04:40 # │ │││├─┤└┐┌┘├┤ │
      2020/10/15 12:04:40 # │ └┴┘┴ ┴ └┘ └─┘ │
      2020/10/15 12:04:40 # └───────────────────┘
      2020/10/15 12:04:40 #
      2020/10/15 12:04:40 # {"address":":55555","t":"listen","webroot":"/home/elp/wave/www"}

      The Wave server should now be running at http://localhost:55555.

      Don't close this terminal window!

      To run any Wave app, you need the Wave server up and running at all times. Your web browser communicates with the Wave server, and the Wave server in turn communicates with the Wave app.

      Step 2: Set up a working directory

      Next, let's set up a working directory to author our program.

      Create a directory

      mkdir $HOME/wave-apps
      cd $HOME/wave-apps

      Set up a virtual environment

      A virtual environment helps us manage our program's dependencies without interfering with system-wide packages.

      python3 -m venv venv

      Install the Wave Python driver

      ./venv/bin/pip install h2o-wave

      Step 3: Write your program

      Next, open your preferred text editor, create a Python script called hello_world.py in the $HOME/wave-apps directory, and copy-paste the following.

      For now, don't worry too much about what this program is doing. We'll get to that shortly.

      $HOME/wave-apps/hello_world.py
      from h2o_wave import site, ui
      +

      Tutorial: Hello World

      In this section, we'll learn how to author our first Wave program from scratch, and understand the basics of how to display content in a web browser.

      note

      These tutorials assume that you have some familiarity with the Python programming language. You don't have to be an expert, but it might be harder to learn both Wave and Python at the same time.

      Step 1: Start the Wave server

      To start the Wave server, simply open a new terminal window and execute waved (or waved.exe on Windows).

      cd $HOME/wave
      ./waved
      2020/10/27 16:16:34 #
      2020/10/27 16:16:34 # ┌─────────────────────────┐
      2020/10/27 16:16:34 # │ ┌ ┌ ┌──┐ ┌ ┌ ┌──┐ │ H2O Wave
      2020/10/27 16:16:34 # │ │ ┌──┘ │──│ │ │ └┐ │ (version) (build)
      2020/10/27 16:16:34 # │ └─┘ ┘ ┘ └──┘ └─┘ │ © 2020 H2O.ai, Inc.
      2020/10/27 16:16:34 # └─────────────────────────┘
      2020/10/27 16:16:34 #
      2020/10/27 16:16:34 # {"address":":55555","t":"listen","webroot":"/home/elp/wave/www"}

      The Wave server should now be running at http://localhost:55555.

      Don't close this terminal window!

      To run any Wave app, you need the Wave server up and running at all times. Your web browser communicates with the Wave server, and the Wave server in turn communicates with the Wave app.

      Step 2: Set up a working directory

      Next, let's set up a working directory to author our program.

      Create a directory

      mkdir $HOME/wave-apps
      cd $HOME/wave-apps

      Set up a virtual environment

      A virtual environment helps us manage our program's dependencies without interfering with system-wide packages.

      python3 -m venv venv

      Install the Wave Python driver

      ./venv/bin/pip install h2o-wave

      Step 3: Write your program

      Next, open your preferred text editor, create a Python script called hello_world.py in the $HOME/wave-apps directory, and copy-paste the following.

      For now, don't worry too much about what this program is doing. We'll get to that shortly.

      $HOME/wave-apps/hello_world.py
      from h2o_wave import site, ui
      # Grab a reference to the page at route '/hello'
      page = site['/hello']
      # Add a markdown card to the page.
      page['quote'] = ui.markdown_card(
      box='1 1 2 2',
      title='Hello World',
      content='"The Internet? Is that thing still around?" - *Homer Simpson*',
      )
      -
      # Finally, save the page.
      page.save()

      Step 4: Run your program

      cd $HOME/wave-apps
      ./venv/bin/python hello_world.py

      Step 5: Admire your creation

      Point your browser to http://localhost:55555/hello, and pause to reflect on a particularly pithy quote from the venerable Homer Simpson.

      Hello World 1

      Step 6: Understand your program

      Let's walk through this program step by step.

      This program (technically a script), illustrates the core of Wave's programming model, or, "How to think in Wave."

      1. Your Wave server instance holds a collection of pages.
      2. To change a page, simply grab a reference to a page, change it, and save it.

      That's it. Your changes are now visible to everyone.

      Let's understand this principle in practice using the little program we just created.

      Grab a reference to a page

      A site represents a dictionary of all the pages on the Wave server. To get a reference to a page hosted at the route /hello (which translates to http://localhost:55555/hello), simply grab the value at key /hello.

      page = site['/hello']

      Change the page

      Similar to how a site represents a collection of pages, a page represents a collection of cards. A card represents a block of content: text, graphics, widgets, or some combination of those.

      page['hello'] = ui.markdown_card(
      box='1 1 2 2',
      title='Hello World',
      content='"The Internet? Is that thing still around?" - *Homer Simpson*',
      )

      Pages support different kinds of cards. In this case, we add a card named hello that displays markdown content (markdown_card()). The position and size of the card on the page is specified by the box attribute. In this case, the card is placed at column 1, row 1, sized 2 x 2 units. The content attribute supports Github Flavored Markdown.

      Save the page

      Finally, we call save() on the page, which broadcasts our changes to all connected web browsers.

      page.save()

      Hello World 1

      So far, so good.

      Step 7: Edit your page from a REPL

      Finally, just for kicks, let's make some changes to our hello world page using a Python REPL and watch our page reflect those changes in realtime.

      Start a Python REPL

      cd $HOME/wave-apps
      ./venv/bin/python

      Grab a reference to our page

      >>>
      from h2o_wave import site
      page = site['/hello']

      Grab a reference to our card

      >>>
      quote = page['quote']

      Change the title

      >>>
      quote.title = 'Hello Again!'
      page.save()

      Hello World 2

      Change the content

      >>>
      quote.content = "D'oh! - *Homer Simpson*"
      page.save()

      Hello World 3

      Quit your REPL

      >>>
      quit()

      Summary

      What we just did - add content from one program and make edits to it from another - illustrates another important aspect of Wave's programming model: The Wave server retains content. Your hello_world.py program did its thing and exited. So did your REPL. But your content was retained for the viewing pleasure of future visitors to /hello.

      Next, we'll take the principles we learned from this tutorial and apply it towards a supposedly spirited folk song involving arithmetic progressions.

      Edit this page
      - - - - - - - - - - - +
      # Finally, save the page.
      page.save()

      Step 4: Run your program

      cd $HOME/wave-apps
      ./venv/bin/python hello_world.py

      Step 5: Admire your creation

      Point your browser to http://localhost:55555/hello, and pause to reflect on a particularly pithy quote from the venerable Homer Simpson.

      Hello World 1

      Step 6: Understand your program

      Let's walk through this program step by step.

      This program (technically a script), illustrates the core of Wave's programming model, or, "How to think in Wave."

      1. Your Wave server instance holds a collection of pages.
      2. To change a page, simply grab a reference to a page, change it, and save it.

      That's it. Your changes are now visible to everyone.

      Let's understand this principle in practice using the little program we just created.

      Grab a reference to a page

      A site represents a dictionary of all the pages on the Wave server. To get a reference to a page hosted at the route /hello (which translates to http://localhost:55555/hello), simply grab the value at key /hello.

      page = site['/hello']

      Change the page

      Similar to how a site represents a collection of pages, a page represents a collection of cards. A card represents a block of content: text, graphics, widgets, or some combination of those.

      page['hello'] = ui.markdown_card(
      box='1 1 2 2',
      title='Hello World',
      content='"The Internet? Is that thing still around?" - *Homer Simpson*',
      )

      Pages support different kinds of cards. In this case, we add a card named hello that displays markdown content (markdown_card()). The position and size of the card on the page is specified by the box attribute. In this case, the card is placed at column 1, row 1, sized 2 x 2 units. The content attribute supports Github Flavored Markdown.

      Save the page

      Finally, we call save() on the page, which broadcasts our changes to all connected web browsers.

      page.save()

      Hello World 1

      So far, so good.

      Step 7: Edit your page from a REPL

      Finally, just for kicks, let's make some changes to our hello world page using a Python REPL and watch our page reflect those changes in realtime.

      Start a Python REPL

      cd $HOME/wave-apps
      ./venv/bin/python

      Grab a reference to our page

      >>>
      from h2o_wave import site
      page = site['/hello']

      Grab a reference to our card

      >>>
      quote = page['quote']

      Change the title

      >>>
      quote.title = 'Hello Again!'
      page.save()

      Hello World 2

      Change the content

      >>>
      quote.content = "D'oh! - *Homer Simpson*"
      page.save()

      Hello World 3

      Quit your REPL

      >>>
      quit()

      Summary

      What we just did - add content from one program and make edits to it from another - illustrates another important aspect of Wave's programming model: The Wave server retains content. Your hello_world.py program did its thing and exited. So did your REPL. But your content was retained for the viewing pleasure of future visitors to /hello.

      Next, we'll take the principles we learned from this tutorial and apply it towards a supposedly spirited folk song involving arithmetic progressions.

      Edit this page
      + + + + + + + + + + + \ No newline at end of file diff --git a/docs/docs/tutorial-monitor/index.html b/docs/docs/tutorial-monitor/index.html index 8ad40777f7..0f2e8457db 100644 --- a/docs/docs/tutorial-monitor/index.html +++ b/docs/docs/tutorial-monitor/index.html @@ -5,40 +5,40 @@ Tutorial: System Monitor | H2O Wave - - - - - - - - - - + + + + + + + + + +
      -

      Tutorial: System Monitor

      In this tutorial, we'll put our learnings from the first and second tutorials to some real-world use: a simple system monitoring tool that displays CPU, memory and network stats on a web page.

      CPU

      For example, if you have a spare 256-node Raspberry Pi cluster lying somewhere, you can run this program to each node and monitor your entire cluster's system utilization from one place. How cool is that?

      We'll also introduce a new concept, called data buffers, which allows you to use the Wave server to store rows (also called tuples or records) of information - much like how you would use tables in a database, or dataframes in Python or R - to deal with structured data.

      Prerequisites

      This tutorial assumes your Wave server is up and running, and you have a working directory for authoring programs. If not, head over to the Hello World tutorial and complete steps 1 and 2.

      Step 1: Install dependencies

      We'll be using the excellent psutil package to read system stats. Let's go ahead and install that in our virtual environment:

      cd $HOME/wave-apps
      ./venv/bin/pip install psutil

      Step 2: Monitor CPU usage

      Here's what our program looks like:

      $HOME/wave-apps/system_monitor.py
      import time
      import psutil
      from h2o_wave import site, ui, data
      +

      Tutorial: System Monitor

      In this tutorial, we'll put our learnings from the first and second tutorials to some real-world use: a simple system monitoring tool that displays CPU, memory and network stats on a web page.

      CPU

      For example, if you have a spare 256-node Raspberry Pi cluster lying somewhere, you can run this program to each node and monitor your entire cluster's system utilization from one place. How cool is that?

      We'll also introduce a new concept, called data buffers, which allows you to use the Wave server to store rows (also called tuples or records) of information - much like how you would use tables in a database, or dataframes in Python or R - to deal with structured data.

      Prerequisites

      This tutorial assumes your Wave server is up and running, and you have a working directory for authoring programs. If not, head over to the Hello World tutorial and complete steps 1 and 2.

      Step 1: Install dependencies

      We'll be using the excellent psutil package to read system stats. Let's go ahead and install that in our virtual environment:

      cd $HOME/wave-apps
      ./venv/bin/pip install psutil

      Step 2: Monitor CPU usage

      Here's what our program looks like:

      $HOME/wave-apps/system_monitor.py
      import time
      import psutil
      from h2o_wave import site, ui, data
      page = site['/monitor']
      cpu_card = page.add('cpu_stats', ui.small_series_stat_card(
      box='1 1 1 1',
      title='CPU',
      value='={{usage}}%',
      data=dict(usage=0.0),
      plot_data=data('tick usage', -15),
      plot_category='tick',
      plot_value='usage',
      plot_zero_value=0,
      plot_color='$red',
      ))
      tick = 0
      while True:
      tick += 1
      cpu_usage = psutil.cpu_percent(interval=1)
      cpu_card.data.usage = cpu_usage
      cpu_card.plot_data[-1] = [tick, cpu_usage]
      -
      page.save()
      time.sleep(1)

      Step 3: Run your program

      cd $HOME/wave-apps
      ./venv/bin/python system_stats.py

      Point your browser to http://localhost:55555/monitor.

      CPU

      Step 4: Understand your program

      You'll notice that the above program is quite similar to the program we wrote during the Beer Wall tutorial, with three important differences (see highlighted lines above):

      1. We use a ui.small_series_stat_card() instead of a ui.markdown_card().
      2. The card is capable of dealing with multiple rows of data.
      3. To display information on the card, you only need to send it new values (and not all the data rows all over again).

      Let's explore these topics one by one.

      Using a stats card

      The Wave SDK ships with a variety of stats cards, which are cards that display values or graphics, or a combination of both (see Gallery for more).

      In this case, we use small_series_stats_card(), which displays a value and a time series visualization.

      cpu_card = page.add('cpu_stats', ui.small_series_stat_card(...)

      Declaring a data buffer

      The stats card is capable of rendering its visualization using a data buffer. A data buffer is similar to a database table in that it has a predefined structure (columns and rows), but is write-only (you cannot query information; only insert, update or delete them).

      info

      The data buffer topic covers different types of buffers in more detail.

      In this case, we declare a cyclic buffer, a FIFO data structure that holds a fixed number of rows, and can only be appended to. Our buffer holds at most 15 rows, and has exactly two columns: tick (a one-up integer) and usage (the CPU usage).

      plot_data=data('tick usage', -15),

      Internally, the card's data buffer might look like this in memory when first created:

      #tickusage
      0
      1
      .........
      13
      14

      Inserting into the data buffer

      Lastly, we measure CPU usage every second and append a new row to the end of card's data buffer, like this:

      cpu_card.plot_data[-1] = [tick, cpu_usage]

      Internally, the card's data buffer might look like in memory while in use:

      #tickusage
      010154.2
      110164.9
      .........
      1310285.8
      1410397.5

      Step 5: Monitor memory usage

      As a final step, we can duplicate parts of our program to create another card that displays memory stats. The two cards behave identically, except that one displays CPU usage and the other, memory.

      $HOME/wave-apps/system_monitor.py
      import time
      import psutil
      from h2o_wave import site, ui, data
      +
      page.save()
      time.sleep(1)

      Step 3: Run your program

      cd $HOME/wave-apps
      ./venv/bin/python system_stats.py

      Point your browser to http://localhost:55555/monitor.

      CPU

      Step 4: Understand your program

      You'll notice that the above program is quite similar to the program we wrote during the Beer Wall tutorial, with three important differences (see highlighted lines above):

      1. We use a ui.small_series_stat_card() instead of a ui.markdown_card().
      2. The card is capable of dealing with multiple rows of data.
      3. To display information on the card, you only need to send it new values (and not all the data rows all over again).

      Let's explore these topics one by one.

      Using a stats card

      The Wave SDK ships with a variety of stats cards, which are cards that display values or graphics, or a combination of both (see Gallery for more).

      In this case, we use small_series_stats_card(), which displays a value and a time series visualization.

      cpu_card = page.add('cpu_stats', ui.small_series_stat_card(...)

      Declaring a data buffer

      The stats card is capable of rendering its visualization using a data buffer. A data buffer is similar to a database table in that it has a predefined structure (columns and rows), but is write-only (you cannot query information; only insert, update or delete them).

      info

      The data buffer topic covers different types of buffers in more detail.

      In this case, we declare a cyclic buffer, a FIFO data structure that holds a fixed number of rows, and can only be appended to. Our buffer holds at most 15 rows, and has exactly two columns: tick (a one-up integer) and usage (the CPU usage).

      plot_data=data('tick usage', -15),

      Internally, the card's data buffer might look like this in memory when first created:

      #tickusage
      0
      1
      .........
      13
      14

      Inserting into the data buffer

      Lastly, we measure CPU usage every second and append a new row to the end of card's data buffer, like this:

      cpu_card.plot_data[-1] = [tick, cpu_usage]

      Internally, the card's data buffer might look like this in memory while in use:

      #tickusage
      010154.2
      110164.9
      .........
      1310285.8
      1410397.5

      Step 5: Monitor memory usage

      As a final step, we can duplicate parts of our program to create another card that displays memory stats. The two cards behave identically, except that one displays CPU usage and the other, memory.

      $HOME/wave-apps/system_monitor.py
      import time
      import psutil
      from h2o_wave import site, ui, data
      page = site['/monitor']
      cpu_card = page.add('cpu_stats', ui.small_series_stat_card(
      box='1 1 1 1',
      title='CPU',
      value='={{usage}}%',
      data=dict(usage=0.0),
      plot_data=data('tick usage', -15),
      plot_category='tick',
      plot_value='usage',
      plot_zero_value=0,
      plot_color='$red',
      ))
      mem_card = page.add('mem_stats', ui.small_series_stat_card(
      box='1 2 1 1',
      title='Memory',
      value='={{usage}}%',
      data=dict(usage=0.0),
      plot_data=data('tick usage', -15),
      plot_category='tick',
      plot_value='usage',
      plot_zero_value=0,
      plot_color='$blue',
      ))
      tick = 0
      while True:
      tick += 1
      cpu_usage = psutil.cpu_percent(interval=1)
      cpu_card.data.usage = cpu_usage
      cpu_card.plot_data[-1] = [tick, cpu_usage]
      mem_usage = psutil.virtual_memory().percent
      mem_card.data.usage = mem_usage
      mem_card.plot_data[-1] = [tick, mem_usage]
      page.save()
      time.sleep(1)

      Step 6: Run your program again

      Terminate your program (^C) and restart it:

      cd $HOME/wave-apps
      ./venv/bin/python system_stats.py

      Point your browser to http://localhost:55555/monitor. You should now see both CPU and memory stats live:

      CPU

      Exercise

      Explore other kinds of cards in the Gallery and display additional stats gleaned from psutil (network, disk, processes, etc.).

      Summary

      In this tutorial, we learned how to use stats cards to display live information. The knowledge you've gained from these first few tutorials should be enough to design and deploy live dashboards using Wave. You will also have noticed that you don't need to keep your Python program running all the time to continue displaying your pages. You can terminate your Python program any time, and the Wave server will happily display the last known state of all your pages.

      The programs you've been authoring till now are one kind of programs, called Wave scripts. Wave scripts are not interactive. They can modify pages on the Wave server, but cannot respond to user actions, like handling button clicks, menu commands, dropdown changes, and so on. To handle user interactions, you need to author Wave Apps, which are long-running programs (servers or services) that are capable of modifying pages in response to user actions. Let's see how to do that in the next tutorial.

      Edit this page
      - - - - - - - - - - + + + + + + + + + + \ No newline at end of file diff --git a/docs/docs/tutorial-todo/index.html b/docs/docs/tutorial-todo/index.html index 4c4c0f2606..d3cd57f338 100644 --- a/docs/docs/tutorial-todo/index.html +++ b/docs/docs/tutorial-todo/index.html @@ -5,87 +5,71 @@ Tutorial: Todo List | H2O Wave - - - - - - - - - - + + + + + + + + + +
      -

      Tutorial: Todo List

      In this tutorial, we'll build something a bit more substantial and useful: a to-do list with realtime sync, in under 75 lines of (well-formatted, well-commented) code.

      More importantly, this tutorial will not introduce any new concepts. Everything you need to know about authoring interactive apps using Wave is already covered in the previous tutorial. From this point on, it's mostly a matter of abstraction, which is a fancy term for how you solve the problem at hand using short, simple, clear, elegant, modular functions that do one thing and do it well.

      Above all, prefer brevity and clarity. The best code is no code at all.

      Step 1: Listen

      We'll start with a basic skeleton, and then work our way up from there.

      The first step is to listen(). Also, we want the landing page to show a list of to-dos, so we'll throw in an empty show_todos() function for now, and call it from serve().

      $HOME/wave-apps/todo.py
      from h2o_wave import Q, listen, ui
      +

      Tutorial: Todo List

      In this tutorial, we'll build something a bit more substantial and useful: a to-do list with realtime sync, in under 75 lines of (well-formatted, well-commented) code.

      More importantly, this tutorial will not introduce any new concepts. Everything you need to know about authoring interactive apps using Wave is already covered in the previous tutorial. From this point on, it's mostly a matter of abstraction, which is a fancy term for how you solve the problem at hand using short, simple, clear, elegant, modular functions that do one thing and do it well.

      Above all, prefer brevity and clarity. The best code is no code at all.

      Step 1: Listen

      We'll start with a basic skeleton, and then work our way up from there.

      The first step is to define an @app function. Also, we want the landing page to show a list of to-dos, so we'll throw in an empty show_todos() function for now, and call it from serve().

      $HOME/wave-apps/todo.py
      from h2o_wave import Q, main, app, ui
      -
      async def serve(q: Q):
      show_todos(q)
      await q.page.save()
      +
      @app('/todo')
      async def serve(q: Q):
      show_todos(q)
      await q.page.save()
      -
      def show_todos(q: Q):
      pass
      -
      -
      listen('/todo', serve)

      Step 2: What's in a to-do?

      A to-do item has some basic attributes: an ID, some text content, and whether it's completed or not. Let's define a class for that, with a global one-up id.

      $HOME/wave-apps/todo.py
      from h2o_wave import Q, listen, ui
      +
      def show_todos(q: Q):
      pass

      Step 2: What's in a to-do?

      A to-do item has some basic attributes: an ID, some text content, and whether it's completed or not. Let's define a class for that, with a global one-up id.

      $HOME/wave-apps/todo.py
      from h2o_wave import Q, main, app, ui
      _id = 0
      # A simple class that represents a to-do item.
      class TodoItem:
      def __init__(self, text):
      global _id
      _id += 1
      self.id = f'todo_{_id}'
      self.text = text
      self.done = False
      -
      async def serve(q: Q):
      show_todos(q)
      await q.page.save()
      -
      -
      def show_todos(q: Q):
      pass
      +
      @app('/todo')
      async def serve(q: Q):
      show_todos(q)
      await q.page.save()
      -
      listen('/todo', serve)

      Step 3: Make a to-do list

      Since we want each user to have a separate to-do list, it's appropriate to keep the to-do list in q.user.

      Here, we attempt to fetch the list from q.user, and create one if it doesn't exist. We also throw in some sample to-do items for good measure.

      $HOME/wave-apps/todo.py
      from typing import List
      from h2o_wave import Q, listen, ui
      +
      def show_todos(q: Q):
      pass

      Step 3: Make a to-do list

      Since we want each user to have a separate to-do list, it's appropriate to keep the to-do list in q.user.

      Here, we attempt to fetch the list from q.user, and create one if it doesn't exist. We also throw in some sample to-do items for good measure.

      $HOME/wave-apps/todo.py
      from typing import List
      from h2o_wave import Q, main, app, ui
      _id = 0
      -
      # A simple class that represents a to-do item.
      class TodoItem:
      def __init__(self, text):
      global _id
      _id += 1
      self.id = f'todo_{_id}'
      self.text = text
      self.done = False
      -
      async def serve(q: Q):
      show_todos(q)
      await q.page.save()
      +
      @app('/todo')
      async def serve(q: Q):
      show_todos(q)
      await q.page.save()
      def show_todos(q: Q):
      # Get items for this user.
      todos: List[TodoItem] = q.user.todos
      -
      # Create a sample list if we don't have any.
      if todos is None:
      q.user.todos = todos = [TodoItem('Do this'), TodoItem('Do that'), TodoItem('Do something else')]
      -
      listen('/todo', serve)

      Step 4: Show the to-do list

      Next, we turn each incomplete to-do item into a checkbox (using ui.checkbox()), and display it in a form card (using ui.form_card()). -Also, we want each checkbox to raise an event immediately when checked, so we set its trigger attribute to True.

      tip

      Several components have a trigger attribute. Normally, an event is triggered only when a command-like component (a button, menu, or tab) is clicked. If you want a component to immediately trigger an event when changed, set trigger to True.

      $HOME/wave-apps/todo.py
      from typing import List
      from h2o_wave import Q, listen, ui
      +
      # Create a sample list if we don't have any.
      if todos is None:
      q.user.todos = todos = [TodoItem('Do this'), TodoItem('Do that'), TodoItem('Do something else')]

      Step 4: Show the to-do list

      Next, we turn each incomplete to-do item into a checkbox (using ui.checkbox()), and display it in a form card (using ui.form_card()). +Also, we want each checkbox to raise an event immediately when checked, so we set its trigger attribute to True.

      tip

      Several components have a trigger attribute. Normally, an event is triggered only when a command-like component (a button, menu, or tab) is clicked. If you want a component to immediately trigger an event when changed, set trigger to True.

      $HOME/wave-apps/todo.py
      from typing import List
      from h2o_wave import Q, main, app, ui
      _id = 0
      -
      # A simple class that represents a to-do item.
      class TodoItem:
      def __init__(self, text):
      global _id
      _id += 1
      self.id = f'todo_{_id}'
      self.text = text
      self.done = False
      -
      async def serve(q: Q):
      show_todos(q)
      await q.page.save()
      +
      @app('/todo')
      async def serve(q: Q):
      show_todos(q)
      await q.page.save()
      def show_todos(q: Q):
      # Get items for this user.
      todos: List[TodoItem] = q.user.todos
      # Create a sample list if we don't have any.
      if todos is None:
      q.user.todos = todos = [TodoItem('Do this'), TodoItem('Do that'), TodoItem('Do something else')]
      # Create checkboxes.
      not_done = [ui.checkbox(name=todo.id, label=todo.text, trigger=True) for todo in todos if not todo.done]
      -
      # Display list
      q.page['form'] = ui.form_card(box='1 1 3 10', items=[
      ui.text_l('To Do'),
      *not_done,
      ])
      -
      -
      listen('/todo', serve)

      Step 5: Show the 'done' list

      We also turn each completed to-do item into another list of checkboxes, checked by default (using its value attribute). We append this to the form card, and put a separator in between (using ui.separator()) to distinguish the completed items from the incomplete ones.

      $HOME/wave-apps/todo.py
      from typing import List
      from h2o_wave import Q, listen, ui
      +
      # Display list
      q.page['form'] = ui.form_card(box='1 1 3 10', items=[
      ui.text_l('To Do'),
      *not_done,
      ])

      Step 5: Show the 'done' list

      We also turn each completed to-do item into another list of checkboxes, checked by default (using its value attribute). We append this to the form card, and put a separator in between (using ui.separator()) to distinguish the completed items from the incomplete ones.

      $HOME/wave-apps/todo.py
      from typing import List
      from h2o_wave import Q, main, app, ui
      _id = 0
      +
      # A simple class that represents a to-do item.
      class TodoItem:
      def __init__(self, text):
      global _id
      _id += 1
      self.id = f'todo_{_id}'
      self.text = text
      self.done = False
      -
      # A simple class that represents a to-do item.
      class TodoItem:
      def __init__(self, text):
      global _id
      _id += 1
      self.id = f'todo_{_id}'
      self.done = False
      self.text = text
      -
      -
      async def serve(q: Q):
      show_todos(q)
      await q.page.save()
      +
      @app('/todo')
      async def serve(q: Q):
      show_todos(q)
      await q.page.save()
      def show_todos(q: Q):
      # Get items for this user.
      todos: List[TodoItem] = q.user.todos
      # Create a sample list if we don't have any.
      if todos is None:
      q.user.todos = todos = [TodoItem('Do this'), TodoItem('Do that'), TodoItem('Do something else')]
      # Create done/not-done checkboxes.
      done = [ui.checkbox(name=todo.id, label=todo.text, value=True, trigger=True) for todo in todos if todo.done]
      not_done = [ui.checkbox(name=todo.id, label=todo.text, trigger=True) for todo in todos if not todo.done]
      -
      # Display list
      q.page['form'] = ui.form_card(box='1 1 3 10', items=[
      ui.text_l('To Do'),
      *not_done,
      *([ui.separator('Done')] if len(done) else []),
      *done,
      ])
      -
      -
      listen('/todo', serve)

      At this point, try running your app.

      cd $HOME/wave-apps
      ./venv/bin/python todo.py

      Point your browser to http://localhost:55555/todo.

      todo

      You should be able to see your todo list in all its glory. Unfortunately, checking any of the items seems to have no effect. Let's fix that next.

      Step 6: Handle checkboxes

      Each time a checkbox is checked or unchecked, our serve() function is called, which in turn calls show_todos().

      • If a checkbox is checked, q.args will contain a True for that checkbox.
      • If a checkbox is unchecked, q.args will contain a False for that checkbox.

      So, we iterate through all the to-do items set their done attribute based on the value of their corresponding checkbox.

      $HOME/wave-apps/todo.py
      from typing import List
      from h2o_wave import Q, listen, ui
      +
      # Display list
      q.page['form'] = ui.form_card(box='1 1 3 10', items=[
      ui.text_l('To Do'),
      *not_done,
      *([ui.separator('Done')] if len(done) else []),
      *done,
      ])

      At this point, try running your app.

      cd $HOME/wave-apps
      source venv/bin/activate
      wave run todo

      Point your browser to http://localhost:55555/todo.

      todo

      You should be able to see your todo list in all its glory. Unfortunately, checking any of the items seems to have no effect. Let's fix that next.

      Step 6: Handle checkboxes

      Each time a checkbox is checked or unchecked, our serve() function is called, which in turn calls show_todos().

      • If a checkbox is checked, q.args will contain a True for that checkbox.
      • If a checkbox is unchecked, q.args will contain a False for that checkbox.

      So, we iterate through all the to-do items set their done attribute based on the value of their corresponding checkbox.

      $HOME/wave-apps/todo.py
      from typing import List
      from h2o_wave import Q, main, app, ui
      _id = 0
      +
      # A simple class that represents a to-do item.
      class TodoItem:
      def __init__(self, text):
      global _id
      _id += 1
      self.id = f'todo_{_id}'
      self.text = text
      self.done = False
      -
      # A simple class that represents a to-do item.
      class TodoItem:
      def __init__(self, text):
      global _id
      _id += 1
      self.id = f'todo_{_id}'
      self.done = False
      self.text = text
      -
      -
      async def serve(q: Q):
      show_todos(q)
      await q.page.save()
      +
      @app('/todo')
      async def serve(q: Q):
      show_todos(q)
      await q.page.save()
      def show_todos(q: Q):
      # Get items for this user.
      todos: List[TodoItem] = q.user.todos
      # Create a sample list if we don't have any.
      if todos is None:
      q.user.todos = todos = [TodoItem('Do this'), TodoItem('Do that'), TodoItem('Do something else')]
      # If the user checked/unchecked an item, update our list.
      for todo in todos:
      if todo.id in q.args:
      todo.done = q.args[todo.id]
      # Create done/not-done checkboxes.
      done = [ui.checkbox(name=todo.id, label=todo.text, value=True, trigger=True) for todo in todos if todo.done]
      not_done = [ui.checkbox(name=todo.id, label=todo.text, trigger=True) for todo in todos if not todo.done]
      -
      # Display list
      q.page['form'] = ui.form_card(box='1 1 3 10', items=[
      ui.text_l('To Do'),
      *not_done,
      *([ui.separator('Done')] if len(done) else []),
      *done,
      ])
      -
      -
      listen('/todo', serve)

      Restart your app and reload your browser. You should now be able to check/uncheck the items in your todo list.

      Next, let's see how to add new items to the list.

      Step 7: The 'new todo' form

      Next, let's display a form to add new items to our list. For that, we'll add a new button to our existing form, named new_todo, and direct the serve() function to the new_todo() function if the button is clicked. Recall that when buttons are clicked, q.args.button_name will be True, so we check if q.args.new_todo is True.

      In the new_todo() function, we display a new form containing a textbox (using ui.textbox()) and a set of buttons to add the item or return to to-do list (a ui.buttons() helps us display buttons side-by-side).

      $HOME/wave-apps/todo.py
      from typing import List
      from h2o_wave import Q, listen, ui
      +
      # Display list
      q.page['form'] = ui.form_card(box='1 1 3 10', items=[
      ui.text_l('To Do'),
      *not_done,
      *([ui.separator('Done')] if len(done) else []),
      *done,
      ])

      You should now be able to check/uncheck the items in your todo list.

      Next, let's see how to add new items to the list.

      Step 7: The 'new todo' form

      Next, let's display a form to add new items to our list. For that, we'll add a new button to our existing form, named new_todo, and direct the serve() function to the new_todo() function if the button is clicked. Recall that when buttons are clicked, q.args.button_name will be True, so we check if q.args.new_todo is True.

      In the new_todo() function, we display a new form containing a textbox (using ui.textbox()) and a set of buttons to add the item or return to to-do list (a ui.buttons() helps us display buttons side-by-side).

      $HOME/wave-apps/todo.py
      from typing import List
      from h2o_wave import Q, main, app, ui
      _id = 0
      +
      # A simple class that represents a to-do item.
      class TodoItem:
      def __init__(self, text):
      global _id
      _id += 1
      self.id = f'todo_{_id}'
      self.text = text
      self.done = False
      -
      # A simple class that represents a to-do item.
      class TodoItem:
      def __init__(self, text):
      global _id
      _id += 1
      self.id = f'todo_{_id}'
      self.done = False
      self.text = text
      -
      -
      async def serve(q: Q):
      if q.args.new_todo: # Display an input form.
      new_todo(q)
      else: # Show all items.
      show_todos(q)
      await q.page.save()
      +
      @app('/todo')
      async def serve(q: Q):
      if q.args.new_todo: # Display an input form.
      new_todo(q)
      else: # Show all items.
      show_todos(q)
      await q.page.save()
      def show_todos(q: Q):
      # Get items for this user.
      todos: List[TodoItem] = q.user.todos
      # Create a sample list if we don't have any.
      if todos is None:
      q.user.todos = todos = [TodoItem('Do this'), TodoItem('Do that'), TodoItem('Do something else')]
      @@ -93,14 +77,11 @@
      # Create done/not-done checkboxes.
      done = [ui.checkbox(name=todo.id, label=todo.text, value=True, trigger=True) for todo in todos if todo.done]
      not_done = [ui.checkbox(name=todo.id, label=todo.text, trigger=True) for todo in todos if not todo.done]
      # Display list
      q.page['form'] = ui.form_card(box='1 1 3 10', items=[
      ui.text_l('To Do'),
      ui.button(name='new_todo', label='New To Do...', primary=True),
      *not_done,
      *([ui.separator('Done')] if len(done) else []),
      *done,
      ])
      -
      def new_todo(q: Q):
      # Display an input form
      q.page['form'] = ui.form_card(box='1 1 3 10', items=[
      ui.text_l('New To Do'),
      ui.textbox(name='text', label='What needs to be done?', multiline=True),
      ui.buttons([
      ui.button(name='add_todo', label='Add', primary=True),
      ui.button(name='show_todos', label='Back'),
      ]),
      ])
      -
      -
      listen('/todo', serve)

      Restart your app and reload your browser. You should now be able to bring up the new to-do form.

      Step 8: Add to-do and return

      Finally, we handle the add_todo button-click, redirecting serve() to a new add_todo() function, which simply inserts a the new to-do item into our user-level todo list and calls show_todos() to redraw the to-do list.

      note

      In this example, for clarity, we named the both the buttons and their corresponding functions new_todo and add_todo, but this is not necessary.

      $HOME/wave-apps/todo.py
      from typing import List
      from h2o_wave import Q, listen, ui
      +
      def new_todo(q: Q):
      # Display an input form
      q.page['form'] = ui.form_card(box='1 1 3 10', items=[
      ui.text_l('New To Do'),
      ui.textbox(name='text', label='What needs to be done?', multiline=True),
      ui.buttons([
      ui.button(name='add_todo', label='Add', primary=True),
      ui.button(name='show_todos', label='Back'),
      ]),
      ])

      You should now be able to bring up the new to-do form.

      Step 8: Add to-do and return

      Finally, we handle the add_todo button-click, redirecting serve() to a new add_todo() function, which simply inserts a the new to-do item into our user-level todo list and calls show_todos() to redraw the to-do list.

      note

      In this example, for clarity, we named the both the buttons and their corresponding functions new_todo and add_todo, but this is not necessary.

      $HOME/wave-apps/todo.py
      from typing import List
      from h2o_wave import Q, main, app, ui
      _id = 0
      +
      # A simple class that represents a to-do item.
      class TodoItem:
      def __init__(self, text):
      global _id
      _id += 1
      self.id = f'todo_{_id}'
      self.text = text
      self.done = False
      -
      # A simple class that represents a to-do item.
      class TodoItem:
      def __init__(self, text):
      global _id
      _id += 1
      self.id = f'todo_{_id}'
      self.done = False
      self.text = text
      -
      -
      async def serve(q: Q):
      if q.args.new_todo: # Display an input form.
      new_todo(q)
      elif q.args.add_todo: # Add an item.
      add_todo(q)
      else: # Show all items.
      show_todos(q)
      await q.page.save()
      +
      @app('/todo')
      async def serve(q: Q):
      if q.args.new_todo: # Display an input form.
      new_todo(q)
      elif q.args.add_todo: # Add an item.
      add_todo(q)
      else: # Show all items.
      show_todos(q)
      await q.page.save()
      def show_todos(q: Q):
      # Get items for this user.
      todos: List[TodoItem] = q.user.todos
      # Create a sample list if we don't have any.
      if todos is None:
      q.user.todos = todos = [TodoItem('Do this'), TodoItem('Do that'), TodoItem('Do something else')]
      @@ -111,21 +92,16 @@
      def add_todo(q: Q):
      # Insert a new item
      q.user.todos.insert(0, TodoItem(q.args.text or 'Untitled'))
      # Go back to our list.
      show_todos(q)
      -
      def new_todo(q: Q):
      # Display an input form
      q.page['form'] = ui.form_card(box='1 1 3 10', items=[
      ui.text_l('New To Do'),
      ui.textbox(name='text', label='What needs to be done?', multiline=True),
      ui.buttons([
      ui.button(name='add_todo', label='Add', primary=True),
      ui.button(name='show_todos', label='Back'),
      ]),
      ])
      -
      -
      listen('/todo', serve)

      Restart your app and reload your browser. You should now be able to add new to-do items to your list. Congratulations!

      Step 9: Make it realtime

      To make your app realtime, simply pass mode='multicast' to your listen().

      $HOME/wave-apps/todo.py
      listen('/todo', serve, mode='multicast')

      Restart your app, and try opening http://localhost:55555/todo from multiple browser tabs:

      Groovy!

      Exercise

      A little housekeeping goes a long way: add a "Clear" button on the main page to clear all completed to-dos.

      "And this mess is so big
      -And so deep and so tall,
      -We cannot pick it up.
      -There is no way at all!"

      ― Dr. Seuss, The Cat in the Hat

      Next steps

      Congratulations! You've completed all the tutorials (hopefully). There are three paths you can take from here:

      • Gallery. 150+ examples that cover everything that Wave has to offer.
      • Guide. In-depth look at each of Wave's features.
      • API. Reference-level documentation for the Python API.

      Happy hacking!

      Edit this page
      - - - - - - - - - - +
      def new_todo(q: Q):
      # Display an input form
      q.page['form'] = ui.form_card(box='1 1 3 10', items=[
      ui.text_l('New To Do'),
      ui.textbox(name='text', label='What needs to be done?', multiline=True),
      ui.buttons([
      ui.button(name='add_todo', label='Add', primary=True),
      ui.button(name='show_todos', label='Back'),
      ]),
      ])

      You should now be able to add new to-do items to your list. Congratulations!

      Step 9: Make it realtime

      To make your app realtime, simply pass mode='multicast' to @app().

      $HOME/wave-apps/todo.py
      @app('/todo', mode='multicast')

      Now try opening http://localhost:55555/todo from multiple browser tabs:

      Groovy!

      Exercise

      A little housekeeping goes a long way: add a "Clear" button on the main page to clear all completed to-dos.

      Next steps

      Congratulations! You've completed all the tutorials (hopefully). There are three paths you can take from here:

      • Gallery. 150+ examples that cover everything that Wave has to offer.
      • Guide. In-depth look at each of Wave's features.
      • API. Reference-level documentation for the Python API.

      Happy hacking!

      Edit this page
      + + + + + + + + + + \ No newline at end of file diff --git a/docs/e013439f.143ae2bf.js b/docs/e013439f.9b377459.js similarity index 93% rename from docs/e013439f.143ae2bf.js rename to docs/e013439f.9b377459.js index be8c1eba3d..ea05446621 100644 --- a/docs/e013439f.143ae2bf.js +++ b/docs/e013439f.9b377459.js @@ -1 +1 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[204],{257:function(e,n,t){"use strict";t.r(n),t.d(n,"frontMatter",(function(){return i})),t.d(n,"metadata",(function(){return l})),t.d(n,"rightToc",(function(){return c})),t.d(n,"default",(function(){return u}));var r=t(2),a=t(6),o=(t(0),t(290)),i={title:"Plot / Line / Annotation"},l={unversionedId:"examples/plot-line-annotation",id:"examples/plot-line-annotation",isDocsHomePage:!1,title:"Plot / Line / Annotation",description:"Add annotations to a line plot.",source:"@site/docs/examples/plot-line-annotation.md",slug:"/examples/plot-line-annotation",permalink:"/wave/docs/examples/plot-line-annotation",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/examples/plot-line-annotation.md",version:"current",sidebar:"someSidebar",previous:{title:"Plot / Line / Labels / Occlusion",permalink:"/wave/docs/examples/plot-line-labels-no-overlap"},next:{title:"Plot / Path",permalink:"/wave/docs/examples/plot-path"}},c=[],p={rightToc:c};function u(e){var n=e.components,i=Object(a.a)(e,["components"]);return Object(o.b)("wrapper",Object(r.a)({},p,i,{components:n,mdxType:"MDXLayout"}),Object(o.b)("p",null,"Add annotations to a line plot."),Object(o.b)("div",{className:"cover",style:{backgroundImage:"url("+t(451).default+")"}}),Object(o.b)("pre",null,Object(o.b)("code",Object(r.a)({parentName:"pre"},{className:"language-py"}),"from synth import FakeTimeSeries\nfrom h2o_wave import site, data, ui\n\npage = site['/demo']\n\nn = 50\nf = FakeTimeSeries()\nv = page.add('example', ui.plot_card(\n box='1 1 4 5',\n title='Time-Numeric',\n data=data('date price', n),\n plot=ui.plot([\n ui.mark(type='line', x_scale='time', x='=date', y='=price', y_min=0, y_max=100),\n ui.mark(x=50, y=50, label='point'),\n ui.mark(x='2010-05-15T19:59:21.000000Z', label='vertical line'),\n ui.mark(y=40, label='horizontal line'),\n ui.mark(x='2010-05-24T19:59:21.000000Z', x0='2010-05-20T19:59:21.000000Z', label='vertical region'),\n ui.mark(y=70, y0=60, label='horizontal region'),\n ui.mark(x='2010-05-10T19:59:21.000000Z', x0='2010-05-05T19:59:21.000000Z', y=30, y0=20,\n label='rectangular region')\n ])\n))\nv.data = [(t, x) for t, x, dx in [f.next() for _ in range(n)]]\n\npage.save()\n")))}u.isMDXComponent=!0},290:function(e,n,t){"use strict";t.d(n,"a",(function(){return s})),t.d(n,"b",(function(){return f}));var r=t(0),a=t.n(r);function o(e,n,t){return n in e?Object.defineProperty(e,n,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[n]=t,e}function i(e,n){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);n&&(r=r.filter((function(n){return Object.getOwnPropertyDescriptor(e,n).enumerable}))),t.push.apply(t,r)}return t}function l(e){for(var n=1;n=0||(a[t]=e[t]);return a}(e,n);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(a[t]=e[t])}return a}var p=a.a.createContext({}),u=function(e){var n=a.a.useContext(p),t=n;return e&&(t="function"==typeof e?e(n):l(l({},n),e)),t},s=function(e){var n=u(e.components);return a.a.createElement(p.Provider,{value:n},e.children)},m={inlineCode:"code",wrapper:function(e){var n=e.children;return a.a.createElement(a.a.Fragment,{},n)}},d=a.a.forwardRef((function(e,n){var t=e.components,r=e.mdxType,o=e.originalType,i=e.parentName,p=c(e,["components","mdxType","originalType","parentName"]),s=u(t),d=r,f=s["".concat(i,".").concat(d)]||s[d]||m[d]||o;return t?a.a.createElement(f,l(l({ref:n},p),{},{components:t})):a.a.createElement(f,l({ref:n},p))}));function f(e,n){var t=arguments,r=n&&n.mdxType;if("string"==typeof e||r){var o=t.length,i=new Array(o);i[0]=d;var l={};for(var c in n)hasOwnProperty.call(n,c)&&(l[c]=n[c]);l.originalType=e,l.mdxType="string"==typeof e?e:r,i[1]=l;for(var p=2;p=0||(a[t]=e[t]);return a}(e,n);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(a[t]=e[t])}return a}var p=a.a.createContext({}),u=function(e){var n=a.a.useContext(p),t=n;return e&&(t="function"==typeof e?e(n):l(l({},n),e)),t},s=function(e){var n=u(e.components);return a.a.createElement(p.Provider,{value:n},e.children)},m={inlineCode:"code",wrapper:function(e){var n=e.children;return a.a.createElement(a.a.Fragment,{},n)}},d=a.a.forwardRef((function(e,n){var t=e.components,r=e.mdxType,o=e.originalType,i=e.parentName,p=c(e,["components","mdxType","originalType","parentName"]),s=u(t),d=r,f=s["".concat(i,".").concat(d)]||s[d]||m[d]||o;return t?a.a.createElement(f,l(l({ref:n},p),{},{components:t})):a.a.createElement(f,l({ref:n},p))}));function f(e,n){var t=arguments,r=n&&n.mdxType;if("string"==typeof e||r){var o=t.length,i=new Array(o);i[0]=d;var l={};for(var c in n)hasOwnProperty.call(n,c)&&(l[c]=n[c]);l.originalType=e,l.mdxType="string"==typeof e?e:r,i[1]=l;for(var p=2;p=0||(a[r]=e[r]);return a}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(a[r]=e[r])}return a}var u=a.a.createContext({}),l=function(e){var t=a.a.useContext(u),r=t;return e&&(r="function"==typeof e?e(t):s(s({},t),e)),r},p=function(e){var t=l(e.components);return a.a.createElement(u.Provider,{value:t},e.children)},m={inlineCode:"code",wrapper:function(e){var t=e.children;return a.a.createElement(a.a.Fragment,{},t)}},x=a.a.forwardRef((function(e,t){var r=e.components,n=e.mdxType,i=e.originalType,o=e.parentName,u=c(e,["components","mdxType","originalType","parentName"]),p=l(r),x=n,f=p["".concat(o,".").concat(x)]||p[x]||m[x]||i;return r?a.a.createElement(f,s(s({ref:t},u),{},{components:r})):a.a.createElement(f,s({ref:t},u))}));function f(e,t){var r=arguments,n=t&&t.mdxType;if("string"==typeof e||n){var i=r.length,o=new Array(i);o[0]=x;var s={};for(var c in t)hasOwnProperty.call(t,c)&&(s[c]=t[c]);s.originalType=e,s.mdxType="string"==typeof e?e:n,o[1]=s;for(var u=2;u=0||(a[r]=e[r]);return a}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(a[r]=e[r])}return a}var u=a.a.createContext({}),l=function(e){var t=a.a.useContext(u),r=t;return e&&(r="function"==typeof e?e(t):s(s({},t),e)),r},p=function(e){var t=l(e.components);return a.a.createElement(u.Provider,{value:t},e.children)},m={inlineCode:"code",wrapper:function(e){var t=e.children;return a.a.createElement(a.a.Fragment,{},t)}},x=a.a.forwardRef((function(e,t){var r=e.components,n=e.mdxType,i=e.originalType,o=e.parentName,u=c(e,["components","mdxType","originalType","parentName"]),p=l(r),x=n,f=p["".concat(o,".").concat(x)]||p[x]||m[x]||i;return r?a.a.createElement(f,s(s({ref:t},u),{},{components:r})):a.a.createElement(f,s({ref:t},u))}));function f(e,t){var r=arguments,n=t&&t.mdxType;if("string"==typeof e||n){var i=r.length,o=new Array(i);o[0]=x;var s={};for(var c in t)hasOwnProperty.call(t,c)&&(s[c]=t[c]);s.originalType=e,s.mdxType="string"==typeof e?e:n,o[1]=s;for(var u=2;u\n\n\n

      Hello World!

      \n\n\n'''\n\npage = site['/demo']\n\npage['example'] = ui.form_card(\n box='1 1 2 2',\n items=[\n ui.frame(content=html, height='100px')\n ]\n)\n\npage.save()\n")))}u.isMDXComponent=!0},290:function(e,n,t){"use strict";t.d(n,"a",(function(){return f})),t.d(n,"b",(function(){return A}));var r=t(0),a=t.n(r);function o(e,n,t){return n in e?Object.defineProperty(e,n,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[n]=t,e}function m(e,n){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);n&&(r=r.filter((function(n){return Object.getOwnPropertyDescriptor(e,n).enumerable}))),t.push.apply(t,r)}return t}function c(e){for(var n=1;n=0||(a[t]=e[t]);return a}(e,n);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(a[t]=e[t])}return a}var p=a.a.createContext({}),u=function(e){var n=a.a.useContext(p),t=n;return e&&(t="function"==typeof e?e(n):c(c({},n),e)),t},f=function(e){var n=u(e.components);return a.a.createElement(p.Provider,{value:n},e.children)},i={inlineCode:"code",wrapper:function(e){var n=e.children;return a.a.createElement(a.a.Fragment,{},n)}},d=a.a.forwardRef((function(e,n){var t=e.components,r=e.mdxType,o=e.originalType,m=e.parentName,p=l(e,["components","mdxType","originalType","parentName"]),f=u(t),d=r,A=f["".concat(m,".").concat(d)]||f[d]||i[d]||o;return t?a.a.createElement(A,c(c({ref:n},p),{},{components:t})):a.a.createElement(A,c({ref:n},p))}));function A(e,n){var t=arguments,r=n&&n.mdxType;if("string"==typeof e||r){var o=t.length,m=new Array(o);m[0]=d;var c={};for(var l in n)hasOwnProperty.call(n,l)&&(c[l]=n[l]);c.originalType=e,c.mdxType="string"==typeof e?e:r,m[1]=c;for(var p=2;p\n\n\n

      Hello World!

      \n\n\n'''\n\npage = site['/demo']\n\npage['example'] = ui.form_card(\n box='1 1 2 2',\n items=[\n ui.frame(content=html, height='100px')\n ]\n)\n\npage.save()\n")))}u.isMDXComponent=!0},292:function(e,n,t){"use strict";t.d(n,"a",(function(){return f})),t.d(n,"b",(function(){return A}));var r=t(0),a=t.n(r);function o(e,n,t){return n in e?Object.defineProperty(e,n,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[n]=t,e}function m(e,n){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);n&&(r=r.filter((function(n){return Object.getOwnPropertyDescriptor(e,n).enumerable}))),t.push.apply(t,r)}return t}function c(e){for(var n=1;n=0||(a[t]=e[t]);return a}(e,n);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(a[t]=e[t])}return a}var p=a.a.createContext({}),u=function(e){var n=a.a.useContext(p),t=n;return e&&(t="function"==typeof e?e(n):c(c({},n),e)),t},f=function(e){var n=u(e.components);return a.a.createElement(p.Provider,{value:n},e.children)},i={inlineCode:"code",wrapper:function(e){var n=e.children;return a.a.createElement(a.a.Fragment,{},n)}},d=a.a.forwardRef((function(e,n){var t=e.components,r=e.mdxType,o=e.originalType,m=e.parentName,p=l(e,["components","mdxType","originalType","parentName"]),f=u(t),d=r,A=f["".concat(m,".").concat(d)]||f[d]||i[d]||o;return t?a.a.createElement(A,c(c({ref:n},p),{},{components:t})):a.a.createElement(A,c({ref:n},p))}));function A(e,n){var t=arguments,r=n&&n.mdxType;if("string"==typeof e||r){var o=t.length,m=new Array(o);m[0]=d;var c={};for(var l in n)hasOwnProperty.call(n,l)&&(c[l]=n[l]);c.originalType=e,c.mdxType="string"==typeof e?e:r,m[1]=c;for(var p=2;p=0||(a[r]=e[r]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(a[r]=e[r])}return a}var l=a.a.createContext({}),p=function(e){var t=a.a.useContext(l),r=t;return e&&(r="function"==typeof e?e(t):c(c({},t),e)),r},s=function(e){var t=p(e.components);return a.a.createElement(l.Provider,{value:t},e.children)},f={inlineCode:"code",wrapper:function(e){var t=e.children;return a.a.createElement(a.a.Fragment,{},t)}},d=a.a.forwardRef((function(e,t){var r=e.components,n=e.mdxType,o=e.originalType,i=e.parentName,l=u(e,["components","mdxType","originalType","parentName"]),s=p(r),d=n,b=s["".concat(i,".").concat(d)]||s[d]||f[d]||o;return r?a.a.createElement(b,c(c({ref:t},l),{},{components:r})):a.a.createElement(b,c({ref:t},l))}));function b(e,t){var r=arguments,n=t&&t.mdxType;if("string"==typeof e||n){var o=r.length,i=new Array(o);i[0]=d;var c={};for(var u in t)hasOwnProperty.call(t,u)&&(c[u]=t[u]);c.originalType=e,c.mdxType="string"==typeof e?e:n,i[1]=c;for(var l=2;l=0||(a[n]=e[n]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(a[n]=e[n])}return a}var s=a.a.createContext({}),l=function(e){var t=a.a.useContext(s),n=t;return e&&(n="function"==typeof e?e(t):c(c({},t),e)),n},u=function(e){var t=l(e.components);return a.a.createElement(s.Provider,{value:t},e.children)},f={inlineCode:"code",wrapper:function(e){var t=e.children;return a.a.createElement(a.a.Fragment,{},t)}},m=a.a.forwardRef((function(e,t){var n=e.components,r=e.mdxType,o=e.originalType,i=e.parentName,s=p(e,["components","mdxType","originalType","parentName"]),u=l(n),m=r,d=u["".concat(i,".").concat(m)]||u[m]||f[m]||o;return n?a.a.createElement(d,c(c({ref:t},s),{},{components:n})):a.a.createElement(d,c({ref:t},s))}));function d(e,t){var n=arguments,r=t&&t.mdxType;if("string"==typeof e||r){var o=n.length,i=new Array(o);i[0]=m;var c={};for(var p in t)hasOwnProperty.call(t,p)&&(c[p]=t[p]);c.originalType=e,c.mdxType="string"==typeof e?e:r,i[1]=c;for(var s=2;s=0||(a[n]=e[n]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(a[n]=e[n])}return a}var s=a.a.createContext({}),l=function(e){var t=a.a.useContext(s),n=t;return e&&(n="function"==typeof e?e(t):c(c({},t),e)),n},u=function(e){var t=l(e.components);return a.a.createElement(s.Provider,{value:t},e.children)},f={inlineCode:"code",wrapper:function(e){var t=e.children;return a.a.createElement(a.a.Fragment,{},t)}},m=a.a.forwardRef((function(e,t){var n=e.components,r=e.mdxType,o=e.originalType,i=e.parentName,s=p(e,["components","mdxType","originalType","parentName"]),u=l(n),m=r,d=u["".concat(i,".").concat(m)]||u[m]||f[m]||o;return n?a.a.createElement(d,c(c({ref:t},s),{},{components:n})):a.a.createElement(d,c({ref:t},s))}));function d(e,t){var n=arguments,r=t&&t.mdxType;if("string"==typeof e||r){var o=n.length,i=new Array(o);i[0]=m;var c={};for(var p in t)hasOwnProperty.call(t,p)&&(c[p]=t[p]);c.originalType=e,c.mdxType="string"==typeof e?e:r,i[1]=c;for(var s=2;s=0||(a[n]=e[n]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(a[n]=e[n])}return a}var s=a.a.createContext({}),c=function(e){var t=a.a.useContext(s),n=t;return e&&(n="function"==typeof e?e(t):l(l({},t),e)),n},m=function(e){var t=c(e.components);return a.a.createElement(s.Provider,{value:t},e.children)},u={inlineCode:"code",wrapper:function(e){var t=e.children;return a.a.createElement(a.a.Fragment,{},t)}},d=a.a.forwardRef((function(e,t){var n=e.components,r=e.mdxType,o=e.originalType,i=e.parentName,s=p(e,["components","mdxType","originalType","parentName"]),m=c(n),d=r,f=m["".concat(i,".").concat(d)]||m[d]||u[d]||o;return n?a.a.createElement(f,l(l({ref:t},s),{},{components:n})):a.a.createElement(f,l({ref:t},s))}));function f(e,t){var n=arguments,r=t&&t.mdxType;if("string"==typeof e||r){var o=n.length,i=new Array(o);i[0]=d;var l={};for(var p in t)hasOwnProperty.call(t,p)&&(l[p]=t[p]);l.originalType=e,l.mdxType="string"==typeof e?e:r,i[1]=l;for(var s=2;s=0||(a[n]=e[n]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(a[n]=e[n])}return a}var c=a.a.createContext({}),s=function(e){var t=a.a.useContext(c),n=t;return e&&(n="function"==typeof e?e(t):l(l({},t),e)),n},m=function(e){var t=s(e.components);return a.a.createElement(c.Provider,{value:t},e.children)},u={inlineCode:"code",wrapper:function(e){var t=e.children;return a.a.createElement(a.a.Fragment,{},t)}},d=a.a.forwardRef((function(e,t){var n=e.components,r=e.mdxType,o=e.originalType,i=e.parentName,c=p(e,["components","mdxType","originalType","parentName"]),m=s(n),d=r,f=m["".concat(i,".").concat(d)]||m[d]||u[d]||o;return n?a.a.createElement(f,l(l({ref:t},c),{},{components:n})):a.a.createElement(f,l({ref:t},c))}));function f(e,t){var n=arguments,r=t&&t.mdxType;if("string"==typeof e||r){var o=n.length,i=new Array(o);i[0]=d;var l={};for(var p in t)hasOwnProperty.call(t,p)&&(l[p]=t[p]);l.originalType=e,l.mdxType="string"==typeof e?e:r,i[1]=l;for(var c=2;c=0||(r[a]=e[a]);return r}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,a)&&(r[a]=e[a])}return r}var p=r.a.createContext({}),l=function(e){var t=r.a.useContext(p),a=t;return e&&(a="function"==typeof e?e(t):s(s({},t),e)),a},u=function(e){var t=l(e.components);return r.a.createElement(p.Provider,{value:t},e.children)},d={inlineCode:"code",wrapper:function(e){var t=e.children;return r.a.createElement(r.a.Fragment,{},t)}},m=r.a.forwardRef((function(e,t){var a=e.components,n=e.mdxType,i=e.originalType,o=e.parentName,p=c(e,["components","mdxType","originalType","parentName"]),u=l(a),m=n,b=u["".concat(o,".").concat(m)]||u[m]||d[m]||i;return a?r.a.createElement(b,s(s({ref:t},p),{},{components:a})):r.a.createElement(b,s({ref:t},p))}));function b(e,t){var a=arguments,n=t&&t.mdxType;if("string"==typeof e||n){var i=a.length,o=new Array(i);o[0]=m;var s={};for(var c in t)hasOwnProperty.call(t,c)&&(s[c]=t[c]);s.originalType=e,s.mdxType="string"==typeof e?e:n,o[1]=s;for(var p=2;p=0||(r[a]=e[a]);return r}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,a)&&(r[a]=e[a])}return r}var p=r.a.createContext({}),l=function(e){var t=r.a.useContext(p),a=t;return e&&(a="function"==typeof e?e(t):s(s({},t),e)),a},u=function(e){var t=l(e.components);return r.a.createElement(p.Provider,{value:t},e.children)},d={inlineCode:"code",wrapper:function(e){var t=e.children;return r.a.createElement(r.a.Fragment,{},t)}},m=r.a.forwardRef((function(e,t){var a=e.components,n=e.mdxType,i=e.originalType,o=e.parentName,p=c(e,["components","mdxType","originalType","parentName"]),u=l(a),m=n,b=u["".concat(o,".").concat(m)]||u[m]||d[m]||i;return a?r.a.createElement(b,s(s({ref:t},p),{},{components:a})):r.a.createElement(b,s({ref:t},p))}));function b(e,t){var a=arguments,n=t&&t.mdxType;if("string"==typeof e||n){var i=a.length,o=new Array(i);o[0]=m;var s={};for(var c in t)hasOwnProperty.call(t,c)&&(s[c]=t[c]);s.originalType=e,s.mdxType="string"==typeof e?e:n,o[1]=s;for(var p=2;p=0||(n[t]=e[t]);return n}(e,a);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);for(l=0;l=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(n[t]=e[t])}return n}var b=n.a.createContext({}),c=function(e){var a=n.a.useContext(b),t=a;return e&&(t="function"==typeof e?e(a):o(o({},a),e)),t},s=function(e){var a=c(e.components);return n.a.createElement(b.Provider,{value:a},e.children)},m={inlineCode:"code",wrapper:function(e){var a=e.children;return n.a.createElement(n.a.Fragment,{},a)}},u=n.a.forwardRef((function(e,a){var t=e.components,l=e.mdxType,r=e.originalType,i=e.parentName,b=p(e,["components","mdxType","originalType","parentName"]),s=c(t),u=l,O=s["".concat(i,".").concat(u)]||s[u]||m[u]||r;return t?n.a.createElement(O,o(o({ref:a},b),{},{components:t})):n.a.createElement(O,o({ref:a},b))}));function O(e,a){var t=arguments,l=a&&a.mdxType;if("string"==typeof e||l){var r=t.length,i=new Array(r);i[0]=u;var o={};for(var p in a)hasOwnProperty.call(a,p)&&(o[p]=a[p]);o.originalType=e,o.mdxType="string"==typeof e?e:l,i[1]=o;for(var b=2;b=0||(n[t]=e[t]);return n}(e,a);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);for(l=0;l=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(n[t]=e[t])}return n}var b=n.a.createContext({}),c=function(e){var a=n.a.useContext(b),t=a;return e&&(t="function"==typeof e?e(a):o(o({},a),e)),t},s=function(e){var a=c(e.components);return n.a.createElement(b.Provider,{value:a},e.children)},m={inlineCode:"code",wrapper:function(e){var a=e.children;return n.a.createElement(n.a.Fragment,{},a)}},u=n.a.forwardRef((function(e,a){var t=e.components,l=e.mdxType,r=e.originalType,i=e.parentName,b=p(e,["components","mdxType","originalType","parentName"]),s=c(t),u=l,O=s["".concat(i,".").concat(u)]||s[u]||m[u]||r;return t?n.a.createElement(O,o(o({ref:a},b),{},{components:t})):n.a.createElement(O,o({ref:a},b))}));function O(e,a){var t=arguments,l=a&&a.mdxType;if("string"==typeof e||l){var r=t.length,i=new Array(r);i[0]=u;var o={};for(var p in a)hasOwnProperty.call(a,p)&&(o[p]=a[p]);o.originalType=e,o.mdxType="string"==typeof e?e:l,i[1]=o;for(var b=2;b=0||(a[n]=e[n]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(a[n]=e[n])}return a}var p=a.a.createContext({}),u=function(e){var t=a.a.useContext(p),n=t;return e&&(n="function"==typeof e?e(t):l(l({},t),e)),n},s=function(e){var t=u(e.components);return a.a.createElement(p.Provider,{value:t},e.children)},d={inlineCode:"code",wrapper:function(e){var t=e.children;return a.a.createElement(a.a.Fragment,{},t)}},f=a.a.forwardRef((function(e,t){var n=e.components,r=e.mdxType,o=e.originalType,i=e.parentName,p=c(e,["components","mdxType","originalType","parentName"]),s=u(n),f=r,m=s["".concat(i,".").concat(f)]||s[f]||d[f]||o;return n?a.a.createElement(m,l(l({ref:t},p),{},{components:n})):a.a.createElement(m,l({ref:t},p))}));function m(e,t){var n=arguments,r=t&&t.mdxType;if("string"==typeof e||r){var o=n.length,i=new Array(o);i[0]=f;var l={};for(var c in t)hasOwnProperty.call(t,c)&&(l[c]=t[c]);l.originalType=e,l.mdxType="string"==typeof e?e:r,i[1]=l;for(var p=2;p=0||(a[n]=e[n]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(a[n]=e[n])}return a}var p=a.a.createContext({}),u=function(e){var t=a.a.useContext(p),n=t;return e&&(n="function"==typeof e?e(t):l(l({},t),e)),n},s=function(e){var t=u(e.components);return a.a.createElement(p.Provider,{value:t},e.children)},d={inlineCode:"code",wrapper:function(e){var t=e.children;return a.a.createElement(a.a.Fragment,{},t)}},f=a.a.forwardRef((function(e,t){var n=e.components,r=e.mdxType,o=e.originalType,i=e.parentName,p=c(e,["components","mdxType","originalType","parentName"]),s=u(n),f=r,m=s["".concat(i,".").concat(f)]||s[f]||d[f]||o;return n?a.a.createElement(m,l(l({ref:t},p),{},{components:n})):a.a.createElement(m,l({ref:t},p))}));function m(e,t){var n=arguments,r=t&&t.mdxType;if("string"==typeof e||r){var o=n.length,i=new Array(o);i[0]=f;var l={};for(var c in t)hasOwnProperty.call(t,c)&&(l[c]=t[c]);l.originalType=e,l.mdxType="string"==typeof e?e:r,i[1]=l;for(var p=2;p=0||(r[t]=A[t]);return r}(A,e);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(A);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(A,t)&&(r[t]=A[t])}return r}var c=r.a.createContext({}),u=function(A){var e=r.a.useContext(c),t=e;return A&&(t="function"==typeof A?A(e):f(f({},e),A)),t},g=function(A){var e=u(A.components);return r.a.createElement(c.Provider,{value:e},A.children)},v={inlineCode:"code",wrapper:function(A){var e=A.children;return r.a.createElement(r.a.Fragment,{},e)}},w=r.a.forwardRef((function(A,e){var t=A.components,n=A.mdxType,o=A.originalType,a=A.parentName,c=i(A,["components","mdxType","originalType","parentName"]),g=u(t),w=n,b=g["".concat(a,".").concat(w)]||g[w]||v[w]||o;return t?r.a.createElement(b,f(f({ref:e},c),{},{components:t})):r.a.createElement(b,f({ref:e},c))}));function b(A,e){var t=arguments,n=e&&e.mdxType;if("string"==typeof A||n){var o=t.length,a=new Array(o);a[0]=w;var f={};for(var i in e)hasOwnProperty.call(e,i)&&(f[i]=e[i]);f.originalType=A,f.mdxType="string"==typeof A?A:n,a[1]=f;for(var c=2;c=0||(r[t]=A[t]);return r}(A,e);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(A);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(A,t)&&(r[t]=A[t])}return r}var c=r.a.createContext({}),u=function(A){var e=r.a.useContext(c),t=e;return A&&(t="function"==typeof A?A(e):f(f({},e),A)),t},g=function(A){var e=u(A.components);return r.a.createElement(c.Provider,{value:e},A.children)},v={inlineCode:"code",wrapper:function(A){var e=A.children;return r.a.createElement(r.a.Fragment,{},e)}},w=r.a.forwardRef((function(A,e){var t=A.components,n=A.mdxType,o=A.originalType,a=A.parentName,c=i(A,["components","mdxType","originalType","parentName"]),g=u(t),w=n,b=g["".concat(a,".").concat(w)]||g[w]||v[w]||o;return t?r.a.createElement(b,f(f({ref:e},c),{},{components:t})):r.a.createElement(b,f({ref:e},c))}));function b(A,e){var t=arguments,n=e&&e.mdxType;if("string"==typeof A||n){var o=t.length,a=new Array(o);a[0]=w;var f={};for(var i in e)hasOwnProperty.call(e,i)&&(f[i]=e[i]);f.originalType=A,f.mdxType="string"==typeof A?A:n,a[1]=f;for(var c=2;c=0||(a[t]=e[t]);return a}(e,n);if(Object.getOwnPropertySymbols){var c=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(a[t]=e[t])}return a}var s=a.a.createContext({}),p=function(e){var n=a.a.useContext(s),t=n;return e&&(t="function"==typeof e?e(n):o(o({},n),e)),t},u=function(e){var n=p(e.components);return a.a.createElement(s.Provider,{value:n},e.children)},b={inlineCode:"code",wrapper:function(e){var n=e.children;return a.a.createElement(a.a.Fragment,{},n)}},d=a.a.forwardRef((function(e,n){var t=e.components,r=e.mdxType,c=e.originalType,i=e.parentName,s=l(e,["components","mdxType","originalType","parentName"]),u=p(t),d=r,m=u["".concat(i,".").concat(d)]||u[d]||b[d]||c;return t?a.a.createElement(m,o(o({ref:n},s),{},{components:t})):a.a.createElement(m,o({ref:n},s))}));function m(e,n){var t=arguments,r=n&&n.mdxType;if("string"==typeof e||r){var c=t.length,i=new Array(c);i[0]=d;var o={};for(var l in n)hasOwnProperty.call(n,l)&&(o[l]=n[l]);o.originalType=e,o.mdxType="string"==typeof e?e:r,i[1]=o;for(var s=2;s=0||(a[t]=e[t]);return a}(e,n);if(Object.getOwnPropertySymbols){var c=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(a[t]=e[t])}return a}var s=a.a.createContext({}),p=function(e){var n=a.a.useContext(s),t=n;return e&&(t="function"==typeof e?e(n):o(o({},n),e)),t},u=function(e){var n=p(e.components);return a.a.createElement(s.Provider,{value:n},e.children)},b={inlineCode:"code",wrapper:function(e){var n=e.children;return a.a.createElement(a.a.Fragment,{},n)}},d=a.a.forwardRef((function(e,n){var t=e.components,r=e.mdxType,c=e.originalType,i=e.parentName,s=l(e,["components","mdxType","originalType","parentName"]),u=p(t),d=r,m=u["".concat(i,".").concat(d)]||u[d]||b[d]||c;return t?a.a.createElement(m,o(o({ref:n},s),{},{components:t})):a.a.createElement(m,o({ref:n},s))}));function m(e,n){var t=arguments,r=n&&n.mdxType;if("string"==typeof e||r){var c=t.length,i=new Array(c);i[0]=d;var o={};for(var l in n)hasOwnProperty.call(n,l)&&(o[l]=n[l]);o.originalType=e,o.mdxType="string"==typeof e?e:r,i[1]=o;for(var s=2;s=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var c=o.a.createContext({}),u=function(e){var t=o.a.useContext(c),n=t;return e&&(n="function"==typeof e?e(t):p(p({},t),e)),n},s=function(e){var t=u(e.components);return o.a.createElement(c.Provider,{value:t},e.children)},m={inlineCode:"code",wrapper:function(e){var t=e.children;return o.a.createElement(o.a.Fragment,{},t)}},f=o.a.forwardRef((function(e,t){var n=e.components,r=e.mdxType,a=e.originalType,i=e.parentName,c=l(e,["components","mdxType","originalType","parentName"]),s=u(n),f=r,d=s["".concat(i,".").concat(f)]||s[f]||m[f]||a;return n?o.a.createElement(d,p(p({ref:t},c),{},{components:n})):o.a.createElement(d,p({ref:t},c))}));function d(e,t){var n=arguments,r=t&&t.mdxType;if("string"==typeof e||r){var a=n.length,i=new Array(a);i[0]=f;var p={};for(var l in t)hasOwnProperty.call(t,l)&&(p[l]=t[l]);p.originalType=e,p.mdxType="string"==typeof e?e:r,i[1]=p;for(var c=2;c=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var c=o.a.createContext({}),u=function(e){var t=o.a.useContext(c),n=t;return e&&(n="function"==typeof e?e(t):p(p({},t),e)),n},s=function(e){var t=u(e.components);return o.a.createElement(c.Provider,{value:t},e.children)},m={inlineCode:"code",wrapper:function(e){var t=e.children;return o.a.createElement(o.a.Fragment,{},t)}},f=o.a.forwardRef((function(e,t){var n=e.components,r=e.mdxType,a=e.originalType,i=e.parentName,c=l(e,["components","mdxType","originalType","parentName"]),s=u(n),f=r,d=s["".concat(i,".").concat(f)]||s[f]||m[f]||a;return n?o.a.createElement(d,p(p({ref:t},c),{},{components:n})):o.a.createElement(d,p({ref:t},c))}));function d(e,t){var n=arguments,r=t&&t.mdxType;if("string"==typeof e||r){var a=n.length,i=new Array(a);i[0]=f;var p={};for(var l in t)hasOwnProperty.call(t,l)&&(p[l]=t[l]);p.originalType=e,p.mdxType="string"==typeof e?e:r,i[1]=p;for(var c=2;c=0||(a[n]=e[n]);return a}(e,r);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(t=0;t=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(a[n]=e[n])}return a}var c=a.a.createContext({}),u=function(e){var r=a.a.useContext(c),n=r;return e&&(n="function"==typeof e?e(r):o(o({},r),e)),n},p=function(e){var r=u(e.components);return a.a.createElement(c.Provider,{value:r},e.children)},d={inlineCode:"code",wrapper:function(e){var r=e.children;return a.a.createElement(a.a.Fragment,{},r)}},m=a.a.forwardRef((function(e,r){var n=e.components,t=e.mdxType,i=e.originalType,l=e.parentName,c=s(e,["components","mdxType","originalType","parentName"]),p=u(n),m=t,f=p["".concat(l,".").concat(m)]||p[m]||d[m]||i;return n?a.a.createElement(f,o(o({ref:r},c),{},{components:n})):a.a.createElement(f,o({ref:r},c))}));function f(e,r){var n=arguments,t=r&&r.mdxType;if("string"==typeof e||t){var i=n.length,l=new Array(i);l[0]=m;var o={};for(var s in r)hasOwnProperty.call(r,s)&&(o[s]=r[s]);o.originalType=e,o.mdxType="string"==typeof e?e:t,l[1]=o;for(var c=2;c=0||(a[n]=e[n]);return a}(e,r);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(t=0;t=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(a[n]=e[n])}return a}var c=a.a.createContext({}),u=function(e){var r=a.a.useContext(c),n=r;return e&&(n="function"==typeof e?e(r):l(l({},r),e)),n},p=function(e){var r=u(e.components);return a.a.createElement(c.Provider,{value:r},e.children)},d={inlineCode:"code",wrapper:function(e){var r=e.children;return a.a.createElement(a.a.Fragment,{},r)}},m=a.a.forwardRef((function(e,r){var n=e.components,t=e.mdxType,i=e.originalType,o=e.parentName,c=s(e,["components","mdxType","originalType","parentName"]),p=u(n),m=t,f=p["".concat(o,".").concat(m)]||p[m]||d[m]||i;return n?a.a.createElement(f,l(l({ref:r},c),{},{components:n})):a.a.createElement(f,l({ref:r},c))}));function f(e,r){var n=arguments,t=r&&r.mdxType;if("string"==typeof e||t){var i=n.length,o=new Array(i);o[0]=m;var l={};for(var s in r)hasOwnProperty.call(r,s)&&(l[s]=r[s]);l.originalType=e,l.mdxType="string"==typeof e?e:t,o[1]=l;for(var c=2;c=0||(i[n]=e[n]);return i}(e,t);if(Object.getOwnPropertySymbols){var c=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(i[n]=e[n])}return i}var u=i.a.createContext({}),f=function(e){var t=i.a.useContext(u),n=t;return e&&(n="function"==typeof e?e(t):o(o({},t),e)),n},p=function(e){var t=f(e.components);return i.a.createElement(u.Provider,{value:t},e.children)},d={inlineCode:"code",wrapper:function(e){var t=e.children;return i.a.createElement(i.a.Fragment,{},t)}},m=i.a.forwardRef((function(e,t){var n=e.components,r=e.mdxType,c=e.originalType,a=e.parentName,u=l(e,["components","mdxType","originalType","parentName"]),p=f(n),m=r,b=p["".concat(a,".").concat(m)]||p[m]||d[m]||c;return n?i.a.createElement(b,o(o({ref:t},u),{},{components:n})):i.a.createElement(b,o({ref:t},u))}));function b(e,t){var n=arguments,r=t&&t.mdxType;if("string"==typeof e||r){var c=n.length,a=new Array(c);a[0]=m;var o={};for(var l in t)hasOwnProperty.call(t,l)&&(o[l]=t[l]);o.originalType=e,o.mdxType="string"==typeof e?e:r,a[1]=o;for(var u=2;u=0||(i[n]=e[n]);return i}(e,t);if(Object.getOwnPropertySymbols){var c=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(i[n]=e[n])}return i}var u=i.a.createContext({}),f=function(e){var t=i.a.useContext(u),n=t;return e&&(n="function"==typeof e?e(t):o(o({},t),e)),n},p=function(e){var t=f(e.components);return i.a.createElement(u.Provider,{value:t},e.children)},d={inlineCode:"code",wrapper:function(e){var t=e.children;return i.a.createElement(i.a.Fragment,{},t)}},m=i.a.forwardRef((function(e,t){var n=e.components,r=e.mdxType,c=e.originalType,a=e.parentName,u=l(e,["components","mdxType","originalType","parentName"]),p=f(n),m=r,b=p["".concat(a,".").concat(m)]||p[m]||d[m]||c;return n?i.a.createElement(b,o(o({ref:t},u),{},{components:n})):i.a.createElement(b,o({ref:t},u))}));function b(e,t){var n=arguments,r=t&&t.mdxType;if("string"==typeof e||r){var c=n.length,a=new Array(c);a[0]=m;var o={};for(var l in t)hasOwnProperty.call(t,l)&&(o[l]=t[l]);o.originalType=e,o.mdxType="string"==typeof e?e:r,a[1]=o;for(var u=2;u=0||(o[t]=e[t]);return o}(e,n);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(o[t]=e[t])}return o}var u=o.a.createContext({}),l=function(e){var n=o.a.useContext(u),t=n;return e&&(t="function"==typeof e?e(n):c(c({},n),e)),t},p=function(e){var n=l(e.components);return o.a.createElement(u.Provider,{value:n},e.children)},b={inlineCode:"code",wrapper:function(e){var n=e.children;return o.a.createElement(o.a.Fragment,{},n)}},m=o.a.forwardRef((function(e,n){var t=e.components,r=e.mdxType,a=e.originalType,i=e.parentName,u=s(e,["components","mdxType","originalType","parentName"]),p=l(t),m=r,f=p["".concat(i,".").concat(m)]||p[m]||b[m]||a;return t?o.a.createElement(f,c(c({ref:n},u),{},{components:t})):o.a.createElement(f,c({ref:n},u))}));function f(e,n){var t=arguments,r=n&&n.mdxType;if("string"==typeof e||r){var a=t.length,i=new Array(a);i[0]=m;var c={};for(var s in n)hasOwnProperty.call(n,s)&&(c[s]=n[s]);c.originalType=e,c.mdxType="string"==typeof e?e:r,i[1]=c;for(var u=2;u=0||(a[t]=e[t]);return a}(e,n);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(a[t]=e[t])}return a}var u=a.a.createContext({}),l=function(e){var n=a.a.useContext(u),t=n;return e&&(t="function"==typeof e?e(n):c(c({},n),e)),t},p=function(e){var n=l(e.components);return a.a.createElement(u.Provider,{value:n},e.children)},b={inlineCode:"code",wrapper:function(e){var n=e.children;return a.a.createElement(a.a.Fragment,{},n)}},m=a.a.forwardRef((function(e,n){var t=e.components,r=e.mdxType,o=e.originalType,i=e.parentName,u=s(e,["components","mdxType","originalType","parentName"]),p=l(t),m=r,f=p["".concat(i,".").concat(m)]||p[m]||b[m]||o;return t?a.a.createElement(f,c(c({ref:n},u),{},{components:t})):a.a.createElement(f,c({ref:n},u))}));function f(e,n){var t=arguments,r=n&&n.mdxType;if("string"==typeof e||r){var o=t.length,i=new Array(o);i[0]=m;var c={};for(var s in n)hasOwnProperty.call(n,s)&&(c[s]=n[s]);c.originalType=e,c.mdxType="string"==typeof e?e:r,i[1]=c;for(var u=2;u',id:"breadcrumb",children:[]},{value:'breadcrumbs_card ',id:"breadcrumbs_card",children:[]},{value:'button ',id:"button",children:[]},{value:'buttons ',id:"buttons",children:[]},{value:'checkbox ',id:"checkbox",children:[]},{value:'checklist ',id:"checklist",children:[]},{value:'choice ',id:"choice",children:[]},{value:'choice_group ',id:"choice_group",children:[]},{value:'color_picker ',id:"color_picker",children:[]},{value:'combobox ',id:"combobox",children:[]},{value:'command ',id:"command",children:[]},{value:'component ',id:"component",children:[]},{value:'date_picker ',id:"date_picker",children:[]},{value:'dropdown ',id:"dropdown",children:[]},{value:'expander ',id:"expander",children:[]},{value:'file_upload ',id:"file_upload",children:[]},{value:'flex_card ',id:"flex_card",children:[]},{value:'form_card ',id:"form_card",children:[]},{value:'frame ',id:"frame",children:[]},{value:'frame_card ',id:"frame_card",children:[]},{value:'graphics_card ',id:"graphics_card",children:[]},{value:'grid_card ',id:"grid_card",children:[]},{value:'header_card ',id:"header_card",children:[]},{value:'icon_table_cell_type ',id:"icon_table_cell_type",children:[]},{value:'image_card ',id:"image_card",children:[]},{value:'label ',id:"label",children:[]},{value:'large_bar_stat_card ',id:"large_bar_stat_card",children:[]},{value:'large_stat_card ',id:"large_stat_card",children:[]},{value:'link ',id:"link",children:[]},{value:'list_card ',id:"list_card",children:[]},{value:'list_item1_card ',id:"list_item1_card",children:[]},{value:'mark ',id:"mark",children:[]},{value:'markdown_card ',id:"markdown_card",children:[]},{value:'markup ',id:"markup",children:[]},{value:'markup_card ',id:"markup_card",children:[]},{value:'message_bar ',id:"message_bar",children:[]},{value:'meta_card ',id:"meta_card",children:[]},{value:'nav_card ',id:"nav_card",children:[]},{value:'nav_group ',id:"nav_group",children:[]},{value:'nav_item ',id:"nav_item",children:[]},{value:'picker ',id:"picker",children:[]},{value:'pixel_art_card ',id:"pixel_art_card",children:[]},{value:'plot ',id:"plot",children:[]},{value:'plot_card ',id:"plot_card",children:[]},{value:'progress ',id:"progress",children:[]},{value:'progress_table_cell_type ',id:"progress_table_cell_type",children:[]},{value:'range_slider ',id:"range_slider",children:[]},{value:'repeat_card ',id:"repeat_card",children:[]},{value:'separator ',id:"separator",children:[]},{value:'slider ',id:"slider",children:[]},{value:'small_series_stat_card ',id:"small_series_stat_card",children:[]},{value:'small_stat_card ',id:"small_stat_card",children:[]},{value:'spinbox ',id:"spinbox",children:[]},{value:'step ',id:"step",children:[]},{value:'stepper ',id:"stepper",children:[]},{value:'tab ',id:"tab",children:[]},{value:'tab_card ',id:"tab_card",children:[]},{value:'table ',id:"table",children:[]},{value:'table_cell_type ',id:"table_cell_type",children:[]},{value:'table_column ',id:"table_column",children:[]},{value:'table_row ',id:"table_row",children:[]},{value:'tabs ',id:"tabs",children:[]},{value:'tall_gauge_stat_card ',id:"tall_gauge_stat_card",children:[]},{value:'tall_series_stat_card ',id:"tall_series_stat_card",children:[]},{value:'template ',id:"template",children:[]},{value:'template_card ',id:"template_card",children:[]},{value:'text ',id:"text",children:[]},{value:'text_l ',id:"text_l",children:[]},{value:'text_m ',id:"text_m",children:[]},{value:'text_s ',id:"text_s",children:[]},{value:'text_xl ',id:"text_xl",children:[]},{value:'text_xs ',id:"text_xs",children:[]},{value:'textbox ',id:"textbox",children:[]},{value:'toggle ',id:"toggle",children:[]},{value:'toolbar_card ',id:"toolbar_card",children:[]},{value:'vega_card ',id:"vega_card",children:[]},{value:'vega_visualization ',id:"vega_visualization",children:[]},{value:'visualization ',id:"visualization",children:[]},{value:'wide_bar_stat_card ',id:"wide_bar_stat_card",children:[]},{value:'wide_gauge_stat_card ',id:"wide_gauge_stat_card",children:[]},{value:'wide_series_stat_card ',id:"wide_series_stat_card",children:[]}]}],i={rightToc:d};function s(e){var t=e.components,l=Object(b.a)(e,["components"]);return Object(a.b)("wrapper",Object(n.a)({},i,l,{components:t,mdxType:"MDXLayout"}),Object(a.b)("h2",{id:"functions"},"Functions"),Object(a.b)("div",{className:"api"},Object(a.b)("h3",{id:"breadcrumb"},"breadcrumb ",Object(a.b)("a",{name:"h2o_wave.ui.breadcrumb"})),Object(a.b)("div",{className:"api__body"},Object(a.b)("div",{className:"api__signature"},"def ",Object(a.b)("span",{class:"ident"},"breadcrumb"),"(name:\xa0str, label:\xa0str) \u2011>\xa0",Object(a.b)("a",{title:"h2o_wave.types.Breadcrumb",href:"types#h2o_wave.types.Breadcrumb"},"Breadcrumb")),Object(a.b)("div",{className:"api__description"},Object(a.b)("p",null,"Create a breadcrumb for a ",Object(a.b)("code",null,Object(a.b)("a",{title:"h2o_wave.types.BreadcrumbsCard",href:"types#h2o_wave.types.BreadcrumbsCard"},"BreadcrumbsCard")),"."),Object(a.b)("h5",{id:"args"},"Args"),Object(a.b)("dl",null,Object(a.b)("dt",null,Object(a.b)("code",null,"name")),Object(a.b)("dd",null,"The name of this item. Prefix the name with a '#' to trigger hash-change navigation."),Object(a.b)("dt",null,Object(a.b)("code",null,"label")),Object(a.b)("dd",null,"The label to display.")),Object(a.b)("h5",{id:"returns"},"Returns"),Object(a.b)("p",null,"A ",Object(a.b)("code",null,Object(a.b)("a",{title:"h2o_wave.types.Breadcrumb",href:"types#h2o_wave.types.Breadcrumb"},"Breadcrumb"))," instance.")))),Object(a.b)("div",{className:"api"},Object(a.b)("h3",{id:"breadcrumbs_card"},"breadcrumbs_card ",Object(a.b)("a",{name:"h2o_wave.ui.breadcrumbs_card"})),Object(a.b)("div",{className:"api__body"},Object(a.b)("div",{className:"api__signature"},"def ",Object(a.b)("span",{class:"ident"},"breadcrumbs_card"),"(box:\xa0str, items:\xa0List[",Object(a.b)("a",{title:"h2o_wave.types.Breadcrumb",href:"types#h2o_wave.types.Breadcrumb"},"Breadcrumb"),"], commands:\xa0Union[List[",Object(a.b)("a",{title:"h2o_wave.types.Command",href:"types#h2o_wave.types.Command"},"Command"),"],\xa0NoneType]\xa0=\xa0None) \u2011>\xa0",Object(a.b)("a",{title:"h2o_wave.types.BreadcrumbsCard",href:"types#h2o_wave.types.BreadcrumbsCard"},"BreadcrumbsCard")),Object(a.b)("div",{className:"api__description"},Object(a.b)("p",null,"Create a card containing breadcrumbs. Breadcrumbs should be used as a navigational aid in your app or site. They indicate the current page\u2019s location within a hierarchy and help the user understand where they are in relation to the rest of that hierarchy. They also afford one-click access to higher levels of that hierarchy. Breadcrumbs are typically placed, in horizontal form, under the masthead or navigation of an experience, above the primary content area."),Object(a.b)("h5",{id:"args"},"Args"),Object(a.b)("dl",null,Object(a.b)("dt",null,Object(a.b)("code",null,"box")),Object(a.b)("dd",null,"A string indicating how to place this component on the page."),Object(a.b)("dt",null,Object(a.b)("code",null,"items")),Object(a.b)("dd",null,"A list of ",Object(a.b)("code",null,Object(a.b)("a",{title:"h2o_wave.types.Breadcrumb",href:"types#h2o_wave.types.Breadcrumb"},"Breadcrumb"))," instances to display. See ",Object(a.b)("code",null,Object(a.b)("a",{title:"h2o_wave.ui.breadcrumb",href:"#h2o_wave.ui.breadcrumb"},"breadcrumb()"))),Object(a.b)("dt",null,Object(a.b)("code",null,"commands")),Object(a.b)("dd",null,"Contextual menu commands for this component.")),Object(a.b)("h5",{id:"returns"},"Returns"),Object(a.b)("p",null,"A ",Object(a.b)("code",null,Object(a.b)("a",{title:"h2o_wave.types.BreadcrumbsCard",href:"types#h2o_wave.types.BreadcrumbsCard"},"BreadcrumbsCard"))," instance.")))),Object(a.b)("div",{className:"api"},Object(a.b)("h3",{id:"button"},"button ",Object(a.b)("a",{name:"h2o_wave.ui.button"})),Object(a.b)("div",{className:"api__body"},Object(a.b)("div",{className:"api__signature"},"def ",Object(a.b)("span",{class:"ident"},"button"),"(name:\xa0str, label:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, caption:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, value:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, primary:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, disabled:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, link:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, visible:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, tooltip:\xa0Union[str,\xa0NoneType]\xa0=\xa0None) \u2011>\xa0",Object(a.b)("a",{title:"h2o_wave.types.Component",href:"types#h2o_wave.types.Component"},"Component")),Object(a.b)("div",{className:"api__description"},Object(a.b)("p",null,"Create a button."),Object(a.b)("p",null,"Buttons are best used to enable a user to commit a change or complete steps in a task. They are typically found inside forms, dialogs, panels or pages. An example of their usage is confirming the deletion of a file in a confirmation dialog."),Object(a.b)("p",null,"When considering their place in a layout, contemplate the order in which a user will flow through the UI. As an example, in a form, the individual will need to read and interact with the form fields before submitting the form. Therefore, as a general rule, the button should be placed at the bottom of the UI container which holds the related UI elements."),Object(a.b)("p",null,'Buttons may be placed within a "buttons" component which will lay out the buttons horizontally, or used individually and they will be stacked vertically.'),Object(a.b)("p",null,"While buttons can technically be used to navigate a user to another part of the experience, this is not recommended unless that navigation is part of an action or their flow."),Object(a.b)("h5",{id:"args"},"Args"),Object(a.b)("dl",null,Object(a.b)("dt",null,Object(a.b)("code",null,"name")),Object(a.b)("dd",null,"An identifying name for this component. If the name is prefixed with a '#', the button sets the location hash to the name when clicked."),Object(a.b)("dt",null,Object(a.b)("code",null,"label")),Object(a.b)("dd",null,"The text displayed on the button."),Object(a.b)("dt",null,Object(a.b)("code",null,"caption")),Object(a.b)("dd",null,"The caption displayed below the label. Setting a caption renders a compound button."),Object(a.b)("dt",null,Object(a.b)("code",null,"value")),Object(a.b)("dd",null,"A value for this button. If a value is set, it is used for the button's submitted instead of a boolean True."),Object(a.b)("dt",null,Object(a.b)("code",null,"primary")),Object(a.b)("dd",null,"True if the button should be rendered as the primary button in the set."),Object(a.b)("dt",null,Object(a.b)("code",null,"disabled")),Object(a.b)("dd",null,"True if the button should be disabled."),Object(a.b)("dt",null,Object(a.b)("code",null,"link")),Object(a.b)("dd",null,"True if the button should be rendered as link text and not a standard button."),Object(a.b)("dt",null,Object(a.b)("code",null,"visible")),Object(a.b)("dd",null,"True if the component should be visible. Defaults to true."),Object(a.b)("dt",null,Object(a.b)("code",null,"tooltip")),Object(a.b)("dd",null,"An optional tooltip message displayed when a user clicks the help icon to the right of the component.")),Object(a.b)("h5",{id:"returns"},"Returns"),Object(a.b)("p",null,"A ",Object(a.b)("code",null,Object(a.b)("a",{title:"h2o_wave.types.Button",href:"types#h2o_wave.types.Button"},"Button"))," instance.")))),Object(a.b)("div",{className:"api"},Object(a.b)("h3",{id:"buttons"},"buttons ",Object(a.b)("a",{name:"h2o_wave.ui.buttons"})),Object(a.b)("div",{className:"api__body"},Object(a.b)("div",{className:"api__signature"},"def ",Object(a.b)("span",{class:"ident"},"buttons"),"(items:\xa0List[",Object(a.b)("a",{title:"h2o_wave.types.Component",href:"types#h2o_wave.types.Component"},"Component"),"], justify:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, name:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, visible:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None) \u2011>\xa0",Object(a.b)("a",{title:"h2o_wave.types.Component",href:"types#h2o_wave.types.Component"},"Component")),Object(a.b)("div",{className:"api__description"},Object(a.b)("p",null,"Create a set of buttons to be layed out horizontally."),Object(a.b)("h5",{id:"args"},"Args"),Object(a.b)("dl",null,Object(a.b)("dt",null,Object(a.b)("code",null,"items")),Object(a.b)("dd",null,"The button in this set."),Object(a.b)("dt",null,Object(a.b)("code",null,"justify")),Object(a.b)("dd",null,"Specifies how to lay out buttons horizontally. One of 'start', 'end', 'center', 'between', 'around'."),Object(a.b)("dt",null,Object(a.b)("code",null,"name")),Object(a.b)("dd",null,"An identifying name for this component."),Object(a.b)("dt",null,Object(a.b)("code",null,"visible")),Object(a.b)("dd",null,"True if the component should be visible. Defaults to true.")),Object(a.b)("h5",{id:"returns"},"Returns"),Object(a.b)("p",null,"A ",Object(a.b)("code",null,Object(a.b)("a",{title:"h2o_wave.types.Buttons",href:"types#h2o_wave.types.Buttons"},"Buttons"))," instance.")))),Object(a.b)("div",{className:"api"},Object(a.b)("h3",{id:"checkbox"},"checkbox ",Object(a.b)("a",{name:"h2o_wave.ui.checkbox"})),Object(a.b)("div",{className:"api__body"},Object(a.b)("div",{className:"api__signature"},"def ",Object(a.b)("span",{class:"ident"},"checkbox"),"(name:\xa0str, label:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, value:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, indeterminate:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, disabled:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, trigger:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, visible:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, tooltip:\xa0Union[str,\xa0NoneType]\xa0=\xa0None) \u2011>\xa0",Object(a.b)("a",{title:"h2o_wave.types.Component",href:"types#h2o_wave.types.Component"},"Component")),Object(a.b)("div",{className:"api__description"},Object(a.b)("p",null,"Create a checkbox."),Object(a.b)("p",null,"A checkbox allows users to switch between two mutually exclusive options (checked or unchecked, on or off) through a single click or tap. It can also be used to indicate a subordinate setting or preference when paired with another component."),Object(a.b)("p",null,"A checkbox is used to select or deselect action items. It can be used for a single item or for a list of multiple items that a user can choose from. The component has two selection states: unselected and selected."),Object(a.b)("p",null,"For a binary choice, the main difference between a checkbox and a toggle switch is that the checkbox is for status and the toggle switch is for action."),Object(a.b)("p",null,"Use multiple checkboxes for multi-select scenarios in which a user chooses one or more items from a group of choices that are not mutually exclusive."),Object(a.b)("h5",{id:"args"},"Args"),Object(a.b)("dl",null,Object(a.b)("dt",null,Object(a.b)("code",null,"name")),Object(a.b)("dd",null,"An identifying name for this component."),Object(a.b)("dt",null,Object(a.b)("code",null,"label")),Object(a.b)("dd",null,"Text to be displayed alongside the checkbox."),Object(a.b)("dt",null,Object(a.b)("code",null,"value")),Object(a.b)("dd",null,"True if selected, False if unselected."),Object(a.b)("dt",null,Object(a.b)("code",null,"indeterminate")),Object(a.b)("dd",null,"True if the selection is indeterminate (neither selected nor unselected)."),Object(a.b)("dt",null,Object(a.b)("code",null,"disabled")),Object(a.b)("dd",null,"True if the checkbox is disabled."),Object(a.b)("dt",null,Object(a.b)("code",null,"trigger")),Object(a.b)("dd",null,"True if the form should be submitted when the checkbox value changes."),Object(a.b)("dt",null,Object(a.b)("code",null,"visible")),Object(a.b)("dd",null,"True if the component should be visible. Defaults to true."),Object(a.b)("dt",null,Object(a.b)("code",null,"tooltip")),Object(a.b)("dd",null,"An optional tooltip message displayed when a user clicks the help icon to the right of the component.")),Object(a.b)("h5",{id:"returns"},"Returns"),Object(a.b)("p",null,"A ",Object(a.b)("code",null,Object(a.b)("a",{title:"h2o_wave.types.Checkbox",href:"types#h2o_wave.types.Checkbox"},"Checkbox"))," instance.")))),Object(a.b)("div",{className:"api"},Object(a.b)("h3",{id:"checklist"},"checklist ",Object(a.b)("a",{name:"h2o_wave.ui.checklist"})),Object(a.b)("div",{className:"api__body"},Object(a.b)("div",{className:"api__signature"},"def ",Object(a.b)("span",{class:"ident"},"checklist"),"(name:\xa0str, label:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, values:\xa0Union[List[str],\xa0NoneType]\xa0=\xa0None, choices:\xa0Union[List[",Object(a.b)("a",{title:"h2o_wave.types.Choice",href:"types#h2o_wave.types.Choice"},"Choice"),"],\xa0NoneType]\xa0=\xa0None, trigger:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, visible:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, tooltip:\xa0Union[str,\xa0NoneType]\xa0=\xa0None) \u2011>\xa0",Object(a.b)("a",{title:"h2o_wave.types.Component",href:"types#h2o_wave.types.Component"},"Component")),Object(a.b)("div",{className:"api__description"},Object(a.b)("p",null,"Create a set of checkboxes. Use this for multi-select scenarios in which a user chooses one or more items from a group of choices that are not mutually exclusive."),Object(a.b)("h5",{id:"args"},"Args"),Object(a.b)("dl",null,Object(a.b)("dt",null,Object(a.b)("code",null,"name")),Object(a.b)("dd",null,"An identifying name for this component."),Object(a.b)("dt",null,Object(a.b)("code",null,"label")),Object(a.b)("dd",null,"Text to be displayed above the component."),Object(a.b)("dt",null,Object(a.b)("code",null,"values")),Object(a.b)("dd",null,"The names of the selected choices."),Object(a.b)("dt",null,Object(a.b)("code",null,"choices")),Object(a.b)("dd",null,"The choices to be presented."),Object(a.b)("dt",null,Object(a.b)("code",null,"trigger")),Object(a.b)("dd",null,"True if the form should be submitted when the checklist value changes."),Object(a.b)("dt",null,Object(a.b)("code",null,"visible")),Object(a.b)("dd",null,"True if the component should be visible. Defaults to true."),Object(a.b)("dt",null,Object(a.b)("code",null,"tooltip")),Object(a.b)("dd",null,"An optional tooltip message displayed when a user clicks the help icon to the right of the component.")),Object(a.b)("h5",{id:"returns"},"Returns"),Object(a.b)("p",null,"A ",Object(a.b)("code",null,Object(a.b)("a",{title:"h2o_wave.types.Checklist",href:"types#h2o_wave.types.Checklist"},"Checklist"))," instance.")))),Object(a.b)("div",{className:"api"},Object(a.b)("h3",{id:"choice"},"choice ",Object(a.b)("a",{name:"h2o_wave.ui.choice"})),Object(a.b)("div",{className:"api__body"},Object(a.b)("div",{className:"api__signature"},"def ",Object(a.b)("span",{class:"ident"},"choice"),"(name:\xa0str, label:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, disabled:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None) \u2011>\xa0",Object(a.b)("a",{title:"h2o_wave.types.Choice",href:"types#h2o_wave.types.Choice"},"Choice")),Object(a.b)("div",{className:"api__description"},Object(a.b)("p",null,"Create a choice for a checklist, choice group or dropdown."),Object(a.b)("h5",{id:"args"},"Args"),Object(a.b)("dl",null,Object(a.b)("dt",null,Object(a.b)("code",null,"name")),Object(a.b)("dd",null,"An identifying name for this component."),Object(a.b)("dt",null,Object(a.b)("code",null,"label")),Object(a.b)("dd",null,"Text to be displayed alongside the component."),Object(a.b)("dt",null,Object(a.b)("code",null,"disabled")),Object(a.b)("dd",null,"True if the checkbox is disabled.")),Object(a.b)("h5",{id:"returns"},"Returns"),Object(a.b)("p",null,"A ",Object(a.b)("code",null,Object(a.b)("a",{title:"h2o_wave.types.Choice",href:"types#h2o_wave.types.Choice"},"Choice"))," instance.")))),Object(a.b)("div",{className:"api"},Object(a.b)("h3",{id:"choice_group"},"choice_group ",Object(a.b)("a",{name:"h2o_wave.ui.choice_group"})),Object(a.b)("div",{className:"api__body"},Object(a.b)("div",{className:"api__signature"},"def ",Object(a.b)("span",{class:"ident"},"choice_group"),"(name:\xa0str, label:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, value:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, choices:\xa0Union[List[",Object(a.b)("a",{title:"h2o_wave.types.Choice",href:"types#h2o_wave.types.Choice"},"Choice"),"],\xa0NoneType]\xa0=\xa0None, required:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, trigger:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, visible:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, tooltip:\xa0Union[str,\xa0NoneType]\xa0=\xa0None) \u2011>\xa0",Object(a.b)("a",{title:"h2o_wave.types.Component",href:"types#h2o_wave.types.Component"},"Component")),Object(a.b)("div",{className:"api__description"},Object(a.b)("p",null,"Create a choice group. The choice group component, also known as radio buttons, let users select one option from two or more choices. Each option is represented by one choice group button; a user can select only one choice group in a button group."),Object(a.b)("p",null,"Choice groups emphasize all options equally, and that may draw more attention to the options than necessary. Consider using other components, unless the options deserve extra attention from the user. For example, if the default option is recommended for most users in most situations, use a dropdown instead."),Object(a.b)("p",null,'If there are only two mutually exclusive options, combine them into a single Checkbox or Toggle switch. For example, use a checkbox for "I agree" instead of choice group buttons for "I agree" and "I don\'t agree."'),Object(a.b)("h5",{id:"args"},"Args"),Object(a.b)("dl",null,Object(a.b)("dt",null,Object(a.b)("code",null,"name")),Object(a.b)("dd",null,"An identifying name for this component."),Object(a.b)("dt",null,Object(a.b)("code",null,"label")),Object(a.b)("dd",null,"Text to be displayed alongside the component."),Object(a.b)("dt",null,Object(a.b)("code",null,"value")),Object(a.b)("dd",null,"The name of the selected choice."),Object(a.b)("dt",null,Object(a.b)("code",null,"choices")),Object(a.b)("dd",null,"The choices to be presented."),Object(a.b)("dt",null,Object(a.b)("code",null,"required")),Object(a.b)("dd",null,"True if this field is required."),Object(a.b)("dt",null,Object(a.b)("code",null,"trigger")),Object(a.b)("dd",null,"True if the form should be submitted when the selection changes."),Object(a.b)("dt",null,Object(a.b)("code",null,"visible")),Object(a.b)("dd",null,"True if the component should be visible. Defaults to true."),Object(a.b)("dt",null,Object(a.b)("code",null,"tooltip")),Object(a.b)("dd",null,"An optional tooltip message displayed when a user clicks the help icon to the right of the component.")),Object(a.b)("h5",{id:"returns"},"Returns"),Object(a.b)("p",null,"A ",Object(a.b)("code",null,Object(a.b)("a",{title:"h2o_wave.types.ChoiceGroup",href:"types#h2o_wave.types.ChoiceGroup"},"ChoiceGroup"))," instance.")))),Object(a.b)("div",{className:"api"},Object(a.b)("h3",{id:"color_picker"},"color_picker ",Object(a.b)("a",{name:"h2o_wave.ui.color_picker"})),Object(a.b)("div",{className:"api__body"},Object(a.b)("div",{className:"api__signature"},"def ",Object(a.b)("span",{class:"ident"},"color_picker"),"(name:\xa0str, label:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, value:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, choices:\xa0Union[List[str],\xa0NoneType]\xa0=\xa0None, visible:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, tooltip:\xa0Union[str,\xa0NoneType]\xa0=\xa0None) \u2011>\xa0",Object(a.b)("a",{title:"h2o_wave.types.Component",href:"types#h2o_wave.types.Component"},"Component")),Object(a.b)("div",{className:"api__description"},Object(a.b)("p",null,"Create a color picker."),Object(a.b)("p",null,"A date picker allows a user to pick a color value. If the 'choices' parameter is set, a swatch picker is displayed instead of the standard color picker."),Object(a.b)("h5",{id:"args"},"Args"),Object(a.b)("dl",null,Object(a.b)("dt",null,Object(a.b)("code",null,"name")),Object(a.b)("dd",null,"An identifying name for this component."),Object(a.b)("dt",null,Object(a.b)("code",null,"label")),Object(a.b)("dd",null,"Text to be displayed alongside the component."),Object(a.b)("dt",null,Object(a.b)("code",null,"value")),Object(a.b)("dd",null,"The selected color (CSS-compatible string)"),Object(a.b)("dt",null,Object(a.b)("code",null,"choices")),Object(a.b)("dd",null,"A list of colors (CSS-compatible strings) to limit color choices to."),Object(a.b)("dt",null,Object(a.b)("code",null,"visible")),Object(a.b)("dd",null,"True if the component should be visible. Defaults to true."),Object(a.b)("dt",null,Object(a.b)("code",null,"tooltip")),Object(a.b)("dd",null,"An optional tooltip message displayed when a user clicks the help icon to the right of the component.")),Object(a.b)("h5",{id:"returns"},"Returns"),Object(a.b)("p",null,"A ",Object(a.b)("code",null,Object(a.b)("a",{title:"h2o_wave.types.ColorPicker",href:"types#h2o_wave.types.ColorPicker"},"ColorPicker"))," instance.")))),Object(a.b)("div",{className:"api"},Object(a.b)("h3",{id:"combobox"},"combobox ",Object(a.b)("a",{name:"h2o_wave.ui.combobox"})),Object(a.b)("div",{className:"api__body"},Object(a.b)("div",{className:"api__signature"},"def ",Object(a.b)("span",{class:"ident"},"combobox"),"(name:\xa0str, label:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, placeholder:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, value:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, choices:\xa0Union[List[str],\xa0NoneType]\xa0=\xa0None, error:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, disabled:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, visible:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, tooltip:\xa0Union[str,\xa0NoneType]\xa0=\xa0None) \u2011>\xa0",Object(a.b)("a",{title:"h2o_wave.types.Component",href:"types#h2o_wave.types.Component"},"Component")),Object(a.b)("div",{className:"api__description"},Object(a.b)("p",null,"Create a combobox."),Object(a.b)("p",null,"A combobox is a list in which the selected item is always visible, and the others are visible on demand by clicking a drop-down button or by typing in the input. They are used to simplify the design and make a choice within the UI."),Object(a.b)("p",null,"When closed, only the selected item is visible. When users click the drop-down button, all the options become visible. To change the value, users open the list and click another value or use the arrow keys (up and down) to select a new value. When collapsed the user can select a new value by typing."),Object(a.b)("h5",{id:"args"},"Args"),Object(a.b)("dl",null,Object(a.b)("dt",null,Object(a.b)("code",null,"name")),Object(a.b)("dd",null,"An identifying name for this component."),Object(a.b)("dt",null,Object(a.b)("code",null,"label")),Object(a.b)("dd",null,"Text to be displayed alongside the component."),Object(a.b)("dt",null,Object(a.b)("code",null,"placeholder")),Object(a.b)("dd",null,"A string that provides a brief hint to the user as to what kind of information is expected in the field."),Object(a.b)("dt",null,Object(a.b)("code",null,"value")),Object(a.b)("dd",null,"The name of the selected choice."),Object(a.b)("dt",null,Object(a.b)("code",null,"choices")),Object(a.b)("dd",null,"The choices to be presented."),Object(a.b)("dt",null,Object(a.b)("code",null,"error")),Object(a.b)("dd",null,"Text to be displayed as an error below the text box."),Object(a.b)("dt",null,Object(a.b)("code",null,"disabled")),Object(a.b)("dd",null,"True if this field is disabled."),Object(a.b)("dt",null,Object(a.b)("code",null,"visible")),Object(a.b)("dd",null,"True if the component should be visible. Defaults to true."),Object(a.b)("dt",null,Object(a.b)("code",null,"tooltip")),Object(a.b)("dd",null,"An optional tooltip message displayed when a user clicks the help icon to the right of the component.")),Object(a.b)("h5",{id:"returns"},"Returns"),Object(a.b)("p",null,"A ",Object(a.b)("code",null,Object(a.b)("a",{title:"h2o_wave.types.Combobox",href:"types#h2o_wave.types.Combobox"},"Combobox"))," instance.")))),Object(a.b)("div",{className:"api"},Object(a.b)("h3",{id:"command"},"command ",Object(a.b)("a",{name:"h2o_wave.ui.command"})),Object(a.b)("div",{className:"api__body"},Object(a.b)("div",{className:"api__signature"},"def ",Object(a.b)("span",{class:"ident"},"command"),"(name:\xa0str, label:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, caption:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, icon:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, items:\xa0Union[List[",Object(a.b)("a",{title:"h2o_wave.types.Command",href:"types#h2o_wave.types.Command"},"Command"),"],\xa0NoneType]\xa0=\xa0None, data:\xa0Union[str,\xa0NoneType]\xa0=\xa0None) \u2011>\xa0",Object(a.b)("a",{title:"h2o_wave.types.Command",href:"types#h2o_wave.types.Command"},"Command")),Object(a.b)("div",{className:"api__description"},Object(a.b)("p",null,"Create a command."),Object(a.b)("p",null,"Commands are typically displayed as context menu items or toolbar button."),Object(a.b)("h5",{id:"args"},"Args"),Object(a.b)("dl",null,Object(a.b)("dt",null,Object(a.b)("code",null,"name")),Object(a.b)("dd",null,"An identifying name for this component. If the name is prefixed with a '#', the command sets the location hash to the name when executed."),Object(a.b)("dt",null,Object(a.b)("code",null,"label")),Object(a.b)("dd",null,"The text displayed for this command."),Object(a.b)("dt",null,Object(a.b)("code",null,"caption")),Object(a.b)("dd",null,"The caption for this command (typically a tooltip)."),Object(a.b)("dt",null,Object(a.b)("code",null,"icon")),Object(a.b)("dd",null,"The icon to be displayed for this command."),Object(a.b)("dt",null,Object(a.b)("code",null,"items")),Object(a.b)("dd",null,"Sub-commands, if any"),Object(a.b)("dt",null,Object(a.b)("code",null,"data")),Object(a.b)("dd",null,"Data associated with this command, if any.")),Object(a.b)("h5",{id:"returns"},"Returns"),Object(a.b)("p",null,"A ",Object(a.b)("code",null,Object(a.b)("a",{title:"h2o_wave.types.Command",href:"types#h2o_wave.types.Command"},"Command"))," instance.")))),Object(a.b)("div",{className:"api"},Object(a.b)("h3",{id:"component"},"component ",Object(a.b)("a",{name:"h2o_wave.ui.component"})),Object(a.b)("div",{className:"api__body"},Object(a.b)("div",{className:"api__signature"},"def ",Object(a.b)("span",{class:"ident"},"component"),"(text:\xa0Union[",Object(a.b)("a",{title:"h2o_wave.types.Text",href:"types#h2o_wave.types.Text"},"Text"),",\xa0NoneType]\xa0=\xa0None, text_xl:\xa0Union[",Object(a.b)("a",{title:"h2o_wave.types.TextXl",href:"types#h2o_wave.types.TextXl"},"TextXl"),",\xa0NoneType]\xa0=\xa0None, text_l:\xa0Union[",Object(a.b)("a",{title:"h2o_wave.types.TextL",href:"types#h2o_wave.types.TextL"},"TextL"),",\xa0NoneType]\xa0=\xa0None, text_m:\xa0Union[",Object(a.b)("a",{title:"h2o_wave.types.TextM",href:"types#h2o_wave.types.TextM"},"TextM"),",\xa0NoneType]\xa0=\xa0None, text_s:\xa0Union[",Object(a.b)("a",{title:"h2o_wave.types.TextS",href:"types#h2o_wave.types.TextS"},"TextS"),",\xa0NoneType]\xa0=\xa0None, text_xs:\xa0Union[",Object(a.b)("a",{title:"h2o_wave.types.TextXs",href:"types#h2o_wave.types.TextXs"},"TextXs"),",\xa0NoneType]\xa0=\xa0None, label:\xa0Union[",Object(a.b)("a",{title:"h2o_wave.types.Label",href:"types#h2o_wave.types.Label"},"Label"),",\xa0NoneType]\xa0=\xa0None, separator:\xa0Union[",Object(a.b)("a",{title:"h2o_wave.types.Separator",href:"types#h2o_wave.types.Separator"},"Separator"),",\xa0NoneType]\xa0=\xa0None, progress:\xa0Union[",Object(a.b)("a",{title:"h2o_wave.types.Progress",href:"types#h2o_wave.types.Progress"},"Progress"),",\xa0NoneType]\xa0=\xa0None, message_bar:\xa0Union[",Object(a.b)("a",{title:"h2o_wave.types.MessageBar",href:"types#h2o_wave.types.MessageBar"},"MessageBar"),",\xa0NoneType]\xa0=\xa0None, textbox:\xa0Union[",Object(a.b)("a",{title:"h2o_wave.types.Textbox",href:"types#h2o_wave.types.Textbox"},"Textbox"),",\xa0NoneType]\xa0=\xa0None, checkbox:\xa0Union[",Object(a.b)("a",{title:"h2o_wave.types.Checkbox",href:"types#h2o_wave.types.Checkbox"},"Checkbox"),",\xa0NoneType]\xa0=\xa0None, toggle:\xa0Union[",Object(a.b)("a",{title:"h2o_wave.types.Toggle",href:"types#h2o_wave.types.Toggle"},"Toggle"),",\xa0NoneType]\xa0=\xa0None, choice_group:\xa0Union[",Object(a.b)("a",{title:"h2o_wave.types.ChoiceGroup",href:"types#h2o_wave.types.ChoiceGroup"},"ChoiceGroup"),",\xa0NoneType]\xa0=\xa0None, checklist:\xa0Union[",Object(a.b)("a",{title:"h2o_wave.types.Checklist",href:"types#h2o_wave.types.Checklist"},"Checklist"),",\xa0NoneType]\xa0=\xa0None, dropdown:\xa0Union[",Object(a.b)("a",{title:"h2o_wave.types.Dropdown",href:"types#h2o_wave.types.Dropdown"},"Dropdown"),",\xa0NoneType]\xa0=\xa0None, combobox:\xa0Union[",Object(a.b)("a",{title:"h2o_wave.types.Combobox",href:"types#h2o_wave.types.Combobox"},"Combobox"),",\xa0NoneType]\xa0=\xa0None, slider:\xa0Union[",Object(a.b)("a",{title:"h2o_wave.types.Slider",href:"types#h2o_wave.types.Slider"},"Slider"),",\xa0NoneType]\xa0=\xa0None, spinbox:\xa0Union[",Object(a.b)("a",{title:"h2o_wave.types.Spinbox",href:"types#h2o_wave.types.Spinbox"},"Spinbox"),",\xa0NoneType]\xa0=\xa0None, date_picker:\xa0Union[",Object(a.b)("a",{title:"h2o_wave.types.DatePicker",href:"types#h2o_wave.types.DatePicker"},"DatePicker"),",\xa0NoneType]\xa0=\xa0None, color_picker:\xa0Union[",Object(a.b)("a",{title:"h2o_wave.types.ColorPicker",href:"types#h2o_wave.types.ColorPicker"},"ColorPicker"),",\xa0NoneType]\xa0=\xa0None, button:\xa0Union[",Object(a.b)("a",{title:"h2o_wave.types.Button",href:"types#h2o_wave.types.Button"},"Button"),",\xa0NoneType]\xa0=\xa0None, buttons:\xa0Union[",Object(a.b)("a",{title:"h2o_wave.types.Buttons",href:"types#h2o_wave.types.Buttons"},"Buttons"),",\xa0NoneType]\xa0=\xa0None, file_upload:\xa0Union[",Object(a.b)("a",{title:"h2o_wave.types.FileUpload",href:"types#h2o_wave.types.FileUpload"},"FileUpload"),",\xa0NoneType]\xa0=\xa0None, table:\xa0Union[",Object(a.b)("a",{title:"h2o_wave.types.Table",href:"types#h2o_wave.types.Table"},"Table"),",\xa0NoneType]\xa0=\xa0None, link:\xa0Union[",Object(a.b)("a",{title:"h2o_wave.types.Link",href:"types#h2o_wave.types.Link"},"Link"),",\xa0NoneType]\xa0=\xa0None, tabs:\xa0Union[",Object(a.b)("a",{title:"h2o_wave.types.Tabs",href:"types#h2o_wave.types.Tabs"},"Tabs"),",\xa0NoneType]\xa0=\xa0None, expander:\xa0Union[",Object(a.b)("a",{title:"h2o_wave.types.Expander",href:"types#h2o_wave.types.Expander"},"Expander"),",\xa0NoneType]\xa0=\xa0None, frame:\xa0Union[",Object(a.b)("a",{title:"h2o_wave.types.Frame",href:"types#h2o_wave.types.Frame"},"Frame"),",\xa0NoneType]\xa0=\xa0None, markup:\xa0Union[",Object(a.b)("a",{title:"h2o_wave.types.Markup",href:"types#h2o_wave.types.Markup"},"Markup"),",\xa0NoneType]\xa0=\xa0None, template:\xa0Union[",Object(a.b)("a",{title:"h2o_wave.types.Template",href:"types#h2o_wave.types.Template"},"Template"),",\xa0NoneType]\xa0=\xa0None, picker:\xa0Union[",Object(a.b)("a",{title:"h2o_wave.types.Picker",href:"types#h2o_wave.types.Picker"},"Picker"),",\xa0NoneType]\xa0=\xa0None, range_slider:\xa0Union[",Object(a.b)("a",{title:"h2o_wave.types.RangeSlider",href:"types#h2o_wave.types.RangeSlider"},"RangeSlider"),",\xa0NoneType]\xa0=\xa0None, stepper:\xa0Union[",Object(a.b)("a",{title:"h2o_wave.types.Stepper",href:"types#h2o_wave.types.Stepper"},"Stepper"),",\xa0NoneType]\xa0=\xa0None, visualization:\xa0Union[",Object(a.b)("a",{title:"h2o_wave.types.Visualization",href:"types#h2o_wave.types.Visualization"},"Visualization"),",\xa0NoneType]\xa0=\xa0None, vega_visualization:\xa0Union[",Object(a.b)("a",{title:"h2o_wave.types.VegaVisualization",href:"types#h2o_wave.types.VegaVisualization"},"VegaVisualization"),",\xa0NoneType]\xa0=\xa0None) \u2011>\xa0",Object(a.b)("a",{title:"h2o_wave.types.Component",href:"types#h2o_wave.types.Component"},"Component")),Object(a.b)("div",{className:"api__description"},Object(a.b)("p",null,"Create a component."),Object(a.b)("h5",{id:"args"},"Args"),Object(a.b)("dl",null,Object(a.b)("dt",null,Object(a.b)("code",null,"text")),Object(a.b)("dd",null,"Text block."),Object(a.b)("dt",null,Object(a.b)("code",null,"text_xl")),Object(a.b)("dd",null,"Extra-large sized text block."),Object(a.b)("dt",null,Object(a.b)("code",null,"text_l")),Object(a.b)("dd",null,"Large sized text block."),Object(a.b)("dt",null,Object(a.b)("code",null,"text_m")),Object(a.b)("dd",null,"Medium sized text block."),Object(a.b)("dt",null,Object(a.b)("code",null,"text_s")),Object(a.b)("dd",null,"Small sized text block."),Object(a.b)("dt",null,Object(a.b)("code",null,"text_xs")),Object(a.b)("dd",null,"Extra-small sized text block."),Object(a.b)("dt",null,Object(a.b)("code",null,"label")),Object(a.b)("dd",null,"Label."),Object(a.b)("dt",null,Object(a.b)("code",null,"separator")),Object(a.b)("dd",null,"Separator."),Object(a.b)("dt",null,Object(a.b)("code",null,"progress")),Object(a.b)("dd",null,"Progress bar."),Object(a.b)("dt",null,Object(a.b)("code",null,"message_bar")),Object(a.b)("dd",null,"Message bar."),Object(a.b)("dt",null,Object(a.b)("code",null,"textbox")),Object(a.b)("dd",null,"Textbox."),Object(a.b)("dt",null,Object(a.b)("code",null,"checkbox")),Object(a.b)("dd",null,"Checkbox."),Object(a.b)("dt",null,Object(a.b)("code",null,"toggle")),Object(a.b)("dd",null,"Toggle."),Object(a.b)("dt",null,Object(a.b)("code",null,"choice_group")),Object(a.b)("dd",null,"Choice group."),Object(a.b)("dt",null,Object(a.b)("code",null,"checklist")),Object(a.b)("dd",null,"Checklist."),Object(a.b)("dt",null,Object(a.b)("code",null,"dropdown")),Object(a.b)("dd",null,"Dropdown."),Object(a.b)("dt",null,Object(a.b)("code",null,"combobox")),Object(a.b)("dd",null,"Combobox."),Object(a.b)("dt",null,Object(a.b)("code",null,"slider")),Object(a.b)("dd",null,"Slider."),Object(a.b)("dt",null,Object(a.b)("code",null,"spinbox")),Object(a.b)("dd",null,"Spinbox."),Object(a.b)("dt",null,Object(a.b)("code",null,"date_picker")),Object(a.b)("dd",null,"Date picker."),Object(a.b)("dt",null,Object(a.b)("code",null,"color_picker")),Object(a.b)("dd",null,"Color picker."),Object(a.b)("dt",null,Object(a.b)("code",null,"button")),Object(a.b)("dd",null,"Button."),Object(a.b)("dt",null,Object(a.b)("code",null,"buttons")),Object(a.b)("dd",null,"Button set."),Object(a.b)("dt",null,Object(a.b)("code",null,"file_upload")),Object(a.b)("dd",null,"File upload."),Object(a.b)("dt",null,Object(a.b)("code",null,"table")),Object(a.b)("dd",null,"Table."),Object(a.b)("dt",null,Object(a.b)("code",null,"link")),Object(a.b)("dd",null,"Link."),Object(a.b)("dt",null,Object(a.b)("code",null,"tabs")),Object(a.b)("dd",null,"Tabs."),Object(a.b)("dt",null,Object(a.b)("code",null,"expander")),Object(a.b)("dd",null,"Expander."),Object(a.b)("dt",null,Object(a.b)("code",null,"frame")),Object(a.b)("dd",null,"Frame."),Object(a.b)("dt",null,Object(a.b)("code",null,"markup")),Object(a.b)("dd",null,"Markup"),Object(a.b)("dt",null,Object(a.b)("code",null,"template")),Object(a.b)("dd",null,"Template"),Object(a.b)("dt",null,Object(a.b)("code",null,"picker")),Object(a.b)("dd",null,"Picker."),Object(a.b)("dt",null,Object(a.b)("code",null,"range_slider")),Object(a.b)("dd",null,"Range Slider."),Object(a.b)("dt",null,Object(a.b)("code",null,"stepper")),Object(a.b)("dd",null,"Stepper."),Object(a.b)("dt",null,Object(a.b)("code",null,"visualization")),Object(a.b)("dd",null,"Visualization."),Object(a.b)("dt",null,Object(a.b)("code",null,"vega_visualization")),Object(a.b)("dd",null,"Vega-lite Visualization.")),Object(a.b)("h5",{id:"returns"},"Returns"),Object(a.b)("p",null,"A ",Object(a.b)("code",null,Object(a.b)("a",{title:"h2o_wave.types.Component",href:"types#h2o_wave.types.Component"},"Component"))," instance.")))),Object(a.b)("div",{className:"api"},Object(a.b)("h3",{id:"date_picker"},"date_picker ",Object(a.b)("a",{name:"h2o_wave.ui.date_picker"})),Object(a.b)("div",{className:"api__body"},Object(a.b)("div",{className:"api__signature"},"def ",Object(a.b)("span",{class:"ident"},"date_picker"),"(name:\xa0str, label:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, placeholder:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, value:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, disabled:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, trigger:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, visible:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, tooltip:\xa0Union[str,\xa0NoneType]\xa0=\xa0None) \u2011>\xa0",Object(a.b)("a",{title:"h2o_wave.types.Component",href:"types#h2o_wave.types.Component"},"Component")),Object(a.b)("div",{className:"api__description"},Object(a.b)("p",null,"Create a date picker."),Object(a.b)("p",null,"A date picker allows a user to pick a date value."),Object(a.b)("h5",{id:"args"},"Args"),Object(a.b)("dl",null,Object(a.b)("dt",null,Object(a.b)("code",null,"name")),Object(a.b)("dd",null,"An identifying name for this component."),Object(a.b)("dt",null,Object(a.b)("code",null,"label")),Object(a.b)("dd",null,"Text to be displayed alongside the component."),Object(a.b)("dt",null,Object(a.b)("code",null,"placeholder")),Object(a.b)("dd",null,"A string that provides a brief hint to the user as to what kind of information is expected in the field."),Object(a.b)("dt",null,Object(a.b)("code",null,"value")),Object(a.b)("dd",null,"The date value in YYYY-MM-DD format."),Object(a.b)("dt",null,Object(a.b)("code",null,"disabled")),Object(a.b)("dd",null,"True if this field is disabled."),Object(a.b)("dt",null,Object(a.b)("code",null,"trigger")),Object(a.b)("dd",null,"True if the form should be submitted when the datepicker value changes."),Object(a.b)("dt",null,Object(a.b)("code",null,"visible")),Object(a.b)("dd",null,"True if the component should be visible. Defaults to true."),Object(a.b)("dt",null,Object(a.b)("code",null,"tooltip")),Object(a.b)("dd",null,"An optional tooltip message displayed when a user clicks the help icon to the right of the component.")),Object(a.b)("h5",{id:"returns"},"Returns"),Object(a.b)("p",null,"A ",Object(a.b)("code",null,Object(a.b)("a",{title:"h2o_wave.types.DatePicker",href:"types#h2o_wave.types.DatePicker"},"DatePicker"))," instance.")))),Object(a.b)("div",{className:"api"},Object(a.b)("h3",{id:"dropdown"},"dropdown ",Object(a.b)("a",{name:"h2o_wave.ui.dropdown"})),Object(a.b)("div",{className:"api__body"},Object(a.b)("div",{className:"api__signature"},"def ",Object(a.b)("span",{class:"ident"},"dropdown"),"(name:\xa0str, label:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, placeholder:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, value:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, values:\xa0Union[List[str],\xa0NoneType]\xa0=\xa0None, choices:\xa0Union[List[",Object(a.b)("a",{title:"h2o_wave.types.Choice",href:"types#h2o_wave.types.Choice"},"Choice"),"],\xa0NoneType]\xa0=\xa0None, required:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, disabled:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, trigger:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, visible:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, tooltip:\xa0Union[str,\xa0NoneType]\xa0=\xa0None) \u2011>\xa0",Object(a.b)("a",{title:"h2o_wave.types.Component",href:"types#h2o_wave.types.Component"},"Component")),Object(a.b)("div",{className:"api__description"},Object(a.b)("p",null,"Create a dropdown."),Object(a.b)("p",null,"A dropdown is a list in which the selected item is always visible, and the others are visible on demand by clicking a drop-down button. They are used to simplify the design and make a choice within the UI. When closed, only the selected item is visible. When users click the drop-down button, all the options become visible."),Object(a.b)("p",null,"To change the value, users open the list and click another value or use the arrow keys (up and down) to select a new value."),Object(a.b)("p",null,"Note: Use either the 'value' parameter or the 'values' parameter. Setting the 'values' parameter renders a multi-select dropdown."),Object(a.b)("h5",{id:"args"},"Args"),Object(a.b)("dl",null,Object(a.b)("dt",null,Object(a.b)("code",null,"name")),Object(a.b)("dd",null,"An identifying name for this component."),Object(a.b)("dt",null,Object(a.b)("code",null,"label")),Object(a.b)("dd",null,"Text to be displayed alongside the component."),Object(a.b)("dt",null,Object(a.b)("code",null,"placeholder")),Object(a.b)("dd",null,"A string that provides a brief hint to the user as to what kind of information is expected in the field."),Object(a.b)("dt",null,Object(a.b)("code",null,"value")),Object(a.b)("dd",null,"The name of the selected choice."),Object(a.b)("dt",null,Object(a.b)("code",null,"values")),Object(a.b)("dd",null,"The names of the selected choices. If this parameter is set, multiple selections will be allowed."),Object(a.b)("dt",null,Object(a.b)("code",null,"choices")),Object(a.b)("dd",null,"The choices to be presented."),Object(a.b)("dt",null,Object(a.b)("code",null,"required")),Object(a.b)("dd",null,"True if this is a required field."),Object(a.b)("dt",null,Object(a.b)("code",null,"disabled")),Object(a.b)("dd",null,"True if this field is disabled."),Object(a.b)("dt",null,Object(a.b)("code",null,"trigger")),Object(a.b)("dd",null,"True if the form should be submitted when the dropdown value changes."),Object(a.b)("dt",null,Object(a.b)("code",null,"visible")),Object(a.b)("dd",null,"True if the component should be visible. Defaults to true."),Object(a.b)("dt",null,Object(a.b)("code",null,"tooltip")),Object(a.b)("dd",null,"An optional tooltip message displayed when a user clicks the help icon to the right of the component.")),Object(a.b)("h5",{id:"returns"},"Returns"),Object(a.b)("p",null,"A ",Object(a.b)("code",null,Object(a.b)("a",{title:"h2o_wave.types.Dropdown",href:"types#h2o_wave.types.Dropdown"},"Dropdown"))," instance.")))),Object(a.b)("div",{className:"api"},Object(a.b)("h3",{id:"expander"},"expander ",Object(a.b)("a",{name:"h2o_wave.ui.expander"})),Object(a.b)("div",{className:"api__body"},Object(a.b)("div",{className:"api__signature"},"def ",Object(a.b)("span",{class:"ident"},"expander"),"(name:\xa0str, label:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, expanded:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, items:\xa0Union[List[",Object(a.b)("a",{title:"h2o_wave.types.Component",href:"types#h2o_wave.types.Component"},"Component"),"],\xa0NoneType]\xa0=\xa0None, visible:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None) \u2011>\xa0",Object(a.b)("a",{title:"h2o_wave.types.Component",href:"types#h2o_wave.types.Component"},"Component")),Object(a.b)("div",{className:"api__description"},Object(a.b)("p",null,"Creates a new expander."),Object(a.b)("p",null,"Expanders can be used to show or hide a group of related components."),Object(a.b)("h5",{id:"args"},"Args"),Object(a.b)("dl",null,Object(a.b)("dt",null,Object(a.b)("code",null,"name")),Object(a.b)("dd",null,"An identifying name for this component."),Object(a.b)("dt",null,Object(a.b)("code",null,"label")),Object(a.b)("dd",null,"The text displayed on the expander."),Object(a.b)("dt",null,Object(a.b)("code",null,"expanded")),Object(a.b)("dd",null,"True if expanded, False if collapsed."),Object(a.b)("dt",null,Object(a.b)("code",null,"items")),Object(a.b)("dd",null,"List of components to be hideable by the expander."),Object(a.b)("dt",null,Object(a.b)("code",null,"visible")),Object(a.b)("dd",null,"True if the component should be visible. Defaults to true.")),Object(a.b)("h5",{id:"returns"},"Returns"),Object(a.b)("p",null,"A ",Object(a.b)("code",null,Object(a.b)("a",{title:"h2o_wave.types.Expander",href:"types#h2o_wave.types.Expander"},"Expander"))," instance.")))),Object(a.b)("div",{className:"api"},Object(a.b)("h3",{id:"file_upload"},"file_upload ",Object(a.b)("a",{name:"h2o_wave.ui.file_upload"})),Object(a.b)("div",{className:"api__body"},Object(a.b)("div",{className:"api__signature"},"def ",Object(a.b)("span",{class:"ident"},"file_upload"),"(name:\xa0str, label:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, multiple:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, file_extensions:\xa0Union[List[str],\xa0NoneType]\xa0=\xa0None, max_file_size:\xa0Union[float,\xa0NoneType]\xa0=\xa0None, max_size:\xa0Union[float,\xa0NoneType]\xa0=\xa0None, height:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, visible:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, tooltip:\xa0Union[str,\xa0NoneType]\xa0=\xa0None) \u2011>\xa0",Object(a.b)("a",{title:"h2o_wave.types.Component",href:"types#h2o_wave.types.Component"},"Component")),Object(a.b)("div",{className:"api__description"},Object(a.b)("p",null,"Create a file upload component. A file upload component allows a user to browse, select and upload one or more files."),Object(a.b)("h5",{id:"args"},"Args"),Object(a.b)("dl",null,Object(a.b)("dt",null,Object(a.b)("code",null,"name")),Object(a.b)("dd",null,"An identifying name for this component."),Object(a.b)("dt",null,Object(a.b)("code",null,"label")),Object(a.b)("dd",null,"Text to be displayed alongside the component."),Object(a.b)("dt",null,Object(a.b)("code",null,"multiple")),Object(a.b)("dd",null,"True if the component should allow multiple files to be uploaded."),Object(a.b)("dt",null,Object(a.b)("code",null,"file_extensions")),Object(a.b)("dd",null,"List of allowed file extensions, e.g. ",Object(a.b)("code",null,"pdf"),", ",Object(a.b)("code",null,"docx"),", etc."),Object(a.b)("dt",null,Object(a.b)("code",null,"max_file_size")),Object(a.b)("dd",null,"Maximum allowed size (Mb) per file. Defaults to no limit."),Object(a.b)("dt",null,Object(a.b)("code",null,"max_size")),Object(a.b)("dd",null,"Maximum allowed size (Mb) for all files combined. Defaults to no limit."),Object(a.b)("dt",null,Object(a.b)("code",null,"height")),Object(a.b)("dd",null,"The height of the file upload, e.g. '400px', '50%', etc."),Object(a.b)("dt",null,Object(a.b)("code",null,"visible")),Object(a.b)("dd",null,"True if the component should be visible. Defaults to true."),Object(a.b)("dt",null,Object(a.b)("code",null,"tooltip")),Object(a.b)("dd",null,"An optional tooltip message displayed when a user clicks the help icon to the right of the component.")),Object(a.b)("h5",{id:"returns"},"Returns"),Object(a.b)("p",null,"A ",Object(a.b)("code",null,Object(a.b)("a",{title:"h2o_wave.types.FileUpload",href:"types#h2o_wave.types.FileUpload"},"FileUpload"))," instance.")))),Object(a.b)("div",{className:"api"},Object(a.b)("h3",{id:"flex_card"},"flex_card ",Object(a.b)("a",{name:"h2o_wave.ui.flex_card"})),Object(a.b)("div",{className:"api__body"},Object(a.b)("div",{className:"api__signature"},"def ",Object(a.b)("span",{class:"ident"},"flex_card"),"(box:\xa0str, item_view:\xa0str, item_props:\xa0Union[dict,\xa0str], data:\xa0Union[",Object(a.b)("a",{title:"h2o_wave.core.Data",href:"core#h2o_wave.core.Data"},"Data"),",\xa0str], direction:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, justify:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, align:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, wrap:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, commands:\xa0Union[List[",Object(a.b)("a",{title:"h2o_wave.types.Command",href:"types#h2o_wave.types.Command"},"Command"),"],\xa0NoneType]\xa0=\xa0None) \u2011>\xa0",Object(a.b)("a",{title:"h2o_wave.types.FlexCard",href:"types#h2o_wave.types.FlexCard"},"FlexCard")),Object(a.b)("div",{className:"api__description"},Object(a.b)("p",null,"EXPERIMENTAL. DO NOT USE. Create a card containing other cards laid out using a one-dimensional model with flexible alignemnt and wrapping capabilities."),Object(a.b)("h5",{id:"args"},"Args"),Object(a.b)("dl",null,Object(a.b)("dt",null,Object(a.b)("code",null,"box")),Object(a.b)("dd",null,"A string indicating how to place this component on the page."),Object(a.b)("dt",null,Object(a.b)("code",null,"item_view")),Object(a.b)("dd",null,"The child card type."),Object(a.b)("dt",null,Object(a.b)("code",null,"item_props")),Object(a.b)("dd",null,"The child card properties."),Object(a.b)("dt",null,Object(a.b)("code",null,"data")),Object(a.b)("dd",null,"Data for this card."),Object(a.b)("dt",null,Object(a.b)("code",null,"direction")),Object(a.b)("dd",null,"Layout direction. One of 'horizontal', 'vertical'."),Object(a.b)("dt",null,Object(a.b)("code",null,"justify")),Object(a.b)("dd",null,"Layout strategy for main axis. One of 'start', 'end', 'center', 'between', 'around'."),Object(a.b)("dt",null,Object(a.b)("code",null,"align")),Object(a.b)("dd",null,"Layout strategy for cross axis. One of 'start', 'end', 'center', 'baseline', 'stretch'."),Object(a.b)("dt",null,Object(a.b)("code",null,"wrap")),Object(a.b)("dd",null,"Wrapping strategy. One of 'start', 'end', 'center', 'between', 'around', 'stretch'."),Object(a.b)("dt",null,Object(a.b)("code",null,"commands")),Object(a.b)("dd",null,"Contextual menu commands for this component.")),Object(a.b)("h5",{id:"returns"},"Returns"),Object(a.b)("p",null,"A ",Object(a.b)("code",null,Object(a.b)("a",{title:"h2o_wave.types.FlexCard",href:"types#h2o_wave.types.FlexCard"},"FlexCard"))," instance.")))),Object(a.b)("div",{className:"api"},Object(a.b)("h3",{id:"form_card"},"form_card ",Object(a.b)("a",{name:"h2o_wave.ui.form_card"})),Object(a.b)("div",{className:"api__body"},Object(a.b)("div",{className:"api__signature"},"def ",Object(a.b)("span",{class:"ident"},"form_card"),"(box:\xa0str, items:\xa0Union[List[",Object(a.b)("a",{title:"h2o_wave.types.Component",href:"types#h2o_wave.types.Component"},"Component"),"],\xa0str], commands:\xa0Union[List[",Object(a.b)("a",{title:"h2o_wave.types.Command",href:"types#h2o_wave.types.Command"},"Command"),"],\xa0NoneType]\xa0=\xa0None) \u2011>\xa0",Object(a.b)("a",{title:"h2o_wave.types.FormCard",href:"types#h2o_wave.types.FormCard"},"FormCard")),Object(a.b)("div",{className:"api__description"},Object(a.b)("p",null,"Create a form."),Object(a.b)("h5",{id:"args"},"Args"),Object(a.b)("dl",null,Object(a.b)("dt",null,Object(a.b)("code",null,"box")),Object(a.b)("dd",null,"A string indicating how to place this component on the page."),Object(a.b)("dt",null,Object(a.b)("code",null,"items")),Object(a.b)("dd",null,"The components in this form."),Object(a.b)("dt",null,Object(a.b)("code",null,"commands")),Object(a.b)("dd",null,"Contextual menu commands for this component.")),Object(a.b)("h5",{id:"returns"},"Returns"),Object(a.b)("p",null,"A ",Object(a.b)("code",null,Object(a.b)("a",{title:"h2o_wave.types.FormCard",href:"types#h2o_wave.types.FormCard"},"FormCard"))," instance.")))),Object(a.b)("div",{className:"api"},Object(a.b)("h3",{id:"frame"},"frame ",Object(a.b)("a",{name:"h2o_wave.ui.frame"})),Object(a.b)("div",{className:"api__body"},Object(a.b)("div",{className:"api__signature"},"def ",Object(a.b)("span",{class:"ident"},"frame"),"(path:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, content:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, width:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, height:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, name:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, visible:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None) \u2011>\xa0",Object(a.b)("a",{title:"h2o_wave.types.Component",href:"types#h2o_wave.types.Component"},"Component")),Object(a.b)("div",{className:"api__description"},Object(a.b)("p",null,"Create a new inline frame (an ",Object(a.b)("code",null,"iframe"),")."),Object(a.b)("h5",{id:"args"},"Args"),Object(a.b)("dl",null,Object(a.b)("dt",null,Object(a.b)("code",null,"path")),Object(a.b)("dd",null,"The path or URL of the web page, e.g. ",Object(a.b)("code",null,"/foo.html")," or ",Object(a.b)("code",null,"http://example.com/foo.html")),Object(a.b)("dt",null,Object(a.b)("code",null,"content")),Object(a.b)("dd",null,"The HTML content of the page. A string containing ",Object(a.b)("code",null,"..."),"."),Object(a.b)("dt",null,Object(a.b)("code",null,"width")),Object(a.b)("dd",null,"The width of the frame, e.g. ",Object(a.b)("code",null,"200px"),", ",Object(a.b)("code",null,"50%"),", etc. Defaults to ",Object(a.b)("code",null,"100%"),"."),Object(a.b)("dt",null,Object(a.b)("code",null,"height")),Object(a.b)("dd",null,"The height of the frame, e.g. ",Object(a.b)("code",null,"200px"),", ",Object(a.b)("code",null,"50%"),", etc. Defaults to ",Object(a.b)("code",null,"150px"),"."),Object(a.b)("dt",null,Object(a.b)("code",null,"name")),Object(a.b)("dd",null,"An identifying name for this component."),Object(a.b)("dt",null,Object(a.b)("code",null,"visible")),Object(a.b)("dd",null,"True if the component should be visible. Defaults to true.")),Object(a.b)("h5",{id:"returns"},"Returns"),Object(a.b)("p",null,"A ",Object(a.b)("code",null,Object(a.b)("a",{title:"h2o_wave.types.Frame",href:"types#h2o_wave.types.Frame"},"Frame"))," instance.")))),Object(a.b)("div",{className:"api"},Object(a.b)("h3",{id:"frame_card"},"frame_card ",Object(a.b)("a",{name:"h2o_wave.ui.frame_card"})),Object(a.b)("div",{className:"api__body"},Object(a.b)("div",{className:"api__signature"},"def ",Object(a.b)("span",{class:"ident"},"frame_card"),"(box:\xa0str, title:\xa0str, path:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, content:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, commands:\xa0Union[List[",Object(a.b)("a",{title:"h2o_wave.types.Command",href:"types#h2o_wave.types.Command"},"Command"),"],\xa0NoneType]\xa0=\xa0None) \u2011>\xa0",Object(a.b)("a",{title:"h2o_wave.types.FrameCard",href:"types#h2o_wave.types.FrameCard"},"FrameCard")),Object(a.b)("div",{className:"api__description"},Object(a.b)("p",null,"Render a card containing a HTML page inside an inline frame (an ",Object(a.b)("code",null,"iframe"),")."),Object(a.b)("p",null,"Either a path or content can be provided as arguments."),Object(a.b)("h5",{id:"args"},"Args"),Object(a.b)("dl",null,Object(a.b)("dt",null,Object(a.b)("code",null,"box")),Object(a.b)("dd",null,"A string indicating how to place this component on the page."),Object(a.b)("dt",null,Object(a.b)("code",null,"title")),Object(a.b)("dd",null,"The title for this card."),Object(a.b)("dt",null,Object(a.b)("code",null,"path")),Object(a.b)("dd",null,"The path or URL of the web page, e.g. ",Object(a.b)("code",null,"/foo.html")," or ",Object(a.b)("code",null,"http://example.com/foo.html")),Object(a.b)("dt",null,Object(a.b)("code",null,"content")),Object(a.b)("dd",null,"The HTML content of the page. A string containing ",Object(a.b)("code",null,"...")),Object(a.b)("dt",null,Object(a.b)("code",null,"commands")),Object(a.b)("dd",null,"Contextual menu commands for this component.")),Object(a.b)("h5",{id:"returns"},"Returns"),Object(a.b)("p",null,"A ",Object(a.b)("code",null,Object(a.b)("a",{title:"h2o_wave.types.FrameCard",href:"types#h2o_wave.types.FrameCard"},"FrameCard"))," instance.")))),Object(a.b)("div",{className:"api"},Object(a.b)("h3",{id:"graphics_card"},"graphics_card ",Object(a.b)("a",{name:"h2o_wave.ui.graphics_card"})),Object(a.b)("div",{className:"api__body"},Object(a.b)("div",{className:"api__signature"},"def ",Object(a.b)("span",{class:"ident"},"graphics_card"),"(box:\xa0str, view_box:\xa0str, stage:\xa0Union[List[dict],\xa0str,\xa0NoneType]\xa0=\xa0None, scene:\xa0Union[",Object(a.b)("a",{title:"h2o_wave.core.Data",href:"core#h2o_wave.core.Data"},"Data"),",\xa0str,\xa0NoneType]\xa0=\xa0None, width:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, height:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, commands:\xa0Union[List[",Object(a.b)("a",{title:"h2o_wave.types.Command",href:"types#h2o_wave.types.Command"},"Command"),"],\xa0NoneType]\xa0=\xa0None) \u2011>\xa0",Object(a.b)("a",{title:"h2o_wave.types.GraphicsCard",href:"types#h2o_wave.types.GraphicsCard"},"GraphicsCard")),Object(a.b)("div",{className:"api__description"},Object(a.b)("p",null,"Create a card for displaying vector graphics."),Object(a.b)("h5",{id:"args"},"Args"),Object(a.b)("dl",null,Object(a.b)("dt",null,Object(a.b)("code",null,"box")),Object(a.b)("dd",null,"A string indicating how to place this component on the page."),Object(a.b)("dt",null,Object(a.b)("code",null,"view_box")),Object(a.b)("dd",null,"The position and dimension of the SVG viewport, in user space. A space-separated list of four numbers: min-x, min-y, width and height. For example, '0 0 400 300'. See: ",Object(a.b)("a",{href:"https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/viewBox"},"https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/viewBox")),Object(a.b)("dt",null,Object(a.b)("code",null,"stage")),Object(a.b)("dd",null,"Background layer for rendering static SVG elements. Must be packed to conserve memory."),Object(a.b)("dt",null,Object(a.b)("code",null,"scene")),Object(a.b)("dd",null,"Foreground layer for rendering dynamic SVG elements."),Object(a.b)("dt",null,Object(a.b)("code",null,"width")),Object(a.b)("dd",null,"The displayed width of the rectangular viewport. (Not the width of its coordinate system.)"),Object(a.b)("dt",null,Object(a.b)("code",null,"height")),Object(a.b)("dd",null,"The displayed height of the rectangular viewport. (Not the height of its coordinate system.)"),Object(a.b)("dt",null,Object(a.b)("code",null,"commands")),Object(a.b)("dd",null,"Contextual menu commands for this component.")),Object(a.b)("h5",{id:"returns"},"Returns"),Object(a.b)("p",null,"A ",Object(a.b)("code",null,Object(a.b)("a",{title:"h2o_wave.types.GraphicsCard",href:"types#h2o_wave.types.GraphicsCard"},"GraphicsCard"))," instance.")))),Object(a.b)("div",{className:"api"},Object(a.b)("h3",{id:"grid_card"},"grid_card ",Object(a.b)("a",{name:"h2o_wave.ui.grid_card"})),Object(a.b)("div",{className:"api__body"},Object(a.b)("div",{className:"api__signature"},"def ",Object(a.b)("span",{class:"ident"},"grid_card"),"(box:\xa0str, title:\xa0str, cells:\xa0Union[",Object(a.b)("a",{title:"h2o_wave.core.Data",href:"core#h2o_wave.core.Data"},"Data"),",\xa0str], data:\xa0Union[",Object(a.b)("a",{title:"h2o_wave.core.Data",href:"core#h2o_wave.core.Data"},"Data"),",\xa0str], commands:\xa0Union[List[",Object(a.b)("a",{title:"h2o_wave.types.Command",href:"types#h2o_wave.types.Command"},"Command"),"],\xa0NoneType]\xa0=\xa0None) \u2011>\xa0",Object(a.b)("a",{title:"h2o_wave.types.GridCard",href:"types#h2o_wave.types.GridCard"},"GridCard")),Object(a.b)("div",{className:"api__description"},Object(a.b)("p",null,"EXPERIMENTAL. DO NOT USE."),Object(a.b)("h5",{id:"args"},"Args"),Object(a.b)("dl",null,Object(a.b)("dt",null,Object(a.b)("code",null,"box")),Object(a.b)("dd",null,"A string indicating how to place this component on the page."),Object(a.b)("dt",null,Object(a.b)("code",null,"title")),Object(a.b)("dd",null,"EXPERIMENTAL. DO NOT USE."),Object(a.b)("dt",null,Object(a.b)("code",null,"cells")),Object(a.b)("dd",null,"EXPERIMENTAL. DO NOT USE."),Object(a.b)("dt",null,Object(a.b)("code",null,"data")),Object(a.b)("dd",null,"EXPERIMENTAL. DO NOT USE."),Object(a.b)("dt",null,Object(a.b)("code",null,"commands")),Object(a.b)("dd",null,"Contextual menu commands for this component.")),Object(a.b)("h5",{id:"returns"},"Returns"),Object(a.b)("p",null,"A ",Object(a.b)("code",null,Object(a.b)("a",{title:"h2o_wave.types.GridCard",href:"types#h2o_wave.types.GridCard"},"GridCard"))," instance.")))),Object(a.b)("div",{className:"api"},Object(a.b)("h3",{id:"header_card"},"header_card ",Object(a.b)("a",{name:"h2o_wave.ui.header_card"})),Object(a.b)("div",{className:"api__body"},Object(a.b)("div",{className:"api__signature"},"def ",Object(a.b)("span",{class:"ident"},"header_card"),"(box:\xa0str, title:\xa0str, subtitle:\xa0str, icon:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, icon_color:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, commands:\xa0Union[List[",Object(a.b)("a",{title:"h2o_wave.types.Command",href:"types#h2o_wave.types.Command"},"Command"),"],\xa0NoneType]\xa0=\xa0None) \u2011>\xa0",Object(a.b)("a",{title:"h2o_wave.types.HeaderCard",href:"types#h2o_wave.types.HeaderCard"},"HeaderCard")),Object(a.b)("div",{className:"api__description"},Object(a.b)("p",null,"Render a card containing a HTML page inside an inline frame (iframe)."),Object(a.b)("p",null,"Either a path or content can be provided as arguments."),Object(a.b)("h5",{id:"args"},"Args"),Object(a.b)("dl",null,Object(a.b)("dt",null,Object(a.b)("code",null,"box")),Object(a.b)("dd",null,"A string indicating how to place this component on the page."),Object(a.b)("dt",null,Object(a.b)("code",null,"title")),Object(a.b)("dd",null,"The title."),Object(a.b)("dt",null,Object(a.b)("code",null,"subtitle")),Object(a.b)("dd",null,"The subtitle, displayed below the title."),Object(a.b)("dt",null,Object(a.b)("code",null,"icon")),Object(a.b)("dd",null,"The icon type, displayed to the left."),Object(a.b)("dt",null,Object(a.b)("code",null,"icon_color")),Object(a.b)("dd",null,"The icon's color."),Object(a.b)("dt",null,Object(a.b)("code",null,"commands")),Object(a.b)("dd",null,"Contextual menu commands for this component.")),Object(a.b)("h5",{id:"returns"},"Returns"),Object(a.b)("p",null,"A ",Object(a.b)("code",null,Object(a.b)("a",{title:"h2o_wave.types.HeaderCard",href:"types#h2o_wave.types.HeaderCard"},"HeaderCard"))," instance.")))),Object(a.b)("div",{className:"api"},Object(a.b)("h3",{id:"icon_table_cell_type"},"icon_table_cell_type ",Object(a.b)("a",{name:"h2o_wave.ui.icon_table_cell_type"})),Object(a.b)("div",{className:"api__body"},Object(a.b)("div",{className:"api__signature"},"def ",Object(a.b)("span",{class:"ident"},"icon_table_cell_type"),"(color:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, name:\xa0Union[str,\xa0NoneType]\xa0=\xa0None) \u2011>\xa0",Object(a.b)("a",{title:"h2o_wave.types.TableCellType",href:"types#h2o_wave.types.TableCellType"},"TableCellType")),Object(a.b)("div",{className:"api__description"},Object(a.b)("p",null,"Create a cell type that renders a column's cells as icons instead of plain text. If set on a column, the cell value is interpreted as the name of the icon to be displayed."),Object(a.b)("h5",{id:"args"},"Args"),Object(a.b)("dl",null,Object(a.b)("dt",null,Object(a.b)("code",null,"color")),Object(a.b)("dd",null,"Icon color."),Object(a.b)("dt",null,Object(a.b)("code",null,"name")),Object(a.b)("dd",null,"An identifying name for this component.")),Object(a.b)("h5",{id:"returns"},"Returns"),Object(a.b)("p",null,"A ",Object(a.b)("code",null,Object(a.b)("a",{title:"h2o_wave.types.IconTableCellType",href:"types#h2o_wave.types.IconTableCellType"},"IconTableCellType"))," instance.")))),Object(a.b)("div",{className:"api"},Object(a.b)("h3",{id:"image_card"},"image_card ",Object(a.b)("a",{name:"h2o_wave.ui.image_card"})),Object(a.b)("div",{className:"api__body"},Object(a.b)("div",{className:"api__signature"},"def ",Object(a.b)("span",{class:"ident"},"image_card"),"(box:\xa0str, title:\xa0str, type:\xa0str, image:\xa0str, data:\xa0Union[dict,\xa0str,\xa0NoneType]\xa0=\xa0None, commands:\xa0Union[List[",Object(a.b)("a",{title:"h2o_wave.types.Command",href:"types#h2o_wave.types.Command"},"Command"),"],\xa0NoneType]\xa0=\xa0None) \u2011>\xa0",Object(a.b)("a",{title:"h2o_wave.types.ImageCard",href:"types#h2o_wave.types.ImageCard"},"ImageCard")),Object(a.b)("div",{className:"api__description"},Object(a.b)("p",null,"Create a card that displays a base64-encoded image."),Object(a.b)("h5",{id:"args"},"Args"),Object(a.b)("dl",null,Object(a.b)("dt",null,Object(a.b)("code",null,"box")),Object(a.b)("dd",null,"A string indicating how to place this component on the page."),Object(a.b)("dt",null,Object(a.b)("code",null,"title")),Object(a.b)("dd",null,"The card's title."),Object(a.b)("dt",null,Object(a.b)("code",null,"type")),Object(a.b)("dd",null,"The image MIME subtype. One of ",Object(a.b)("code",null,"apng"),", ",Object(a.b)("code",null,"bmp"),", ",Object(a.b)("code",null,"gif"),", ",Object(a.b)("code",null,"x-icon"),", ",Object(a.b)("code",null,"jpeg"),", ",Object(a.b)("code",null,"png"),", ",Object(a.b)("code",null,"webp"),"."),Object(a.b)("dt",null,Object(a.b)("code",null,"image")),Object(a.b)("dd",null,"Image data, base64-encoded."),Object(a.b)("dt",null,Object(a.b)("code",null,"data")),Object(a.b)("dd",null,"Data for this card."),Object(a.b)("dt",null,Object(a.b)("code",null,"commands")),Object(a.b)("dd",null,"Contextual menu commands for this component.")),Object(a.b)("h5",{id:"returns"},"Returns"),Object(a.b)("p",null,"A ",Object(a.b)("code",null,Object(a.b)("a",{title:"h2o_wave.types.ImageCard",href:"types#h2o_wave.types.ImageCard"},"ImageCard"))," instance.")))),Object(a.b)("div",{className:"api"},Object(a.b)("h3",{id:"label"},"label ",Object(a.b)("a",{name:"h2o_wave.ui.label"})),Object(a.b)("div",{className:"api__body"},Object(a.b)("div",{className:"api__signature"},"def ",Object(a.b)("span",{class:"ident"},"label"),"(label:\xa0str, required:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, disabled:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, visible:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, tooltip:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, name:\xa0Union[str,\xa0NoneType]\xa0=\xa0None) \u2011>\xa0",Object(a.b)("a",{title:"h2o_wave.types.Component",href:"types#h2o_wave.types.Component"},"Component")),Object(a.b)("div",{className:"api__description"},Object(a.b)("p",null,"Create a label."),Object(a.b)("p",null,"Labels give a name or title to a component or group of components. Labels should be in close proximity to the component or group they are paired with. Some components, such as textboxes, dropdowns, or toggles, already have labels incorporated, but other components may optionally add a Label if it helps inform the user of the component\u2019s purpose."),Object(a.b)("h5",{id:"args"},"Args"),Object(a.b)("dl",null,Object(a.b)("dt",null,Object(a.b)("code",null,"label")),Object(a.b)("dd",null,"The text displayed on the label."),Object(a.b)("dt",null,Object(a.b)("code",null,"required")),Object(a.b)("dd",null,"True if the field is required."),Object(a.b)("dt",null,Object(a.b)("code",null,"disabled")),Object(a.b)("dd",null,"True if the label should be disabled."),Object(a.b)("dt",null,Object(a.b)("code",null,"visible")),Object(a.b)("dd",null,"True if the component should be visible. Defaults to true."),Object(a.b)("dt",null,Object(a.b)("code",null,"tooltip")),Object(a.b)("dd",null,"An optional tooltip message displayed when a user clicks the help icon to the right of the component."),Object(a.b)("dt",null,Object(a.b)("code",null,"name")),Object(a.b)("dd",null,"An identifying name for this component.")),Object(a.b)("h5",{id:"returns"},"Returns"),Object(a.b)("p",null,"A ",Object(a.b)("code",null,Object(a.b)("a",{title:"h2o_wave.types.Label",href:"types#h2o_wave.types.Label"},"Label"))," instance.")))),Object(a.b)("div",{className:"api"},Object(a.b)("h3",{id:"large_bar_stat_card"},"large_bar_stat_card ",Object(a.b)("a",{name:"h2o_wave.ui.large_bar_stat_card"})),Object(a.b)("div",{className:"api__body"},Object(a.b)("div",{className:"api__signature"},"def ",Object(a.b)("span",{class:"ident"},"large_bar_stat_card"),"(box:\xa0str, title:\xa0str, caption:\xa0str, value:\xa0str, aux_value:\xa0str, value_caption:\xa0str, aux_value_caption:\xa0str, progress:\xa0float, plot_color:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, data:\xa0Union[dict,\xa0str,\xa0NoneType]\xa0=\xa0None, commands:\xa0Union[List[",Object(a.b)("a",{title:"h2o_wave.types.Command",href:"types#h2o_wave.types.Command"},"Command"),"],\xa0NoneType]\xa0=\xa0None) \u2011>\xa0",Object(a.b)("a",{title:"h2o_wave.types.LargeBarStatCard",href:"types#h2o_wave.types.LargeBarStatCard"},"LargeBarStatCard")),Object(a.b)("div",{className:"api__description"},Object(a.b)("p",null,"Create a large captioned card displaying a primary value, an auxiliary value and a progress bar, with captions for each value."),Object(a.b)("h5",{id:"args"},"Args"),Object(a.b)("dl",null,Object(a.b)("dt",null,Object(a.b)("code",null,"box")),Object(a.b)("dd",null,"A string indicating how to place this component on the page."),Object(a.b)("dt",null,Object(a.b)("code",null,"title")),Object(a.b)("dd",null,"The card's title."),Object(a.b)("dt",null,Object(a.b)("code",null,"caption")),Object(a.b)("dd",null,"The card's caption."),Object(a.b)("dt",null,Object(a.b)("code",null,"value")),Object(a.b)("dd",null,"The primary value displayed."),Object(a.b)("dt",null,Object(a.b)("code",null,"aux_value")),Object(a.b)("dd",null,"The auxiliary value, typically a target value."),Object(a.b)("dt",null,Object(a.b)("code",null,"value_caption")),Object(a.b)("dd",null,"The caption displayed below the primary value."),Object(a.b)("dt",null,Object(a.b)("code",null,"aux_value_caption")),Object(a.b)("dd",null,"The caption displayed below the auxiliary value."),Object(a.b)("dt",null,Object(a.b)("code",null,"progress")),Object(a.b)("dd",null,"The value of the progress bar, between 0 and 1."),Object(a.b)("dt",null,Object(a.b)("code",null,"plot_color")),Object(a.b)("dd",null,"The color of the progress bar."),Object(a.b)("dt",null,Object(a.b)("code",null,"data")),Object(a.b)("dd",null,"Data for this card."),Object(a.b)("dt",null,Object(a.b)("code",null,"commands")),Object(a.b)("dd",null,"Contextual menu commands for this component.")),Object(a.b)("h5",{id:"returns"},"Returns"),Object(a.b)("p",null,"A ",Object(a.b)("code",null,Object(a.b)("a",{title:"h2o_wave.types.LargeBarStatCard",href:"types#h2o_wave.types.LargeBarStatCard"},"LargeBarStatCard"))," instance.")))),Object(a.b)("div",{className:"api"},Object(a.b)("h3",{id:"large_stat_card"},"large_stat_card ",Object(a.b)("a",{name:"h2o_wave.ui.large_stat_card"})),Object(a.b)("div",{className:"api__body"},Object(a.b)("div",{className:"api__signature"},"def ",Object(a.b)("span",{class:"ident"},"large_stat_card"),"(box:\xa0str, title:\xa0str, value:\xa0str, aux_value:\xa0str, caption:\xa0str, data:\xa0Union[dict,\xa0str,\xa0NoneType]\xa0=\xa0None, commands:\xa0Union[List[",Object(a.b)("a",{title:"h2o_wave.types.Command",href:"types#h2o_wave.types.Command"},"Command"),"],\xa0NoneType]\xa0=\xa0None) \u2011>\xa0",Object(a.b)("a",{title:"h2o_wave.types.LargeStatCard",href:"types#h2o_wave.types.LargeStatCard"},"LargeStatCard")),Object(a.b)("div",{className:"api__description"},Object(a.b)("p",null,"Create a stat card displaying a primary value, an auxiliary value and a caption."),Object(a.b)("h5",{id:"args"},"Args"),Object(a.b)("dl",null,Object(a.b)("dt",null,Object(a.b)("code",null,"box")),Object(a.b)("dd",null,"A string indicating how to place this component on the page."),Object(a.b)("dt",null,Object(a.b)("code",null,"title")),Object(a.b)("dd",null,"The card's title."),Object(a.b)("dt",null,Object(a.b)("code",null,"value")),Object(a.b)("dd",null,"The primary value displayed."),Object(a.b)("dt",null,Object(a.b)("code",null,"aux_value")),Object(a.b)("dd",null,"The auxiliary value displayed next to the primary value."),Object(a.b)("dt",null,Object(a.b)("code",null,"caption")),Object(a.b)("dd",null,"The caption displayed below the primary value."),Object(a.b)("dt",null,Object(a.b)("code",null,"data")),Object(a.b)("dd",null,"Data for this card."),Object(a.b)("dt",null,Object(a.b)("code",null,"commands")),Object(a.b)("dd",null,"Contextual menu commands for this component.")),Object(a.b)("h5",{id:"returns"},"Returns"),Object(a.b)("p",null,"A ",Object(a.b)("code",null,Object(a.b)("a",{title:"h2o_wave.types.LargeStatCard",href:"types#h2o_wave.types.LargeStatCard"},"LargeStatCard"))," instance.")))),Object(a.b)("div",{className:"api"},Object(a.b)("h3",{id:"link"},"link ",Object(a.b)("a",{name:"h2o_wave.ui.link"})),Object(a.b)("div",{className:"api__body"},Object(a.b)("div",{className:"api__signature"},"def ",Object(a.b)("span",{class:"ident"},"link"),"(label:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, path:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, disabled:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, download:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, button:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, visible:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, tooltip:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, name:\xa0Union[str,\xa0NoneType]\xa0=\xa0None) \u2011>\xa0",Object(a.b)("a",{title:"h2o_wave.types.Component",href:"types#h2o_wave.types.Component"},"Component")),Object(a.b)("div",{className:"api__description"},Object(a.b)("p",null,"Create a hyperlink."),Object(a.b)("p",null,"Hyperlinks can be internal or external. Internal hyperlinks have paths that begin with a ",Object(a.b)("code",null,"/")," and point to URLs within the Q UI. All other kinds of paths are treated as external hyperlinks."),Object(a.b)("h5",{id:"args"},"Args"),Object(a.b)("dl",null,Object(a.b)("dt",null,Object(a.b)("code",null,"label")),Object(a.b)("dd",null,"The text to be displayed. If blank, the ",Object(a.b)("code",null,"path")," is used as the label."),Object(a.b)("dt",null,Object(a.b)("code",null,"path")),Object(a.b)("dd",null,"The path or URL to link to."),Object(a.b)("dt",null,Object(a.b)("code",null,"disabled")),Object(a.b)("dd",null,"True if the link should be disabled."),Object(a.b)("dt",null,Object(a.b)("code",null,"download")),Object(a.b)("dd",null,"True if the link should be used for file download."),Object(a.b)("dt",null,Object(a.b)("code",null,"button")),Object(a.b)("dd",null,"True if the link should be rendered as a button."),Object(a.b)("dt",null,Object(a.b)("code",null,"visible")),Object(a.b)("dd",null,"True if the component should be visible. Defaults to true."),Object(a.b)("dt",null,Object(a.b)("code",null,"tooltip")),Object(a.b)("dd",null,"An optional tooltip message displayed when a user clicks the help icon to the right of the component."),Object(a.b)("dt",null,Object(a.b)("code",null,"name")),Object(a.b)("dd",null,"An identifying name for this component.")),Object(a.b)("h5",{id:"returns"},"Returns"),Object(a.b)("p",null,"A ",Object(a.b)("code",null,Object(a.b)("a",{title:"h2o_wave.types.Link",href:"types#h2o_wave.types.Link"},"Link"))," instance.")))),Object(a.b)("div",{className:"api"},Object(a.b)("h3",{id:"list_card"},"list_card ",Object(a.b)("a",{name:"h2o_wave.ui.list_card"})),Object(a.b)("div",{className:"api__body"},Object(a.b)("div",{className:"api__signature"},"def ",Object(a.b)("span",{class:"ident"},"list_card"),"(box:\xa0str, title:\xa0str, item_view:\xa0str, item_props:\xa0Union[dict,\xa0str], data:\xa0Union[",Object(a.b)("a",{title:"h2o_wave.core.Data",href:"core#h2o_wave.core.Data"},"Data"),",\xa0str], commands:\xa0Union[List[",Object(a.b)("a",{title:"h2o_wave.types.Command",href:"types#h2o_wave.types.Command"},"Command"),"],\xa0NoneType]\xa0=\xa0None) \u2011>\xa0",Object(a.b)("a",{title:"h2o_wave.types.ListCard",href:"types#h2o_wave.types.ListCard"},"ListCard")),Object(a.b)("div",{className:"api__description"},Object(a.b)("p",null,"EXPERIMENTAL. DO NOT USE. Create a card containing other cards laid out in the form of a list (vertically, top-to-bottom)."),Object(a.b)("h5",{id:"args"},"Args"),Object(a.b)("dl",null,Object(a.b)("dt",null,Object(a.b)("code",null,"box")),Object(a.b)("dd",null,"A string indicating how to place this component on the page."),Object(a.b)("dt",null,Object(a.b)("code",null,"title")),Object(a.b)("dd",null,"The title for this card."),Object(a.b)("dt",null,Object(a.b)("code",null,"item_view")),Object(a.b)("dd",null,"The child card type."),Object(a.b)("dt",null,Object(a.b)("code",null,"item_props")),Object(a.b)("dd",null,"The child card properties."),Object(a.b)("dt",null,Object(a.b)("code",null,"data")),Object(a.b)("dd",null,"Data for this card."),Object(a.b)("dt",null,Object(a.b)("code",null,"commands")),Object(a.b)("dd",null,"Contextual menu commands for this component.")),Object(a.b)("h5",{id:"returns"},"Returns"),Object(a.b)("p",null,"A ",Object(a.b)("code",null,Object(a.b)("a",{title:"h2o_wave.types.ListCard",href:"types#h2o_wave.types.ListCard"},"ListCard"))," instance.")))),Object(a.b)("div",{className:"api"},Object(a.b)("h3",{id:"list_item1_card"},"list_item1_card ",Object(a.b)("a",{name:"h2o_wave.ui.list_item1_card"})),Object(a.b)("div",{className:"api__body"},Object(a.b)("div",{className:"api__signature"},"def ",Object(a.b)("span",{class:"ident"},"list_item1_card"),"(box:\xa0str, title:\xa0str, caption:\xa0str, value:\xa0str, aux_value:\xa0str, data:\xa0Union[dict,\xa0str], commands:\xa0Union[List[",Object(a.b)("a",{title:"h2o_wave.types.Command",href:"types#h2o_wave.types.Command"},"Command"),"],\xa0NoneType]\xa0=\xa0None) \u2011>\xa0",Object(a.b)("a",{title:"h2o_wave.types.ListItem1Card",href:"types#h2o_wave.types.ListItem1Card"},"ListItem1Card")),Object(a.b)("div",{className:"api__description"},Object(a.b)("p",null,"EXPERIMENTAL. DO NOT USE."),Object(a.b)("h5",{id:"args"},"Args"),Object(a.b)("dl",null,Object(a.b)("dt",null,Object(a.b)("code",null,"box")),Object(a.b)("dd",null,"A string indicating how to place this component on the page."),Object(a.b)("dt",null,Object(a.b)("code",null,"title")),Object(a.b)("dd",null,"EXPERIMENTAL. DO NOT USE."),Object(a.b)("dt",null,Object(a.b)("code",null,"caption")),Object(a.b)("dd",null,"EXPERIMENTAL. DO NOT USE."),Object(a.b)("dt",null,Object(a.b)("code",null,"value")),Object(a.b)("dd",null,"EXPERIMENTAL. DO NOT USE."),Object(a.b)("dt",null,Object(a.b)("code",null,"aux_value")),Object(a.b)("dd",null,"EXPERIMENTAL. DO NOT USE."),Object(a.b)("dt",null,Object(a.b)("code",null,"data")),Object(a.b)("dd",null,"EXPERIMENTAL. DO NOT USE."),Object(a.b)("dt",null,Object(a.b)("code",null,"commands")),Object(a.b)("dd",null,"Contextual menu commands for this component.")),Object(a.b)("h5",{id:"returns"},"Returns"),Object(a.b)("p",null,"A ",Object(a.b)("code",null,Object(a.b)("a",{title:"h2o_wave.types.ListItem1Card",href:"types#h2o_wave.types.ListItem1Card"},"ListItem1Card"))," instance.")))),Object(a.b)("div",{className:"api"},Object(a.b)("h3",{id:"mark"},"mark ",Object(a.b)("a",{name:"h2o_wave.ui.mark"})),Object(a.b)("div",{className:"api__body"},Object(a.b)("div",{className:"api__signature"},"def ",Object(a.b)("span",{class:"ident"},"mark"),"(coord:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, type:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, x:\xa0Union[str,\xa0float,\xa0int,\xa0NoneType]\xa0=\xa0None, x0:\xa0Union[str,\xa0float,\xa0int,\xa0NoneType]\xa0=\xa0None, x1:\xa0Union[str,\xa0float,\xa0int,\xa0NoneType]\xa0=\xa0None, x2:\xa0Union[str,\xa0float,\xa0int,\xa0NoneType]\xa0=\xa0None, x_min:\xa0Union[float,\xa0NoneType]\xa0=\xa0None, x_max:\xa0Union[float,\xa0NoneType]\xa0=\xa0None, x_nice:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, x_scale:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, x_title:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, y:\xa0Union[str,\xa0float,\xa0int,\xa0NoneType]\xa0=\xa0None, y0:\xa0Union[str,\xa0float,\xa0int,\xa0NoneType]\xa0=\xa0None, y1:\xa0Union[str,\xa0float,\xa0int,\xa0NoneType]\xa0=\xa0None, y2:\xa0Union[str,\xa0float,\xa0int,\xa0NoneType]\xa0=\xa0None, y_min:\xa0Union[float,\xa0NoneType]\xa0=\xa0None, y_max:\xa0Union[float,\xa0NoneType]\xa0=\xa0None, y_nice:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, y_scale:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, y_title:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, color:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, color_range:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, color_domain:\xa0Union[List[str],\xa0NoneType]\xa0=\xa0None, shape:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, shape_range:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, size:\xa0Union[str,\xa0float,\xa0int,\xa0NoneType]\xa0=\xa0None, size_range:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, stack:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, dodge:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, curve:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, fill_color:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, fill_opacity:\xa0Union[float,\xa0NoneType]\xa0=\xa0None, stroke_color:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, stroke_opacity:\xa0Union[float,\xa0NoneType]\xa0=\xa0None, stroke_size:\xa0Union[float,\xa0NoneType]\xa0=\xa0None, stroke_dash:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, label:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, label_offset:\xa0Union[float,\xa0NoneType]\xa0=\xa0None, label_offset_x:\xa0Union[float,\xa0NoneType]\xa0=\xa0None, label_offset_y:\xa0Union[float,\xa0NoneType]\xa0=\xa0None, label_rotation:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, label_position:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, label_overlap:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, label_fill_color:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, label_fill_opacity:\xa0Union[float,\xa0NoneType]\xa0=\xa0None, label_stroke_color:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, label_stroke_opacity:\xa0Union[float,\xa0NoneType]\xa0=\xa0None, label_stroke_size:\xa0Union[float,\xa0NoneType]\xa0=\xa0None, label_font_size:\xa0Union[float,\xa0NoneType]\xa0=\xa0None, label_font_weight:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, label_line_height:\xa0Union[float,\xa0NoneType]\xa0=\xa0None, label_align:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, ref_stroke_color:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, ref_stroke_opacity:\xa0Union[float,\xa0NoneType]\xa0=\xa0None, ref_stroke_size:\xa0Union[float,\xa0NoneType]\xa0=\xa0None, ref_stroke_dash:\xa0Union[str,\xa0NoneType]\xa0=\xa0None) \u2011>\xa0",Object(a.b)("a",{title:"h2o_wave.types.Mark",href:"types#h2o_wave.types.Mark"},"Mark")),Object(a.b)("div",{className:"api__description"},Object(a.b)("p",null,"Create a specification for a layer of graphical marks such as bars, lines, points for a plot. A plot can contain multiple such layers of marks."),Object(a.b)("h5",{id:"args"},"Args"),Object(a.b)("dl",null,Object(a.b)("dt",null,Object(a.b)("code",null,"coord")),Object(a.b)("dd",null,"Coordinate system. ",Object(a.b)("code",null,"rect")," is synonymous to ",Object(a.b)("code",null,"cartesian"),". ",Object(a.b)("code",null,"theta")," is transposed ",Object(a.b)("code",null,"polar"),". One of 'rect', 'cartesian', 'polar', 'theta', 'helix'."),Object(a.b)("dt",null,Object(a.b)("code",null,"type")),Object(a.b)("dd",null,"Graphical geometry. One of 'interval', 'line', 'path', 'point', 'area', 'polygon', 'schema', 'edge', 'heatmap'."),Object(a.b)("dt",null,Object(a.b)("code",null,"x")),Object(a.b)("dd",null,"X field or value."),Object(a.b)("dt",null,Object(a.b)("code",null,"x0")),Object(a.b)("dd",null,"X base field or value."),Object(a.b)("dt",null,Object(a.b)("code",null,"x1")),Object(a.b)("dd",null,"X bin lower bound field or value. For histograms."),Object(a.b)("dt",null,Object(a.b)("code",null,"x2")),Object(a.b)("dd",null,"X bin upper bound field or value. For histograms."),Object(a.b)("dt",null,Object(a.b)("code",null,"x_min")),Object(a.b)("dd",null,"X axis scale minimum."),Object(a.b)("dt",null,Object(a.b)("code",null,"x_max")),Object(a.b)("dd",null,"X axis scale maximum."),Object(a.b)("dt",null,Object(a.b)("code",null,"x_nice")),Object(a.b)("dd",null,"Whether to nice X axis scale ticks."),Object(a.b)("dt",null,Object(a.b)("code",null,"x_scale")),Object(a.b)("dd",null,"X axis scale type. One of 'linear', 'cat', 'category', 'identity', 'log', 'pow', 'time', 'timeCat', 'quantize', 'quantile'."),Object(a.b)("dt",null,Object(a.b)("code",null,"x_title")),Object(a.b)("dd",null,"X axis title."),Object(a.b)("dt",null,Object(a.b)("code",null,"y")),Object(a.b)("dd",null,"Y field or value."),Object(a.b)("dt",null,Object(a.b)("code",null,"y0")),Object(a.b)("dd",null,"Y base field or value."),Object(a.b)("dt",null,Object(a.b)("code",null,"y1")),Object(a.b)("dd",null,"Y bin lower bound field or value. For histograms."),Object(a.b)("dt",null,Object(a.b)("code",null,"y2")),Object(a.b)("dd",null,"Y bin upper bound field or value. For histograms."),Object(a.b)("dt",null,Object(a.b)("code",null,"y_min")),Object(a.b)("dd",null,"Y axis scale minimum."),Object(a.b)("dt",null,Object(a.b)("code",null,"y_max")),Object(a.b)("dd",null,"Y axis scale maximum."),Object(a.b)("dt",null,Object(a.b)("code",null,"y_nice")),Object(a.b)("dd",null,"Whether to nice Y axis scale ticks."),Object(a.b)("dt",null,Object(a.b)("code",null,"y_scale")),Object(a.b)("dd",null,"Y axis scale type. One of 'linear', 'cat', 'category', 'identity', 'log', 'pow', 'time', 'timeCat', 'quantize', 'quantile'."),Object(a.b)("dt",null,Object(a.b)("code",null,"y_title")),Object(a.b)("dd",null,"Y axis title."),Object(a.b)("dt",null,Object(a.b)("code",null,"color")),Object(a.b)("dd",null,"Mark color field or value."),Object(a.b)("dt",null,Object(a.b)("code",null,"color_range")),Object(a.b)("dd",null,"Mark color range for multi-series plots. A string containing space-separated colors, e.g. ",Object(a.b)("code",null,"'#fee8c8 #fdbb84 #e34a33'")),Object(a.b)("dt",null,Object(a.b)("code",null,"color_domain")),Object(a.b)("dd",null,"The unique values in the data (labels or categories or classes) to map colors to, e.g. ",Object(a.b)("code",null,"['high', 'medium', 'low']"),". If this is not provided, the unique values are automatically inferred from the ",Object(a.b)("code",null,"color")," attribute."),Object(a.b)("dt",null,Object(a.b)("code",null,"shape")),Object(a.b)("dd",null,"Mark shape field or value for ",Object(a.b)("code",null,"point")," mark types. Possible values are 'circle', 'square', 'bowtie', 'diamond', 'hexagon', 'triangle', 'triangle-down', 'cross', 'tick', 'plus', 'hyphen', 'line'."),Object(a.b)("dt",null,Object(a.b)("code",null,"shape_range")),Object(a.b)("dd",null,"Mark shape range for multi-series plots using ",Object(a.b)("code",null,"point")," mark types. A string containing space-separated shapes, e.g. ",Object(a.b)("code",null,"'circle square diamond'")),Object(a.b)("dt",null,Object(a.b)("code",null,"size")),Object(a.b)("dd",null,"Mark size field or value."),Object(a.b)("dt",null,Object(a.b)("code",null,"size_range")),Object(a.b)("dd",null,"Mark size range. A string containing space-separated integers, e.g. ",Object(a.b)("code",null,"'4 30'")),Object(a.b)("dt",null,Object(a.b)("code",null,"stack")),Object(a.b)("dd",null,"Field to stack marks by, or 'auto' to infer."),Object(a.b)("dt",null,Object(a.b)("code",null,"dodge")),Object(a.b)("dd",null,"Field to dodge marks by, or 'auto' to infer."),Object(a.b)("dt",null,Object(a.b)("code",null,"curve")),Object(a.b)("dd",null,"Curve type for ",Object(a.b)("code",null,"line")," and ",Object(a.b)("code",null,"area")," mark types. One of 'none', 'smooth', 'step-before', 'step', 'step-after'."),Object(a.b)("dt",null,Object(a.b)("code",null,"fill_color")),Object(a.b)("dd",null,"Mark fill color."),Object(a.b)("dt",null,Object(a.b)("code",null,"fill_opacity")),Object(a.b)("dd",null,"Mark fill opacity."),Object(a.b)("dt",null,Object(a.b)("code",null,"stroke_color")),Object(a.b)("dd",null,"Mark stroke color."),Object(a.b)("dt",null,Object(a.b)("code",null,"stroke_opacity")),Object(a.b)("dd",null,"Mark stroke opacity."),Object(a.b)("dt",null,Object(a.b)("code",null,"stroke_size")),Object(a.b)("dd",null,"Mark stroke size."),Object(a.b)("dt",null,Object(a.b)("code",null,"stroke_dash")),Object(a.b)("dd",null,"Mark stroke dash style. A string containing space-separated integers that specify distances to alternately draw a line and a gap (in coordinate space units). If the number of elements in the array is odd, the elements of the array get copied and concatenated. For example, [5, 15, 25] will become [5, 15, 25, 5, 15, 25]."),Object(a.b)("dt",null,Object(a.b)("code",null,"label")),Object(a.b)("dd",null,"Label field or value."),Object(a.b)("dt",null,Object(a.b)("code",null,"label_offset")),Object(a.b)("dd",null,"Distance between label and mark."),Object(a.b)("dt",null,Object(a.b)("code",null,"label_offset_x")),Object(a.b)("dd",null,"Horizontal distance between label and mark."),Object(a.b)("dt",null,Object(a.b)("code",null,"label_offset_y")),Object(a.b)("dd",null,"Vertical distance between label and mark."),Object(a.b)("dt",null,Object(a.b)("code",null,"label_rotation")),Object(a.b)("dd",null,"Label rotation angle, in degrees, or 'none' to disable automatic rotation. The default behavior is 'auto' for automatic rotation."),Object(a.b)("dt",null,Object(a.b)("code",null,"label_position")),Object(a.b)("dd",null,"Label position relative to the mark. One of 'top', 'bottom', 'middle', 'left', 'right'."),Object(a.b)("dt",null,Object(a.b)("code",null,"label_overlap")),Object(a.b)("dd",null,"Strategy to use if labels overlap. One of 'hide', 'overlap', 'constrain'."),Object(a.b)("dt",null,Object(a.b)("code",null,"label_fill_color")),Object(a.b)("dd",null,"Label fill color."),Object(a.b)("dt",null,Object(a.b)("code",null,"label_fill_opacity")),Object(a.b)("dd",null,"Label fill opacity."),Object(a.b)("dt",null,Object(a.b)("code",null,"label_stroke_color")),Object(a.b)("dd",null,"Label stroke color."),Object(a.b)("dt",null,Object(a.b)("code",null,"label_stroke_opacity")),Object(a.b)("dd",null,"Label stroke opacity."),Object(a.b)("dt",null,Object(a.b)("code",null,"label_stroke_size")),Object(a.b)("dd",null,"Label stroke size (line width or pen thickness)."),Object(a.b)("dt",null,Object(a.b)("code",null,"label_font_size")),Object(a.b)("dd",null,"Label font size."),Object(a.b)("dt",null,Object(a.b)("code",null,"label_font_weight")),Object(a.b)("dd",null,"Label font weight."),Object(a.b)("dt",null,Object(a.b)("code",null,"label_line_height")),Object(a.b)("dd",null,"Label line height."),Object(a.b)("dt",null,Object(a.b)("code",null,"label_align")),Object(a.b)("dd",null,"Label text alignment. One of 'left', 'right', 'center', 'start', 'end'."),Object(a.b)("dt",null,Object(a.b)("code",null,"ref_stroke_color")),Object(a.b)("dd",null,"Reference line stroke color."),Object(a.b)("dt",null,Object(a.b)("code",null,"ref_stroke_opacity")),Object(a.b)("dd",null,"Reference line stroke opacity."),Object(a.b)("dt",null,Object(a.b)("code",null,"ref_stroke_size")),Object(a.b)("dd",null,"Reference line stroke size (line width or pen thickness)."),Object(a.b)("dt",null,Object(a.b)("code",null,"ref_stroke_dash")),Object(a.b)("dd",null,"Reference line stroke dash style. A string containing space-separated integers that specify distances to alternately draw a line and a gap (in coordinate space units). If the number of elements in the array is odd, the elements of the array get copied and concatenated. For example, [5, 15, 25] will become [5, 15, 25, 5, 15, 25].")),Object(a.b)("h5",{id:"returns"},"Returns"),Object(a.b)("p",null,"A ",Object(a.b)("code",null,Object(a.b)("a",{title:"h2o_wave.types.Mark",href:"types#h2o_wave.types.Mark"},"Mark"))," instance.")))),Object(a.b)("div",{className:"api"},Object(a.b)("h3",{id:"markdown_card"},"markdown_card ",Object(a.b)("a",{name:"h2o_wave.ui.markdown_card"})),Object(a.b)("div",{className:"api__body"},Object(a.b)("div",{className:"api__signature"},"def ",Object(a.b)("span",{class:"ident"},"markdown_card"),"(box:\xa0str, title:\xa0str, content:\xa0str, data:\xa0Union[dict,\xa0str,\xa0NoneType]\xa0=\xa0None, commands:\xa0Union[List[",Object(a.b)("a",{title:"h2o_wave.types.Command",href:"types#h2o_wave.types.Command"},"Command"),"],\xa0NoneType]\xa0=\xa0None) \u2011>\xa0",Object(a.b)("a",{title:"h2o_wave.types.MarkdownCard",href:"types#h2o_wave.types.MarkdownCard"},"MarkdownCard")),Object(a.b)("div",{className:"api__description"},Object(a.b)("p",null,"Create a card that renders Markdown content."),Object(a.b)("p",null,"Github-flavored markdown is supported. HTML markup is allowed in markdown content. URLs, if found, are displayed as hyperlinks. Copyright, reserved, trademark, quotes, etc. are replaced with language-neutral symbols."),Object(a.b)("h5",{id:"args"},"Args"),Object(a.b)("dl",null,Object(a.b)("dt",null,Object(a.b)("code",null,"box")),Object(a.b)("dd",null,"A string indicating how to place this component on the page."),Object(a.b)("dt",null,Object(a.b)("code",null,"title")),Object(a.b)("dd",null,"The title for this card."),Object(a.b)("dt",null,Object(a.b)("code",null,"content")),Object(a.b)("dd",null,"The markdown content. Supports Github Flavored Markdown (GFM): ",Object(a.b)("a",{href:"https://guides.github.com/features/mastering-markdown/"},"https://guides.github.com/features/mastering-markdown/")),Object(a.b)("dt",null,Object(a.b)("code",null,"data")),Object(a.b)("dd",null,"Additional data for the card."),Object(a.b)("dt",null,Object(a.b)("code",null,"commands")),Object(a.b)("dd",null,"Contextual menu commands for this component.")),Object(a.b)("h5",{id:"returns"},"Returns"),Object(a.b)("p",null,"A ",Object(a.b)("code",null,Object(a.b)("a",{title:"h2o_wave.types.MarkdownCard",href:"types#h2o_wave.types.MarkdownCard"},"MarkdownCard"))," instance.")))),Object(a.b)("div",{className:"api"},Object(a.b)("h3",{id:"markup"},"markup ",Object(a.b)("a",{name:"h2o_wave.ui.markup"})),Object(a.b)("div",{className:"api__body"},Object(a.b)("div",{className:"api__signature"},"def ",Object(a.b)("span",{class:"ident"},"markup"),"(content:\xa0str, name:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, visible:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None) \u2011>\xa0",Object(a.b)("a",{title:"h2o_wave.types.Component",href:"types#h2o_wave.types.Component"},"Component")),Object(a.b)("div",{className:"api__description"},Object(a.b)("p",null,"Render HTML content."),Object(a.b)("h5",{id:"args"},"Args"),Object(a.b)("dl",null,Object(a.b)("dt",null,Object(a.b)("code",null,"content")),Object(a.b)("dd",null,"The HTML content."),Object(a.b)("dt",null,Object(a.b)("code",null,"name")),Object(a.b)("dd",null,"An identifying name for this component."),Object(a.b)("dt",null,Object(a.b)("code",null,"visible")),Object(a.b)("dd",null,"True if the component should be visible. Defaults to true.")),Object(a.b)("h5",{id:"returns"},"Returns"),Object(a.b)("p",null,"A ",Object(a.b)("code",null,Object(a.b)("a",{title:"h2o_wave.types.Markup",href:"types#h2o_wave.types.Markup"},"Markup"))," instance.")))),Object(a.b)("div",{className:"api"},Object(a.b)("h3",{id:"markup_card"},"markup_card ",Object(a.b)("a",{name:"h2o_wave.ui.markup_card"})),Object(a.b)("div",{className:"api__body"},Object(a.b)("div",{className:"api__signature"},"def ",Object(a.b)("span",{class:"ident"},"markup_card"),"(box:\xa0str, title:\xa0str, content:\xa0str, commands:\xa0Union[List[",Object(a.b)("a",{title:"h2o_wave.types.Command",href:"types#h2o_wave.types.Command"},"Command"),"],\xa0NoneType]\xa0=\xa0None) \u2011>\xa0",Object(a.b)("a",{title:"h2o_wave.types.MarkupCard",href:"types#h2o_wave.types.MarkupCard"},"MarkupCard")),Object(a.b)("div",{className:"api__description"},Object(a.b)("p",null,"Render HTML content."),Object(a.b)("h5",{id:"args"},"Args"),Object(a.b)("dl",null,Object(a.b)("dt",null,Object(a.b)("code",null,"box")),Object(a.b)("dd",null,"A string indicating how to place this component on the page."),Object(a.b)("dt",null,Object(a.b)("code",null,"title")),Object(a.b)("dd",null,"The title for this card."),Object(a.b)("dt",null,Object(a.b)("code",null,"content")),Object(a.b)("dd",null,"The HTML content."),Object(a.b)("dt",null,Object(a.b)("code",null,"commands")),Object(a.b)("dd",null,"Contextual menu commands for this component.")),Object(a.b)("h5",{id:"returns"},"Returns"),Object(a.b)("p",null,"A ",Object(a.b)("code",null,Object(a.b)("a",{title:"h2o_wave.types.MarkupCard",href:"types#h2o_wave.types.MarkupCard"},"MarkupCard"))," instance.")))),Object(a.b)("div",{className:"api"},Object(a.b)("h3",{id:"message_bar"},"message_bar ",Object(a.b)("a",{name:"h2o_wave.ui.message_bar"})),Object(a.b)("div",{className:"api__body"},Object(a.b)("div",{className:"api__signature"},"def ",Object(a.b)("span",{class:"ident"},"message_bar"),"(type:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, text:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, name:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, visible:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None) \u2011>\xa0",Object(a.b)("a",{title:"h2o_wave.types.Component",href:"types#h2o_wave.types.Component"},"Component")),Object(a.b)("div",{className:"api__description"},Object(a.b)("p",null,"Create a message bar."),Object(a.b)("p",null,"A message bar is an area at the top of a primary view that displays relevant status information. You can use a message bar to tell the user about a situation that does not require their immediate attention and therefore does not need to block other activities."),Object(a.b)("h5",{id:"args"},"Args"),Object(a.b)("dl",null,Object(a.b)("dt",null,Object(a.b)("code",null,"type")),Object(a.b)("dd",null,"The icon and color of the message bar. One of 'info', 'error', 'warning', 'success', 'danger', 'blocked'."),Object(a.b)("dt",null,Object(a.b)("code",null,"text")),Object(a.b)("dd",null,"The text displayed on the message bar."),Object(a.b)("dt",null,Object(a.b)("code",null,"name")),Object(a.b)("dd",null,"An identifying name for this component."),Object(a.b)("dt",null,Object(a.b)("code",null,"visible")),Object(a.b)("dd",null,"True if the component should be visible. Defaults to true.")),Object(a.b)("h5",{id:"returns"},"Returns"),Object(a.b)("p",null,"A ",Object(a.b)("code",null,Object(a.b)("a",{title:"h2o_wave.types.MessageBar",href:"types#h2o_wave.types.MessageBar"},"MessageBar"))," instance.")))),Object(a.b)("div",{className:"api"},Object(a.b)("h3",{id:"meta_card"},"meta_card ",Object(a.b)("a",{name:"h2o_wave.ui.meta_card"})),Object(a.b)("div",{className:"api__body"},Object(a.b)("div",{className:"api__signature"},"def ",Object(a.b)("span",{class:"ident"},"meta_card"),"(box:\xa0str, title:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, refresh:\xa0Union[int,\xa0NoneType]\xa0=\xa0None, notification:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, redirect:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, commands:\xa0Union[List[",Object(a.b)("a",{title:"h2o_wave.types.Command",href:"types#h2o_wave.types.Command"},"Command"),"],\xa0NoneType]\xa0=\xa0None) \u2011>\xa0",Object(a.b)("a",{title:"h2o_wave.types.MetaCard",href:"types#h2o_wave.types.MetaCard"},"MetaCard")),Object(a.b)("div",{className:"api__description"},Object(a.b)("p",null,"Represents page-global state."),Object(a.b)("p",null,"This card is invisible. It is used to control attributes of the active page."),Object(a.b)("h5",{id:"args"},"Args"),Object(a.b)("dl",null,Object(a.b)("dt",null,Object(a.b)("code",null,"box")),Object(a.b)("dd",null,"A string indicating how to place this component on the page."),Object(a.b)("dt",null,Object(a.b)("code",null,"title")),Object(a.b)("dd",null,"The title of the page."),Object(a.b)("dt",null,Object(a.b)("code",null,"refresh")),Object(a.b)("dd",null,"Refresh rate in seconds. A value of 0 turns off live-updates. Values != 0 are currently ignored (reserved for future use)."),Object(a.b)("dt",null,Object(a.b)("code",null,"notification")),Object(a.b)("dd",null,"Display a desktop notification to the user."),Object(a.b)("dt",null,Object(a.b)("code",null,"redirect")),Object(a.b)("dd",null,"Redirect the page to a new URL."),Object(a.b)("dt",null,Object(a.b)("code",null,"commands")),Object(a.b)("dd",null,"Contextual menu commands for this component.")),Object(a.b)("h5",{id:"returns"},"Returns"),Object(a.b)("p",null,"A ",Object(a.b)("code",null,Object(a.b)("a",{title:"h2o_wave.types.MetaCard",href:"types#h2o_wave.types.MetaCard"},"MetaCard"))," instance.")))),Object(a.b)("div",{className:"api"},Object(a.b)("h3",{id:"nav_card"},"nav_card ",Object(a.b)("a",{name:"h2o_wave.ui.nav_card"})),Object(a.b)("div",{className:"api__body"},Object(a.b)("div",{className:"api__signature"},"def ",Object(a.b)("span",{class:"ident"},"nav_card"),"(box:\xa0str, items:\xa0List[",Object(a.b)("a",{title:"h2o_wave.types.NavGroup",href:"types#h2o_wave.types.NavGroup"},"NavGroup"),"], commands:\xa0Union[List[",Object(a.b)("a",{title:"h2o_wave.types.Command",href:"types#h2o_wave.types.Command"},"Command"),"],\xa0NoneType]\xa0=\xa0None) \u2011>\xa0",Object(a.b)("a",{title:"h2o_wave.types.NavCard",href:"types#h2o_wave.types.NavCard"},"NavCard")),Object(a.b)("div",{className:"api__description"},Object(a.b)("p",null,"Create a card containing a navigation pane."),Object(a.b)("h5",{id:"args"},"Args"),Object(a.b)("dl",null,Object(a.b)("dt",null,Object(a.b)("code",null,"box")),Object(a.b)("dd",null,"A string indicating how to place this component on the page."),Object(a.b)("dt",null,Object(a.b)("code",null,"items")),Object(a.b)("dd",null,"The navigation groups contained in this pane."),Object(a.b)("dt",null,Object(a.b)("code",null,"commands")),Object(a.b)("dd",null,"Contextual menu commands for this component.")),Object(a.b)("h5",{id:"returns"},"Returns"),Object(a.b)("p",null,"A ",Object(a.b)("code",null,Object(a.b)("a",{title:"h2o_wave.types.NavCard",href:"types#h2o_wave.types.NavCard"},"NavCard"))," instance.")))),Object(a.b)("div",{className:"api"},Object(a.b)("h3",{id:"nav_group"},"nav_group ",Object(a.b)("a",{name:"h2o_wave.ui.nav_group"})),Object(a.b)("div",{className:"api__body"},Object(a.b)("div",{className:"api__signature"},"def ",Object(a.b)("span",{class:"ident"},"nav_group"),"(label:\xa0str, items:\xa0List[",Object(a.b)("a",{title:"h2o_wave.types.NavItem",href:"types#h2o_wave.types.NavItem"},"NavItem"),"]) \u2011>\xa0",Object(a.b)("a",{title:"h2o_wave.types.NavGroup",href:"types#h2o_wave.types.NavGroup"},"NavGroup")),Object(a.b)("div",{className:"api__description"},Object(a.b)("p",null,"Create a group of navigation items."),Object(a.b)("h5",{id:"args"},"Args"),Object(a.b)("dl",null,Object(a.b)("dt",null,Object(a.b)("code",null,"label")),Object(a.b)("dd",null,"The label to display for this group."),Object(a.b)("dt",null,Object(a.b)("code",null,"items")),Object(a.b)("dd",null,"The navigation items contained in this group.")),Object(a.b)("h5",{id:"returns"},"Returns"),Object(a.b)("p",null,"A ",Object(a.b)("code",null,Object(a.b)("a",{title:"h2o_wave.types.NavGroup",href:"types#h2o_wave.types.NavGroup"},"NavGroup"))," instance.")))),Object(a.b)("div",{className:"api"},Object(a.b)("h3",{id:"nav_item"},"nav_item ",Object(a.b)("a",{name:"h2o_wave.ui.nav_item"})),Object(a.b)("div",{className:"api__body"},Object(a.b)("div",{className:"api__signature"},"def ",Object(a.b)("span",{class:"ident"},"nav_item"),"(name:\xa0str, label:\xa0str) \u2011>\xa0",Object(a.b)("a",{title:"h2o_wave.types.NavItem",href:"types#h2o_wave.types.NavItem"},"NavItem")),Object(a.b)("div",{className:"api__description"},Object(a.b)("p",null,"Create a navigation item."),Object(a.b)("h5",{id:"args"},"Args"),Object(a.b)("dl",null,Object(a.b)("dt",null,Object(a.b)("code",null,"name")),Object(a.b)("dd",null,"The name of this item. Prefix the name with a '#' to trigger hash-change navigation."),Object(a.b)("dt",null,Object(a.b)("code",null,"label")),Object(a.b)("dd",null,"The label to display.")),Object(a.b)("h5",{id:"returns"},"Returns"),Object(a.b)("p",null,"A ",Object(a.b)("code",null,Object(a.b)("a",{title:"h2o_wave.types.NavItem",href:"types#h2o_wave.types.NavItem"},"NavItem"))," instance.")))),Object(a.b)("div",{className:"api"},Object(a.b)("h3",{id:"picker"},"picker ",Object(a.b)("a",{name:"h2o_wave.ui.picker"})),Object(a.b)("div",{className:"api__body"},Object(a.b)("div",{className:"api__signature"},"def ",Object(a.b)("span",{class:"ident"},"picker"),"(name:\xa0str, choices:\xa0List[",Object(a.b)("a",{title:"h2o_wave.types.Choice",href:"types#h2o_wave.types.Choice"},"Choice"),"], label:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, values:\xa0Union[List[str],\xa0NoneType]\xa0=\xa0None, max_choices:\xa0Union[int,\xa0NoneType]\xa0=\xa0None, disabled:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, visible:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, tooltip:\xa0Union[str,\xa0NoneType]\xa0=\xa0None) \u2011>\xa0",Object(a.b)("a",{title:"h2o_wave.types.Component",href:"types#h2o_wave.types.Component"},"Component")),Object(a.b)("div",{className:"api__description"},Object(a.b)("p",null,"Create a picker. Pickers are used to select one or more choices, such as tags or files, from a list. Use a picker to allow the user to quickly search for or manage a few tags or files."),Object(a.b)("h5",{id:"args"},"Args"),Object(a.b)("dl",null,Object(a.b)("dt",null,Object(a.b)("code",null,"name")),Object(a.b)("dd",null,"An identifying name for this component."),Object(a.b)("dt",null,Object(a.b)("code",null,"choices")),Object(a.b)("dd",null,"The choices to be presented."),Object(a.b)("dt",null,Object(a.b)("code",null,"label")),Object(a.b)("dd",null,"Text to be displayed above the component."),Object(a.b)("dt",null,Object(a.b)("code",null,"values")),Object(a.b)("dd",null,"The names of the selected choices."),Object(a.b)("dt",null,Object(a.b)("code",null,"max_choices")),Object(a.b)("dd",null,"Maximum number of selectable choices. Defaults to no limit."),Object(a.b)("dt",null,Object(a.b)("code",null,"disabled")),Object(a.b)("dd",null,"Controls whether the picker should be disabled or not."),Object(a.b)("dt",null,Object(a.b)("code",null,"visible")),Object(a.b)("dd",null,"True if the component should be visible. Defaults to true."),Object(a.b)("dt",null,Object(a.b)("code",null,"tooltip")),Object(a.b)("dd",null,"An optional tooltip message displayed when a user clicks the help icon to the right of the component.")),Object(a.b)("h5",{id:"returns"},"Returns"),Object(a.b)("p",null,"A ",Object(a.b)("code",null,Object(a.b)("a",{title:"h2o_wave.types.Picker",href:"types#h2o_wave.types.Picker"},"Picker"))," instance.")))),Object(a.b)("div",{className:"api"},Object(a.b)("h3",{id:"pixel_art_card"},"pixel_art_card ",Object(a.b)("a",{name:"h2o_wave.ui.pixel_art_card"})),Object(a.b)("div",{className:"api__body"},Object(a.b)("div",{className:"api__signature"},"def ",Object(a.b)("span",{class:"ident"},"pixel_art_card"),"(box:\xa0str, title:\xa0str, data:\xa0Union[dict,\xa0str], commands:\xa0Union[List[",Object(a.b)("a",{title:"h2o_wave.types.Command",href:"types#h2o_wave.types.Command"},"Command"),"],\xa0NoneType]\xa0=\xa0None) \u2011>\xa0",Object(a.b)("a",{title:"h2o_wave.types.PixelArtCard",href:"types#h2o_wave.types.PixelArtCard"},"PixelArtCard")),Object(a.b)("div",{className:"api__description"},Object(a.b)("p",null,"Create a card displaying a collaborative Pixel art tool, just for kicks."),Object(a.b)("h5",{id:"args"},"Args"),Object(a.b)("dl",null,Object(a.b)("dt",null,Object(a.b)("code",null,"box")),Object(a.b)("dd",null,"A string indicating how to place this component on the page."),Object(a.b)("dt",null,Object(a.b)("code",null,"title")),Object(a.b)("dd",null,"The title for this card."),Object(a.b)("dt",null,Object(a.b)("code",null,"data")),Object(a.b)("dd",null,"The data for this card."),Object(a.b)("dt",null,Object(a.b)("code",null,"commands")),Object(a.b)("dd",null,"Contextual menu commands for this component.")),Object(a.b)("h5",{id:"returns"},"Returns"),Object(a.b)("p",null,"A ",Object(a.b)("code",null,Object(a.b)("a",{title:"h2o_wave.types.PixelArtCard",href:"types#h2o_wave.types.PixelArtCard"},"PixelArtCard"))," instance.")))),Object(a.b)("div",{className:"api"},Object(a.b)("h3",{id:"plot"},"plot ",Object(a.b)("a",{name:"h2o_wave.ui.plot"})),Object(a.b)("div",{className:"api__body"},Object(a.b)("div",{className:"api__signature"},"def ",Object(a.b)("span",{class:"ident"},"plot"),"(marks:\xa0List[",Object(a.b)("a",{title:"h2o_wave.types.Mark",href:"types#h2o_wave.types.Mark"},"Mark"),"]) \u2011>\xa0",Object(a.b)("a",{title:"h2o_wave.types.Plot",href:"types#h2o_wave.types.Plot"},"Plot")),Object(a.b)("div",{className:"api__description"},Object(a.b)("p",null,"Create a plot. A plot is composed of one or more graphical mark layers."),Object(a.b)("h5",{id:"args"},"Args"),Object(a.b)("dl",null,Object(a.b)("dt",null,Object(a.b)("code",null,"marks")),Object(a.b)("dd",null,"The graphical mark layers contained in this plot.")),Object(a.b)("h5",{id:"returns"},"Returns"),Object(a.b)("p",null,"A ",Object(a.b)("code",null,Object(a.b)("a",{title:"h2o_wave.types.Plot",href:"types#h2o_wave.types.Plot"},"Plot"))," instance.")))),Object(a.b)("div",{className:"api"},Object(a.b)("h3",{id:"plot_card"},"plot_card ",Object(a.b)("a",{name:"h2o_wave.ui.plot_card"})),Object(a.b)("div",{className:"api__body"},Object(a.b)("div",{className:"api__signature"},"def ",Object(a.b)("span",{class:"ident"},"plot_card"),"(box:\xa0str, title:\xa0str, data:\xa0Union[dict,\xa0str], plot:\xa0",Object(a.b)("a",{title:"h2o_wave.types.Plot",href:"types#h2o_wave.types.Plot"},"Plot"),", commands:\xa0Union[List[",Object(a.b)("a",{title:"h2o_wave.types.Command",href:"types#h2o_wave.types.Command"},"Command"),"],\xa0NoneType]\xa0=\xa0None) \u2011>\xa0",Object(a.b)("a",{title:"h2o_wave.types.PlotCard",href:"types#h2o_wave.types.PlotCard"},"PlotCard")),Object(a.b)("div",{className:"api__description"},Object(a.b)("p",null,"Create a card displaying a plot."),Object(a.b)("h5",{id:"args"},"Args"),Object(a.b)("dl",null,Object(a.b)("dt",null,Object(a.b)("code",null,"box")),Object(a.b)("dd",null,"A string indicating how to place this component on the page."),Object(a.b)("dt",null,Object(a.b)("code",null,"title")),Object(a.b)("dd",null,"The title for this card."),Object(a.b)("dt",null,Object(a.b)("code",null,"data")),Object(a.b)("dd",null,"Data for this card."),Object(a.b)("dt",null,Object(a.b)("code",null,"plot")),Object(a.b)("dd",null,"The plot to be displayed in this card."),Object(a.b)("dt",null,Object(a.b)("code",null,"commands")),Object(a.b)("dd",null,"Contextual menu commands for this component.")),Object(a.b)("h5",{id:"returns"},"Returns"),Object(a.b)("p",null,"A ",Object(a.b)("code",null,Object(a.b)("a",{title:"h2o_wave.types.PlotCard",href:"types#h2o_wave.types.PlotCard"},"PlotCard"))," instance.")))),Object(a.b)("div",{className:"api"},Object(a.b)("h3",{id:"progress"},"progress ",Object(a.b)("a",{name:"h2o_wave.ui.progress"})),Object(a.b)("div",{className:"api__body"},Object(a.b)("div",{className:"api__signature"},"def ",Object(a.b)("span",{class:"ident"},"progress"),"(label:\xa0str, caption:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, value:\xa0Union[float,\xa0NoneType]\xa0=\xa0None, visible:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, tooltip:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, name:\xa0Union[str,\xa0NoneType]\xa0=\xa0None) \u2011>\xa0",Object(a.b)("a",{title:"h2o_wave.types.Component",href:"types#h2o_wave.types.Component"},"Component")),Object(a.b)("div",{className:"api__description"},Object(a.b)("p",null,"Create a progress bar."),Object(a.b)("p",null,"Progress bars are used to show the completion status of an operation lasting more than 2 seconds. If the state of progress cannot be determined, do not set a value. Progress bars feature a bar showing total units to completion, and total units finished. The label appears above the bar, and the caption appears below. The label should tell someone exactly what the operation is doing."),Object(a.b)("p",null,"Examples of formatting include: [Object] is being [operation name], or [Object] is being [operation name] to [destination name] or [Object] is being [operation name] from [source name] to [destination name]"),Object(a.b)("p",null,"Status text is generally in units elapsed and total units. Real-world examples include copying files to a storage location, saving edits to a file, and more. Use units that are informative and relevant to give the best idea to users of how long the operation will take to complete. Avoid time units as they are rarely accurate enough to be trustworthy. Also, combine steps of a complex operation into one total bar to avoid \u201crewinding\u201d the bar. Instead change the label to reflect the change if necessary. Bars moving backwards reduce confidence in the service."),Object(a.b)("h5",{id:"args"},"Args"),Object(a.b)("dl",null,Object(a.b)("dt",null,Object(a.b)("code",null,"label")),Object(a.b)("dd",null,"The text displayed above the bar."),Object(a.b)("dt",null,Object(a.b)("code",null,"caption")),Object(a.b)("dd",null,"The text displayed below the bar."),Object(a.b)("dt",null,Object(a.b)("code",null,"value")),Object(a.b)("dd",null,"The progress, between 0.0 and 1.0, or -1 (default) if indeterminate."),Object(a.b)("dt",null,Object(a.b)("code",null,"visible")),Object(a.b)("dd",null,"True if the component should be visible. Defaults to true."),Object(a.b)("dt",null,Object(a.b)("code",null,"tooltip")),Object(a.b)("dd",null,"An optional tooltip message displayed when a user clicks the help icon to the right of the component."),Object(a.b)("dt",null,Object(a.b)("code",null,"name")),Object(a.b)("dd",null,"An identifying name for this component.")),Object(a.b)("h5",{id:"returns"},"Returns"),Object(a.b)("p",null,"A ",Object(a.b)("code",null,Object(a.b)("a",{title:"h2o_wave.types.Progress",href:"types#h2o_wave.types.Progress"},"Progress"))," instance.")))),Object(a.b)("div",{className:"api"},Object(a.b)("h3",{id:"progress_table_cell_type"},"progress_table_cell_type ",Object(a.b)("a",{name:"h2o_wave.ui.progress_table_cell_type"})),Object(a.b)("div",{className:"api__body"},Object(a.b)("div",{className:"api__signature"},"def ",Object(a.b)("span",{class:"ident"},"progress_table_cell_type"),"(color:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, name:\xa0Union[str,\xa0NoneType]\xa0=\xa0None) \u2011>\xa0",Object(a.b)("a",{title:"h2o_wave.types.TableCellType",href:"types#h2o_wave.types.TableCellType"},"TableCellType")),Object(a.b)("div",{className:"api__description"},Object(a.b)("p",null,"Create a cell type that renders a column's cells as progress bars instead of plain text. If set on a column, the cell value must be between 0.0 and 1.0."),Object(a.b)("h5",{id:"args"},"Args"),Object(a.b)("dl",null,Object(a.b)("dt",null,Object(a.b)("code",null,"color")),Object(a.b)("dd",null,"Color of the progress arc."),Object(a.b)("dt",null,Object(a.b)("code",null,"name")),Object(a.b)("dd",null,"An identifying name for this component.")),Object(a.b)("h5",{id:"returns"},"Returns"),Object(a.b)("p",null,"A ",Object(a.b)("code",null,Object(a.b)("a",{title:"h2o_wave.types.ProgressTableCellType",href:"types#h2o_wave.types.ProgressTableCellType"},"ProgressTableCellType"))," instance.")))),Object(a.b)("div",{className:"api"},Object(a.b)("h3",{id:"range_slider"},"range_slider ",Object(a.b)("a",{name:"h2o_wave.ui.range_slider"})),Object(a.b)("div",{className:"api__body"},Object(a.b)("div",{className:"api__signature"},"def ",Object(a.b)("span",{class:"ident"},"range_slider"),"(name:\xa0str, label:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, min:\xa0Union[float,\xa0NoneType]\xa0=\xa0None, max:\xa0Union[float,\xa0NoneType]\xa0=\xa0None, step:\xa0Union[float,\xa0NoneType]\xa0=\xa0None, min_value:\xa0Union[float,\xa0NoneType]\xa0=\xa0None, max_value:\xa0Union[float,\xa0NoneType]\xa0=\xa0None, disabled:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, trigger:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, visible:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, tooltip:\xa0Union[str,\xa0NoneType]\xa0=\xa0None) \u2011>\xa0",Object(a.b)("a",{title:"h2o_wave.types.Component",href:"types#h2o_wave.types.Component"},"Component")),Object(a.b)("div",{className:"api__description"},Object(a.b)("p",null,"Create a range slider."),Object(a.b)("p",null,"A range slider is an element used to select a value range. It provides a visual indication of adjustable content, as well as the current setting in the total range of content. It is displayed as a horizontal track with options on either side. Knobs or levers are dragged to one end or the other to make the choice, indicating the current max and min value."),Object(a.b)("h5",{id:"args"},"Args"),Object(a.b)("dl",null,Object(a.b)("dt",null,Object(a.b)("code",null,"name")),Object(a.b)("dd",null,"An identifying name for this component."),Object(a.b)("dt",null,Object(a.b)("code",null,"label")),Object(a.b)("dd",null,"Text to be displayed alongside the component."),Object(a.b)("dt",null,Object(a.b)("code",null,"min")),Object(a.b)("dd",null,"The minimum value of the slider. Defaults to 0."),Object(a.b)("dt",null,Object(a.b)("code",null,"max")),Object(a.b)("dd",null,"The maximum value of the slider. Defaults to 100."),Object(a.b)("dt",null,Object(a.b)("code",null,"step")),Object(a.b)("dd",null,"The difference between two adjacent values of the slider."),Object(a.b)("dt",null,Object(a.b)("code",null,"min_value")),Object(a.b)("dd",null,"The lower bound of the selected range."),Object(a.b)("dt",null,Object(a.b)("code",null,"max_value")),Object(a.b)("dd",null,"The upper bound of the selected range."),Object(a.b)("dt",null,Object(a.b)("code",null,"disabled")),Object(a.b)("dd",null,"True if this field is disabled."),Object(a.b)("dt",null,Object(a.b)("code",null,"trigger")),Object(a.b)("dd",null,"True if the form should be submitted when the slider value changes."),Object(a.b)("dt",null,Object(a.b)("code",null,"visible")),Object(a.b)("dd",null,"True if the component should be visible. Defaults to true."),Object(a.b)("dt",null,Object(a.b)("code",null,"tooltip")),Object(a.b)("dd",null,"An optional tooltip message displayed when a user clicks the help icon to the right of the component.")),Object(a.b)("h5",{id:"returns"},"Returns"),Object(a.b)("p",null,"A ",Object(a.b)("code",null,Object(a.b)("a",{title:"h2o_wave.types.RangeSlider",href:"types#h2o_wave.types.RangeSlider"},"RangeSlider"))," instance.")))),Object(a.b)("div",{className:"api"},Object(a.b)("h3",{id:"repeat_card"},"repeat_card ",Object(a.b)("a",{name:"h2o_wave.ui.repeat_card"})),Object(a.b)("div",{className:"api__body"},Object(a.b)("div",{className:"api__signature"},"def ",Object(a.b)("span",{class:"ident"},"repeat_card"),"(box:\xa0str, item_view:\xa0str, item_props:\xa0Union[dict,\xa0str], data:\xa0Union[",Object(a.b)("a",{title:"h2o_wave.core.Data",href:"core#h2o_wave.core.Data"},"Data"),",\xa0str], commands:\xa0Union[List[",Object(a.b)("a",{title:"h2o_wave.types.Command",href:"types#h2o_wave.types.Command"},"Command"),"],\xa0NoneType]\xa0=\xa0None) \u2011>\xa0",Object(a.b)("a",{title:"h2o_wave.types.RepeatCard",href:"types#h2o_wave.types.RepeatCard"},"RepeatCard")),Object(a.b)("div",{className:"api__description"},Object(a.b)("p",null,"EXPERIMENTAL. DO NOT USE. Create a card containing other cards."),Object(a.b)("h5",{id:"args"},"Args"),Object(a.b)("dl",null,Object(a.b)("dt",null,Object(a.b)("code",null,"box")),Object(a.b)("dd",null,"A string indicating how to place this component on the page."),Object(a.b)("dt",null,Object(a.b)("code",null,"item_view")),Object(a.b)("dd",null,"EXPERIMENTAL. DO NOT USE."),Object(a.b)("dt",null,Object(a.b)("code",null,"item_props")),Object(a.b)("dd",null,"The child card properties."),Object(a.b)("dt",null,Object(a.b)("code",null,"data")),Object(a.b)("dd",null,"Data for this card."),Object(a.b)("dt",null,Object(a.b)("code",null,"commands")),Object(a.b)("dd",null,"Contextual menu commands for this component.")),Object(a.b)("h5",{id:"returns"},"Returns"),Object(a.b)("p",null,"A ",Object(a.b)("code",null,Object(a.b)("a",{title:"h2o_wave.types.RepeatCard",href:"types#h2o_wave.types.RepeatCard"},"RepeatCard"))," instance.")))),Object(a.b)("div",{className:"api"},Object(a.b)("h3",{id:"separator"},"separator ",Object(a.b)("a",{name:"h2o_wave.ui.separator"})),Object(a.b)("div",{className:"api__body"},Object(a.b)("div",{className:"api__signature"},"def ",Object(a.b)("span",{class:"ident"},"separator"),"(label:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, name:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, visible:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None) \u2011>\xa0",Object(a.b)("a",{title:"h2o_wave.types.Component",href:"types#h2o_wave.types.Component"},"Component")),Object(a.b)("div",{className:"api__description"},Object(a.b)("p",null,"Create a separator."),Object(a.b)("p",null,"A separator visually separates content into groups."),Object(a.b)("h5",{id:"args"},"Args"),Object(a.b)("dl",null,Object(a.b)("dt",null,Object(a.b)("code",null,"label")),Object(a.b)("dd",null,"The text displayed on the separator."),Object(a.b)("dt",null,Object(a.b)("code",null,"name")),Object(a.b)("dd",null,"An identifying name for this component."),Object(a.b)("dt",null,Object(a.b)("code",null,"visible")),Object(a.b)("dd",null,"True if the component should be visible. Defaults to true.")),Object(a.b)("h5",{id:"returns"},"Returns"),Object(a.b)("p",null,"A ",Object(a.b)("code",null,Object(a.b)("a",{title:"h2o_wave.types.Separator",href:"types#h2o_wave.types.Separator"},"Separator"))," instance.")))),Object(a.b)("div",{className:"api"},Object(a.b)("h3",{id:"slider"},"slider ",Object(a.b)("a",{name:"h2o_wave.ui.slider"})),Object(a.b)("div",{className:"api__body"},Object(a.b)("div",{className:"api__signature"},"def ",Object(a.b)("span",{class:"ident"},"slider"),"(name:\xa0str, label:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, min:\xa0Union[float,\xa0NoneType]\xa0=\xa0None, max:\xa0Union[float,\xa0NoneType]\xa0=\xa0None, step:\xa0Union[float,\xa0NoneType]\xa0=\xa0None, value:\xa0Union[float,\xa0NoneType]\xa0=\xa0None, disabled:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, trigger:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, visible:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, tooltip:\xa0Union[str,\xa0NoneType]\xa0=\xa0None) \u2011>\xa0",Object(a.b)("a",{title:"h2o_wave.types.Component",href:"types#h2o_wave.types.Component"},"Component")),Object(a.b)("div",{className:"api__description"},Object(a.b)("p",null,"Create a slider."),Object(a.b)("p",null,"A slider is an element used to set a value. It provides a visual indication of adjustable content, as well as the current setting in the total range of content. It is displayed as a horizontal track with options on either side. A knob or lever is dragged to one end or the other to make the choice, indicating the current value. Marks on the slider bar can show values and users can choose where they want to drag the knob or lever to set the value."),Object(a.b)("p",null,"A slider is a good choice when you know that users think of the value as a relative quantity, not a numeric value. For example, users think about setting their audio volume to low or medium \u2014 not about setting the value to two or five."),Object(a.b)("p",null,"The default value of the slider will be zero or be constrained to the min and max values. The min will be returned if the value is set under the min and the max will be returned if set higher than the max value."),Object(a.b)("h5",{id:"args"},"Args"),Object(a.b)("dl",null,Object(a.b)("dt",null,Object(a.b)("code",null,"name")),Object(a.b)("dd",null,"An identifying name for this component."),Object(a.b)("dt",null,Object(a.b)("code",null,"label")),Object(a.b)("dd",null,"Text to be displayed alongside the component."),Object(a.b)("dt",null,Object(a.b)("code",null,"min")),Object(a.b)("dd",null,"The minimum value of the slider."),Object(a.b)("dt",null,Object(a.b)("code",null,"max")),Object(a.b)("dd",null,"The maximum value of the slider."),Object(a.b)("dt",null,Object(a.b)("code",null,"step")),Object(a.b)("dd",null,"The difference between two adjacent values of the slider."),Object(a.b)("dt",null,Object(a.b)("code",null,"value")),Object(a.b)("dd",null,"The current value of the slider."),Object(a.b)("dt",null,Object(a.b)("code",null,"disabled")),Object(a.b)("dd",null,"True if this field is disabled."),Object(a.b)("dt",null,Object(a.b)("code",null,"trigger")),Object(a.b)("dd",null,"True if the form should be submitted when the slider value changes."),Object(a.b)("dt",null,Object(a.b)("code",null,"visible")),Object(a.b)("dd",null,"True if the component should be visible. Defaults to true."),Object(a.b)("dt",null,Object(a.b)("code",null,"tooltip")),Object(a.b)("dd",null,"An optional tooltip message displayed when a user clicks the help icon to the right of the component.")),Object(a.b)("h5",{id:"returns"},"Returns"),Object(a.b)("p",null,"A ",Object(a.b)("code",null,Object(a.b)("a",{title:"h2o_wave.types.Slider",href:"types#h2o_wave.types.Slider"},"Slider"))," instance.")))),Object(a.b)("div",{className:"api"},Object(a.b)("h3",{id:"small_series_stat_card"},"small_series_stat_card ",Object(a.b)("a",{name:"h2o_wave.ui.small_series_stat_card"})),Object(a.b)("div",{className:"api__body"},Object(a.b)("div",{className:"api__signature"},"def ",Object(a.b)("span",{class:"ident"},"small_series_stat_card"),"(box:\xa0str, title:\xa0str, value:\xa0str, plot_data:\xa0Union[",Object(a.b)("a",{title:"h2o_wave.core.Data",href:"core#h2o_wave.core.Data"},"Data"),",\xa0str], plot_value:\xa0str, plot_zero_value:\xa0Union[float,\xa0NoneType]\xa0=\xa0None, plot_category:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, plot_type:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, plot_curve:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, plot_color:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, data:\xa0Union[dict,\xa0str,\xa0NoneType]\xa0=\xa0None, commands:\xa0Union[List[",Object(a.b)("a",{title:"h2o_wave.types.Command",href:"types#h2o_wave.types.Command"},"Command"),"],\xa0NoneType]\xa0=\xa0None) \u2011>\xa0",Object(a.b)("a",{title:"h2o_wave.types.SmallSeriesStatCard",href:"types#h2o_wave.types.SmallSeriesStatCard"},"SmallSeriesStatCard")),Object(a.b)("div",{className:"api__description"},Object(a.b)("p",null,"Create a small stat card displaying a primary value and a series plot."),Object(a.b)("h5",{id:"args"},"Args"),Object(a.b)("dl",null,Object(a.b)("dt",null,Object(a.b)("code",null,"box")),Object(a.b)("dd",null,"A string indicating how to place this component on the page."),Object(a.b)("dt",null,Object(a.b)("code",null,"title")),Object(a.b)("dd",null,"The card's title."),Object(a.b)("dt",null,Object(a.b)("code",null,"value")),Object(a.b)("dd",null,"The primary value displayed."),Object(a.b)("dt",null,Object(a.b)("code",null,"plot_data")),Object(a.b)("dd",null,"The plot's data."),Object(a.b)("dt",null,Object(a.b)("code",null,"plot_value")),Object(a.b)("dd",null,"The data field to use for y-axis values."),Object(a.b)("dt",null,Object(a.b)("code",null,"plot_zero_value")),Object(a.b)("dd",null,"The base value to use for each y-axis mark. Set this to ",Object(a.b)("code",null,"0")," if you want to pin the x-axis at ",Object(a.b)("code",null,"y=0"),". If not provided, the minimum value from the data is used."),Object(a.b)("dt",null,Object(a.b)("code",null,"plot_category")),Object(a.b)("dd",null,"The data field to use for x-axis values (ignored if ",Object(a.b)("code",null,"plot_type")," is ",Object(a.b)("code",null,"area"),"; must be provided if ",Object(a.b)("code",null,"plot_type")," is ",Object(a.b)("code",null,"interval"),"). Defaults to 'x'."),Object(a.b)("dt",null,Object(a.b)("code",null,"plot_type")),Object(a.b)("dd",null,"The type of plot. Defaults to ",Object(a.b)("code",null,"area"),". One of 'area', 'interval'."),Object(a.b)("dt",null,Object(a.b)("code",null,"plot_curve")),Object(a.b)("dd",null,"The plot's curve style. Defaults to ",Object(a.b)("code",null,"linear"),". One of 'linear', 'smooth', 'step', 'step-after', 'step-before'."),Object(a.b)("dt",null,Object(a.b)("code",null,"plot_color")),Object(a.b)("dd",null,"The plot's color."),Object(a.b)("dt",null,Object(a.b)("code",null,"data")),Object(a.b)("dd",null,"Data for this card."),Object(a.b)("dt",null,Object(a.b)("code",null,"commands")),Object(a.b)("dd",null,"Contextual menu commands for this component.")),Object(a.b)("h5",{id:"returns"},"Returns"),Object(a.b)("p",null,"A ",Object(a.b)("code",null,Object(a.b)("a",{title:"h2o_wave.types.SmallSeriesStatCard",href:"types#h2o_wave.types.SmallSeriesStatCard"},"SmallSeriesStatCard"))," instance.")))),Object(a.b)("div",{className:"api"},Object(a.b)("h3",{id:"small_stat_card"},"small_stat_card ",Object(a.b)("a",{name:"h2o_wave.ui.small_stat_card"})),Object(a.b)("div",{className:"api__body"},Object(a.b)("div",{className:"api__signature"},"def ",Object(a.b)("span",{class:"ident"},"small_stat_card"),"(box:\xa0str, title:\xa0str, value:\xa0str, data:\xa0Union[dict,\xa0str,\xa0NoneType]\xa0=\xa0None, commands:\xa0Union[List[",Object(a.b)("a",{title:"h2o_wave.types.Command",href:"types#h2o_wave.types.Command"},"Command"),"],\xa0NoneType]\xa0=\xa0None) \u2011>\xa0",Object(a.b)("a",{title:"h2o_wave.types.SmallStatCard",href:"types#h2o_wave.types.SmallStatCard"},"SmallStatCard")),Object(a.b)("div",{className:"api__description"},Object(a.b)("p",null,"Create a stat card displaying a single value."),Object(a.b)("h5",{id:"args"},"Args"),Object(a.b)("dl",null,Object(a.b)("dt",null,Object(a.b)("code",null,"box")),Object(a.b)("dd",null,"A string indicating how to place this component on the page."),Object(a.b)("dt",null,Object(a.b)("code",null,"title")),Object(a.b)("dd",null,"The card's title."),Object(a.b)("dt",null,Object(a.b)("code",null,"value")),Object(a.b)("dd",null,"The primary value displayed."),Object(a.b)("dt",null,Object(a.b)("code",null,"data")),Object(a.b)("dd",null,"Data for this card."),Object(a.b)("dt",null,Object(a.b)("code",null,"commands")),Object(a.b)("dd",null,"Contextual menu commands for this component.")),Object(a.b)("h5",{id:"returns"},"Returns"),Object(a.b)("p",null,"A ",Object(a.b)("code",null,Object(a.b)("a",{title:"h2o_wave.types.SmallStatCard",href:"types#h2o_wave.types.SmallStatCard"},"SmallStatCard"))," instance.")))),Object(a.b)("div",{className:"api"},Object(a.b)("h3",{id:"spinbox"},"spinbox ",Object(a.b)("a",{name:"h2o_wave.ui.spinbox"})),Object(a.b)("div",{className:"api__body"},Object(a.b)("div",{className:"api__signature"},"def ",Object(a.b)("span",{class:"ident"},"spinbox"),"(name:\xa0str, label:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, min:\xa0Union[float,\xa0NoneType]\xa0=\xa0None, max:\xa0Union[float,\xa0NoneType]\xa0=\xa0None, step:\xa0Union[float,\xa0NoneType]\xa0=\xa0None, value:\xa0Union[float,\xa0NoneType]\xa0=\xa0None, disabled:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, visible:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, tooltip:\xa0Union[str,\xa0NoneType]\xa0=\xa0None) \u2011>\xa0",Object(a.b)("a",{title:"h2o_wave.types.Component",href:"types#h2o_wave.types.Component"},"Component")),Object(a.b)("div",{className:"api__description"},Object(a.b)("p",null,"Create a spinbox."),Object(a.b)("p",null,"A spinbox allows the user to incrementally adjust a value in small steps. It is mainly used for numeric values, but other values are supported too."),Object(a.b)("h5",{id:"args"},"Args"),Object(a.b)("dl",null,Object(a.b)("dt",null,Object(a.b)("code",null,"name")),Object(a.b)("dd",null,"An identifying name for this component."),Object(a.b)("dt",null,Object(a.b)("code",null,"label")),Object(a.b)("dd",null,"Text to be displayed alongside the component."),Object(a.b)("dt",null,Object(a.b)("code",null,"min")),Object(a.b)("dd",null,"The minimum value of the spinbox."),Object(a.b)("dt",null,Object(a.b)("code",null,"max")),Object(a.b)("dd",null,"The maximum value of the spinbox."),Object(a.b)("dt",null,Object(a.b)("code",null,"step")),Object(a.b)("dd",null,"The difference between two adjacent values of the spinbox."),Object(a.b)("dt",null,Object(a.b)("code",null,"value")),Object(a.b)("dd",null,"The current value of the spinbox."),Object(a.b)("dt",null,Object(a.b)("code",null,"disabled")),Object(a.b)("dd",null,"True if this field is disabled."),Object(a.b)("dt",null,Object(a.b)("code",null,"visible")),Object(a.b)("dd",null,"True if the component should be visible. Defaults to true."),Object(a.b)("dt",null,Object(a.b)("code",null,"tooltip")),Object(a.b)("dd",null,"An optional tooltip message displayed when a user clicks the help icon to the right of the component.")),Object(a.b)("h5",{id:"returns"},"Returns"),Object(a.b)("p",null,"A ",Object(a.b)("code",null,Object(a.b)("a",{title:"h2o_wave.types.Spinbox",href:"types#h2o_wave.types.Spinbox"},"Spinbox"))," instance.")))),Object(a.b)("div",{className:"api"},Object(a.b)("h3",{id:"step"},"step ",Object(a.b)("a",{name:"h2o_wave.ui.step"})),Object(a.b)("div",{className:"api__body"},Object(a.b)("div",{className:"api__signature"},"def ",Object(a.b)("span",{class:"ident"},"step"),"(label:\xa0str, icon:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, done:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None) \u2011>\xa0",Object(a.b)("a",{title:"h2o_wave.types.Step",href:"types#h2o_wave.types.Step"},"Step")),Object(a.b)("div",{className:"api__description"},Object(a.b)("p",null,"Create a step for a stepper."),Object(a.b)("h5",{id:"args"},"Args"),Object(a.b)("dl",null,Object(a.b)("dt",null,Object(a.b)("code",null,"label")),Object(a.b)("dd",null,"Text displayed below icon."),Object(a.b)("dt",null,Object(a.b)("code",null,"icon")),Object(a.b)("dd",null,"Icon to be displayed."),Object(a.b)("dt",null,Object(a.b)("code",null,"done")),Object(a.b)("dd",null,"Indicates whether this step has already been completed.")),Object(a.b)("h5",{id:"returns"},"Returns"),Object(a.b)("p",null,"A ",Object(a.b)("code",null,Object(a.b)("a",{title:"h2o_wave.types.Step",href:"types#h2o_wave.types.Step"},"Step"))," instance.")))),Object(a.b)("div",{className:"api"},Object(a.b)("h3",{id:"stepper"},"stepper ",Object(a.b)("a",{name:"h2o_wave.ui.stepper"})),Object(a.b)("div",{className:"api__body"},Object(a.b)("div",{className:"api__signature"},"def ",Object(a.b)("span",{class:"ident"},"stepper"),"(name:\xa0str, items:\xa0List[",Object(a.b)("a",{title:"h2o_wave.types.Step",href:"types#h2o_wave.types.Step"},"Step"),"], visible:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, tooltip:\xa0Union[str,\xa0NoneType]\xa0=\xa0None) \u2011>\xa0",Object(a.b)("a",{title:"h2o_wave.types.Component",href:"types#h2o_wave.types.Component"},"Component")),Object(a.b)("div",{className:"api__description"},Object(a.b)("p",null,"Create a component that displays a sequence of steps in a process. The steps keep users informed about where they are in the process and how much is left to complete."),Object(a.b)("h5",{id:"args"},"Args"),Object(a.b)("dl",null,Object(a.b)("dt",null,Object(a.b)("code",null,"name")),Object(a.b)("dd",null,"An identifying name for this component."),Object(a.b)("dt",null,Object(a.b)("code",null,"items")),Object(a.b)("dd",null,"The sequence of steps to be displayed."),Object(a.b)("dt",null,Object(a.b)("code",null,"visible")),Object(a.b)("dd",null,"True if the component should be visible. Defaults to true."),Object(a.b)("dt",null,Object(a.b)("code",null,"tooltip")),Object(a.b)("dd",null,"An optional tooltip message displayed when a user clicks the help icon to the right of the component.")),Object(a.b)("h5",{id:"returns"},"Returns"),Object(a.b)("p",null,"A ",Object(a.b)("code",null,Object(a.b)("a",{title:"h2o_wave.types.Stepper",href:"types#h2o_wave.types.Stepper"},"Stepper"))," instance.")))),Object(a.b)("div",{className:"api"},Object(a.b)("h3",{id:"tab"},"tab ",Object(a.b)("a",{name:"h2o_wave.ui.tab"})),Object(a.b)("div",{className:"api__body"},Object(a.b)("div",{className:"api__signature"},"def ",Object(a.b)("span",{class:"ident"},"tab"),"(name:\xa0str, label:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, icon:\xa0Union[str,\xa0NoneType]\xa0=\xa0None) \u2011>\xa0",Object(a.b)("a",{title:"h2o_wave.types.Tab",href:"types#h2o_wave.types.Tab"},"Tab")),Object(a.b)("div",{className:"api__description"},Object(a.b)("p",null,"Create a tab."),Object(a.b)("h5",{id:"args"},"Args"),Object(a.b)("dl",null,Object(a.b)("dt",null,Object(a.b)("code",null,"name")),Object(a.b)("dd",null,"An identifying name for this component."),Object(a.b)("dt",null,Object(a.b)("code",null,"label")),Object(a.b)("dd",null,"The text displayed on the tab."),Object(a.b)("dt",null,Object(a.b)("code",null,"icon")),Object(a.b)("dd",null,"The icon displayed on the tab.")),Object(a.b)("h5",{id:"returns"},"Returns"),Object(a.b)("p",null,"A ",Object(a.b)("code",null,Object(a.b)("a",{title:"h2o_wave.types.Tab",href:"types#h2o_wave.types.Tab"},"Tab"))," instance.")))),Object(a.b)("div",{className:"api"},Object(a.b)("h3",{id:"tab_card"},"tab_card ",Object(a.b)("a",{name:"h2o_wave.ui.tab_card"})),Object(a.b)("div",{className:"api__body"},Object(a.b)("div",{className:"api__signature"},"def ",Object(a.b)("span",{class:"ident"},"tab_card"),"(box:\xa0str, items:\xa0List[",Object(a.b)("a",{title:"h2o_wave.types.Tab",href:"types#h2o_wave.types.Tab"},"Tab"),"], value:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, link:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, commands:\xa0Union[List[",Object(a.b)("a",{title:"h2o_wave.types.Command",href:"types#h2o_wave.types.Command"},"Command"),"],\xa0NoneType]\xa0=\xa0None) \u2011>\xa0",Object(a.b)("a",{title:"h2o_wave.types.TabCard",href:"types#h2o_wave.types.TabCard"},"TabCard")),Object(a.b)("div",{className:"api__description"},Object(a.b)("p",null,"Create a card containing tabs for navigation."),Object(a.b)("h5",{id:"args"},"Args"),Object(a.b)("dl",null,Object(a.b)("dt",null,Object(a.b)("code",null,"box")),Object(a.b)("dd",null,"A string indicating how to place this component on the page."),Object(a.b)("dt",null,Object(a.b)("code",null,"items")),Object(a.b)("dd",null,"Items to render."),Object(a.b)("dt",null,Object(a.b)("code",null,"value")),Object(a.b)("dd",null,"The name of the tab to select."),Object(a.b)("dt",null,Object(a.b)("code",null,"link")),Object(a.b)("dd",null,"True if tabs should be rendered as links and not a standard tab."),Object(a.b)("dt",null,Object(a.b)("code",null,"commands")),Object(a.b)("dd",null,"Contextual menu commands for this component.")),Object(a.b)("h5",{id:"returns"},"Returns"),Object(a.b)("p",null,"A ",Object(a.b)("code",null,Object(a.b)("a",{title:"h2o_wave.types.TabCard",href:"types#h2o_wave.types.TabCard"},"TabCard"))," instance.")))),Object(a.b)("div",{className:"api"},Object(a.b)("h3",{id:"table"},"table ",Object(a.b)("a",{name:"h2o_wave.ui.table"})),Object(a.b)("div",{className:"api__body"},Object(a.b)("div",{className:"api__signature"},"def ",Object(a.b)("span",{class:"ident"},"table"),"(name:\xa0str, columns:\xa0List[",Object(a.b)("a",{title:"h2o_wave.types.TableColumn",href:"types#h2o_wave.types.TableColumn"},"TableColumn"),"], rows:\xa0List[",Object(a.b)("a",{title:"h2o_wave.types.TableRow",href:"types#h2o_wave.types.TableRow"},"TableRow"),"], multiple:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, groupable:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, downloadable:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, resettable:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, height:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, values:\xa0Union[List[str],\xa0NoneType]\xa0=\xa0None, visible:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, tooltip:\xa0Union[str,\xa0NoneType]\xa0=\xa0None) \u2011>\xa0",Object(a.b)("a",{title:"h2o_wave.types.Component",href:"types#h2o_wave.types.Component"},"Component")),Object(a.b)("div",{className:"api__description"},Object(a.b)("p",null,"Create an interactive table."),Object(a.b)("p",null,"This table differs from a markdown table in that it supports clicking or selecting rows. If you simply want to display a non-interactive table of information, use a markdown table."),Object(a.b)("p",null,"If ",Object(a.b)("code",null,"multiple")," is set to False (default), each row in the table is clickable. When a row is clicked, the form is submitted automatically, and ",Object(a.b)("code",null,"q.args.table_name")," is set to ",Object(a.b)("code",null,"[row_name]"),", where ",Object(a.b)("code",null,"table_name")," is the ",Object(a.b)("code",null,"name")," of the table, and ",Object(a.b)("code",null,"row_name")," is the ",Object(a.b)("code",null,"name")," of the row that was clicked on."),Object(a.b)("p",null,"If ",Object(a.b)("code",null,"multiple")," is set to True, each row in the table is selectable. A row can be selected by clicking on it. Multiple rows can be selected either by shift+clicking or using marquee selection. When the form is submitted,",Object(a.b)("code",null,"q.args.table_name")," is set to ",Object(a.b)("code",null,"[row1_name, row2_name, \u2026]")," where ",Object(a.b)("code",null,"table_name")," is the ",Object(a.b)("code",null,"name")," of the table, and ",Object(a.b)("code",null,"row1_name"),", ",Object(a.b)("code",null,"row2_name")," are the ",Object(a.b)("code",null,"name")," of the rows that were selected. Note that if ",Object(a.b)("code",null,"multiple")," is set to True, the form is not submitted automatically, and one or more buttons are required in the form to trigger submission."),Object(a.b)("h5",{id:"args"},"Args"),Object(a.b)("dl",null,Object(a.b)("dt",null,Object(a.b)("code",null,"name")),Object(a.b)("dd",null,"An identifying name for this component."),Object(a.b)("dt",null,Object(a.b)("code",null,"columns")),Object(a.b)("dd",null,"The columns in this table."),Object(a.b)("dt",null,Object(a.b)("code",null,"rows")),Object(a.b)("dd",null,"The rows in this table."),Object(a.b)("dt",null,Object(a.b)("code",null,"multiple")),Object(a.b)("dd",null,"True to allow multiple rows to be selected."),Object(a.b)("dt",null,Object(a.b)("code",null,"groupable")),Object(a.b)("dd",null,"True to allow group by feature."),Object(a.b)("dt",null,Object(a.b)("code",null,"downloadable")),Object(a.b)("dd",null,"Indicates whether the contents of this table can be downloaded and saved as a CSV file. Defaults to False."),Object(a.b)("dt",null,Object(a.b)("code",null,"resettable")),Object(a.b)("dd",null,"Indicates whether a Reset button should be displayed to reset search / filter / group-by values to their defaults. Defaults to False."),Object(a.b)("dt",null,Object(a.b)("code",null,"height")),Object(a.b)("dd",null,"The height of the table, e.g. '400px', '50%', etc."),Object(a.b)("dt",null,Object(a.b)("code",null,"values")),Object(a.b)("dd",null,"The names of the selected rows. If this parameter is set, multiple selections will be allowed (",Object(a.b)("code",null,"multiple")," is assumed to be ",Object(a.b)("code",null,"True"),")."),Object(a.b)("dt",null,Object(a.b)("code",null,"visible")),Object(a.b)("dd",null,"True if the component should be visible. Defaults to true."),Object(a.b)("dt",null,Object(a.b)("code",null,"tooltip")),Object(a.b)("dd",null,"An optional tooltip message displayed when a user clicks the help icon to the right of the component.")),Object(a.b)("h5",{id:"returns"},"Returns"),Object(a.b)("p",null,"A ",Object(a.b)("code",null,Object(a.b)("a",{title:"h2o_wave.types.Table",href:"types#h2o_wave.types.Table"},"Table"))," instance.")))),Object(a.b)("div",{className:"api"},Object(a.b)("h3",{id:"table_cell_type"},"table_cell_type ",Object(a.b)("a",{name:"h2o_wave.ui.table_cell_type"})),Object(a.b)("div",{className:"api__body"},Object(a.b)("div",{className:"api__signature"},"def ",Object(a.b)("span",{class:"ident"},"table_cell_type"),"(progress:\xa0Union[",Object(a.b)("a",{title:"h2o_wave.types.ProgressTableCellType",href:"types#h2o_wave.types.ProgressTableCellType"},"ProgressTableCellType"),",\xa0NoneType]\xa0=\xa0None, icon:\xa0Union[",Object(a.b)("a",{title:"h2o_wave.types.IconTableCellType",href:"types#h2o_wave.types.IconTableCellType"},"IconTableCellType"),",\xa0NoneType]\xa0=\xa0None) \u2011>\xa0",Object(a.b)("a",{title:"h2o_wave.types.TableCellType",href:"types#h2o_wave.types.TableCellType"},"TableCellType")),Object(a.b)("div",{className:"api__description"},Object(a.b)("p",null,"Defines cell content to be rendered instead of a simple text."),Object(a.b)("h5",{id:"args"},"Args"),Object(a.b)("dl",null,Object(a.b)("dt",null,Object(a.b)("code",null,"progress")),Object(a.b)("dd",null,"No documentation available."),Object(a.b)("dt",null,Object(a.b)("code",null,"icon")),Object(a.b)("dd",null,"No documentation available.")),Object(a.b)("h5",{id:"returns"},"Returns"),Object(a.b)("p",null,"A ",Object(a.b)("code",null,Object(a.b)("a",{title:"h2o_wave.types.TableCellType",href:"types#h2o_wave.types.TableCellType"},"TableCellType"))," instance.")))),Object(a.b)("div",{className:"api"},Object(a.b)("h3",{id:"table_column"},"table_column ",Object(a.b)("a",{name:"h2o_wave.ui.table_column"})),Object(a.b)("div",{className:"api__body"},Object(a.b)("div",{className:"api__signature"},"def ",Object(a.b)("span",{class:"ident"},"table_column"),"(name:\xa0str, label:\xa0str, min_width:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, max_width:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, sortable:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, searchable:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, filterable:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, link:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, cell_type:\xa0Union[",Object(a.b)("a",{title:"h2o_wave.types.TableCellType",href:"types#h2o_wave.types.TableCellType"},"TableCellType"),",\xa0NoneType]\xa0=\xa0None) \u2011>\xa0",Object(a.b)("a",{title:"h2o_wave.types.TableColumn",href:"types#h2o_wave.types.TableColumn"},"TableColumn")),Object(a.b)("div",{className:"api__description"},Object(a.b)("p",null,"Create a table column."),Object(a.b)("h5",{id:"args"},"Args"),Object(a.b)("dl",null,Object(a.b)("dt",null,Object(a.b)("code",null,"name")),Object(a.b)("dd",null,"An identifying name for this column."),Object(a.b)("dt",null,Object(a.b)("code",null,"label")),Object(a.b)("dd",null,"The text displayed on the column header."),Object(a.b)("dt",null,Object(a.b)("code",null,"min_width")),Object(a.b)("dd",null,"The minimum width of this column, e.g. '50px'. Only ",Object(a.b)("code",null,"px")," units are supported at this time."),Object(a.b)("dt",null,Object(a.b)("code",null,"max_width")),Object(a.b)("dd",null,"The maximum width of this column, e.g. '100px'. Only ",Object(a.b)("code",null,"px")," units are supported at this time."),Object(a.b)("dt",null,Object(a.b)("code",null,"sortable")),Object(a.b)("dd",null,"Indicates whether the column is sortable."),Object(a.b)("dt",null,Object(a.b)("code",null,"searchable")),Object(a.b)("dd",null,"Indicates whether the contents of this column can be searched through. Enables a search box for the table if true."),Object(a.b)("dt",null,Object(a.b)("code",null,"filterable")),Object(a.b)("dd",null,"Indicates whether the contents of this column are displayed as filters in a dropdown."),Object(a.b)("dt",null,Object(a.b)("code",null,"link")),Object(a.b)("dd",null,"Indicates whether each cell in this column should be displayed as a clickable link."),Object(a.b)("dt",null,Object(a.b)("code",null,"cell_type")),Object(a.b)("dd",null,"Defines how to render each cell in this column. Defaults to plain text.")),Object(a.b)("h5",{id:"returns"},"Returns"),Object(a.b)("p",null,"A ",Object(a.b)("code",null,Object(a.b)("a",{title:"h2o_wave.types.TableColumn",href:"types#h2o_wave.types.TableColumn"},"TableColumn"))," instance.")))),Object(a.b)("div",{className:"api"},Object(a.b)("h3",{id:"table_row"},"table_row ",Object(a.b)("a",{name:"h2o_wave.ui.table_row"})),Object(a.b)("div",{className:"api__body"},Object(a.b)("div",{className:"api__signature"},"def ",Object(a.b)("span",{class:"ident"},"table_row"),"(name:\xa0str, cells:\xa0List[str]) \u2011>\xa0",Object(a.b)("a",{title:"h2o_wave.types.TableRow",href:"types#h2o_wave.types.TableRow"},"TableRow")),Object(a.b)("div",{className:"api__description"},Object(a.b)("p",null,"Create a table row."),Object(a.b)("h5",{id:"args"},"Args"),Object(a.b)("dl",null,Object(a.b)("dt",null,Object(a.b)("code",null,"name")),Object(a.b)("dd",null,"An identifying name for this row."),Object(a.b)("dt",null,Object(a.b)("code",null,"cells")),Object(a.b)("dd",null,"The cells in this row (displayed left to right).")),Object(a.b)("h5",{id:"returns"},"Returns"),Object(a.b)("p",null,"A ",Object(a.b)("code",null,Object(a.b)("a",{title:"h2o_wave.types.TableRow",href:"types#h2o_wave.types.TableRow"},"TableRow"))," instance.")))),Object(a.b)("div",{className:"api"},Object(a.b)("h3",{id:"tabs"},"tabs ",Object(a.b)("a",{name:"h2o_wave.ui.tabs"})),Object(a.b)("div",{className:"api__body"},Object(a.b)("div",{className:"api__signature"},"def ",Object(a.b)("span",{class:"ident"},"tabs"),"(name:\xa0str, value:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, items:\xa0Union[List[",Object(a.b)("a",{title:"h2o_wave.types.Tab",href:"types#h2o_wave.types.Tab"},"Tab"),"],\xa0NoneType]\xa0=\xa0None, visible:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None) \u2011>\xa0",Object(a.b)("a",{title:"h2o_wave.types.Component",href:"types#h2o_wave.types.Component"},"Component")),Object(a.b)("div",{className:"api__description"},Object(a.b)("p",null,"Create a tab bar."),Object(a.b)("h5",{id:"args"},"Args"),Object(a.b)("dl",null,Object(a.b)("dt",null,Object(a.b)("code",null,"name")),Object(a.b)("dd",null,"An identifying name for this component."),Object(a.b)("dt",null,Object(a.b)("code",null,"value")),Object(a.b)("dd",null,"The name of the tab to select."),Object(a.b)("dt",null,Object(a.b)("code",null,"items")),Object(a.b)("dd",null,"The tabs in this tab bar."),Object(a.b)("dt",null,Object(a.b)("code",null,"visible")),Object(a.b)("dd",null,"True if the component should be visible. Defaults to true.")),Object(a.b)("h5",{id:"returns"},"Returns"),Object(a.b)("p",null,"A ",Object(a.b)("code",null,Object(a.b)("a",{title:"h2o_wave.types.Tabs",href:"types#h2o_wave.types.Tabs"},"Tabs"))," instance.")))),Object(a.b)("div",{className:"api"},Object(a.b)("h3",{id:"tall_gauge_stat_card"},"tall_gauge_stat_card ",Object(a.b)("a",{name:"h2o_wave.ui.tall_gauge_stat_card"})),Object(a.b)("div",{className:"api__body"},Object(a.b)("div",{className:"api__signature"},"def ",Object(a.b)("span",{class:"ident"},"tall_gauge_stat_card"),"(box:\xa0str, title:\xa0str, value:\xa0str, aux_value:\xa0str, progress:\xa0float, plot_color:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, data:\xa0Union[dict,\xa0str,\xa0NoneType]\xa0=\xa0None, commands:\xa0Union[List[",Object(a.b)("a",{title:"h2o_wave.types.Command",href:"types#h2o_wave.types.Command"},"Command"),"],\xa0NoneType]\xa0=\xa0None) \u2011>\xa0",Object(a.b)("a",{title:"h2o_wave.types.TallGaugeStatCard",href:"types#h2o_wave.types.TallGaugeStatCard"},"TallGaugeStatCard")),Object(a.b)("div",{className:"api__description"},Object(a.b)("p",null,"Create a tall stat card displaying a primary value, an auxiliary value and a progress gauge."),Object(a.b)("h5",{id:"args"},"Args"),Object(a.b)("dl",null,Object(a.b)("dt",null,Object(a.b)("code",null,"box")),Object(a.b)("dd",null,"A string indicating how to place this component on the page."),Object(a.b)("dt",null,Object(a.b)("code",null,"title")),Object(a.b)("dd",null,"The card's title."),Object(a.b)("dt",null,Object(a.b)("code",null,"value")),Object(a.b)("dd",null,"The primary value displayed."),Object(a.b)("dt",null,Object(a.b)("code",null,"aux_value")),Object(a.b)("dd",null,"The auxiliary value displayed next to the primary value."),Object(a.b)("dt",null,Object(a.b)("code",null,"progress")),Object(a.b)("dd",null,"The value of the progress gauge, between 0 and 1."),Object(a.b)("dt",null,Object(a.b)("code",null,"plot_color")),Object(a.b)("dd",null,"The color of the progress gauge."),Object(a.b)("dt",null,Object(a.b)("code",null,"data")),Object(a.b)("dd",null,"Data for this card."),Object(a.b)("dt",null,Object(a.b)("code",null,"commands")),Object(a.b)("dd",null,"Contextual menu commands for this component.")),Object(a.b)("h5",{id:"returns"},"Returns"),Object(a.b)("p",null,"A ",Object(a.b)("code",null,Object(a.b)("a",{title:"h2o_wave.types.TallGaugeStatCard",href:"types#h2o_wave.types.TallGaugeStatCard"},"TallGaugeStatCard"))," instance.")))),Object(a.b)("div",{className:"api"},Object(a.b)("h3",{id:"tall_series_stat_card"},"tall_series_stat_card ",Object(a.b)("a",{name:"h2o_wave.ui.tall_series_stat_card"})),Object(a.b)("div",{className:"api__body"},Object(a.b)("div",{className:"api__signature"},"def ",Object(a.b)("span",{class:"ident"},"tall_series_stat_card"),"(box:\xa0str, title:\xa0str, value:\xa0str, aux_value:\xa0str, plot_data:\xa0Union[",Object(a.b)("a",{title:"h2o_wave.core.Data",href:"core#h2o_wave.core.Data"},"Data"),",\xa0str], plot_value:\xa0str, plot_zero_value:\xa0Union[float,\xa0NoneType]\xa0=\xa0None, plot_category:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, plot_type:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, plot_curve:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, plot_color:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, data:\xa0Union[dict,\xa0str,\xa0NoneType]\xa0=\xa0None, commands:\xa0Union[List[",Object(a.b)("a",{title:"h2o_wave.types.Command",href:"types#h2o_wave.types.Command"},"Command"),"],\xa0NoneType]\xa0=\xa0None) \u2011>\xa0",Object(a.b)("a",{title:"h2o_wave.types.TallSeriesStatCard",href:"types#h2o_wave.types.TallSeriesStatCard"},"TallSeriesStatCard")),Object(a.b)("div",{className:"api__description"},Object(a.b)("p",null,"Create a tall stat card displaying a primary value, an auxiliary value and a series plot."),Object(a.b)("h5",{id:"args"},"Args"),Object(a.b)("dl",null,Object(a.b)("dt",null,Object(a.b)("code",null,"box")),Object(a.b)("dd",null,"A string indicating how to place this component on the page."),Object(a.b)("dt",null,Object(a.b)("code",null,"title")),Object(a.b)("dd",null,"The card's title."),Object(a.b)("dt",null,Object(a.b)("code",null,"value")),Object(a.b)("dd",null,"The primary value displayed."),Object(a.b)("dt",null,Object(a.b)("code",null,"aux_value")),Object(a.b)("dd",null,"The auxiliary value displayed below the primary value."),Object(a.b)("dt",null,Object(a.b)("code",null,"plot_data")),Object(a.b)("dd",null,"The plot's data."),Object(a.b)("dt",null,Object(a.b)("code",null,"plot_value")),Object(a.b)("dd",null,"The data field to use for y-axis values."),Object(a.b)("dt",null,Object(a.b)("code",null,"plot_zero_value")),Object(a.b)("dd",null,"The base value to use for each y-axis mark. Set this to ",Object(a.b)("code",null,"0")," if you want to pin the x-axis at ",Object(a.b)("code",null,"y=0"),". If not provided, the minimum value from the data is used."),Object(a.b)("dt",null,Object(a.b)("code",null,"plot_category")),Object(a.b)("dd",null,"The data field to use for x-axis values (ignored if ",Object(a.b)("code",null,"plot_type")," is ",Object(a.b)("code",null,"area"),"; must be provided if ",Object(a.b)("code",null,"plot_type")," is ",Object(a.b)("code",null,"interval"),"). Defaults to 'x'."),Object(a.b)("dt",null,Object(a.b)("code",null,"plot_type")),Object(a.b)("dd",null,"The type of plot. Defaults to ",Object(a.b)("code",null,"area"),". One of 'area', 'interval'."),Object(a.b)("dt",null,Object(a.b)("code",null,"plot_curve")),Object(a.b)("dd",null,"The plot's curve style. Defaults to ",Object(a.b)("code",null,"linear"),". One of 'linear', 'smooth', 'step', 'step-after', 'step-before'."),Object(a.b)("dt",null,Object(a.b)("code",null,"plot_color")),Object(a.b)("dd",null,"The plot's color."),Object(a.b)("dt",null,Object(a.b)("code",null,"data")),Object(a.b)("dd",null,"Data for this card."),Object(a.b)("dt",null,Object(a.b)("code",null,"commands")),Object(a.b)("dd",null,"Contextual menu commands for this component.")),Object(a.b)("h5",{id:"returns"},"Returns"),Object(a.b)("p",null,"A ",Object(a.b)("code",null,Object(a.b)("a",{title:"h2o_wave.types.TallSeriesStatCard",href:"types#h2o_wave.types.TallSeriesStatCard"},"TallSeriesStatCard"))," instance.")))),Object(a.b)("div",{className:"api"},Object(a.b)("h3",{id:"template"},"template ",Object(a.b)("a",{name:"h2o_wave.ui.template"})),Object(a.b)("div",{className:"api__body"},Object(a.b)("div",{className:"api__signature"},"def ",Object(a.b)("span",{class:"ident"},"template"),"(content:\xa0str, data:\xa0Union[dict,\xa0str,\xa0NoneType]\xa0=\xa0None, name:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, visible:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None) \u2011>\xa0",Object(a.b)("a",{title:"h2o_wave.types.Component",href:"types#h2o_wave.types.Component"},"Component")),Object(a.b)("div",{className:"api__description"},Object(a.b)("p",null,"Render dynamic content using an HTML template."),Object(a.b)("h5",{id:"args"},"Args"),Object(a.b)("dl",null,Object(a.b)("dt",null,Object(a.b)("code",null,"content")),Object(a.b)("dd",null,"The Handlebars template. ",Object(a.b)("a",{href:"https://handlebarsjs.com/guide/"},"https://handlebarsjs.com/guide/")),Object(a.b)("dt",null,Object(a.b)("code",null,"data")),Object(a.b)("dd",null,"Data for the Handlebars template"),Object(a.b)("dt",null,Object(a.b)("code",null,"name")),Object(a.b)("dd",null,"An identifying name for this component."),Object(a.b)("dt",null,Object(a.b)("code",null,"visible")),Object(a.b)("dd",null,"True if the component should be visible. Defaults to true.")),Object(a.b)("h5",{id:"returns"},"Returns"),Object(a.b)("p",null,"A ",Object(a.b)("code",null,Object(a.b)("a",{title:"h2o_wave.types.Template",href:"types#h2o_wave.types.Template"},"Template"))," instance.")))),Object(a.b)("div",{className:"api"},Object(a.b)("h3",{id:"template_card"},"template_card ",Object(a.b)("a",{name:"h2o_wave.ui.template_card"})),Object(a.b)("div",{className:"api__body"},Object(a.b)("div",{className:"api__signature"},"def ",Object(a.b)("span",{class:"ident"},"template_card"),"(box:\xa0str, title:\xa0str, content:\xa0str, data:\xa0Union[dict,\xa0str,\xa0NoneType]\xa0=\xa0None, commands:\xa0Union[List[",Object(a.b)("a",{title:"h2o_wave.types.Command",href:"types#h2o_wave.types.Command"},"Command"),"],\xa0NoneType]\xa0=\xa0None) \u2011>\xa0",Object(a.b)("a",{title:"h2o_wave.types.TemplateCard",href:"types#h2o_wave.types.TemplateCard"},"TemplateCard")),Object(a.b)("div",{className:"api__description"},Object(a.b)("p",null,"Render dynamic content using an HTML template."),Object(a.b)("h5",{id:"args"},"Args"),Object(a.b)("dl",null,Object(a.b)("dt",null,Object(a.b)("code",null,"box")),Object(a.b)("dd",null,"A string indicating how to place this component on the page."),Object(a.b)("dt",null,Object(a.b)("code",null,"title")),Object(a.b)("dd",null,"The title for this card."),Object(a.b)("dt",null,Object(a.b)("code",null,"content")),Object(a.b)("dd",null,"The Handlebars template. ",Object(a.b)("a",{href:"https://handlebarsjs.com/guide/"},"https://handlebarsjs.com/guide/")),Object(a.b)("dt",null,Object(a.b)("code",null,"data")),Object(a.b)("dd",null,"Data for the Handlebars template."),Object(a.b)("dt",null,Object(a.b)("code",null,"commands")),Object(a.b)("dd",null,"Contextual menu commands for this component.")),Object(a.b)("h5",{id:"returns"},"Returns"),Object(a.b)("p",null,"A ",Object(a.b)("code",null,Object(a.b)("a",{title:"h2o_wave.types.TemplateCard",href:"types#h2o_wave.types.TemplateCard"},"TemplateCard"))," instance.")))),Object(a.b)("div",{className:"api"},Object(a.b)("h3",{id:"text"},"text ",Object(a.b)("a",{name:"h2o_wave.ui.text"})),Object(a.b)("div",{className:"api__body"},Object(a.b)("div",{className:"api__signature"},"def ",Object(a.b)("span",{class:"ident"},"text"),"(content:\xa0str, size:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, visible:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, tooltip:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, name:\xa0Union[str,\xa0NoneType]\xa0=\xa0None) \u2011>\xa0",Object(a.b)("a",{title:"h2o_wave.types.Component",href:"types#h2o_wave.types.Component"},"Component")),Object(a.b)("div",{className:"api__description"},Object(a.b)("p",null,"Create text content."),Object(a.b)("h5",{id:"args"},"Args"),Object(a.b)("dl",null,Object(a.b)("dt",null,Object(a.b)("code",null,"content")),Object(a.b)("dd",null,"The text content."),Object(a.b)("dt",null,Object(a.b)("code",null,"size")),Object(a.b)("dd",null,"The font size of the text content. One of 'xl', 'l', 'm', 's', 'xs'."),Object(a.b)("dt",null,Object(a.b)("code",null,"visible")),Object(a.b)("dd",null,"True if the component should be visible. Defaults to true."),Object(a.b)("dt",null,Object(a.b)("code",null,"tooltip")),Object(a.b)("dd",null,"Tooltip message."),Object(a.b)("dt",null,Object(a.b)("code",null,"name")),Object(a.b)("dd",null,"An identifying name for this component.")),Object(a.b)("h5",{id:"returns"},"Returns"),Object(a.b)("p",null,"A ",Object(a.b)("code",null,Object(a.b)("a",{title:"h2o_wave.types.Text",href:"types#h2o_wave.types.Text"},"Text"))," instance.")))),Object(a.b)("div",{className:"api"},Object(a.b)("h3",{id:"text_l"},"text_l ",Object(a.b)("a",{name:"h2o_wave.ui.text_l"})),Object(a.b)("div",{className:"api__body"},Object(a.b)("div",{className:"api__signature"},"def ",Object(a.b)("span",{class:"ident"},"text_l"),"(content:\xa0str, visible:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, tooltip:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, commands:\xa0Union[List[",Object(a.b)("a",{title:"h2o_wave.types.Command",href:"types#h2o_wave.types.Command"},"Command"),"],\xa0NoneType]\xa0=\xa0None, name:\xa0Union[str,\xa0NoneType]\xa0=\xa0None) \u2011>\xa0",Object(a.b)("a",{title:"h2o_wave.types.Component",href:"types#h2o_wave.types.Component"},"Component")),Object(a.b)("div",{className:"api__description"},Object(a.b)("p",null,"Create large sized text content."),Object(a.b)("h5",{id:"args"},"Args"),Object(a.b)("dl",null,Object(a.b)("dt",null,Object(a.b)("code",null,"content")),Object(a.b)("dd",null,"The text content."),Object(a.b)("dt",null,Object(a.b)("code",null,"visible")),Object(a.b)("dd",null,"True if the component should be visible. Defaults to true."),Object(a.b)("dt",null,Object(a.b)("code",null,"tooltip")),Object(a.b)("dd",null,"Tooltip message."),Object(a.b)("dt",null,Object(a.b)("code",null,"commands")),Object(a.b)("dd",null,"Contextual menu commands for this component."),Object(a.b)("dt",null,Object(a.b)("code",null,"name")),Object(a.b)("dd",null,"An identifying name for this component.")),Object(a.b)("h5",{id:"returns"},"Returns"),Object(a.b)("p",null,"A ",Object(a.b)("code",null,Object(a.b)("a",{title:"h2o_wave.types.TextL",href:"types#h2o_wave.types.TextL"},"TextL"))," instance.")))),Object(a.b)("div",{className:"api"},Object(a.b)("h3",{id:"text_m"},"text_m ",Object(a.b)("a",{name:"h2o_wave.ui.text_m"})),Object(a.b)("div",{className:"api__body"},Object(a.b)("div",{className:"api__signature"},"def ",Object(a.b)("span",{class:"ident"},"text_m"),"(content:\xa0str, visible:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, tooltip:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, name:\xa0Union[str,\xa0NoneType]\xa0=\xa0None) \u2011>\xa0",Object(a.b)("a",{title:"h2o_wave.types.Component",href:"types#h2o_wave.types.Component"},"Component")),Object(a.b)("div",{className:"api__description"},Object(a.b)("p",null,"Create medium sized text content."),Object(a.b)("h5",{id:"args"},"Args"),Object(a.b)("dl",null,Object(a.b)("dt",null,Object(a.b)("code",null,"content")),Object(a.b)("dd",null,"The text content."),Object(a.b)("dt",null,Object(a.b)("code",null,"visible")),Object(a.b)("dd",null,"True if the component should be visible. Defaults to true."),Object(a.b)("dt",null,Object(a.b)("code",null,"tooltip")),Object(a.b)("dd",null,"Tooltip message."),Object(a.b)("dt",null,Object(a.b)("code",null,"name")),Object(a.b)("dd",null,"An identifying name for this component.")),Object(a.b)("h5",{id:"returns"},"Returns"),Object(a.b)("p",null,"A ",Object(a.b)("code",null,Object(a.b)("a",{title:"h2o_wave.types.TextM",href:"types#h2o_wave.types.TextM"},"TextM"))," instance.")))),Object(a.b)("div",{className:"api"},Object(a.b)("h3",{id:"text_s"},"text_s ",Object(a.b)("a",{name:"h2o_wave.ui.text_s"})),Object(a.b)("div",{className:"api__body"},Object(a.b)("div",{className:"api__signature"},"def ",Object(a.b)("span",{class:"ident"},"text_s"),"(content:\xa0str, visible:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, tooltip:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, name:\xa0Union[str,\xa0NoneType]\xa0=\xa0None) \u2011>\xa0",Object(a.b)("a",{title:"h2o_wave.types.Component",href:"types#h2o_wave.types.Component"},"Component")),Object(a.b)("div",{className:"api__description"},Object(a.b)("p",null,"Create small sized text content."),Object(a.b)("h5",{id:"args"},"Args"),Object(a.b)("dl",null,Object(a.b)("dt",null,Object(a.b)("code",null,"content")),Object(a.b)("dd",null,"The text content."),Object(a.b)("dt",null,Object(a.b)("code",null,"visible")),Object(a.b)("dd",null,"True if the component should be visible. Defaults to true."),Object(a.b)("dt",null,Object(a.b)("code",null,"tooltip")),Object(a.b)("dd",null,"Tooltip message."),Object(a.b)("dt",null,Object(a.b)("code",null,"name")),Object(a.b)("dd",null,"An identifying name for this component.")),Object(a.b)("h5",{id:"returns"},"Returns"),Object(a.b)("p",null,"A ",Object(a.b)("code",null,Object(a.b)("a",{title:"h2o_wave.types.TextS",href:"types#h2o_wave.types.TextS"},"TextS"))," instance.")))),Object(a.b)("div",{className:"api"},Object(a.b)("h3",{id:"text_xl"},"text_xl ",Object(a.b)("a",{name:"h2o_wave.ui.text_xl"})),Object(a.b)("div",{className:"api__body"},Object(a.b)("div",{className:"api__signature"},"def ",Object(a.b)("span",{class:"ident"},"text_xl"),"(content:\xa0str, visible:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, tooltip:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, commands:\xa0Union[List[",Object(a.b)("a",{title:"h2o_wave.types.Command",href:"types#h2o_wave.types.Command"},"Command"),"],\xa0NoneType]\xa0=\xa0None, name:\xa0Union[str,\xa0NoneType]\xa0=\xa0None) \u2011>\xa0",Object(a.b)("a",{title:"h2o_wave.types.Component",href:"types#h2o_wave.types.Component"},"Component")),Object(a.b)("div",{className:"api__description"},Object(a.b)("p",null,"Create extra-large sized text content."),Object(a.b)("h5",{id:"args"},"Args"),Object(a.b)("dl",null,Object(a.b)("dt",null,Object(a.b)("code",null,"content")),Object(a.b)("dd",null,"The text content."),Object(a.b)("dt",null,Object(a.b)("code",null,"visible")),Object(a.b)("dd",null,"True if the component should be visible. Defaults to true."),Object(a.b)("dt",null,Object(a.b)("code",null,"tooltip")),Object(a.b)("dd",null,"Tooltip message."),Object(a.b)("dt",null,Object(a.b)("code",null,"commands")),Object(a.b)("dd",null,"Contextual menu commands for this component."),Object(a.b)("dt",null,Object(a.b)("code",null,"name")),Object(a.b)("dd",null,"An identifying name for this component.")),Object(a.b)("h5",{id:"returns"},"Returns"),Object(a.b)("p",null,"A ",Object(a.b)("code",null,Object(a.b)("a",{title:"h2o_wave.types.TextXl",href:"types#h2o_wave.types.TextXl"},"TextXl"))," instance.")))),Object(a.b)("div",{className:"api"},Object(a.b)("h3",{id:"text_xs"},"text_xs ",Object(a.b)("a",{name:"h2o_wave.ui.text_xs"})),Object(a.b)("div",{className:"api__body"},Object(a.b)("div",{className:"api__signature"},"def ",Object(a.b)("span",{class:"ident"},"text_xs"),"(content:\xa0str, visible:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, tooltip:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, name:\xa0Union[str,\xa0NoneType]\xa0=\xa0None) \u2011>\xa0",Object(a.b)("a",{title:"h2o_wave.types.Component",href:"types#h2o_wave.types.Component"},"Component")),Object(a.b)("div",{className:"api__description"},Object(a.b)("p",null,"Create extra-small sized text content."),Object(a.b)("h5",{id:"args"},"Args"),Object(a.b)("dl",null,Object(a.b)("dt",null,Object(a.b)("code",null,"content")),Object(a.b)("dd",null,"The text content."),Object(a.b)("dt",null,Object(a.b)("code",null,"visible")),Object(a.b)("dd",null,"True if the component should be visible. Defaults to true."),Object(a.b)("dt",null,Object(a.b)("code",null,"tooltip")),Object(a.b)("dd",null,"Tooltip message."),Object(a.b)("dt",null,Object(a.b)("code",null,"name")),Object(a.b)("dd",null,"An identifying name for this component.")),Object(a.b)("h5",{id:"returns"},"Returns"),Object(a.b)("p",null,"A ",Object(a.b)("code",null,Object(a.b)("a",{title:"h2o_wave.types.TextXs",href:"types#h2o_wave.types.TextXs"},"TextXs"))," instance.")))),Object(a.b)("div",{className:"api"},Object(a.b)("h3",{id:"textbox"},"textbox ",Object(a.b)("a",{name:"h2o_wave.ui.textbox"})),Object(a.b)("div",{className:"api__body"},Object(a.b)("div",{className:"api__signature"},"def ",Object(a.b)("span",{class:"ident"},"textbox"),"(name:\xa0str, label:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, placeholder:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, value:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, mask:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, icon:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, prefix:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, suffix:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, error:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, required:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, disabled:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, readonly:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, multiline:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, password:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, trigger:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, visible:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, tooltip:\xa0Union[str,\xa0NoneType]\xa0=\xa0None) \u2011>\xa0",Object(a.b)("a",{title:"h2o_wave.types.Component",href:"types#h2o_wave.types.Component"},"Component")),Object(a.b)("div",{className:"api__description"},Object(a.b)("p",null,"Create a text box."),Object(a.b)("p",null,"The text box component enables a user to type text into an app. It's typically used to capture a single line of text, but can be configured to capture multiple lines of text. The text displays on the screen in a simple, uniform format."),Object(a.b)("h5",{id:"args"},"Args"),Object(a.b)("dl",null,Object(a.b)("dt",null,Object(a.b)("code",null,"name")),Object(a.b)("dd",null,"An identifying name for this component."),Object(a.b)("dt",null,Object(a.b)("code",null,"label")),Object(a.b)("dd",null,"The text displayed above the field."),Object(a.b)("dt",null,Object(a.b)("code",null,"placeholder")),Object(a.b)("dd",null,"A string that provides a brief hint to the user as to what kind of information is expected in the field. It should be a word or short phrase that demonstrates the expected type of data, rather than an explanatory message."),Object(a.b)("dt",null,Object(a.b)("code",null,"value")),Object(a.b)("dd",null,"Text to be displayed inside the text box."),Object(a.b)("dt",null,Object(a.b)("code",null,"mask")),Object(a.b)("dd",null,"The masking string that defines the mask's behavior. A backslash will escape any character. Special format characters are: '9': [0-9] 'a': [a-zA-Z] '*': [a-zA-Z0-9]."),Object(a.b)("dt",null,Object(a.b)("code",null,"icon")),Object(a.b)("dd",null,"Icon displayed in the far right end of the text field."),Object(a.b)("dt",null,Object(a.b)("code",null,"prefix")),Object(a.b)("dd",null,"Text to be displayed before the text box contents."),Object(a.b)("dt",null,Object(a.b)("code",null,"suffix")),Object(a.b)("dd",null,"Text to be displayed after the text box contents."),Object(a.b)("dt",null,Object(a.b)("code",null,"error")),Object(a.b)("dd",null,"Text to be displayed as an error below the text box."),Object(a.b)("dt",null,Object(a.b)("code",null,"required")),Object(a.b)("dd",null,"True if the text box is a required field."),Object(a.b)("dt",null,Object(a.b)("code",null,"disabled")),Object(a.b)("dd",null,"True if the text box is disabled."),Object(a.b)("dt",null,Object(a.b)("code",null,"readonly")),Object(a.b)("dd",null,"True if the text box is a read-only field."),Object(a.b)("dt",null,Object(a.b)("code",null,"multiline")),Object(a.b)("dd",null,"True if the text box should allow multi-line text entry."),Object(a.b)("dt",null,Object(a.b)("code",null,"password")),Object(a.b)("dd",null,"True if the text box should hide text content."),Object(a.b)("dt",null,Object(a.b)("code",null,"trigger")),Object(a.b)("dd",null,"True if the form should be submitted when the text value changes."),Object(a.b)("dt",null,Object(a.b)("code",null,"visible")),Object(a.b)("dd",null,"True if the component should be visible. Defaults to true."),Object(a.b)("dt",null,Object(a.b)("code",null,"tooltip")),Object(a.b)("dd",null,"An optional tooltip message displayed when a user clicks the help icon to the right of the component.")),Object(a.b)("h5",{id:"returns"},"Returns"),Object(a.b)("p",null,"A ",Object(a.b)("code",null,Object(a.b)("a",{title:"h2o_wave.types.Textbox",href:"types#h2o_wave.types.Textbox"},"Textbox"))," instance.")))),Object(a.b)("div",{className:"api"},Object(a.b)("h3",{id:"toggle"},"toggle ",Object(a.b)("a",{name:"h2o_wave.ui.toggle"})),Object(a.b)("div",{className:"api__body"},Object(a.b)("div",{className:"api__signature"},"def ",Object(a.b)("span",{class:"ident"},"toggle"),"(name:\xa0str, label:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, value:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, disabled:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, trigger:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, visible:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, tooltip:\xa0Union[str,\xa0NoneType]\xa0=\xa0None) \u2011>\xa0",Object(a.b)("a",{title:"h2o_wave.types.Component",href:"types#h2o_wave.types.Component"},"Component")),Object(a.b)("div",{className:"api__description"},Object(a.b)("p",null,"Create a toggle. Toggles represent a physical switch that allows users to turn things on or off. Use toggles to present users with two mutually exclusive options (like on/off), where choosing an option results in an immediate action."),Object(a.b)("p",null,"Use a toggle for binary operations that take effect right after the user flips the Toggle. For example, use a Toggle to turn services or hardware components on or off. In other words, if a physical switch would work for the action, a Toggle is probably the best component to use."),Object(a.b)("h5",{id:"args"},"Args"),Object(a.b)("dl",null,Object(a.b)("dt",null,Object(a.b)("code",null,"name")),Object(a.b)("dd",null,"An identifying name for this component."),Object(a.b)("dt",null,Object(a.b)("code",null,"label")),Object(a.b)("dd",null,"Text to be displayed alongside the component."),Object(a.b)("dt",null,Object(a.b)("code",null,"value")),Object(a.b)("dd",null,"True if selected, False if unselected."),Object(a.b)("dt",null,Object(a.b)("code",null,"disabled")),Object(a.b)("dd",null,"True if the checkbox is disabled."),Object(a.b)("dt",null,Object(a.b)("code",null,"trigger")),Object(a.b)("dd",null,"True if the form should be submitted when the toggle value changes."),Object(a.b)("dt",null,Object(a.b)("code",null,"visible")),Object(a.b)("dd",null,"True if the component should be visible. Defaults to true."),Object(a.b)("dt",null,Object(a.b)("code",null,"tooltip")),Object(a.b)("dd",null,"An optional tooltip message displayed when a user clicks the help icon to the right of the component.")),Object(a.b)("h5",{id:"returns"},"Returns"),Object(a.b)("p",null,"A ",Object(a.b)("code",null,Object(a.b)("a",{title:"h2o_wave.types.Toggle",href:"types#h2o_wave.types.Toggle"},"Toggle"))," instance.")))),Object(a.b)("div",{className:"api"},Object(a.b)("h3",{id:"toolbar_card"},"toolbar_card ",Object(a.b)("a",{name:"h2o_wave.ui.toolbar_card"})),Object(a.b)("div",{className:"api__body"},Object(a.b)("div",{className:"api__signature"},"def ",Object(a.b)("span",{class:"ident"},"toolbar_card"),"(box:\xa0str, items:\xa0List[",Object(a.b)("a",{title:"h2o_wave.types.Command",href:"types#h2o_wave.types.Command"},"Command"),"], secondary_items:\xa0Union[List[",Object(a.b)("a",{title:"h2o_wave.types.Command",href:"types#h2o_wave.types.Command"},"Command"),"],\xa0NoneType]\xa0=\xa0None, overflow_items:\xa0Union[List[",Object(a.b)("a",{title:"h2o_wave.types.Command",href:"types#h2o_wave.types.Command"},"Command"),"],\xa0NoneType]\xa0=\xa0None, commands:\xa0Union[List[",Object(a.b)("a",{title:"h2o_wave.types.Command",href:"types#h2o_wave.types.Command"},"Command"),"],\xa0NoneType]\xa0=\xa0None) \u2011>\xa0",Object(a.b)("a",{title:"h2o_wave.types.ToolbarCard",href:"types#h2o_wave.types.ToolbarCard"},"ToolbarCard")),Object(a.b)("div",{className:"api__description"},Object(a.b)("p",null,"Create a card containing a toolbar."),Object(a.b)("h5",{id:"args"},"Args"),Object(a.b)("dl",null,Object(a.b)("dt",null,Object(a.b)("code",null,"box")),Object(a.b)("dd",null,"A string indicating how to place this component on the page."),Object(a.b)("dt",null,Object(a.b)("code",null,"items")),Object(a.b)("dd",null,"Items to render."),Object(a.b)("dt",null,Object(a.b)("code",null,"secondary_items")),Object(a.b)("dd",null,"Items to render on the right side (or left, in RTL)."),Object(a.b)("dt",null,Object(a.b)("code",null,"overflow_items")),Object(a.b)("dd",null,"Items to render in an overflow menu."),Object(a.b)("dt",null,Object(a.b)("code",null,"commands")),Object(a.b)("dd",null,"Contextual menu commands for this component.")),Object(a.b)("h5",{id:"returns"},"Returns"),Object(a.b)("p",null,"A ",Object(a.b)("code",null,Object(a.b)("a",{title:"h2o_wave.types.ToolbarCard",href:"types#h2o_wave.types.ToolbarCard"},"ToolbarCard"))," instance.")))),Object(a.b)("div",{className:"api"},Object(a.b)("h3",{id:"vega_card"},"vega_card ",Object(a.b)("a",{name:"h2o_wave.ui.vega_card"})),Object(a.b)("div",{className:"api__body"},Object(a.b)("div",{className:"api__signature"},"def ",Object(a.b)("span",{class:"ident"},"vega_card"),"(box:\xa0str, title:\xa0str, specification:\xa0str, data:\xa0Union[dict,\xa0str,\xa0NoneType]\xa0=\xa0None, commands:\xa0Union[List[",Object(a.b)("a",{title:"h2o_wave.types.Command",href:"types#h2o_wave.types.Command"},"Command"),"],\xa0NoneType]\xa0=\xa0None) \u2011>\xa0",Object(a.b)("a",{title:"h2o_wave.types.VegaCard",href:"types#h2o_wave.types.VegaCard"},"VegaCard")),Object(a.b)("div",{className:"api__description"},Object(a.b)("p",null,"Create a card containing a Vega-lite plot."),Object(a.b)("h5",{id:"args"},"Args"),Object(a.b)("dl",null,Object(a.b)("dt",null,Object(a.b)("code",null,"box")),Object(a.b)("dd",null,"A string indicating how to place this component on the page."),Object(a.b)("dt",null,Object(a.b)("code",null,"title")),Object(a.b)("dd",null,"The title of this card."),Object(a.b)("dt",null,Object(a.b)("code",null,"specification")),Object(a.b)("dd",null,"The Vega-lite specification."),Object(a.b)("dt",null,Object(a.b)("code",null,"data")),Object(a.b)("dd",null,"Data for the plot, if any."),Object(a.b)("dt",null,Object(a.b)("code",null,"commands")),Object(a.b)("dd",null,"Contextual menu commands for this component.")),Object(a.b)("h5",{id:"returns"},"Returns"),Object(a.b)("p",null,"A ",Object(a.b)("code",null,Object(a.b)("a",{title:"h2o_wave.types.VegaCard",href:"types#h2o_wave.types.VegaCard"},"VegaCard"))," instance.")))),Object(a.b)("div",{className:"api"},Object(a.b)("h3",{id:"vega_visualization"},"vega_visualization ",Object(a.b)("a",{name:"h2o_wave.ui.vega_visualization"})),Object(a.b)("div",{className:"api__body"},Object(a.b)("div",{className:"api__signature"},"def ",Object(a.b)("span",{class:"ident"},"vega_visualization"),"(specification:\xa0str, data:\xa0Union[dict,\xa0str,\xa0NoneType]\xa0=\xa0None, width:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, height:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, name:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, visible:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None) \u2011>\xa0",Object(a.b)("a",{title:"h2o_wave.types.Component",href:"types#h2o_wave.types.Component"},"Component")),Object(a.b)("div",{className:"api__description"},Object(a.b)("p",null,"Create a Vega-lite plot for display inside a form."),Object(a.b)("h5",{id:"args"},"Args"),Object(a.b)("dl",null,Object(a.b)("dt",null,Object(a.b)("code",null,"specification")),Object(a.b)("dd",null,"The Vega-lite specification."),Object(a.b)("dt",null,Object(a.b)("code",null,"data")),Object(a.b)("dd",null,"Data for the plot, if any."),Object(a.b)("dt",null,Object(a.b)("code",null,"width")),Object(a.b)("dd",null,"The width of the visualization. Defaults to 100%."),Object(a.b)("dt",null,Object(a.b)("code",null,"height")),Object(a.b)("dd",null,"The height of the visualization. Defaults to 300px."),Object(a.b)("dt",null,Object(a.b)("code",null,"name")),Object(a.b)("dd",null,"An identifying name for this component."),Object(a.b)("dt",null,Object(a.b)("code",null,"visible")),Object(a.b)("dd",null,"True if the component should be visible. Defaults to true.")),Object(a.b)("h5",{id:"returns"},"Returns"),Object(a.b)("p",null,"A ",Object(a.b)("code",null,Object(a.b)("a",{title:"h2o_wave.types.VegaVisualization",href:"types#h2o_wave.types.VegaVisualization"},"VegaVisualization"))," instance.")))),Object(a.b)("div",{className:"api"},Object(a.b)("h3",{id:"visualization"},"visualization ",Object(a.b)("a",{name:"h2o_wave.ui.visualization"})),Object(a.b)("div",{className:"api__body"},Object(a.b)("div",{className:"api__signature"},"def ",Object(a.b)("span",{class:"ident"},"visualization"),"(plot:\xa0",Object(a.b)("a",{title:"h2o_wave.types.Plot",href:"types#h2o_wave.types.Plot"},"Plot"),", data:\xa0Union[dict,\xa0str], width:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, height:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, name:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, visible:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None) \u2011>\xa0",Object(a.b)("a",{title:"h2o_wave.types.Component",href:"types#h2o_wave.types.Component"},"Component")),Object(a.b)("div",{className:"api__description"},Object(a.b)("p",null,"Create a visualization for display inside a form."),Object(a.b)("h5",{id:"args"},"Args"),Object(a.b)("dl",null,Object(a.b)("dt",null,Object(a.b)("code",null,"plot")),Object(a.b)("dd",null,"The plot to be rendered in this visualization."),Object(a.b)("dt",null,Object(a.b)("code",null,"data")),Object(a.b)("dd",null,"Data for this visualization."),Object(a.b)("dt",null,Object(a.b)("code",null,"width")),Object(a.b)("dd",null,"The width of the visualization. Defaults to 100%."),Object(a.b)("dt",null,Object(a.b)("code",null,"height")),Object(a.b)("dd",null,"The hight of the visualization. Defaults to 300px."),Object(a.b)("dt",null,Object(a.b)("code",null,"name")),Object(a.b)("dd",null,"An identifying name for this component."),Object(a.b)("dt",null,Object(a.b)("code",null,"visible")),Object(a.b)("dd",null,"True if the component should be visible. Defaults to true.")),Object(a.b)("h5",{id:"returns"},"Returns"),Object(a.b)("p",null,"A ",Object(a.b)("code",null,Object(a.b)("a",{title:"h2o_wave.types.Visualization",href:"types#h2o_wave.types.Visualization"},"Visualization"))," instance.")))),Object(a.b)("div",{className:"api"},Object(a.b)("h3",{id:"wide_bar_stat_card"},"wide_bar_stat_card ",Object(a.b)("a",{name:"h2o_wave.ui.wide_bar_stat_card"})),Object(a.b)("div",{className:"api__body"},Object(a.b)("div",{className:"api__signature"},"def ",Object(a.b)("span",{class:"ident"},"wide_bar_stat_card"),"(box:\xa0str, title:\xa0str, value:\xa0str, aux_value:\xa0str, progress:\xa0float, plot_color:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, data:\xa0Union[dict,\xa0str,\xa0NoneType]\xa0=\xa0None, commands:\xa0Union[List[",Object(a.b)("a",{title:"h2o_wave.types.Command",href:"types#h2o_wave.types.Command"},"Command"),"],\xa0NoneType]\xa0=\xa0None) \u2011>\xa0",Object(a.b)("a",{title:"h2o_wave.types.WideBarStatCard",href:"types#h2o_wave.types.WideBarStatCard"},"WideBarStatCard")),Object(a.b)("div",{className:"api__description"},Object(a.b)("p",null,"Create a wide stat card displaying a primary value, an auxiliary value and a progress bar."),Object(a.b)("h5",{id:"args"},"Args"),Object(a.b)("dl",null,Object(a.b)("dt",null,Object(a.b)("code",null,"box")),Object(a.b)("dd",null,"A string indicating how to place this component on the page."),Object(a.b)("dt",null,Object(a.b)("code",null,"title")),Object(a.b)("dd",null,"The card's title."),Object(a.b)("dt",null,Object(a.b)("code",null,"value")),Object(a.b)("dd",null,"The primary value displayed."),Object(a.b)("dt",null,Object(a.b)("code",null,"aux_value")),Object(a.b)("dd",null,"The auxiliary value displayed next to the primary value."),Object(a.b)("dt",null,Object(a.b)("code",null,"progress")),Object(a.b)("dd",null,"The value of the progress bar, between 0 and 1."),Object(a.b)("dt",null,Object(a.b)("code",null,"plot_color")),Object(a.b)("dd",null,"The color of the progress bar."),Object(a.b)("dt",null,Object(a.b)("code",null,"data")),Object(a.b)("dd",null,"Data for this card."),Object(a.b)("dt",null,Object(a.b)("code",null,"commands")),Object(a.b)("dd",null,"Contextual menu commands for this component.")),Object(a.b)("h5",{id:"returns"},"Returns"),Object(a.b)("p",null,"A ",Object(a.b)("code",null,Object(a.b)("a",{title:"h2o_wave.types.WideBarStatCard",href:"types#h2o_wave.types.WideBarStatCard"},"WideBarStatCard"))," instance.")))),Object(a.b)("div",{className:"api"},Object(a.b)("h3",{id:"wide_gauge_stat_card"},"wide_gauge_stat_card ",Object(a.b)("a",{name:"h2o_wave.ui.wide_gauge_stat_card"})),Object(a.b)("div",{className:"api__body"},Object(a.b)("div",{className:"api__signature"},"def ",Object(a.b)("span",{class:"ident"},"wide_gauge_stat_card"),"(box:\xa0str, title:\xa0str, value:\xa0str, aux_value:\xa0str, progress:\xa0float, plot_color:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, data:\xa0Union[dict,\xa0str,\xa0NoneType]\xa0=\xa0None, commands:\xa0Union[List[",Object(a.b)("a",{title:"h2o_wave.types.Command",href:"types#h2o_wave.types.Command"},"Command"),"],\xa0NoneType]\xa0=\xa0None) \u2011>\xa0",Object(a.b)("a",{title:"h2o_wave.types.WideGaugeStatCard",href:"types#h2o_wave.types.WideGaugeStatCard"},"WideGaugeStatCard")),Object(a.b)("div",{className:"api__description"},Object(a.b)("p",null,"Create a wide stat card displaying a primary value, an auxiliary value and a progress gauge."),Object(a.b)("h5",{id:"args"},"Args"),Object(a.b)("dl",null,Object(a.b)("dt",null,Object(a.b)("code",null,"box")),Object(a.b)("dd",null,"A string indicating how to place this component on the page."),Object(a.b)("dt",null,Object(a.b)("code",null,"title")),Object(a.b)("dd",null,"The card's title."),Object(a.b)("dt",null,Object(a.b)("code",null,"value")),Object(a.b)("dd",null,"The primary value displayed."),Object(a.b)("dt",null,Object(a.b)("code",null,"aux_value")),Object(a.b)("dd",null,"The auxiliary value displayed next to the primary value."),Object(a.b)("dt",null,Object(a.b)("code",null,"progress")),Object(a.b)("dd",null,"The value of the progress gauge, between 0 and 1."),Object(a.b)("dt",null,Object(a.b)("code",null,"plot_color")),Object(a.b)("dd",null,"The color of the progress gauge."),Object(a.b)("dt",null,Object(a.b)("code",null,"data")),Object(a.b)("dd",null,"Data for this card."),Object(a.b)("dt",null,Object(a.b)("code",null,"commands")),Object(a.b)("dd",null,"Contextual menu commands for this component.")),Object(a.b)("h5",{id:"returns"},"Returns"),Object(a.b)("p",null,"A ",Object(a.b)("code",null,Object(a.b)("a",{title:"h2o_wave.types.WideGaugeStatCard",href:"types#h2o_wave.types.WideGaugeStatCard"},"WideGaugeStatCard"))," instance.")))),Object(a.b)("div",{className:"api"},Object(a.b)("h3",{id:"wide_series_stat_card"},"wide_series_stat_card ",Object(a.b)("a",{name:"h2o_wave.ui.wide_series_stat_card"})),Object(a.b)("div",{className:"api__body"},Object(a.b)("div",{className:"api__signature"},"def ",Object(a.b)("span",{class:"ident"},"wide_series_stat_card"),"(box:\xa0str, title:\xa0str, value:\xa0str, aux_value:\xa0str, plot_data:\xa0Union[",Object(a.b)("a",{title:"h2o_wave.core.Data",href:"core#h2o_wave.core.Data"},"Data"),",\xa0str], plot_value:\xa0str, plot_zero_value:\xa0Union[float,\xa0NoneType]\xa0=\xa0None, plot_category:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, plot_type:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, plot_curve:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, plot_color:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, data:\xa0Union[dict,\xa0str,\xa0NoneType]\xa0=\xa0None, commands:\xa0Union[List[",Object(a.b)("a",{title:"h2o_wave.types.Command",href:"types#h2o_wave.types.Command"},"Command"),"],\xa0NoneType]\xa0=\xa0None) \u2011>\xa0",Object(a.b)("a",{title:"h2o_wave.types.WideSeriesStatCard",href:"types#h2o_wave.types.WideSeriesStatCard"},"WideSeriesStatCard")),Object(a.b)("div",{className:"api__description"},Object(a.b)("p",null,"Create a wide stat card displaying a primary value, an auxiliary value and a series plot."),Object(a.b)("h5",{id:"args"},"Args"),Object(a.b)("dl",null,Object(a.b)("dt",null,Object(a.b)("code",null,"box")),Object(a.b)("dd",null,"A string indicating how to place this component on the page."),Object(a.b)("dt",null,Object(a.b)("code",null,"title")),Object(a.b)("dd",null,"The card's title."),Object(a.b)("dt",null,Object(a.b)("code",null,"value")),Object(a.b)("dd",null,"The primary value displayed."),Object(a.b)("dt",null,Object(a.b)("code",null,"aux_value")),Object(a.b)("dd",null,"The auxiliary value displayed below the primary value."),Object(a.b)("dt",null,Object(a.b)("code",null,"plot_data")),Object(a.b)("dd",null,"The plot's data."),Object(a.b)("dt",null,Object(a.b)("code",null,"plot_value")),Object(a.b)("dd",null,"The data field to use for y-axis values."),Object(a.b)("dt",null,Object(a.b)("code",null,"plot_zero_value")),Object(a.b)("dd",null,"The base value to use for each y-axis mark. Set this to ",Object(a.b)("code",null,"0")," if you want to pin the x-axis at ",Object(a.b)("code",null,"y=0"),". If not provided, the minimum value from the data is used."),Object(a.b)("dt",null,Object(a.b)("code",null,"plot_category")),Object(a.b)("dd",null,"The data field to use for x-axis values (ignored if ",Object(a.b)("code",null,"plot_type")," is ",Object(a.b)("code",null,"area"),"; must be provided if ",Object(a.b)("code",null,"plot_type")," is ",Object(a.b)("code",null,"interval"),"). Defaults to 'x'."),Object(a.b)("dt",null,Object(a.b)("code",null,"plot_type")),Object(a.b)("dd",null,"The type of plot. Defaults to ",Object(a.b)("code",null,"area"),". One of 'area', 'interval'."),Object(a.b)("dt",null,Object(a.b)("code",null,"plot_curve")),Object(a.b)("dd",null,"The plot's curve style. Defaults to ",Object(a.b)("code",null,"linear"),". One of 'linear', 'smooth', 'step', 'step-after', 'step-before'."),Object(a.b)("dt",null,Object(a.b)("code",null,"plot_color")),Object(a.b)("dd",null,"The plot's color."),Object(a.b)("dt",null,Object(a.b)("code",null,"data")),Object(a.b)("dd",null,"Data for this card."),Object(a.b)("dt",null,Object(a.b)("code",null,"commands")),Object(a.b)("dd",null,"Contextual menu commands for this component.")),Object(a.b)("h5",{id:"returns"},"Returns"),Object(a.b)("p",null,"A ",Object(a.b)("code",null,Object(a.b)("a",{title:"h2o_wave.types.WideSeriesStatCard",href:"types#h2o_wave.types.WideSeriesStatCard"},"WideSeriesStatCard"))," instance.")))))}s.isMDXComponent=!0},290:function(e,t,l){"use strict";l.d(t,"a",(function(){return r})),l.d(t,"b",(function(){return O}));var n=l(0),b=l.n(n);function a(e,t,l){return t in e?Object.defineProperty(e,t,{value:l,enumerable:!0,configurable:!0,writable:!0}):e[t]=l,e}function o(e,t){var l=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),l.push.apply(l,n)}return l}function c(e){for(var t=1;t=0||(b[l]=e[l]);return b}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,l)&&(b[l]=e[l])}return b}var i=b.a.createContext({}),s=function(e){var t=b.a.useContext(i),l=t;return e&&(l="function"==typeof e?e(t):c(c({},t),e)),l},r=function(e){var t=s(e.components);return b.a.createElement(i.Provider,{value:t},e.children)},u={inlineCode:"code",wrapper:function(e){var t=e.children;return b.a.createElement(b.a.Fragment,{},t)}},p=b.a.forwardRef((function(e,t){var l=e.components,n=e.mdxType,a=e.originalType,o=e.parentName,i=d(e,["components","mdxType","originalType","parentName"]),r=s(l),p=n,O=r["".concat(o,".").concat(p)]||r[p]||u[p]||a;return l?b.a.createElement(O,c(c({ref:t},i),{},{components:l})):b.a.createElement(O,c({ref:t},i))}));function O(e,t){var l=arguments,n=t&&t.mdxType;if("string"==typeof e||n){var a=l.length,o=new Array(a);o[0]=p;var c={};for(var d in t)hasOwnProperty.call(t,d)&&(c[d]=t[d]);c.originalType=e,c.mdxType="string"==typeof e?e:n,o[1]=c;for(var i=2;i',id:"breadcrumb",children:[]},{value:'breadcrumbs_card ',id:"breadcrumbs_card",children:[]},{value:'button ',id:"button",children:[]},{value:'buttons ',id:"buttons",children:[]},{value:'checkbox ',id:"checkbox",children:[]},{value:'checklist ',id:"checklist",children:[]},{value:'choice ',id:"choice",children:[]},{value:'choice_group ',id:"choice_group",children:[]},{value:'color_picker ',id:"color_picker",children:[]},{value:'combobox ',id:"combobox",children:[]},{value:'command ',id:"command",children:[]},{value:'component ',id:"component",children:[]},{value:'date_picker ',id:"date_picker",children:[]},{value:'dropdown ',id:"dropdown",children:[]},{value:'expander ',id:"expander",children:[]},{value:'file_upload ',id:"file_upload",children:[]},{value:'flex_card ',id:"flex_card",children:[]},{value:'form_card ',id:"form_card",children:[]},{value:'frame ',id:"frame",children:[]},{value:'frame_card ',id:"frame_card",children:[]},{value:'graphics_card ',id:"graphics_card",children:[]},{value:'grid_card ',id:"grid_card",children:[]},{value:'header_card ',id:"header_card",children:[]},{value:'icon_table_cell_type ',id:"icon_table_cell_type",children:[]},{value:'image_card ',id:"image_card",children:[]},{value:'label ',id:"label",children:[]},{value:'large_bar_stat_card ',id:"large_bar_stat_card",children:[]},{value:'large_stat_card ',id:"large_stat_card",children:[]},{value:'link ',id:"link",children:[]},{value:'list_card ',id:"list_card",children:[]},{value:'list_item1_card ',id:"list_item1_card",children:[]},{value:'mark ',id:"mark",children:[]},{value:'markdown_card ',id:"markdown_card",children:[]},{value:'markup ',id:"markup",children:[]},{value:'markup_card ',id:"markup_card",children:[]},{value:'message_bar ',id:"message_bar",children:[]},{value:'meta_card ',id:"meta_card",children:[]},{value:'nav_card ',id:"nav_card",children:[]},{value:'nav_group ',id:"nav_group",children:[]},{value:'nav_item ',id:"nav_item",children:[]},{value:'picker ',id:"picker",children:[]},{value:'pixel_art_card ',id:"pixel_art_card",children:[]},{value:'plot ',id:"plot",children:[]},{value:'plot_card ',id:"plot_card",children:[]},{value:'progress ',id:"progress",children:[]},{value:'progress_table_cell_type ',id:"progress_table_cell_type",children:[]},{value:'range_slider ',id:"range_slider",children:[]},{value:'repeat_card ',id:"repeat_card",children:[]},{value:'separator ',id:"separator",children:[]},{value:'slider ',id:"slider",children:[]},{value:'small_series_stat_card ',id:"small_series_stat_card",children:[]},{value:'small_stat_card ',id:"small_stat_card",children:[]},{value:'spinbox ',id:"spinbox",children:[]},{value:'step ',id:"step",children:[]},{value:'stepper ',id:"stepper",children:[]},{value:'tab ',id:"tab",children:[]},{value:'tab_card ',id:"tab_card",children:[]},{value:'table ',id:"table",children:[]},{value:'table_cell_type ',id:"table_cell_type",children:[]},{value:'table_column ',id:"table_column",children:[]},{value:'table_row ',id:"table_row",children:[]},{value:'tabs ',id:"tabs",children:[]},{value:'tall_gauge_stat_card ',id:"tall_gauge_stat_card",children:[]},{value:'tall_series_stat_card ',id:"tall_series_stat_card",children:[]},{value:'template ',id:"template",children:[]},{value:'template_card ',id:"template_card",children:[]},{value:'text ',id:"text",children:[]},{value:'text_l ',id:"text_l",children:[]},{value:'text_m ',id:"text_m",children:[]},{value:'text_s ',id:"text_s",children:[]},{value:'text_xl ',id:"text_xl",children:[]},{value:'text_xs ',id:"text_xs",children:[]},{value:'textbox ',id:"textbox",children:[]},{value:'toggle ',id:"toggle",children:[]},{value:'toolbar_card ',id:"toolbar_card",children:[]},{value:'vega_card ',id:"vega_card",children:[]},{value:'vega_visualization ',id:"vega_visualization",children:[]},{value:'visualization ',id:"visualization",children:[]},{value:'wide_bar_stat_card ',id:"wide_bar_stat_card",children:[]},{value:'wide_gauge_stat_card ',id:"wide_gauge_stat_card",children:[]},{value:'wide_series_stat_card ',id:"wide_series_stat_card",children:[]}]}],i={rightToc:d};function s(e){var t=e.components,l=Object(b.a)(e,["components"]);return Object(a.b)("wrapper",Object(n.a)({},i,l,{components:t,mdxType:"MDXLayout"}),Object(a.b)("h2",{id:"functions"},"Functions"),Object(a.b)("div",{className:"api"},Object(a.b)("h3",{id:"breadcrumb"},"breadcrumb ",Object(a.b)("a",{name:"h2o_wave.ui.breadcrumb"})),Object(a.b)("div",{className:"api__body"},Object(a.b)("div",{className:"api__signature"},"def ",Object(a.b)("span",{class:"ident"},"breadcrumb"),"(name:\xa0str, label:\xa0str) \u2011>\xa0",Object(a.b)("a",{title:"h2o_wave.types.Breadcrumb",href:"types#h2o_wave.types.Breadcrumb"},"Breadcrumb")),Object(a.b)("div",{className:"api__description"},Object(a.b)("p",null,"Create a breadcrumb for a ",Object(a.b)("code",null,Object(a.b)("a",{title:"h2o_wave.types.BreadcrumbsCard",href:"types#h2o_wave.types.BreadcrumbsCard"},"BreadcrumbsCard")),"."),Object(a.b)("h5",{id:"args"},"Args"),Object(a.b)("dl",null,Object(a.b)("dt",null,Object(a.b)("code",null,"name")),Object(a.b)("dd",null,"The name of this item. Prefix the name with a '#' to trigger hash-change navigation."),Object(a.b)("dt",null,Object(a.b)("code",null,"label")),Object(a.b)("dd",null,"The label to display.")),Object(a.b)("h5",{id:"returns"},"Returns"),Object(a.b)("p",null,"A ",Object(a.b)("code",null,Object(a.b)("a",{title:"h2o_wave.types.Breadcrumb",href:"types#h2o_wave.types.Breadcrumb"},"Breadcrumb"))," instance.")))),Object(a.b)("div",{className:"api"},Object(a.b)("h3",{id:"breadcrumbs_card"},"breadcrumbs_card ",Object(a.b)("a",{name:"h2o_wave.ui.breadcrumbs_card"})),Object(a.b)("div",{className:"api__body"},Object(a.b)("div",{className:"api__signature"},"def ",Object(a.b)("span",{class:"ident"},"breadcrumbs_card"),"(box:\xa0str, items:\xa0List[",Object(a.b)("a",{title:"h2o_wave.types.Breadcrumb",href:"types#h2o_wave.types.Breadcrumb"},"Breadcrumb"),"], commands:\xa0Union[List[",Object(a.b)("a",{title:"h2o_wave.types.Command",href:"types#h2o_wave.types.Command"},"Command"),"],\xa0NoneType]\xa0=\xa0None) \u2011>\xa0",Object(a.b)("a",{title:"h2o_wave.types.BreadcrumbsCard",href:"types#h2o_wave.types.BreadcrumbsCard"},"BreadcrumbsCard")),Object(a.b)("div",{className:"api__description"},Object(a.b)("p",null,"Create a card containing breadcrumbs. Breadcrumbs should be used as a navigational aid in your app or site. They indicate the current page\u2019s location within a hierarchy and help the user understand where they are in relation to the rest of that hierarchy. They also afford one-click access to higher levels of that hierarchy. Breadcrumbs are typically placed, in horizontal form, under the masthead or navigation of an experience, above the primary content area."),Object(a.b)("h5",{id:"args"},"Args"),Object(a.b)("dl",null,Object(a.b)("dt",null,Object(a.b)("code",null,"box")),Object(a.b)("dd",null,"A string indicating how to place this component on the page."),Object(a.b)("dt",null,Object(a.b)("code",null,"items")),Object(a.b)("dd",null,"A list of ",Object(a.b)("code",null,Object(a.b)("a",{title:"h2o_wave.types.Breadcrumb",href:"types#h2o_wave.types.Breadcrumb"},"Breadcrumb"))," instances to display. See ",Object(a.b)("code",null,Object(a.b)("a",{title:"h2o_wave.ui.breadcrumb",href:"#h2o_wave.ui.breadcrumb"},"breadcrumb()"))),Object(a.b)("dt",null,Object(a.b)("code",null,"commands")),Object(a.b)("dd",null,"Contextual menu commands for this component.")),Object(a.b)("h5",{id:"returns"},"Returns"),Object(a.b)("p",null,"A ",Object(a.b)("code",null,Object(a.b)("a",{title:"h2o_wave.types.BreadcrumbsCard",href:"types#h2o_wave.types.BreadcrumbsCard"},"BreadcrumbsCard"))," instance.")))),Object(a.b)("div",{className:"api"},Object(a.b)("h3",{id:"button"},"button ",Object(a.b)("a",{name:"h2o_wave.ui.button"})),Object(a.b)("div",{className:"api__body"},Object(a.b)("div",{className:"api__signature"},"def ",Object(a.b)("span",{class:"ident"},"button"),"(name:\xa0str, label:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, caption:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, value:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, primary:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, disabled:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, link:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, visible:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, tooltip:\xa0Union[str,\xa0NoneType]\xa0=\xa0None) \u2011>\xa0",Object(a.b)("a",{title:"h2o_wave.types.Component",href:"types#h2o_wave.types.Component"},"Component")),Object(a.b)("div",{className:"api__description"},Object(a.b)("p",null,"Create a button."),Object(a.b)("p",null,"Buttons are best used to enable a user to commit a change or complete steps in a task. They are typically found inside forms, dialogs, panels or pages. An example of their usage is confirming the deletion of a file in a confirmation dialog."),Object(a.b)("p",null,"When considering their place in a layout, contemplate the order in which a user will flow through the UI. As an example, in a form, the individual will need to read and interact with the form fields before submitting the form. Therefore, as a general rule, the button should be placed at the bottom of the UI container which holds the related UI elements."),Object(a.b)("p",null,'Buttons may be placed within a "buttons" component which will lay out the buttons horizontally, or used individually and they will be stacked vertically.'),Object(a.b)("p",null,"While buttons can technically be used to navigate a user to another part of the experience, this is not recommended unless that navigation is part of an action or their flow."),Object(a.b)("h5",{id:"args"},"Args"),Object(a.b)("dl",null,Object(a.b)("dt",null,Object(a.b)("code",null,"name")),Object(a.b)("dd",null,"An identifying name for this component. If the name is prefixed with a '#', the button sets the location hash to the name when clicked."),Object(a.b)("dt",null,Object(a.b)("code",null,"label")),Object(a.b)("dd",null,"The text displayed on the button."),Object(a.b)("dt",null,Object(a.b)("code",null,"caption")),Object(a.b)("dd",null,"The caption displayed below the label. Setting a caption renders a compound button."),Object(a.b)("dt",null,Object(a.b)("code",null,"value")),Object(a.b)("dd",null,"A value for this button. If a value is set, it is used for the button's submitted instead of a boolean True."),Object(a.b)("dt",null,Object(a.b)("code",null,"primary")),Object(a.b)("dd",null,"True if the button should be rendered as the primary button in the set."),Object(a.b)("dt",null,Object(a.b)("code",null,"disabled")),Object(a.b)("dd",null,"True if the button should be disabled."),Object(a.b)("dt",null,Object(a.b)("code",null,"link")),Object(a.b)("dd",null,"True if the button should be rendered as link text and not a standard button."),Object(a.b)("dt",null,Object(a.b)("code",null,"visible")),Object(a.b)("dd",null,"True if the component should be visible. Defaults to true."),Object(a.b)("dt",null,Object(a.b)("code",null,"tooltip")),Object(a.b)("dd",null,"An optional tooltip message displayed when a user clicks the help icon to the right of the component.")),Object(a.b)("h5",{id:"returns"},"Returns"),Object(a.b)("p",null,"A ",Object(a.b)("code",null,Object(a.b)("a",{title:"h2o_wave.types.Button",href:"types#h2o_wave.types.Button"},"Button"))," instance.")))),Object(a.b)("div",{className:"api"},Object(a.b)("h3",{id:"buttons"},"buttons ",Object(a.b)("a",{name:"h2o_wave.ui.buttons"})),Object(a.b)("div",{className:"api__body"},Object(a.b)("div",{className:"api__signature"},"def ",Object(a.b)("span",{class:"ident"},"buttons"),"(items:\xa0List[",Object(a.b)("a",{title:"h2o_wave.types.Component",href:"types#h2o_wave.types.Component"},"Component"),"], justify:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, name:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, visible:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None) \u2011>\xa0",Object(a.b)("a",{title:"h2o_wave.types.Component",href:"types#h2o_wave.types.Component"},"Component")),Object(a.b)("div",{className:"api__description"},Object(a.b)("p",null,"Create a set of buttons to be layed out horizontally."),Object(a.b)("h5",{id:"args"},"Args"),Object(a.b)("dl",null,Object(a.b)("dt",null,Object(a.b)("code",null,"items")),Object(a.b)("dd",null,"The button in this set."),Object(a.b)("dt",null,Object(a.b)("code",null,"justify")),Object(a.b)("dd",null,"Specifies how to lay out buttons horizontally. One of 'start', 'end', 'center', 'between', 'around'."),Object(a.b)("dt",null,Object(a.b)("code",null,"name")),Object(a.b)("dd",null,"An identifying name for this component."),Object(a.b)("dt",null,Object(a.b)("code",null,"visible")),Object(a.b)("dd",null,"True if the component should be visible. Defaults to true.")),Object(a.b)("h5",{id:"returns"},"Returns"),Object(a.b)("p",null,"A ",Object(a.b)("code",null,Object(a.b)("a",{title:"h2o_wave.types.Buttons",href:"types#h2o_wave.types.Buttons"},"Buttons"))," instance.")))),Object(a.b)("div",{className:"api"},Object(a.b)("h3",{id:"checkbox"},"checkbox ",Object(a.b)("a",{name:"h2o_wave.ui.checkbox"})),Object(a.b)("div",{className:"api__body"},Object(a.b)("div",{className:"api__signature"},"def ",Object(a.b)("span",{class:"ident"},"checkbox"),"(name:\xa0str, label:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, value:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, indeterminate:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, disabled:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, trigger:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, visible:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, tooltip:\xa0Union[str,\xa0NoneType]\xa0=\xa0None) \u2011>\xa0",Object(a.b)("a",{title:"h2o_wave.types.Component",href:"types#h2o_wave.types.Component"},"Component")),Object(a.b)("div",{className:"api__description"},Object(a.b)("p",null,"Create a checkbox."),Object(a.b)("p",null,"A checkbox allows users to switch between two mutually exclusive options (checked or unchecked, on or off) through a single click or tap. It can also be used to indicate a subordinate setting or preference when paired with another component."),Object(a.b)("p",null,"A checkbox is used to select or deselect action items. It can be used for a single item or for a list of multiple items that a user can choose from. The component has two selection states: unselected and selected."),Object(a.b)("p",null,"For a binary choice, the main difference between a checkbox and a toggle switch is that the checkbox is for status and the toggle switch is for action."),Object(a.b)("p",null,"Use multiple checkboxes for multi-select scenarios in which a user chooses one or more items from a group of choices that are not mutually exclusive."),Object(a.b)("h5",{id:"args"},"Args"),Object(a.b)("dl",null,Object(a.b)("dt",null,Object(a.b)("code",null,"name")),Object(a.b)("dd",null,"An identifying name for this component."),Object(a.b)("dt",null,Object(a.b)("code",null,"label")),Object(a.b)("dd",null,"Text to be displayed alongside the checkbox."),Object(a.b)("dt",null,Object(a.b)("code",null,"value")),Object(a.b)("dd",null,"True if selected, False if unselected."),Object(a.b)("dt",null,Object(a.b)("code",null,"indeterminate")),Object(a.b)("dd",null,"True if the selection is indeterminate (neither selected nor unselected)."),Object(a.b)("dt",null,Object(a.b)("code",null,"disabled")),Object(a.b)("dd",null,"True if the checkbox is disabled."),Object(a.b)("dt",null,Object(a.b)("code",null,"trigger")),Object(a.b)("dd",null,"True if the form should be submitted when the checkbox value changes."),Object(a.b)("dt",null,Object(a.b)("code",null,"visible")),Object(a.b)("dd",null,"True if the component should be visible. Defaults to true."),Object(a.b)("dt",null,Object(a.b)("code",null,"tooltip")),Object(a.b)("dd",null,"An optional tooltip message displayed when a user clicks the help icon to the right of the component.")),Object(a.b)("h5",{id:"returns"},"Returns"),Object(a.b)("p",null,"A ",Object(a.b)("code",null,Object(a.b)("a",{title:"h2o_wave.types.Checkbox",href:"types#h2o_wave.types.Checkbox"},"Checkbox"))," instance.")))),Object(a.b)("div",{className:"api"},Object(a.b)("h3",{id:"checklist"},"checklist ",Object(a.b)("a",{name:"h2o_wave.ui.checklist"})),Object(a.b)("div",{className:"api__body"},Object(a.b)("div",{className:"api__signature"},"def ",Object(a.b)("span",{class:"ident"},"checklist"),"(name:\xa0str, label:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, values:\xa0Union[List[str],\xa0NoneType]\xa0=\xa0None, choices:\xa0Union[List[",Object(a.b)("a",{title:"h2o_wave.types.Choice",href:"types#h2o_wave.types.Choice"},"Choice"),"],\xa0NoneType]\xa0=\xa0None, trigger:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, visible:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, tooltip:\xa0Union[str,\xa0NoneType]\xa0=\xa0None) \u2011>\xa0",Object(a.b)("a",{title:"h2o_wave.types.Component",href:"types#h2o_wave.types.Component"},"Component")),Object(a.b)("div",{className:"api__description"},Object(a.b)("p",null,"Create a set of checkboxes. Use this for multi-select scenarios in which a user chooses one or more items from a group of choices that are not mutually exclusive."),Object(a.b)("h5",{id:"args"},"Args"),Object(a.b)("dl",null,Object(a.b)("dt",null,Object(a.b)("code",null,"name")),Object(a.b)("dd",null,"An identifying name for this component."),Object(a.b)("dt",null,Object(a.b)("code",null,"label")),Object(a.b)("dd",null,"Text to be displayed above the component."),Object(a.b)("dt",null,Object(a.b)("code",null,"values")),Object(a.b)("dd",null,"The names of the selected choices."),Object(a.b)("dt",null,Object(a.b)("code",null,"choices")),Object(a.b)("dd",null,"The choices to be presented."),Object(a.b)("dt",null,Object(a.b)("code",null,"trigger")),Object(a.b)("dd",null,"True if the form should be submitted when the checklist value changes."),Object(a.b)("dt",null,Object(a.b)("code",null,"visible")),Object(a.b)("dd",null,"True if the component should be visible. Defaults to true."),Object(a.b)("dt",null,Object(a.b)("code",null,"tooltip")),Object(a.b)("dd",null,"An optional tooltip message displayed when a user clicks the help icon to the right of the component.")),Object(a.b)("h5",{id:"returns"},"Returns"),Object(a.b)("p",null,"A ",Object(a.b)("code",null,Object(a.b)("a",{title:"h2o_wave.types.Checklist",href:"types#h2o_wave.types.Checklist"},"Checklist"))," instance.")))),Object(a.b)("div",{className:"api"},Object(a.b)("h3",{id:"choice"},"choice ",Object(a.b)("a",{name:"h2o_wave.ui.choice"})),Object(a.b)("div",{className:"api__body"},Object(a.b)("div",{className:"api__signature"},"def ",Object(a.b)("span",{class:"ident"},"choice"),"(name:\xa0str, label:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, disabled:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None) \u2011>\xa0",Object(a.b)("a",{title:"h2o_wave.types.Choice",href:"types#h2o_wave.types.Choice"},"Choice")),Object(a.b)("div",{className:"api__description"},Object(a.b)("p",null,"Create a choice for a checklist, choice group or dropdown."),Object(a.b)("h5",{id:"args"},"Args"),Object(a.b)("dl",null,Object(a.b)("dt",null,Object(a.b)("code",null,"name")),Object(a.b)("dd",null,"An identifying name for this component."),Object(a.b)("dt",null,Object(a.b)("code",null,"label")),Object(a.b)("dd",null,"Text to be displayed alongside the component."),Object(a.b)("dt",null,Object(a.b)("code",null,"disabled")),Object(a.b)("dd",null,"True if the checkbox is disabled.")),Object(a.b)("h5",{id:"returns"},"Returns"),Object(a.b)("p",null,"A ",Object(a.b)("code",null,Object(a.b)("a",{title:"h2o_wave.types.Choice",href:"types#h2o_wave.types.Choice"},"Choice"))," instance.")))),Object(a.b)("div",{className:"api"},Object(a.b)("h3",{id:"choice_group"},"choice_group ",Object(a.b)("a",{name:"h2o_wave.ui.choice_group"})),Object(a.b)("div",{className:"api__body"},Object(a.b)("div",{className:"api__signature"},"def ",Object(a.b)("span",{class:"ident"},"choice_group"),"(name:\xa0str, label:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, value:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, choices:\xa0Union[List[",Object(a.b)("a",{title:"h2o_wave.types.Choice",href:"types#h2o_wave.types.Choice"},"Choice"),"],\xa0NoneType]\xa0=\xa0None, required:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, trigger:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, visible:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, tooltip:\xa0Union[str,\xa0NoneType]\xa0=\xa0None) \u2011>\xa0",Object(a.b)("a",{title:"h2o_wave.types.Component",href:"types#h2o_wave.types.Component"},"Component")),Object(a.b)("div",{className:"api__description"},Object(a.b)("p",null,"Create a choice group. The choice group component, also known as radio buttons, let users select one option from two or more choices. Each option is represented by one choice group button; a user can select only one choice group in a button group."),Object(a.b)("p",null,"Choice groups emphasize all options equally, and that may draw more attention to the options than necessary. Consider using other components, unless the options deserve extra attention from the user. For example, if the default option is recommended for most users in most situations, use a dropdown instead."),Object(a.b)("p",null,'If there are only two mutually exclusive options, combine them into a single Checkbox or Toggle switch. For example, use a checkbox for "I agree" instead of choice group buttons for "I agree" and "I don\'t agree."'),Object(a.b)("h5",{id:"args"},"Args"),Object(a.b)("dl",null,Object(a.b)("dt",null,Object(a.b)("code",null,"name")),Object(a.b)("dd",null,"An identifying name for this component."),Object(a.b)("dt",null,Object(a.b)("code",null,"label")),Object(a.b)("dd",null,"Text to be displayed alongside the component."),Object(a.b)("dt",null,Object(a.b)("code",null,"value")),Object(a.b)("dd",null,"The name of the selected choice."),Object(a.b)("dt",null,Object(a.b)("code",null,"choices")),Object(a.b)("dd",null,"The choices to be presented."),Object(a.b)("dt",null,Object(a.b)("code",null,"required")),Object(a.b)("dd",null,"True if this field is required."),Object(a.b)("dt",null,Object(a.b)("code",null,"trigger")),Object(a.b)("dd",null,"True if the form should be submitted when the selection changes."),Object(a.b)("dt",null,Object(a.b)("code",null,"visible")),Object(a.b)("dd",null,"True if the component should be visible. Defaults to true."),Object(a.b)("dt",null,Object(a.b)("code",null,"tooltip")),Object(a.b)("dd",null,"An optional tooltip message displayed when a user clicks the help icon to the right of the component.")),Object(a.b)("h5",{id:"returns"},"Returns"),Object(a.b)("p",null,"A ",Object(a.b)("code",null,Object(a.b)("a",{title:"h2o_wave.types.ChoiceGroup",href:"types#h2o_wave.types.ChoiceGroup"},"ChoiceGroup"))," instance.")))),Object(a.b)("div",{className:"api"},Object(a.b)("h3",{id:"color_picker"},"color_picker ",Object(a.b)("a",{name:"h2o_wave.ui.color_picker"})),Object(a.b)("div",{className:"api__body"},Object(a.b)("div",{className:"api__signature"},"def ",Object(a.b)("span",{class:"ident"},"color_picker"),"(name:\xa0str, label:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, value:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, choices:\xa0Union[List[str],\xa0NoneType]\xa0=\xa0None, visible:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, tooltip:\xa0Union[str,\xa0NoneType]\xa0=\xa0None) \u2011>\xa0",Object(a.b)("a",{title:"h2o_wave.types.Component",href:"types#h2o_wave.types.Component"},"Component")),Object(a.b)("div",{className:"api__description"},Object(a.b)("p",null,"Create a color picker."),Object(a.b)("p",null,"A date picker allows a user to pick a color value. If the 'choices' parameter is set, a swatch picker is displayed instead of the standard color picker."),Object(a.b)("h5",{id:"args"},"Args"),Object(a.b)("dl",null,Object(a.b)("dt",null,Object(a.b)("code",null,"name")),Object(a.b)("dd",null,"An identifying name for this component."),Object(a.b)("dt",null,Object(a.b)("code",null,"label")),Object(a.b)("dd",null,"Text to be displayed alongside the component."),Object(a.b)("dt",null,Object(a.b)("code",null,"value")),Object(a.b)("dd",null,"The selected color (CSS-compatible string)"),Object(a.b)("dt",null,Object(a.b)("code",null,"choices")),Object(a.b)("dd",null,"A list of colors (CSS-compatible strings) to limit color choices to."),Object(a.b)("dt",null,Object(a.b)("code",null,"visible")),Object(a.b)("dd",null,"True if the component should be visible. Defaults to true."),Object(a.b)("dt",null,Object(a.b)("code",null,"tooltip")),Object(a.b)("dd",null,"An optional tooltip message displayed when a user clicks the help icon to the right of the component.")),Object(a.b)("h5",{id:"returns"},"Returns"),Object(a.b)("p",null,"A ",Object(a.b)("code",null,Object(a.b)("a",{title:"h2o_wave.types.ColorPicker",href:"types#h2o_wave.types.ColorPicker"},"ColorPicker"))," instance.")))),Object(a.b)("div",{className:"api"},Object(a.b)("h3",{id:"combobox"},"combobox ",Object(a.b)("a",{name:"h2o_wave.ui.combobox"})),Object(a.b)("div",{className:"api__body"},Object(a.b)("div",{className:"api__signature"},"def ",Object(a.b)("span",{class:"ident"},"combobox"),"(name:\xa0str, label:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, placeholder:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, value:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, choices:\xa0Union[List[str],\xa0NoneType]\xa0=\xa0None, error:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, disabled:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, visible:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, tooltip:\xa0Union[str,\xa0NoneType]\xa0=\xa0None) \u2011>\xa0",Object(a.b)("a",{title:"h2o_wave.types.Component",href:"types#h2o_wave.types.Component"},"Component")),Object(a.b)("div",{className:"api__description"},Object(a.b)("p",null,"Create a combobox."),Object(a.b)("p",null,"A combobox is a list in which the selected item is always visible, and the others are visible on demand by clicking a drop-down button or by typing in the input. They are used to simplify the design and make a choice within the UI."),Object(a.b)("p",null,"When closed, only the selected item is visible. When users click the drop-down button, all the options become visible. To change the value, users open the list and click another value or use the arrow keys (up and down) to select a new value. When collapsed the user can select a new value by typing."),Object(a.b)("h5",{id:"args"},"Args"),Object(a.b)("dl",null,Object(a.b)("dt",null,Object(a.b)("code",null,"name")),Object(a.b)("dd",null,"An identifying name for this component."),Object(a.b)("dt",null,Object(a.b)("code",null,"label")),Object(a.b)("dd",null,"Text to be displayed alongside the component."),Object(a.b)("dt",null,Object(a.b)("code",null,"placeholder")),Object(a.b)("dd",null,"A string that provides a brief hint to the user as to what kind of information is expected in the field."),Object(a.b)("dt",null,Object(a.b)("code",null,"value")),Object(a.b)("dd",null,"The name of the selected choice."),Object(a.b)("dt",null,Object(a.b)("code",null,"choices")),Object(a.b)("dd",null,"The choices to be presented."),Object(a.b)("dt",null,Object(a.b)("code",null,"error")),Object(a.b)("dd",null,"Text to be displayed as an error below the text box."),Object(a.b)("dt",null,Object(a.b)("code",null,"disabled")),Object(a.b)("dd",null,"True if this field is disabled."),Object(a.b)("dt",null,Object(a.b)("code",null,"visible")),Object(a.b)("dd",null,"True if the component should be visible. Defaults to true."),Object(a.b)("dt",null,Object(a.b)("code",null,"tooltip")),Object(a.b)("dd",null,"An optional tooltip message displayed when a user clicks the help icon to the right of the component.")),Object(a.b)("h5",{id:"returns"},"Returns"),Object(a.b)("p",null,"A ",Object(a.b)("code",null,Object(a.b)("a",{title:"h2o_wave.types.Combobox",href:"types#h2o_wave.types.Combobox"},"Combobox"))," instance.")))),Object(a.b)("div",{className:"api"},Object(a.b)("h3",{id:"command"},"command ",Object(a.b)("a",{name:"h2o_wave.ui.command"})),Object(a.b)("div",{className:"api__body"},Object(a.b)("div",{className:"api__signature"},"def ",Object(a.b)("span",{class:"ident"},"command"),"(name:\xa0str, label:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, caption:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, icon:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, items:\xa0Union[List[",Object(a.b)("a",{title:"h2o_wave.types.Command",href:"types#h2o_wave.types.Command"},"Command"),"],\xa0NoneType]\xa0=\xa0None, data:\xa0Union[str,\xa0NoneType]\xa0=\xa0None) \u2011>\xa0",Object(a.b)("a",{title:"h2o_wave.types.Command",href:"types#h2o_wave.types.Command"},"Command")),Object(a.b)("div",{className:"api__description"},Object(a.b)("p",null,"Create a command."),Object(a.b)("p",null,"Commands are typically displayed as context menu items or toolbar button."),Object(a.b)("h5",{id:"args"},"Args"),Object(a.b)("dl",null,Object(a.b)("dt",null,Object(a.b)("code",null,"name")),Object(a.b)("dd",null,"An identifying name for this component. If the name is prefixed with a '#', the command sets the location hash to the name when executed."),Object(a.b)("dt",null,Object(a.b)("code",null,"label")),Object(a.b)("dd",null,"The text displayed for this command."),Object(a.b)("dt",null,Object(a.b)("code",null,"caption")),Object(a.b)("dd",null,"The caption for this command (typically a tooltip)."),Object(a.b)("dt",null,Object(a.b)("code",null,"icon")),Object(a.b)("dd",null,"The icon to be displayed for this command."),Object(a.b)("dt",null,Object(a.b)("code",null,"items")),Object(a.b)("dd",null,"Sub-commands, if any"),Object(a.b)("dt",null,Object(a.b)("code",null,"data")),Object(a.b)("dd",null,"Data associated with this command, if any.")),Object(a.b)("h5",{id:"returns"},"Returns"),Object(a.b)("p",null,"A ",Object(a.b)("code",null,Object(a.b)("a",{title:"h2o_wave.types.Command",href:"types#h2o_wave.types.Command"},"Command"))," instance.")))),Object(a.b)("div",{className:"api"},Object(a.b)("h3",{id:"component"},"component ",Object(a.b)("a",{name:"h2o_wave.ui.component"})),Object(a.b)("div",{className:"api__body"},Object(a.b)("div",{className:"api__signature"},"def ",Object(a.b)("span",{class:"ident"},"component"),"(text:\xa0Union[",Object(a.b)("a",{title:"h2o_wave.types.Text",href:"types#h2o_wave.types.Text"},"Text"),",\xa0NoneType]\xa0=\xa0None, text_xl:\xa0Union[",Object(a.b)("a",{title:"h2o_wave.types.TextXl",href:"types#h2o_wave.types.TextXl"},"TextXl"),",\xa0NoneType]\xa0=\xa0None, text_l:\xa0Union[",Object(a.b)("a",{title:"h2o_wave.types.TextL",href:"types#h2o_wave.types.TextL"},"TextL"),",\xa0NoneType]\xa0=\xa0None, text_m:\xa0Union[",Object(a.b)("a",{title:"h2o_wave.types.TextM",href:"types#h2o_wave.types.TextM"},"TextM"),",\xa0NoneType]\xa0=\xa0None, text_s:\xa0Union[",Object(a.b)("a",{title:"h2o_wave.types.TextS",href:"types#h2o_wave.types.TextS"},"TextS"),",\xa0NoneType]\xa0=\xa0None, text_xs:\xa0Union[",Object(a.b)("a",{title:"h2o_wave.types.TextXs",href:"types#h2o_wave.types.TextXs"},"TextXs"),",\xa0NoneType]\xa0=\xa0None, label:\xa0Union[",Object(a.b)("a",{title:"h2o_wave.types.Label",href:"types#h2o_wave.types.Label"},"Label"),",\xa0NoneType]\xa0=\xa0None, separator:\xa0Union[",Object(a.b)("a",{title:"h2o_wave.types.Separator",href:"types#h2o_wave.types.Separator"},"Separator"),",\xa0NoneType]\xa0=\xa0None, progress:\xa0Union[",Object(a.b)("a",{title:"h2o_wave.types.Progress",href:"types#h2o_wave.types.Progress"},"Progress"),",\xa0NoneType]\xa0=\xa0None, message_bar:\xa0Union[",Object(a.b)("a",{title:"h2o_wave.types.MessageBar",href:"types#h2o_wave.types.MessageBar"},"MessageBar"),",\xa0NoneType]\xa0=\xa0None, textbox:\xa0Union[",Object(a.b)("a",{title:"h2o_wave.types.Textbox",href:"types#h2o_wave.types.Textbox"},"Textbox"),",\xa0NoneType]\xa0=\xa0None, checkbox:\xa0Union[",Object(a.b)("a",{title:"h2o_wave.types.Checkbox",href:"types#h2o_wave.types.Checkbox"},"Checkbox"),",\xa0NoneType]\xa0=\xa0None, toggle:\xa0Union[",Object(a.b)("a",{title:"h2o_wave.types.Toggle",href:"types#h2o_wave.types.Toggle"},"Toggle"),",\xa0NoneType]\xa0=\xa0None, choice_group:\xa0Union[",Object(a.b)("a",{title:"h2o_wave.types.ChoiceGroup",href:"types#h2o_wave.types.ChoiceGroup"},"ChoiceGroup"),",\xa0NoneType]\xa0=\xa0None, checklist:\xa0Union[",Object(a.b)("a",{title:"h2o_wave.types.Checklist",href:"types#h2o_wave.types.Checklist"},"Checklist"),",\xa0NoneType]\xa0=\xa0None, dropdown:\xa0Union[",Object(a.b)("a",{title:"h2o_wave.types.Dropdown",href:"types#h2o_wave.types.Dropdown"},"Dropdown"),",\xa0NoneType]\xa0=\xa0None, combobox:\xa0Union[",Object(a.b)("a",{title:"h2o_wave.types.Combobox",href:"types#h2o_wave.types.Combobox"},"Combobox"),",\xa0NoneType]\xa0=\xa0None, slider:\xa0Union[",Object(a.b)("a",{title:"h2o_wave.types.Slider",href:"types#h2o_wave.types.Slider"},"Slider"),",\xa0NoneType]\xa0=\xa0None, spinbox:\xa0Union[",Object(a.b)("a",{title:"h2o_wave.types.Spinbox",href:"types#h2o_wave.types.Spinbox"},"Spinbox"),",\xa0NoneType]\xa0=\xa0None, date_picker:\xa0Union[",Object(a.b)("a",{title:"h2o_wave.types.DatePicker",href:"types#h2o_wave.types.DatePicker"},"DatePicker"),",\xa0NoneType]\xa0=\xa0None, color_picker:\xa0Union[",Object(a.b)("a",{title:"h2o_wave.types.ColorPicker",href:"types#h2o_wave.types.ColorPicker"},"ColorPicker"),",\xa0NoneType]\xa0=\xa0None, button:\xa0Union[",Object(a.b)("a",{title:"h2o_wave.types.Button",href:"types#h2o_wave.types.Button"},"Button"),",\xa0NoneType]\xa0=\xa0None, buttons:\xa0Union[",Object(a.b)("a",{title:"h2o_wave.types.Buttons",href:"types#h2o_wave.types.Buttons"},"Buttons"),",\xa0NoneType]\xa0=\xa0None, file_upload:\xa0Union[",Object(a.b)("a",{title:"h2o_wave.types.FileUpload",href:"types#h2o_wave.types.FileUpload"},"FileUpload"),",\xa0NoneType]\xa0=\xa0None, table:\xa0Union[",Object(a.b)("a",{title:"h2o_wave.types.Table",href:"types#h2o_wave.types.Table"},"Table"),",\xa0NoneType]\xa0=\xa0None, link:\xa0Union[",Object(a.b)("a",{title:"h2o_wave.types.Link",href:"types#h2o_wave.types.Link"},"Link"),",\xa0NoneType]\xa0=\xa0None, tabs:\xa0Union[",Object(a.b)("a",{title:"h2o_wave.types.Tabs",href:"types#h2o_wave.types.Tabs"},"Tabs"),",\xa0NoneType]\xa0=\xa0None, expander:\xa0Union[",Object(a.b)("a",{title:"h2o_wave.types.Expander",href:"types#h2o_wave.types.Expander"},"Expander"),",\xa0NoneType]\xa0=\xa0None, frame:\xa0Union[",Object(a.b)("a",{title:"h2o_wave.types.Frame",href:"types#h2o_wave.types.Frame"},"Frame"),",\xa0NoneType]\xa0=\xa0None, markup:\xa0Union[",Object(a.b)("a",{title:"h2o_wave.types.Markup",href:"types#h2o_wave.types.Markup"},"Markup"),",\xa0NoneType]\xa0=\xa0None, template:\xa0Union[",Object(a.b)("a",{title:"h2o_wave.types.Template",href:"types#h2o_wave.types.Template"},"Template"),",\xa0NoneType]\xa0=\xa0None, picker:\xa0Union[",Object(a.b)("a",{title:"h2o_wave.types.Picker",href:"types#h2o_wave.types.Picker"},"Picker"),",\xa0NoneType]\xa0=\xa0None, range_slider:\xa0Union[",Object(a.b)("a",{title:"h2o_wave.types.RangeSlider",href:"types#h2o_wave.types.RangeSlider"},"RangeSlider"),",\xa0NoneType]\xa0=\xa0None, stepper:\xa0Union[",Object(a.b)("a",{title:"h2o_wave.types.Stepper",href:"types#h2o_wave.types.Stepper"},"Stepper"),",\xa0NoneType]\xa0=\xa0None, visualization:\xa0Union[",Object(a.b)("a",{title:"h2o_wave.types.Visualization",href:"types#h2o_wave.types.Visualization"},"Visualization"),",\xa0NoneType]\xa0=\xa0None, vega_visualization:\xa0Union[",Object(a.b)("a",{title:"h2o_wave.types.VegaVisualization",href:"types#h2o_wave.types.VegaVisualization"},"VegaVisualization"),",\xa0NoneType]\xa0=\xa0None) \u2011>\xa0",Object(a.b)("a",{title:"h2o_wave.types.Component",href:"types#h2o_wave.types.Component"},"Component")),Object(a.b)("div",{className:"api__description"},Object(a.b)("p",null,"Create a component."),Object(a.b)("h5",{id:"args"},"Args"),Object(a.b)("dl",null,Object(a.b)("dt",null,Object(a.b)("code",null,"text")),Object(a.b)("dd",null,"Text block."),Object(a.b)("dt",null,Object(a.b)("code",null,"text_xl")),Object(a.b)("dd",null,"Extra-large sized text block."),Object(a.b)("dt",null,Object(a.b)("code",null,"text_l")),Object(a.b)("dd",null,"Large sized text block."),Object(a.b)("dt",null,Object(a.b)("code",null,"text_m")),Object(a.b)("dd",null,"Medium sized text block."),Object(a.b)("dt",null,Object(a.b)("code",null,"text_s")),Object(a.b)("dd",null,"Small sized text block."),Object(a.b)("dt",null,Object(a.b)("code",null,"text_xs")),Object(a.b)("dd",null,"Extra-small sized text block."),Object(a.b)("dt",null,Object(a.b)("code",null,"label")),Object(a.b)("dd",null,"Label."),Object(a.b)("dt",null,Object(a.b)("code",null,"separator")),Object(a.b)("dd",null,"Separator."),Object(a.b)("dt",null,Object(a.b)("code",null,"progress")),Object(a.b)("dd",null,"Progress bar."),Object(a.b)("dt",null,Object(a.b)("code",null,"message_bar")),Object(a.b)("dd",null,"Message bar."),Object(a.b)("dt",null,Object(a.b)("code",null,"textbox")),Object(a.b)("dd",null,"Textbox."),Object(a.b)("dt",null,Object(a.b)("code",null,"checkbox")),Object(a.b)("dd",null,"Checkbox."),Object(a.b)("dt",null,Object(a.b)("code",null,"toggle")),Object(a.b)("dd",null,"Toggle."),Object(a.b)("dt",null,Object(a.b)("code",null,"choice_group")),Object(a.b)("dd",null,"Choice group."),Object(a.b)("dt",null,Object(a.b)("code",null,"checklist")),Object(a.b)("dd",null,"Checklist."),Object(a.b)("dt",null,Object(a.b)("code",null,"dropdown")),Object(a.b)("dd",null,"Dropdown."),Object(a.b)("dt",null,Object(a.b)("code",null,"combobox")),Object(a.b)("dd",null,"Combobox."),Object(a.b)("dt",null,Object(a.b)("code",null,"slider")),Object(a.b)("dd",null,"Slider."),Object(a.b)("dt",null,Object(a.b)("code",null,"spinbox")),Object(a.b)("dd",null,"Spinbox."),Object(a.b)("dt",null,Object(a.b)("code",null,"date_picker")),Object(a.b)("dd",null,"Date picker."),Object(a.b)("dt",null,Object(a.b)("code",null,"color_picker")),Object(a.b)("dd",null,"Color picker."),Object(a.b)("dt",null,Object(a.b)("code",null,"button")),Object(a.b)("dd",null,"Button."),Object(a.b)("dt",null,Object(a.b)("code",null,"buttons")),Object(a.b)("dd",null,"Button set."),Object(a.b)("dt",null,Object(a.b)("code",null,"file_upload")),Object(a.b)("dd",null,"File upload."),Object(a.b)("dt",null,Object(a.b)("code",null,"table")),Object(a.b)("dd",null,"Table."),Object(a.b)("dt",null,Object(a.b)("code",null,"link")),Object(a.b)("dd",null,"Link."),Object(a.b)("dt",null,Object(a.b)("code",null,"tabs")),Object(a.b)("dd",null,"Tabs."),Object(a.b)("dt",null,Object(a.b)("code",null,"expander")),Object(a.b)("dd",null,"Expander."),Object(a.b)("dt",null,Object(a.b)("code",null,"frame")),Object(a.b)("dd",null,"Frame."),Object(a.b)("dt",null,Object(a.b)("code",null,"markup")),Object(a.b)("dd",null,"Markup"),Object(a.b)("dt",null,Object(a.b)("code",null,"template")),Object(a.b)("dd",null,"Template"),Object(a.b)("dt",null,Object(a.b)("code",null,"picker")),Object(a.b)("dd",null,"Picker."),Object(a.b)("dt",null,Object(a.b)("code",null,"range_slider")),Object(a.b)("dd",null,"Range Slider."),Object(a.b)("dt",null,Object(a.b)("code",null,"stepper")),Object(a.b)("dd",null,"Stepper."),Object(a.b)("dt",null,Object(a.b)("code",null,"visualization")),Object(a.b)("dd",null,"Visualization."),Object(a.b)("dt",null,Object(a.b)("code",null,"vega_visualization")),Object(a.b)("dd",null,"Vega-lite Visualization.")),Object(a.b)("h5",{id:"returns"},"Returns"),Object(a.b)("p",null,"A ",Object(a.b)("code",null,Object(a.b)("a",{title:"h2o_wave.types.Component",href:"types#h2o_wave.types.Component"},"Component"))," instance.")))),Object(a.b)("div",{className:"api"},Object(a.b)("h3",{id:"date_picker"},"date_picker ",Object(a.b)("a",{name:"h2o_wave.ui.date_picker"})),Object(a.b)("div",{className:"api__body"},Object(a.b)("div",{className:"api__signature"},"def ",Object(a.b)("span",{class:"ident"},"date_picker"),"(name:\xa0str, label:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, placeholder:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, value:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, disabled:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, trigger:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, visible:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, tooltip:\xa0Union[str,\xa0NoneType]\xa0=\xa0None) \u2011>\xa0",Object(a.b)("a",{title:"h2o_wave.types.Component",href:"types#h2o_wave.types.Component"},"Component")),Object(a.b)("div",{className:"api__description"},Object(a.b)("p",null,"Create a date picker."),Object(a.b)("p",null,"A date picker allows a user to pick a date value."),Object(a.b)("h5",{id:"args"},"Args"),Object(a.b)("dl",null,Object(a.b)("dt",null,Object(a.b)("code",null,"name")),Object(a.b)("dd",null,"An identifying name for this component."),Object(a.b)("dt",null,Object(a.b)("code",null,"label")),Object(a.b)("dd",null,"Text to be displayed alongside the component."),Object(a.b)("dt",null,Object(a.b)("code",null,"placeholder")),Object(a.b)("dd",null,"A string that provides a brief hint to the user as to what kind of information is expected in the field."),Object(a.b)("dt",null,Object(a.b)("code",null,"value")),Object(a.b)("dd",null,"The date value in YYYY-MM-DD format."),Object(a.b)("dt",null,Object(a.b)("code",null,"disabled")),Object(a.b)("dd",null,"True if this field is disabled."),Object(a.b)("dt",null,Object(a.b)("code",null,"trigger")),Object(a.b)("dd",null,"True if the form should be submitted when the datepicker value changes."),Object(a.b)("dt",null,Object(a.b)("code",null,"visible")),Object(a.b)("dd",null,"True if the component should be visible. Defaults to true."),Object(a.b)("dt",null,Object(a.b)("code",null,"tooltip")),Object(a.b)("dd",null,"An optional tooltip message displayed when a user clicks the help icon to the right of the component.")),Object(a.b)("h5",{id:"returns"},"Returns"),Object(a.b)("p",null,"A ",Object(a.b)("code",null,Object(a.b)("a",{title:"h2o_wave.types.DatePicker",href:"types#h2o_wave.types.DatePicker"},"DatePicker"))," instance.")))),Object(a.b)("div",{className:"api"},Object(a.b)("h3",{id:"dropdown"},"dropdown ",Object(a.b)("a",{name:"h2o_wave.ui.dropdown"})),Object(a.b)("div",{className:"api__body"},Object(a.b)("div",{className:"api__signature"},"def ",Object(a.b)("span",{class:"ident"},"dropdown"),"(name:\xa0str, label:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, placeholder:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, value:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, values:\xa0Union[List[str],\xa0NoneType]\xa0=\xa0None, choices:\xa0Union[List[",Object(a.b)("a",{title:"h2o_wave.types.Choice",href:"types#h2o_wave.types.Choice"},"Choice"),"],\xa0NoneType]\xa0=\xa0None, required:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, disabled:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, trigger:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, visible:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, tooltip:\xa0Union[str,\xa0NoneType]\xa0=\xa0None) \u2011>\xa0",Object(a.b)("a",{title:"h2o_wave.types.Component",href:"types#h2o_wave.types.Component"},"Component")),Object(a.b)("div",{className:"api__description"},Object(a.b)("p",null,"Create a dropdown."),Object(a.b)("p",null,"A dropdown is a list in which the selected item is always visible, and the others are visible on demand by clicking a drop-down button. They are used to simplify the design and make a choice within the UI. When closed, only the selected item is visible. When users click the drop-down button, all the options become visible."),Object(a.b)("p",null,"To change the value, users open the list and click another value or use the arrow keys (up and down) to select a new value."),Object(a.b)("p",null,"Note: Use either the 'value' parameter or the 'values' parameter. Setting the 'values' parameter renders a multi-select dropdown."),Object(a.b)("h5",{id:"args"},"Args"),Object(a.b)("dl",null,Object(a.b)("dt",null,Object(a.b)("code",null,"name")),Object(a.b)("dd",null,"An identifying name for this component."),Object(a.b)("dt",null,Object(a.b)("code",null,"label")),Object(a.b)("dd",null,"Text to be displayed alongside the component."),Object(a.b)("dt",null,Object(a.b)("code",null,"placeholder")),Object(a.b)("dd",null,"A string that provides a brief hint to the user as to what kind of information is expected in the field."),Object(a.b)("dt",null,Object(a.b)("code",null,"value")),Object(a.b)("dd",null,"The name of the selected choice."),Object(a.b)("dt",null,Object(a.b)("code",null,"values")),Object(a.b)("dd",null,"The names of the selected choices. If this parameter is set, multiple selections will be allowed."),Object(a.b)("dt",null,Object(a.b)("code",null,"choices")),Object(a.b)("dd",null,"The choices to be presented."),Object(a.b)("dt",null,Object(a.b)("code",null,"required")),Object(a.b)("dd",null,"True if this is a required field."),Object(a.b)("dt",null,Object(a.b)("code",null,"disabled")),Object(a.b)("dd",null,"True if this field is disabled."),Object(a.b)("dt",null,Object(a.b)("code",null,"trigger")),Object(a.b)("dd",null,"True if the form should be submitted when the dropdown value changes."),Object(a.b)("dt",null,Object(a.b)("code",null,"visible")),Object(a.b)("dd",null,"True if the component should be visible. Defaults to true."),Object(a.b)("dt",null,Object(a.b)("code",null,"tooltip")),Object(a.b)("dd",null,"An optional tooltip message displayed when a user clicks the help icon to the right of the component.")),Object(a.b)("h5",{id:"returns"},"Returns"),Object(a.b)("p",null,"A ",Object(a.b)("code",null,Object(a.b)("a",{title:"h2o_wave.types.Dropdown",href:"types#h2o_wave.types.Dropdown"},"Dropdown"))," instance.")))),Object(a.b)("div",{className:"api"},Object(a.b)("h3",{id:"expander"},"expander ",Object(a.b)("a",{name:"h2o_wave.ui.expander"})),Object(a.b)("div",{className:"api__body"},Object(a.b)("div",{className:"api__signature"},"def ",Object(a.b)("span",{class:"ident"},"expander"),"(name:\xa0str, label:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, expanded:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, items:\xa0Union[List[",Object(a.b)("a",{title:"h2o_wave.types.Component",href:"types#h2o_wave.types.Component"},"Component"),"],\xa0NoneType]\xa0=\xa0None, visible:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None) \u2011>\xa0",Object(a.b)("a",{title:"h2o_wave.types.Component",href:"types#h2o_wave.types.Component"},"Component")),Object(a.b)("div",{className:"api__description"},Object(a.b)("p",null,"Creates a new expander."),Object(a.b)("p",null,"Expanders can be used to show or hide a group of related components."),Object(a.b)("h5",{id:"args"},"Args"),Object(a.b)("dl",null,Object(a.b)("dt",null,Object(a.b)("code",null,"name")),Object(a.b)("dd",null,"An identifying name for this component."),Object(a.b)("dt",null,Object(a.b)("code",null,"label")),Object(a.b)("dd",null,"The text displayed on the expander."),Object(a.b)("dt",null,Object(a.b)("code",null,"expanded")),Object(a.b)("dd",null,"True if expanded, False if collapsed."),Object(a.b)("dt",null,Object(a.b)("code",null,"items")),Object(a.b)("dd",null,"List of components to be hideable by the expander."),Object(a.b)("dt",null,Object(a.b)("code",null,"visible")),Object(a.b)("dd",null,"True if the component should be visible. Defaults to true.")),Object(a.b)("h5",{id:"returns"},"Returns"),Object(a.b)("p",null,"A ",Object(a.b)("code",null,Object(a.b)("a",{title:"h2o_wave.types.Expander",href:"types#h2o_wave.types.Expander"},"Expander"))," instance.")))),Object(a.b)("div",{className:"api"},Object(a.b)("h3",{id:"file_upload"},"file_upload ",Object(a.b)("a",{name:"h2o_wave.ui.file_upload"})),Object(a.b)("div",{className:"api__body"},Object(a.b)("div",{className:"api__signature"},"def ",Object(a.b)("span",{class:"ident"},"file_upload"),"(name:\xa0str, label:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, multiple:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, file_extensions:\xa0Union[List[str],\xa0NoneType]\xa0=\xa0None, max_file_size:\xa0Union[float,\xa0NoneType]\xa0=\xa0None, max_size:\xa0Union[float,\xa0NoneType]\xa0=\xa0None, height:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, visible:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, tooltip:\xa0Union[str,\xa0NoneType]\xa0=\xa0None) \u2011>\xa0",Object(a.b)("a",{title:"h2o_wave.types.Component",href:"types#h2o_wave.types.Component"},"Component")),Object(a.b)("div",{className:"api__description"},Object(a.b)("p",null,"Create a file upload component. A file upload component allows a user to browse, select and upload one or more files."),Object(a.b)("h5",{id:"args"},"Args"),Object(a.b)("dl",null,Object(a.b)("dt",null,Object(a.b)("code",null,"name")),Object(a.b)("dd",null,"An identifying name for this component."),Object(a.b)("dt",null,Object(a.b)("code",null,"label")),Object(a.b)("dd",null,"Text to be displayed alongside the component."),Object(a.b)("dt",null,Object(a.b)("code",null,"multiple")),Object(a.b)("dd",null,"True if the component should allow multiple files to be uploaded."),Object(a.b)("dt",null,Object(a.b)("code",null,"file_extensions")),Object(a.b)("dd",null,"List of allowed file extensions, e.g. ",Object(a.b)("code",null,"pdf"),", ",Object(a.b)("code",null,"docx"),", etc."),Object(a.b)("dt",null,Object(a.b)("code",null,"max_file_size")),Object(a.b)("dd",null,"Maximum allowed size (Mb) per file. Defaults to no limit."),Object(a.b)("dt",null,Object(a.b)("code",null,"max_size")),Object(a.b)("dd",null,"Maximum allowed size (Mb) for all files combined. Defaults to no limit."),Object(a.b)("dt",null,Object(a.b)("code",null,"height")),Object(a.b)("dd",null,"The height of the file upload, e.g. '400px', '50%', etc."),Object(a.b)("dt",null,Object(a.b)("code",null,"visible")),Object(a.b)("dd",null,"True if the component should be visible. Defaults to true."),Object(a.b)("dt",null,Object(a.b)("code",null,"tooltip")),Object(a.b)("dd",null,"An optional tooltip message displayed when a user clicks the help icon to the right of the component.")),Object(a.b)("h5",{id:"returns"},"Returns"),Object(a.b)("p",null,"A ",Object(a.b)("code",null,Object(a.b)("a",{title:"h2o_wave.types.FileUpload",href:"types#h2o_wave.types.FileUpload"},"FileUpload"))," instance.")))),Object(a.b)("div",{className:"api"},Object(a.b)("h3",{id:"flex_card"},"flex_card ",Object(a.b)("a",{name:"h2o_wave.ui.flex_card"})),Object(a.b)("div",{className:"api__body"},Object(a.b)("div",{className:"api__signature"},"def ",Object(a.b)("span",{class:"ident"},"flex_card"),"(box:\xa0str, item_view:\xa0str, item_props:\xa0Union[dict,\xa0str], data:\xa0Union[",Object(a.b)("a",{title:"h2o_wave.core.Data",href:"core#h2o_wave.core.Data"},"Data"),",\xa0str], direction:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, justify:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, align:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, wrap:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, commands:\xa0Union[List[",Object(a.b)("a",{title:"h2o_wave.types.Command",href:"types#h2o_wave.types.Command"},"Command"),"],\xa0NoneType]\xa0=\xa0None) \u2011>\xa0",Object(a.b)("a",{title:"h2o_wave.types.FlexCard",href:"types#h2o_wave.types.FlexCard"},"FlexCard")),Object(a.b)("div",{className:"api__description"},Object(a.b)("p",null,"EXPERIMENTAL. DO NOT USE. Create a card containing other cards laid out using a one-dimensional model with flexible alignemnt and wrapping capabilities."),Object(a.b)("h5",{id:"args"},"Args"),Object(a.b)("dl",null,Object(a.b)("dt",null,Object(a.b)("code",null,"box")),Object(a.b)("dd",null,"A string indicating how to place this component on the page."),Object(a.b)("dt",null,Object(a.b)("code",null,"item_view")),Object(a.b)("dd",null,"The child card type."),Object(a.b)("dt",null,Object(a.b)("code",null,"item_props")),Object(a.b)("dd",null,"The child card properties."),Object(a.b)("dt",null,Object(a.b)("code",null,"data")),Object(a.b)("dd",null,"Data for this card."),Object(a.b)("dt",null,Object(a.b)("code",null,"direction")),Object(a.b)("dd",null,"Layout direction. One of 'horizontal', 'vertical'."),Object(a.b)("dt",null,Object(a.b)("code",null,"justify")),Object(a.b)("dd",null,"Layout strategy for main axis. One of 'start', 'end', 'center', 'between', 'around'."),Object(a.b)("dt",null,Object(a.b)("code",null,"align")),Object(a.b)("dd",null,"Layout strategy for cross axis. One of 'start', 'end', 'center', 'baseline', 'stretch'."),Object(a.b)("dt",null,Object(a.b)("code",null,"wrap")),Object(a.b)("dd",null,"Wrapping strategy. One of 'start', 'end', 'center', 'between', 'around', 'stretch'."),Object(a.b)("dt",null,Object(a.b)("code",null,"commands")),Object(a.b)("dd",null,"Contextual menu commands for this component.")),Object(a.b)("h5",{id:"returns"},"Returns"),Object(a.b)("p",null,"A ",Object(a.b)("code",null,Object(a.b)("a",{title:"h2o_wave.types.FlexCard",href:"types#h2o_wave.types.FlexCard"},"FlexCard"))," instance.")))),Object(a.b)("div",{className:"api"},Object(a.b)("h3",{id:"form_card"},"form_card ",Object(a.b)("a",{name:"h2o_wave.ui.form_card"})),Object(a.b)("div",{className:"api__body"},Object(a.b)("div",{className:"api__signature"},"def ",Object(a.b)("span",{class:"ident"},"form_card"),"(box:\xa0str, items:\xa0Union[List[",Object(a.b)("a",{title:"h2o_wave.types.Component",href:"types#h2o_wave.types.Component"},"Component"),"],\xa0str], commands:\xa0Union[List[",Object(a.b)("a",{title:"h2o_wave.types.Command",href:"types#h2o_wave.types.Command"},"Command"),"],\xa0NoneType]\xa0=\xa0None) \u2011>\xa0",Object(a.b)("a",{title:"h2o_wave.types.FormCard",href:"types#h2o_wave.types.FormCard"},"FormCard")),Object(a.b)("div",{className:"api__description"},Object(a.b)("p",null,"Create a form."),Object(a.b)("h5",{id:"args"},"Args"),Object(a.b)("dl",null,Object(a.b)("dt",null,Object(a.b)("code",null,"box")),Object(a.b)("dd",null,"A string indicating how to place this component on the page."),Object(a.b)("dt",null,Object(a.b)("code",null,"items")),Object(a.b)("dd",null,"The components in this form."),Object(a.b)("dt",null,Object(a.b)("code",null,"commands")),Object(a.b)("dd",null,"Contextual menu commands for this component.")),Object(a.b)("h5",{id:"returns"},"Returns"),Object(a.b)("p",null,"A ",Object(a.b)("code",null,Object(a.b)("a",{title:"h2o_wave.types.FormCard",href:"types#h2o_wave.types.FormCard"},"FormCard"))," instance.")))),Object(a.b)("div",{className:"api"},Object(a.b)("h3",{id:"frame"},"frame ",Object(a.b)("a",{name:"h2o_wave.ui.frame"})),Object(a.b)("div",{className:"api__body"},Object(a.b)("div",{className:"api__signature"},"def ",Object(a.b)("span",{class:"ident"},"frame"),"(path:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, content:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, width:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, height:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, name:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, visible:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None) \u2011>\xa0",Object(a.b)("a",{title:"h2o_wave.types.Component",href:"types#h2o_wave.types.Component"},"Component")),Object(a.b)("div",{className:"api__description"},Object(a.b)("p",null,"Create a new inline frame (an ",Object(a.b)("code",null,"iframe"),")."),Object(a.b)("h5",{id:"args"},"Args"),Object(a.b)("dl",null,Object(a.b)("dt",null,Object(a.b)("code",null,"path")),Object(a.b)("dd",null,"The path or URL of the web page, e.g. ",Object(a.b)("code",null,"/foo.html")," or ",Object(a.b)("code",null,"http://example.com/foo.html")),Object(a.b)("dt",null,Object(a.b)("code",null,"content")),Object(a.b)("dd",null,"The HTML content of the page. A string containing ",Object(a.b)("code",null,"..."),"."),Object(a.b)("dt",null,Object(a.b)("code",null,"width")),Object(a.b)("dd",null,"The width of the frame, e.g. ",Object(a.b)("code",null,"200px"),", ",Object(a.b)("code",null,"50%"),", etc. Defaults to ",Object(a.b)("code",null,"100%"),"."),Object(a.b)("dt",null,Object(a.b)("code",null,"height")),Object(a.b)("dd",null,"The height of the frame, e.g. ",Object(a.b)("code",null,"200px"),", ",Object(a.b)("code",null,"50%"),", etc. Defaults to ",Object(a.b)("code",null,"150px"),"."),Object(a.b)("dt",null,Object(a.b)("code",null,"name")),Object(a.b)("dd",null,"An identifying name for this component."),Object(a.b)("dt",null,Object(a.b)("code",null,"visible")),Object(a.b)("dd",null,"True if the component should be visible. Defaults to true.")),Object(a.b)("h5",{id:"returns"},"Returns"),Object(a.b)("p",null,"A ",Object(a.b)("code",null,Object(a.b)("a",{title:"h2o_wave.types.Frame",href:"types#h2o_wave.types.Frame"},"Frame"))," instance.")))),Object(a.b)("div",{className:"api"},Object(a.b)("h3",{id:"frame_card"},"frame_card ",Object(a.b)("a",{name:"h2o_wave.ui.frame_card"})),Object(a.b)("div",{className:"api__body"},Object(a.b)("div",{className:"api__signature"},"def ",Object(a.b)("span",{class:"ident"},"frame_card"),"(box:\xa0str, title:\xa0str, path:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, content:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, commands:\xa0Union[List[",Object(a.b)("a",{title:"h2o_wave.types.Command",href:"types#h2o_wave.types.Command"},"Command"),"],\xa0NoneType]\xa0=\xa0None) \u2011>\xa0",Object(a.b)("a",{title:"h2o_wave.types.FrameCard",href:"types#h2o_wave.types.FrameCard"},"FrameCard")),Object(a.b)("div",{className:"api__description"},Object(a.b)("p",null,"Render a card containing a HTML page inside an inline frame (an ",Object(a.b)("code",null,"iframe"),")."),Object(a.b)("p",null,"Either a path or content can be provided as arguments."),Object(a.b)("h5",{id:"args"},"Args"),Object(a.b)("dl",null,Object(a.b)("dt",null,Object(a.b)("code",null,"box")),Object(a.b)("dd",null,"A string indicating how to place this component on the page."),Object(a.b)("dt",null,Object(a.b)("code",null,"title")),Object(a.b)("dd",null,"The title for this card."),Object(a.b)("dt",null,Object(a.b)("code",null,"path")),Object(a.b)("dd",null,"The path or URL of the web page, e.g. ",Object(a.b)("code",null,"/foo.html")," or ",Object(a.b)("code",null,"http://example.com/foo.html")),Object(a.b)("dt",null,Object(a.b)("code",null,"content")),Object(a.b)("dd",null,"The HTML content of the page. A string containing ",Object(a.b)("code",null,"...")),Object(a.b)("dt",null,Object(a.b)("code",null,"commands")),Object(a.b)("dd",null,"Contextual menu commands for this component.")),Object(a.b)("h5",{id:"returns"},"Returns"),Object(a.b)("p",null,"A ",Object(a.b)("code",null,Object(a.b)("a",{title:"h2o_wave.types.FrameCard",href:"types#h2o_wave.types.FrameCard"},"FrameCard"))," instance.")))),Object(a.b)("div",{className:"api"},Object(a.b)("h3",{id:"graphics_card"},"graphics_card ",Object(a.b)("a",{name:"h2o_wave.ui.graphics_card"})),Object(a.b)("div",{className:"api__body"},Object(a.b)("div",{className:"api__signature"},"def ",Object(a.b)("span",{class:"ident"},"graphics_card"),"(box:\xa0str, view_box:\xa0str, stage:\xa0Union[List[dict],\xa0str,\xa0NoneType]\xa0=\xa0None, scene:\xa0Union[",Object(a.b)("a",{title:"h2o_wave.core.Data",href:"core#h2o_wave.core.Data"},"Data"),",\xa0str,\xa0NoneType]\xa0=\xa0None, width:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, height:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, commands:\xa0Union[List[",Object(a.b)("a",{title:"h2o_wave.types.Command",href:"types#h2o_wave.types.Command"},"Command"),"],\xa0NoneType]\xa0=\xa0None) \u2011>\xa0",Object(a.b)("a",{title:"h2o_wave.types.GraphicsCard",href:"types#h2o_wave.types.GraphicsCard"},"GraphicsCard")),Object(a.b)("div",{className:"api__description"},Object(a.b)("p",null,"Create a card for displaying vector graphics."),Object(a.b)("h5",{id:"args"},"Args"),Object(a.b)("dl",null,Object(a.b)("dt",null,Object(a.b)("code",null,"box")),Object(a.b)("dd",null,"A string indicating how to place this component on the page."),Object(a.b)("dt",null,Object(a.b)("code",null,"view_box")),Object(a.b)("dd",null,"The position and dimension of the SVG viewport, in user space. A space-separated list of four numbers: min-x, min-y, width and height. For example, '0 0 400 300'. See: ",Object(a.b)("a",{href:"https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/viewBox"},"https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/viewBox")),Object(a.b)("dt",null,Object(a.b)("code",null,"stage")),Object(a.b)("dd",null,"Background layer for rendering static SVG elements. Must be packed to conserve memory."),Object(a.b)("dt",null,Object(a.b)("code",null,"scene")),Object(a.b)("dd",null,"Foreground layer for rendering dynamic SVG elements."),Object(a.b)("dt",null,Object(a.b)("code",null,"width")),Object(a.b)("dd",null,"The displayed width of the rectangular viewport. (Not the width of its coordinate system.)"),Object(a.b)("dt",null,Object(a.b)("code",null,"height")),Object(a.b)("dd",null,"The displayed height of the rectangular viewport. (Not the height of its coordinate system.)"),Object(a.b)("dt",null,Object(a.b)("code",null,"commands")),Object(a.b)("dd",null,"Contextual menu commands for this component.")),Object(a.b)("h5",{id:"returns"},"Returns"),Object(a.b)("p",null,"A ",Object(a.b)("code",null,Object(a.b)("a",{title:"h2o_wave.types.GraphicsCard",href:"types#h2o_wave.types.GraphicsCard"},"GraphicsCard"))," instance.")))),Object(a.b)("div",{className:"api"},Object(a.b)("h3",{id:"grid_card"},"grid_card ",Object(a.b)("a",{name:"h2o_wave.ui.grid_card"})),Object(a.b)("div",{className:"api__body"},Object(a.b)("div",{className:"api__signature"},"def ",Object(a.b)("span",{class:"ident"},"grid_card"),"(box:\xa0str, title:\xa0str, cells:\xa0Union[",Object(a.b)("a",{title:"h2o_wave.core.Data",href:"core#h2o_wave.core.Data"},"Data"),",\xa0str], data:\xa0Union[",Object(a.b)("a",{title:"h2o_wave.core.Data",href:"core#h2o_wave.core.Data"},"Data"),",\xa0str], commands:\xa0Union[List[",Object(a.b)("a",{title:"h2o_wave.types.Command",href:"types#h2o_wave.types.Command"},"Command"),"],\xa0NoneType]\xa0=\xa0None) \u2011>\xa0",Object(a.b)("a",{title:"h2o_wave.types.GridCard",href:"types#h2o_wave.types.GridCard"},"GridCard")),Object(a.b)("div",{className:"api__description"},Object(a.b)("p",null,"EXPERIMENTAL. DO NOT USE."),Object(a.b)("h5",{id:"args"},"Args"),Object(a.b)("dl",null,Object(a.b)("dt",null,Object(a.b)("code",null,"box")),Object(a.b)("dd",null,"A string indicating how to place this component on the page."),Object(a.b)("dt",null,Object(a.b)("code",null,"title")),Object(a.b)("dd",null,"EXPERIMENTAL. DO NOT USE."),Object(a.b)("dt",null,Object(a.b)("code",null,"cells")),Object(a.b)("dd",null,"EXPERIMENTAL. DO NOT USE."),Object(a.b)("dt",null,Object(a.b)("code",null,"data")),Object(a.b)("dd",null,"EXPERIMENTAL. DO NOT USE."),Object(a.b)("dt",null,Object(a.b)("code",null,"commands")),Object(a.b)("dd",null,"Contextual menu commands for this component.")),Object(a.b)("h5",{id:"returns"},"Returns"),Object(a.b)("p",null,"A ",Object(a.b)("code",null,Object(a.b)("a",{title:"h2o_wave.types.GridCard",href:"types#h2o_wave.types.GridCard"},"GridCard"))," instance.")))),Object(a.b)("div",{className:"api"},Object(a.b)("h3",{id:"header_card"},"header_card ",Object(a.b)("a",{name:"h2o_wave.ui.header_card"})),Object(a.b)("div",{className:"api__body"},Object(a.b)("div",{className:"api__signature"},"def ",Object(a.b)("span",{class:"ident"},"header_card"),"(box:\xa0str, title:\xa0str, subtitle:\xa0str, icon:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, icon_color:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, commands:\xa0Union[List[",Object(a.b)("a",{title:"h2o_wave.types.Command",href:"types#h2o_wave.types.Command"},"Command"),"],\xa0NoneType]\xa0=\xa0None) \u2011>\xa0",Object(a.b)("a",{title:"h2o_wave.types.HeaderCard",href:"types#h2o_wave.types.HeaderCard"},"HeaderCard")),Object(a.b)("div",{className:"api__description"},Object(a.b)("p",null,"Render a card containing a HTML page inside an inline frame (iframe)."),Object(a.b)("p",null,"Either a path or content can be provided as arguments."),Object(a.b)("h5",{id:"args"},"Args"),Object(a.b)("dl",null,Object(a.b)("dt",null,Object(a.b)("code",null,"box")),Object(a.b)("dd",null,"A string indicating how to place this component on the page."),Object(a.b)("dt",null,Object(a.b)("code",null,"title")),Object(a.b)("dd",null,"The title."),Object(a.b)("dt",null,Object(a.b)("code",null,"subtitle")),Object(a.b)("dd",null,"The subtitle, displayed below the title."),Object(a.b)("dt",null,Object(a.b)("code",null,"icon")),Object(a.b)("dd",null,"The icon type, displayed to the left."),Object(a.b)("dt",null,Object(a.b)("code",null,"icon_color")),Object(a.b)("dd",null,"The icon's color."),Object(a.b)("dt",null,Object(a.b)("code",null,"commands")),Object(a.b)("dd",null,"Contextual menu commands for this component.")),Object(a.b)("h5",{id:"returns"},"Returns"),Object(a.b)("p",null,"A ",Object(a.b)("code",null,Object(a.b)("a",{title:"h2o_wave.types.HeaderCard",href:"types#h2o_wave.types.HeaderCard"},"HeaderCard"))," instance.")))),Object(a.b)("div",{className:"api"},Object(a.b)("h3",{id:"icon_table_cell_type"},"icon_table_cell_type ",Object(a.b)("a",{name:"h2o_wave.ui.icon_table_cell_type"})),Object(a.b)("div",{className:"api__body"},Object(a.b)("div",{className:"api__signature"},"def ",Object(a.b)("span",{class:"ident"},"icon_table_cell_type"),"(color:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, name:\xa0Union[str,\xa0NoneType]\xa0=\xa0None) \u2011>\xa0",Object(a.b)("a",{title:"h2o_wave.types.TableCellType",href:"types#h2o_wave.types.TableCellType"},"TableCellType")),Object(a.b)("div",{className:"api__description"},Object(a.b)("p",null,"Create a cell type that renders a column's cells as icons instead of plain text. If set on a column, the cell value is interpreted as the name of the icon to be displayed."),Object(a.b)("h5",{id:"args"},"Args"),Object(a.b)("dl",null,Object(a.b)("dt",null,Object(a.b)("code",null,"color")),Object(a.b)("dd",null,"Icon color."),Object(a.b)("dt",null,Object(a.b)("code",null,"name")),Object(a.b)("dd",null,"An identifying name for this component.")),Object(a.b)("h5",{id:"returns"},"Returns"),Object(a.b)("p",null,"A ",Object(a.b)("code",null,Object(a.b)("a",{title:"h2o_wave.types.IconTableCellType",href:"types#h2o_wave.types.IconTableCellType"},"IconTableCellType"))," instance.")))),Object(a.b)("div",{className:"api"},Object(a.b)("h3",{id:"image_card"},"image_card ",Object(a.b)("a",{name:"h2o_wave.ui.image_card"})),Object(a.b)("div",{className:"api__body"},Object(a.b)("div",{className:"api__signature"},"def ",Object(a.b)("span",{class:"ident"},"image_card"),"(box:\xa0str, title:\xa0str, type:\xa0str, image:\xa0str, data:\xa0Union[dict,\xa0str,\xa0NoneType]\xa0=\xa0None, commands:\xa0Union[List[",Object(a.b)("a",{title:"h2o_wave.types.Command",href:"types#h2o_wave.types.Command"},"Command"),"],\xa0NoneType]\xa0=\xa0None) \u2011>\xa0",Object(a.b)("a",{title:"h2o_wave.types.ImageCard",href:"types#h2o_wave.types.ImageCard"},"ImageCard")),Object(a.b)("div",{className:"api__description"},Object(a.b)("p",null,"Create a card that displays a base64-encoded image."),Object(a.b)("h5",{id:"args"},"Args"),Object(a.b)("dl",null,Object(a.b)("dt",null,Object(a.b)("code",null,"box")),Object(a.b)("dd",null,"A string indicating how to place this component on the page."),Object(a.b)("dt",null,Object(a.b)("code",null,"title")),Object(a.b)("dd",null,"The card's title."),Object(a.b)("dt",null,Object(a.b)("code",null,"type")),Object(a.b)("dd",null,"The image MIME subtype. One of ",Object(a.b)("code",null,"apng"),", ",Object(a.b)("code",null,"bmp"),", ",Object(a.b)("code",null,"gif"),", ",Object(a.b)("code",null,"x-icon"),", ",Object(a.b)("code",null,"jpeg"),", ",Object(a.b)("code",null,"png"),", ",Object(a.b)("code",null,"webp"),"."),Object(a.b)("dt",null,Object(a.b)("code",null,"image")),Object(a.b)("dd",null,"Image data, base64-encoded."),Object(a.b)("dt",null,Object(a.b)("code",null,"data")),Object(a.b)("dd",null,"Data for this card."),Object(a.b)("dt",null,Object(a.b)("code",null,"commands")),Object(a.b)("dd",null,"Contextual menu commands for this component.")),Object(a.b)("h5",{id:"returns"},"Returns"),Object(a.b)("p",null,"A ",Object(a.b)("code",null,Object(a.b)("a",{title:"h2o_wave.types.ImageCard",href:"types#h2o_wave.types.ImageCard"},"ImageCard"))," instance.")))),Object(a.b)("div",{className:"api"},Object(a.b)("h3",{id:"label"},"label ",Object(a.b)("a",{name:"h2o_wave.ui.label"})),Object(a.b)("div",{className:"api__body"},Object(a.b)("div",{className:"api__signature"},"def ",Object(a.b)("span",{class:"ident"},"label"),"(label:\xa0str, required:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, disabled:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, visible:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, tooltip:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, name:\xa0Union[str,\xa0NoneType]\xa0=\xa0None) \u2011>\xa0",Object(a.b)("a",{title:"h2o_wave.types.Component",href:"types#h2o_wave.types.Component"},"Component")),Object(a.b)("div",{className:"api__description"},Object(a.b)("p",null,"Create a label."),Object(a.b)("p",null,"Labels give a name or title to a component or group of components. Labels should be in close proximity to the component or group they are paired with. Some components, such as textboxes, dropdowns, or toggles, already have labels incorporated, but other components may optionally add a Label if it helps inform the user of the component\u2019s purpose."),Object(a.b)("h5",{id:"args"},"Args"),Object(a.b)("dl",null,Object(a.b)("dt",null,Object(a.b)("code",null,"label")),Object(a.b)("dd",null,"The text displayed on the label."),Object(a.b)("dt",null,Object(a.b)("code",null,"required")),Object(a.b)("dd",null,"True if the field is required."),Object(a.b)("dt",null,Object(a.b)("code",null,"disabled")),Object(a.b)("dd",null,"True if the label should be disabled."),Object(a.b)("dt",null,Object(a.b)("code",null,"visible")),Object(a.b)("dd",null,"True if the component should be visible. Defaults to true."),Object(a.b)("dt",null,Object(a.b)("code",null,"tooltip")),Object(a.b)("dd",null,"An optional tooltip message displayed when a user clicks the help icon to the right of the component."),Object(a.b)("dt",null,Object(a.b)("code",null,"name")),Object(a.b)("dd",null,"An identifying name for this component.")),Object(a.b)("h5",{id:"returns"},"Returns"),Object(a.b)("p",null,"A ",Object(a.b)("code",null,Object(a.b)("a",{title:"h2o_wave.types.Label",href:"types#h2o_wave.types.Label"},"Label"))," instance.")))),Object(a.b)("div",{className:"api"},Object(a.b)("h3",{id:"large_bar_stat_card"},"large_bar_stat_card ",Object(a.b)("a",{name:"h2o_wave.ui.large_bar_stat_card"})),Object(a.b)("div",{className:"api__body"},Object(a.b)("div",{className:"api__signature"},"def ",Object(a.b)("span",{class:"ident"},"large_bar_stat_card"),"(box:\xa0str, title:\xa0str, caption:\xa0str, value:\xa0str, aux_value:\xa0str, value_caption:\xa0str, aux_value_caption:\xa0str, progress:\xa0float, plot_color:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, data:\xa0Union[dict,\xa0str,\xa0NoneType]\xa0=\xa0None, commands:\xa0Union[List[",Object(a.b)("a",{title:"h2o_wave.types.Command",href:"types#h2o_wave.types.Command"},"Command"),"],\xa0NoneType]\xa0=\xa0None) \u2011>\xa0",Object(a.b)("a",{title:"h2o_wave.types.LargeBarStatCard",href:"types#h2o_wave.types.LargeBarStatCard"},"LargeBarStatCard")),Object(a.b)("div",{className:"api__description"},Object(a.b)("p",null,"Create a large captioned card displaying a primary value, an auxiliary value and a progress bar, with captions for each value."),Object(a.b)("h5",{id:"args"},"Args"),Object(a.b)("dl",null,Object(a.b)("dt",null,Object(a.b)("code",null,"box")),Object(a.b)("dd",null,"A string indicating how to place this component on the page."),Object(a.b)("dt",null,Object(a.b)("code",null,"title")),Object(a.b)("dd",null,"The card's title."),Object(a.b)("dt",null,Object(a.b)("code",null,"caption")),Object(a.b)("dd",null,"The card's caption."),Object(a.b)("dt",null,Object(a.b)("code",null,"value")),Object(a.b)("dd",null,"The primary value displayed."),Object(a.b)("dt",null,Object(a.b)("code",null,"aux_value")),Object(a.b)("dd",null,"The auxiliary value, typically a target value."),Object(a.b)("dt",null,Object(a.b)("code",null,"value_caption")),Object(a.b)("dd",null,"The caption displayed below the primary value."),Object(a.b)("dt",null,Object(a.b)("code",null,"aux_value_caption")),Object(a.b)("dd",null,"The caption displayed below the auxiliary value."),Object(a.b)("dt",null,Object(a.b)("code",null,"progress")),Object(a.b)("dd",null,"The value of the progress bar, between 0 and 1."),Object(a.b)("dt",null,Object(a.b)("code",null,"plot_color")),Object(a.b)("dd",null,"The color of the progress bar."),Object(a.b)("dt",null,Object(a.b)("code",null,"data")),Object(a.b)("dd",null,"Data for this card."),Object(a.b)("dt",null,Object(a.b)("code",null,"commands")),Object(a.b)("dd",null,"Contextual menu commands for this component.")),Object(a.b)("h5",{id:"returns"},"Returns"),Object(a.b)("p",null,"A ",Object(a.b)("code",null,Object(a.b)("a",{title:"h2o_wave.types.LargeBarStatCard",href:"types#h2o_wave.types.LargeBarStatCard"},"LargeBarStatCard"))," instance.")))),Object(a.b)("div",{className:"api"},Object(a.b)("h3",{id:"large_stat_card"},"large_stat_card ",Object(a.b)("a",{name:"h2o_wave.ui.large_stat_card"})),Object(a.b)("div",{className:"api__body"},Object(a.b)("div",{className:"api__signature"},"def ",Object(a.b)("span",{class:"ident"},"large_stat_card"),"(box:\xa0str, title:\xa0str, value:\xa0str, aux_value:\xa0str, caption:\xa0str, data:\xa0Union[dict,\xa0str,\xa0NoneType]\xa0=\xa0None, commands:\xa0Union[List[",Object(a.b)("a",{title:"h2o_wave.types.Command",href:"types#h2o_wave.types.Command"},"Command"),"],\xa0NoneType]\xa0=\xa0None) \u2011>\xa0",Object(a.b)("a",{title:"h2o_wave.types.LargeStatCard",href:"types#h2o_wave.types.LargeStatCard"},"LargeStatCard")),Object(a.b)("div",{className:"api__description"},Object(a.b)("p",null,"Create a stat card displaying a primary value, an auxiliary value and a caption."),Object(a.b)("h5",{id:"args"},"Args"),Object(a.b)("dl",null,Object(a.b)("dt",null,Object(a.b)("code",null,"box")),Object(a.b)("dd",null,"A string indicating how to place this component on the page."),Object(a.b)("dt",null,Object(a.b)("code",null,"title")),Object(a.b)("dd",null,"The card's title."),Object(a.b)("dt",null,Object(a.b)("code",null,"value")),Object(a.b)("dd",null,"The primary value displayed."),Object(a.b)("dt",null,Object(a.b)("code",null,"aux_value")),Object(a.b)("dd",null,"The auxiliary value displayed next to the primary value."),Object(a.b)("dt",null,Object(a.b)("code",null,"caption")),Object(a.b)("dd",null,"The caption displayed below the primary value."),Object(a.b)("dt",null,Object(a.b)("code",null,"data")),Object(a.b)("dd",null,"Data for this card."),Object(a.b)("dt",null,Object(a.b)("code",null,"commands")),Object(a.b)("dd",null,"Contextual menu commands for this component.")),Object(a.b)("h5",{id:"returns"},"Returns"),Object(a.b)("p",null,"A ",Object(a.b)("code",null,Object(a.b)("a",{title:"h2o_wave.types.LargeStatCard",href:"types#h2o_wave.types.LargeStatCard"},"LargeStatCard"))," instance.")))),Object(a.b)("div",{className:"api"},Object(a.b)("h3",{id:"link"},"link ",Object(a.b)("a",{name:"h2o_wave.ui.link"})),Object(a.b)("div",{className:"api__body"},Object(a.b)("div",{className:"api__signature"},"def ",Object(a.b)("span",{class:"ident"},"link"),"(label:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, path:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, disabled:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, download:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, button:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, visible:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, tooltip:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, name:\xa0Union[str,\xa0NoneType]\xa0=\xa0None) \u2011>\xa0",Object(a.b)("a",{title:"h2o_wave.types.Component",href:"types#h2o_wave.types.Component"},"Component")),Object(a.b)("div",{className:"api__description"},Object(a.b)("p",null,"Create a hyperlink."),Object(a.b)("p",null,"Hyperlinks can be internal or external. Internal hyperlinks have paths that begin with a ",Object(a.b)("code",null,"/")," and point to URLs within the Q UI. All other kinds of paths are treated as external hyperlinks."),Object(a.b)("h5",{id:"args"},"Args"),Object(a.b)("dl",null,Object(a.b)("dt",null,Object(a.b)("code",null,"label")),Object(a.b)("dd",null,"The text to be displayed. If blank, the ",Object(a.b)("code",null,"path")," is used as the label."),Object(a.b)("dt",null,Object(a.b)("code",null,"path")),Object(a.b)("dd",null,"The path or URL to link to."),Object(a.b)("dt",null,Object(a.b)("code",null,"disabled")),Object(a.b)("dd",null,"True if the link should be disabled."),Object(a.b)("dt",null,Object(a.b)("code",null,"download")),Object(a.b)("dd",null,"True if the link should be used for file download."),Object(a.b)("dt",null,Object(a.b)("code",null,"button")),Object(a.b)("dd",null,"True if the link should be rendered as a button."),Object(a.b)("dt",null,Object(a.b)("code",null,"visible")),Object(a.b)("dd",null,"True if the component should be visible. Defaults to true."),Object(a.b)("dt",null,Object(a.b)("code",null,"tooltip")),Object(a.b)("dd",null,"An optional tooltip message displayed when a user clicks the help icon to the right of the component."),Object(a.b)("dt",null,Object(a.b)("code",null,"name")),Object(a.b)("dd",null,"An identifying name for this component.")),Object(a.b)("h5",{id:"returns"},"Returns"),Object(a.b)("p",null,"A ",Object(a.b)("code",null,Object(a.b)("a",{title:"h2o_wave.types.Link",href:"types#h2o_wave.types.Link"},"Link"))," instance.")))),Object(a.b)("div",{className:"api"},Object(a.b)("h3",{id:"list_card"},"list_card ",Object(a.b)("a",{name:"h2o_wave.ui.list_card"})),Object(a.b)("div",{className:"api__body"},Object(a.b)("div",{className:"api__signature"},"def ",Object(a.b)("span",{class:"ident"},"list_card"),"(box:\xa0str, title:\xa0str, item_view:\xa0str, item_props:\xa0Union[dict,\xa0str], data:\xa0Union[",Object(a.b)("a",{title:"h2o_wave.core.Data",href:"core#h2o_wave.core.Data"},"Data"),",\xa0str], commands:\xa0Union[List[",Object(a.b)("a",{title:"h2o_wave.types.Command",href:"types#h2o_wave.types.Command"},"Command"),"],\xa0NoneType]\xa0=\xa0None) \u2011>\xa0",Object(a.b)("a",{title:"h2o_wave.types.ListCard",href:"types#h2o_wave.types.ListCard"},"ListCard")),Object(a.b)("div",{className:"api__description"},Object(a.b)("p",null,"EXPERIMENTAL. DO NOT USE. Create a card containing other cards laid out in the form of a list (vertically, top-to-bottom)."),Object(a.b)("h5",{id:"args"},"Args"),Object(a.b)("dl",null,Object(a.b)("dt",null,Object(a.b)("code",null,"box")),Object(a.b)("dd",null,"A string indicating how to place this component on the page."),Object(a.b)("dt",null,Object(a.b)("code",null,"title")),Object(a.b)("dd",null,"The title for this card."),Object(a.b)("dt",null,Object(a.b)("code",null,"item_view")),Object(a.b)("dd",null,"The child card type."),Object(a.b)("dt",null,Object(a.b)("code",null,"item_props")),Object(a.b)("dd",null,"The child card properties."),Object(a.b)("dt",null,Object(a.b)("code",null,"data")),Object(a.b)("dd",null,"Data for this card."),Object(a.b)("dt",null,Object(a.b)("code",null,"commands")),Object(a.b)("dd",null,"Contextual menu commands for this component.")),Object(a.b)("h5",{id:"returns"},"Returns"),Object(a.b)("p",null,"A ",Object(a.b)("code",null,Object(a.b)("a",{title:"h2o_wave.types.ListCard",href:"types#h2o_wave.types.ListCard"},"ListCard"))," instance.")))),Object(a.b)("div",{className:"api"},Object(a.b)("h3",{id:"list_item1_card"},"list_item1_card ",Object(a.b)("a",{name:"h2o_wave.ui.list_item1_card"})),Object(a.b)("div",{className:"api__body"},Object(a.b)("div",{className:"api__signature"},"def ",Object(a.b)("span",{class:"ident"},"list_item1_card"),"(box:\xa0str, title:\xa0str, caption:\xa0str, value:\xa0str, aux_value:\xa0str, data:\xa0Union[dict,\xa0str], commands:\xa0Union[List[",Object(a.b)("a",{title:"h2o_wave.types.Command",href:"types#h2o_wave.types.Command"},"Command"),"],\xa0NoneType]\xa0=\xa0None) \u2011>\xa0",Object(a.b)("a",{title:"h2o_wave.types.ListItem1Card",href:"types#h2o_wave.types.ListItem1Card"},"ListItem1Card")),Object(a.b)("div",{className:"api__description"},Object(a.b)("p",null,"EXPERIMENTAL. DO NOT USE."),Object(a.b)("h5",{id:"args"},"Args"),Object(a.b)("dl",null,Object(a.b)("dt",null,Object(a.b)("code",null,"box")),Object(a.b)("dd",null,"A string indicating how to place this component on the page."),Object(a.b)("dt",null,Object(a.b)("code",null,"title")),Object(a.b)("dd",null,"EXPERIMENTAL. DO NOT USE."),Object(a.b)("dt",null,Object(a.b)("code",null,"caption")),Object(a.b)("dd",null,"EXPERIMENTAL. DO NOT USE."),Object(a.b)("dt",null,Object(a.b)("code",null,"value")),Object(a.b)("dd",null,"EXPERIMENTAL. DO NOT USE."),Object(a.b)("dt",null,Object(a.b)("code",null,"aux_value")),Object(a.b)("dd",null,"EXPERIMENTAL. DO NOT USE."),Object(a.b)("dt",null,Object(a.b)("code",null,"data")),Object(a.b)("dd",null,"EXPERIMENTAL. DO NOT USE."),Object(a.b)("dt",null,Object(a.b)("code",null,"commands")),Object(a.b)("dd",null,"Contextual menu commands for this component.")),Object(a.b)("h5",{id:"returns"},"Returns"),Object(a.b)("p",null,"A ",Object(a.b)("code",null,Object(a.b)("a",{title:"h2o_wave.types.ListItem1Card",href:"types#h2o_wave.types.ListItem1Card"},"ListItem1Card"))," instance.")))),Object(a.b)("div",{className:"api"},Object(a.b)("h3",{id:"mark"},"mark ",Object(a.b)("a",{name:"h2o_wave.ui.mark"})),Object(a.b)("div",{className:"api__body"},Object(a.b)("div",{className:"api__signature"},"def ",Object(a.b)("span",{class:"ident"},"mark"),"(coord:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, type:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, x:\xa0Union[str,\xa0float,\xa0int,\xa0NoneType]\xa0=\xa0None, x0:\xa0Union[str,\xa0float,\xa0int,\xa0NoneType]\xa0=\xa0None, x1:\xa0Union[str,\xa0float,\xa0int,\xa0NoneType]\xa0=\xa0None, x2:\xa0Union[str,\xa0float,\xa0int,\xa0NoneType]\xa0=\xa0None, x_min:\xa0Union[float,\xa0NoneType]\xa0=\xa0None, x_max:\xa0Union[float,\xa0NoneType]\xa0=\xa0None, x_nice:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, x_scale:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, x_title:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, y:\xa0Union[str,\xa0float,\xa0int,\xa0NoneType]\xa0=\xa0None, y0:\xa0Union[str,\xa0float,\xa0int,\xa0NoneType]\xa0=\xa0None, y1:\xa0Union[str,\xa0float,\xa0int,\xa0NoneType]\xa0=\xa0None, y2:\xa0Union[str,\xa0float,\xa0int,\xa0NoneType]\xa0=\xa0None, y_min:\xa0Union[float,\xa0NoneType]\xa0=\xa0None, y_max:\xa0Union[float,\xa0NoneType]\xa0=\xa0None, y_nice:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, y_scale:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, y_title:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, color:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, color_range:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, color_domain:\xa0Union[List[str],\xa0NoneType]\xa0=\xa0None, shape:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, shape_range:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, size:\xa0Union[str,\xa0float,\xa0int,\xa0NoneType]\xa0=\xa0None, size_range:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, stack:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, dodge:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, curve:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, fill_color:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, fill_opacity:\xa0Union[float,\xa0NoneType]\xa0=\xa0None, stroke_color:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, stroke_opacity:\xa0Union[float,\xa0NoneType]\xa0=\xa0None, stroke_size:\xa0Union[float,\xa0NoneType]\xa0=\xa0None, stroke_dash:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, label:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, label_offset:\xa0Union[float,\xa0NoneType]\xa0=\xa0None, label_offset_x:\xa0Union[float,\xa0NoneType]\xa0=\xa0None, label_offset_y:\xa0Union[float,\xa0NoneType]\xa0=\xa0None, label_rotation:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, label_position:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, label_overlap:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, label_fill_color:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, label_fill_opacity:\xa0Union[float,\xa0NoneType]\xa0=\xa0None, label_stroke_color:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, label_stroke_opacity:\xa0Union[float,\xa0NoneType]\xa0=\xa0None, label_stroke_size:\xa0Union[float,\xa0NoneType]\xa0=\xa0None, label_font_size:\xa0Union[float,\xa0NoneType]\xa0=\xa0None, label_font_weight:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, label_line_height:\xa0Union[float,\xa0NoneType]\xa0=\xa0None, label_align:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, ref_stroke_color:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, ref_stroke_opacity:\xa0Union[float,\xa0NoneType]\xa0=\xa0None, ref_stroke_size:\xa0Union[float,\xa0NoneType]\xa0=\xa0None, ref_stroke_dash:\xa0Union[str,\xa0NoneType]\xa0=\xa0None) \u2011>\xa0",Object(a.b)("a",{title:"h2o_wave.types.Mark",href:"types#h2o_wave.types.Mark"},"Mark")),Object(a.b)("div",{className:"api__description"},Object(a.b)("p",null,"Create a specification for a layer of graphical marks such as bars, lines, points for a plot. A plot can contain multiple such layers of marks."),Object(a.b)("h5",{id:"args"},"Args"),Object(a.b)("dl",null,Object(a.b)("dt",null,Object(a.b)("code",null,"coord")),Object(a.b)("dd",null,"Coordinate system. ",Object(a.b)("code",null,"rect")," is synonymous to ",Object(a.b)("code",null,"cartesian"),". ",Object(a.b)("code",null,"theta")," is transposed ",Object(a.b)("code",null,"polar"),". One of 'rect', 'cartesian', 'polar', 'theta', 'helix'."),Object(a.b)("dt",null,Object(a.b)("code",null,"type")),Object(a.b)("dd",null,"Graphical geometry. One of 'interval', 'line', 'path', 'point', 'area', 'polygon', 'schema', 'edge', 'heatmap'."),Object(a.b)("dt",null,Object(a.b)("code",null,"x")),Object(a.b)("dd",null,"X field or value."),Object(a.b)("dt",null,Object(a.b)("code",null,"x0")),Object(a.b)("dd",null,"X base field or value."),Object(a.b)("dt",null,Object(a.b)("code",null,"x1")),Object(a.b)("dd",null,"X bin lower bound field or value. For histograms."),Object(a.b)("dt",null,Object(a.b)("code",null,"x2")),Object(a.b)("dd",null,"X bin upper bound field or value. For histograms."),Object(a.b)("dt",null,Object(a.b)("code",null,"x_min")),Object(a.b)("dd",null,"X axis scale minimum."),Object(a.b)("dt",null,Object(a.b)("code",null,"x_max")),Object(a.b)("dd",null,"X axis scale maximum."),Object(a.b)("dt",null,Object(a.b)("code",null,"x_nice")),Object(a.b)("dd",null,"Whether to nice X axis scale ticks."),Object(a.b)("dt",null,Object(a.b)("code",null,"x_scale")),Object(a.b)("dd",null,"X axis scale type. One of 'linear', 'cat', 'category', 'identity', 'log', 'pow', 'time', 'timeCat', 'quantize', 'quantile'."),Object(a.b)("dt",null,Object(a.b)("code",null,"x_title")),Object(a.b)("dd",null,"X axis title."),Object(a.b)("dt",null,Object(a.b)("code",null,"y")),Object(a.b)("dd",null,"Y field or value."),Object(a.b)("dt",null,Object(a.b)("code",null,"y0")),Object(a.b)("dd",null,"Y base field or value."),Object(a.b)("dt",null,Object(a.b)("code",null,"y1")),Object(a.b)("dd",null,"Y bin lower bound field or value. For histograms."),Object(a.b)("dt",null,Object(a.b)("code",null,"y2")),Object(a.b)("dd",null,"Y bin upper bound field or value. For histograms."),Object(a.b)("dt",null,Object(a.b)("code",null,"y_min")),Object(a.b)("dd",null,"Y axis scale minimum."),Object(a.b)("dt",null,Object(a.b)("code",null,"y_max")),Object(a.b)("dd",null,"Y axis scale maximum."),Object(a.b)("dt",null,Object(a.b)("code",null,"y_nice")),Object(a.b)("dd",null,"Whether to nice Y axis scale ticks."),Object(a.b)("dt",null,Object(a.b)("code",null,"y_scale")),Object(a.b)("dd",null,"Y axis scale type. One of 'linear', 'cat', 'category', 'identity', 'log', 'pow', 'time', 'timeCat', 'quantize', 'quantile'."),Object(a.b)("dt",null,Object(a.b)("code",null,"y_title")),Object(a.b)("dd",null,"Y axis title."),Object(a.b)("dt",null,Object(a.b)("code",null,"color")),Object(a.b)("dd",null,"Mark color field or value."),Object(a.b)("dt",null,Object(a.b)("code",null,"color_range")),Object(a.b)("dd",null,"Mark color range for multi-series plots. A string containing space-separated colors, e.g. ",Object(a.b)("code",null,"'#fee8c8 #fdbb84 #e34a33'")),Object(a.b)("dt",null,Object(a.b)("code",null,"color_domain")),Object(a.b)("dd",null,"The unique values in the data (labels or categories or classes) to map colors to, e.g. ",Object(a.b)("code",null,"['high', 'medium', 'low']"),". If this is not provided, the unique values are automatically inferred from the ",Object(a.b)("code",null,"color")," attribute."),Object(a.b)("dt",null,Object(a.b)("code",null,"shape")),Object(a.b)("dd",null,"Mark shape field or value for ",Object(a.b)("code",null,"point")," mark types. Possible values are 'circle', 'square', 'bowtie', 'diamond', 'hexagon', 'triangle', 'triangle-down', 'cross', 'tick', 'plus', 'hyphen', 'line'."),Object(a.b)("dt",null,Object(a.b)("code",null,"shape_range")),Object(a.b)("dd",null,"Mark shape range for multi-series plots using ",Object(a.b)("code",null,"point")," mark types. A string containing space-separated shapes, e.g. ",Object(a.b)("code",null,"'circle square diamond'")),Object(a.b)("dt",null,Object(a.b)("code",null,"size")),Object(a.b)("dd",null,"Mark size field or value."),Object(a.b)("dt",null,Object(a.b)("code",null,"size_range")),Object(a.b)("dd",null,"Mark size range. A string containing space-separated integers, e.g. ",Object(a.b)("code",null,"'4 30'")),Object(a.b)("dt",null,Object(a.b)("code",null,"stack")),Object(a.b)("dd",null,"Field to stack marks by, or 'auto' to infer."),Object(a.b)("dt",null,Object(a.b)("code",null,"dodge")),Object(a.b)("dd",null,"Field to dodge marks by, or 'auto' to infer."),Object(a.b)("dt",null,Object(a.b)("code",null,"curve")),Object(a.b)("dd",null,"Curve type for ",Object(a.b)("code",null,"line")," and ",Object(a.b)("code",null,"area")," mark types. One of 'none', 'smooth', 'step-before', 'step', 'step-after'."),Object(a.b)("dt",null,Object(a.b)("code",null,"fill_color")),Object(a.b)("dd",null,"Mark fill color."),Object(a.b)("dt",null,Object(a.b)("code",null,"fill_opacity")),Object(a.b)("dd",null,"Mark fill opacity."),Object(a.b)("dt",null,Object(a.b)("code",null,"stroke_color")),Object(a.b)("dd",null,"Mark stroke color."),Object(a.b)("dt",null,Object(a.b)("code",null,"stroke_opacity")),Object(a.b)("dd",null,"Mark stroke opacity."),Object(a.b)("dt",null,Object(a.b)("code",null,"stroke_size")),Object(a.b)("dd",null,"Mark stroke size."),Object(a.b)("dt",null,Object(a.b)("code",null,"stroke_dash")),Object(a.b)("dd",null,"Mark stroke dash style. A string containing space-separated integers that specify distances to alternately draw a line and a gap (in coordinate space units). If the number of elements in the array is odd, the elements of the array get copied and concatenated. For example, [5, 15, 25] will become [5, 15, 25, 5, 15, 25]."),Object(a.b)("dt",null,Object(a.b)("code",null,"label")),Object(a.b)("dd",null,"Label field or value."),Object(a.b)("dt",null,Object(a.b)("code",null,"label_offset")),Object(a.b)("dd",null,"Distance between label and mark."),Object(a.b)("dt",null,Object(a.b)("code",null,"label_offset_x")),Object(a.b)("dd",null,"Horizontal distance between label and mark."),Object(a.b)("dt",null,Object(a.b)("code",null,"label_offset_y")),Object(a.b)("dd",null,"Vertical distance between label and mark."),Object(a.b)("dt",null,Object(a.b)("code",null,"label_rotation")),Object(a.b)("dd",null,"Label rotation angle, in degrees, or 'none' to disable automatic rotation. The default behavior is 'auto' for automatic rotation."),Object(a.b)("dt",null,Object(a.b)("code",null,"label_position")),Object(a.b)("dd",null,"Label position relative to the mark. One of 'top', 'bottom', 'middle', 'left', 'right'."),Object(a.b)("dt",null,Object(a.b)("code",null,"label_overlap")),Object(a.b)("dd",null,"Strategy to use if labels overlap. One of 'hide', 'overlap', 'constrain'."),Object(a.b)("dt",null,Object(a.b)("code",null,"label_fill_color")),Object(a.b)("dd",null,"Label fill color."),Object(a.b)("dt",null,Object(a.b)("code",null,"label_fill_opacity")),Object(a.b)("dd",null,"Label fill opacity."),Object(a.b)("dt",null,Object(a.b)("code",null,"label_stroke_color")),Object(a.b)("dd",null,"Label stroke color."),Object(a.b)("dt",null,Object(a.b)("code",null,"label_stroke_opacity")),Object(a.b)("dd",null,"Label stroke opacity."),Object(a.b)("dt",null,Object(a.b)("code",null,"label_stroke_size")),Object(a.b)("dd",null,"Label stroke size (line width or pen thickness)."),Object(a.b)("dt",null,Object(a.b)("code",null,"label_font_size")),Object(a.b)("dd",null,"Label font size."),Object(a.b)("dt",null,Object(a.b)("code",null,"label_font_weight")),Object(a.b)("dd",null,"Label font weight."),Object(a.b)("dt",null,Object(a.b)("code",null,"label_line_height")),Object(a.b)("dd",null,"Label line height."),Object(a.b)("dt",null,Object(a.b)("code",null,"label_align")),Object(a.b)("dd",null,"Label text alignment. One of 'left', 'right', 'center', 'start', 'end'."),Object(a.b)("dt",null,Object(a.b)("code",null,"ref_stroke_color")),Object(a.b)("dd",null,"Reference line stroke color."),Object(a.b)("dt",null,Object(a.b)("code",null,"ref_stroke_opacity")),Object(a.b)("dd",null,"Reference line stroke opacity."),Object(a.b)("dt",null,Object(a.b)("code",null,"ref_stroke_size")),Object(a.b)("dd",null,"Reference line stroke size (line width or pen thickness)."),Object(a.b)("dt",null,Object(a.b)("code",null,"ref_stroke_dash")),Object(a.b)("dd",null,"Reference line stroke dash style. A string containing space-separated integers that specify distances to alternately draw a line and a gap (in coordinate space units). If the number of elements in the array is odd, the elements of the array get copied and concatenated. For example, [5, 15, 25] will become [5, 15, 25, 5, 15, 25].")),Object(a.b)("h5",{id:"returns"},"Returns"),Object(a.b)("p",null,"A ",Object(a.b)("code",null,Object(a.b)("a",{title:"h2o_wave.types.Mark",href:"types#h2o_wave.types.Mark"},"Mark"))," instance.")))),Object(a.b)("div",{className:"api"},Object(a.b)("h3",{id:"markdown_card"},"markdown_card ",Object(a.b)("a",{name:"h2o_wave.ui.markdown_card"})),Object(a.b)("div",{className:"api__body"},Object(a.b)("div",{className:"api__signature"},"def ",Object(a.b)("span",{class:"ident"},"markdown_card"),"(box:\xa0str, title:\xa0str, content:\xa0str, data:\xa0Union[dict,\xa0str,\xa0NoneType]\xa0=\xa0None, commands:\xa0Union[List[",Object(a.b)("a",{title:"h2o_wave.types.Command",href:"types#h2o_wave.types.Command"},"Command"),"],\xa0NoneType]\xa0=\xa0None) \u2011>\xa0",Object(a.b)("a",{title:"h2o_wave.types.MarkdownCard",href:"types#h2o_wave.types.MarkdownCard"},"MarkdownCard")),Object(a.b)("div",{className:"api__description"},Object(a.b)("p",null,"Create a card that renders Markdown content."),Object(a.b)("p",null,"Github-flavored markdown is supported. HTML markup is allowed in markdown content. URLs, if found, are displayed as hyperlinks. Copyright, reserved, trademark, quotes, etc. are replaced with language-neutral symbols."),Object(a.b)("h5",{id:"args"},"Args"),Object(a.b)("dl",null,Object(a.b)("dt",null,Object(a.b)("code",null,"box")),Object(a.b)("dd",null,"A string indicating how to place this component on the page."),Object(a.b)("dt",null,Object(a.b)("code",null,"title")),Object(a.b)("dd",null,"The title for this card."),Object(a.b)("dt",null,Object(a.b)("code",null,"content")),Object(a.b)("dd",null,"The markdown content. Supports Github Flavored Markdown (GFM): ",Object(a.b)("a",{href:"https://guides.github.com/features/mastering-markdown/"},"https://guides.github.com/features/mastering-markdown/")),Object(a.b)("dt",null,Object(a.b)("code",null,"data")),Object(a.b)("dd",null,"Additional data for the card."),Object(a.b)("dt",null,Object(a.b)("code",null,"commands")),Object(a.b)("dd",null,"Contextual menu commands for this component.")),Object(a.b)("h5",{id:"returns"},"Returns"),Object(a.b)("p",null,"A ",Object(a.b)("code",null,Object(a.b)("a",{title:"h2o_wave.types.MarkdownCard",href:"types#h2o_wave.types.MarkdownCard"},"MarkdownCard"))," instance.")))),Object(a.b)("div",{className:"api"},Object(a.b)("h3",{id:"markup"},"markup ",Object(a.b)("a",{name:"h2o_wave.ui.markup"})),Object(a.b)("div",{className:"api__body"},Object(a.b)("div",{className:"api__signature"},"def ",Object(a.b)("span",{class:"ident"},"markup"),"(content:\xa0str, name:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, visible:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None) \u2011>\xa0",Object(a.b)("a",{title:"h2o_wave.types.Component",href:"types#h2o_wave.types.Component"},"Component")),Object(a.b)("div",{className:"api__description"},Object(a.b)("p",null,"Render HTML content."),Object(a.b)("h5",{id:"args"},"Args"),Object(a.b)("dl",null,Object(a.b)("dt",null,Object(a.b)("code",null,"content")),Object(a.b)("dd",null,"The HTML content."),Object(a.b)("dt",null,Object(a.b)("code",null,"name")),Object(a.b)("dd",null,"An identifying name for this component."),Object(a.b)("dt",null,Object(a.b)("code",null,"visible")),Object(a.b)("dd",null,"True if the component should be visible. Defaults to true.")),Object(a.b)("h5",{id:"returns"},"Returns"),Object(a.b)("p",null,"A ",Object(a.b)("code",null,Object(a.b)("a",{title:"h2o_wave.types.Markup",href:"types#h2o_wave.types.Markup"},"Markup"))," instance.")))),Object(a.b)("div",{className:"api"},Object(a.b)("h3",{id:"markup_card"},"markup_card ",Object(a.b)("a",{name:"h2o_wave.ui.markup_card"})),Object(a.b)("div",{className:"api__body"},Object(a.b)("div",{className:"api__signature"},"def ",Object(a.b)("span",{class:"ident"},"markup_card"),"(box:\xa0str, title:\xa0str, content:\xa0str, commands:\xa0Union[List[",Object(a.b)("a",{title:"h2o_wave.types.Command",href:"types#h2o_wave.types.Command"},"Command"),"],\xa0NoneType]\xa0=\xa0None) \u2011>\xa0",Object(a.b)("a",{title:"h2o_wave.types.MarkupCard",href:"types#h2o_wave.types.MarkupCard"},"MarkupCard")),Object(a.b)("div",{className:"api__description"},Object(a.b)("p",null,"Render HTML content."),Object(a.b)("h5",{id:"args"},"Args"),Object(a.b)("dl",null,Object(a.b)("dt",null,Object(a.b)("code",null,"box")),Object(a.b)("dd",null,"A string indicating how to place this component on the page."),Object(a.b)("dt",null,Object(a.b)("code",null,"title")),Object(a.b)("dd",null,"The title for this card."),Object(a.b)("dt",null,Object(a.b)("code",null,"content")),Object(a.b)("dd",null,"The HTML content."),Object(a.b)("dt",null,Object(a.b)("code",null,"commands")),Object(a.b)("dd",null,"Contextual menu commands for this component.")),Object(a.b)("h5",{id:"returns"},"Returns"),Object(a.b)("p",null,"A ",Object(a.b)("code",null,Object(a.b)("a",{title:"h2o_wave.types.MarkupCard",href:"types#h2o_wave.types.MarkupCard"},"MarkupCard"))," instance.")))),Object(a.b)("div",{className:"api"},Object(a.b)("h3",{id:"message_bar"},"message_bar ",Object(a.b)("a",{name:"h2o_wave.ui.message_bar"})),Object(a.b)("div",{className:"api__body"},Object(a.b)("div",{className:"api__signature"},"def ",Object(a.b)("span",{class:"ident"},"message_bar"),"(type:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, text:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, name:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, visible:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None) \u2011>\xa0",Object(a.b)("a",{title:"h2o_wave.types.Component",href:"types#h2o_wave.types.Component"},"Component")),Object(a.b)("div",{className:"api__description"},Object(a.b)("p",null,"Create a message bar."),Object(a.b)("p",null,"A message bar is an area at the top of a primary view that displays relevant status information. You can use a message bar to tell the user about a situation that does not require their immediate attention and therefore does not need to block other activities."),Object(a.b)("h5",{id:"args"},"Args"),Object(a.b)("dl",null,Object(a.b)("dt",null,Object(a.b)("code",null,"type")),Object(a.b)("dd",null,"The icon and color of the message bar. One of 'info', 'error', 'warning', 'success', 'danger', 'blocked'."),Object(a.b)("dt",null,Object(a.b)("code",null,"text")),Object(a.b)("dd",null,"The text displayed on the message bar."),Object(a.b)("dt",null,Object(a.b)("code",null,"name")),Object(a.b)("dd",null,"An identifying name for this component."),Object(a.b)("dt",null,Object(a.b)("code",null,"visible")),Object(a.b)("dd",null,"True if the component should be visible. Defaults to true.")),Object(a.b)("h5",{id:"returns"},"Returns"),Object(a.b)("p",null,"A ",Object(a.b)("code",null,Object(a.b)("a",{title:"h2o_wave.types.MessageBar",href:"types#h2o_wave.types.MessageBar"},"MessageBar"))," instance.")))),Object(a.b)("div",{className:"api"},Object(a.b)("h3",{id:"meta_card"},"meta_card ",Object(a.b)("a",{name:"h2o_wave.ui.meta_card"})),Object(a.b)("div",{className:"api__body"},Object(a.b)("div",{className:"api__signature"},"def ",Object(a.b)("span",{class:"ident"},"meta_card"),"(box:\xa0str, title:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, refresh:\xa0Union[int,\xa0NoneType]\xa0=\xa0None, notification:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, redirect:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, icon:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, commands:\xa0Union[List[",Object(a.b)("a",{title:"h2o_wave.types.Command",href:"types#h2o_wave.types.Command"},"Command"),"],\xa0NoneType]\xa0=\xa0None) \u2011>\xa0",Object(a.b)("a",{title:"h2o_wave.types.MetaCard",href:"types#h2o_wave.types.MetaCard"},"MetaCard")),Object(a.b)("div",{className:"api__description"},Object(a.b)("p",null,"Represents page-global state."),Object(a.b)("p",null,"This card is invisible. It is used to control attributes of the active page."),Object(a.b)("h5",{id:"args"},"Args"),Object(a.b)("dl",null,Object(a.b)("dt",null,Object(a.b)("code",null,"box")),Object(a.b)("dd",null,"A string indicating how to place this component on the page."),Object(a.b)("dt",null,Object(a.b)("code",null,"title")),Object(a.b)("dd",null,"The title of the page."),Object(a.b)("dt",null,Object(a.b)("code",null,"refresh")),Object(a.b)("dd",null,"Refresh rate in seconds. A value of 0 turns off live-updates. Values != 0 are currently ignored (reserved for future use)."),Object(a.b)("dt",null,Object(a.b)("code",null,"notification")),Object(a.b)("dd",null,"Display a desktop notification to the user."),Object(a.b)("dt",null,Object(a.b)("code",null,"redirect")),Object(a.b)("dd",null,"Redirect the page to a new URL."),Object(a.b)("dt",null,Object(a.b)("code",null,"icon")),Object(a.b)("dd",null,"Shortcut icon path. Preferably a ",Object(a.b)("code",null,".png")," file (",Object(a.b)("code",null,".ico")," files may not work in mobile browsers)."),Object(a.b)("dt",null,Object(a.b)("code",null,"commands")),Object(a.b)("dd",null,"Contextual menu commands for this component.")),Object(a.b)("h5",{id:"returns"},"Returns"),Object(a.b)("p",null,"A ",Object(a.b)("code",null,Object(a.b)("a",{title:"h2o_wave.types.MetaCard",href:"types#h2o_wave.types.MetaCard"},"MetaCard"))," instance.")))),Object(a.b)("div",{className:"api"},Object(a.b)("h3",{id:"nav_card"},"nav_card ",Object(a.b)("a",{name:"h2o_wave.ui.nav_card"})),Object(a.b)("div",{className:"api__body"},Object(a.b)("div",{className:"api__signature"},"def ",Object(a.b)("span",{class:"ident"},"nav_card"),"(box:\xa0str, items:\xa0List[",Object(a.b)("a",{title:"h2o_wave.types.NavGroup",href:"types#h2o_wave.types.NavGroup"},"NavGroup"),"], commands:\xa0Union[List[",Object(a.b)("a",{title:"h2o_wave.types.Command",href:"types#h2o_wave.types.Command"},"Command"),"],\xa0NoneType]\xa0=\xa0None) \u2011>\xa0",Object(a.b)("a",{title:"h2o_wave.types.NavCard",href:"types#h2o_wave.types.NavCard"},"NavCard")),Object(a.b)("div",{className:"api__description"},Object(a.b)("p",null,"Create a card containing a navigation pane."),Object(a.b)("h5",{id:"args"},"Args"),Object(a.b)("dl",null,Object(a.b)("dt",null,Object(a.b)("code",null,"box")),Object(a.b)("dd",null,"A string indicating how to place this component on the page."),Object(a.b)("dt",null,Object(a.b)("code",null,"items")),Object(a.b)("dd",null,"The navigation groups contained in this pane."),Object(a.b)("dt",null,Object(a.b)("code",null,"commands")),Object(a.b)("dd",null,"Contextual menu commands for this component.")),Object(a.b)("h5",{id:"returns"},"Returns"),Object(a.b)("p",null,"A ",Object(a.b)("code",null,Object(a.b)("a",{title:"h2o_wave.types.NavCard",href:"types#h2o_wave.types.NavCard"},"NavCard"))," instance.")))),Object(a.b)("div",{className:"api"},Object(a.b)("h3",{id:"nav_group"},"nav_group ",Object(a.b)("a",{name:"h2o_wave.ui.nav_group"})),Object(a.b)("div",{className:"api__body"},Object(a.b)("div",{className:"api__signature"},"def ",Object(a.b)("span",{class:"ident"},"nav_group"),"(label:\xa0str, items:\xa0List[",Object(a.b)("a",{title:"h2o_wave.types.NavItem",href:"types#h2o_wave.types.NavItem"},"NavItem"),"]) \u2011>\xa0",Object(a.b)("a",{title:"h2o_wave.types.NavGroup",href:"types#h2o_wave.types.NavGroup"},"NavGroup")),Object(a.b)("div",{className:"api__description"},Object(a.b)("p",null,"Create a group of navigation items."),Object(a.b)("h5",{id:"args"},"Args"),Object(a.b)("dl",null,Object(a.b)("dt",null,Object(a.b)("code",null,"label")),Object(a.b)("dd",null,"The label to display for this group."),Object(a.b)("dt",null,Object(a.b)("code",null,"items")),Object(a.b)("dd",null,"The navigation items contained in this group.")),Object(a.b)("h5",{id:"returns"},"Returns"),Object(a.b)("p",null,"A ",Object(a.b)("code",null,Object(a.b)("a",{title:"h2o_wave.types.NavGroup",href:"types#h2o_wave.types.NavGroup"},"NavGroup"))," instance.")))),Object(a.b)("div",{className:"api"},Object(a.b)("h3",{id:"nav_item"},"nav_item ",Object(a.b)("a",{name:"h2o_wave.ui.nav_item"})),Object(a.b)("div",{className:"api__body"},Object(a.b)("div",{className:"api__signature"},"def ",Object(a.b)("span",{class:"ident"},"nav_item"),"(name:\xa0str, label:\xa0str) \u2011>\xa0",Object(a.b)("a",{title:"h2o_wave.types.NavItem",href:"types#h2o_wave.types.NavItem"},"NavItem")),Object(a.b)("div",{className:"api__description"},Object(a.b)("p",null,"Create a navigation item."),Object(a.b)("h5",{id:"args"},"Args"),Object(a.b)("dl",null,Object(a.b)("dt",null,Object(a.b)("code",null,"name")),Object(a.b)("dd",null,"The name of this item. Prefix the name with a '#' to trigger hash-change navigation."),Object(a.b)("dt",null,Object(a.b)("code",null,"label")),Object(a.b)("dd",null,"The label to display.")),Object(a.b)("h5",{id:"returns"},"Returns"),Object(a.b)("p",null,"A ",Object(a.b)("code",null,Object(a.b)("a",{title:"h2o_wave.types.NavItem",href:"types#h2o_wave.types.NavItem"},"NavItem"))," instance.")))),Object(a.b)("div",{className:"api"},Object(a.b)("h3",{id:"picker"},"picker ",Object(a.b)("a",{name:"h2o_wave.ui.picker"})),Object(a.b)("div",{className:"api__body"},Object(a.b)("div",{className:"api__signature"},"def ",Object(a.b)("span",{class:"ident"},"picker"),"(name:\xa0str, choices:\xa0List[",Object(a.b)("a",{title:"h2o_wave.types.Choice",href:"types#h2o_wave.types.Choice"},"Choice"),"], label:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, values:\xa0Union[List[str],\xa0NoneType]\xa0=\xa0None, max_choices:\xa0Union[int,\xa0NoneType]\xa0=\xa0None, disabled:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, visible:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, tooltip:\xa0Union[str,\xa0NoneType]\xa0=\xa0None) \u2011>\xa0",Object(a.b)("a",{title:"h2o_wave.types.Component",href:"types#h2o_wave.types.Component"},"Component")),Object(a.b)("div",{className:"api__description"},Object(a.b)("p",null,"Create a picker. Pickers are used to select one or more choices, such as tags or files, from a list. Use a picker to allow the user to quickly search for or manage a few tags or files."),Object(a.b)("h5",{id:"args"},"Args"),Object(a.b)("dl",null,Object(a.b)("dt",null,Object(a.b)("code",null,"name")),Object(a.b)("dd",null,"An identifying name for this component."),Object(a.b)("dt",null,Object(a.b)("code",null,"choices")),Object(a.b)("dd",null,"The choices to be presented."),Object(a.b)("dt",null,Object(a.b)("code",null,"label")),Object(a.b)("dd",null,"Text to be displayed above the component."),Object(a.b)("dt",null,Object(a.b)("code",null,"values")),Object(a.b)("dd",null,"The names of the selected choices."),Object(a.b)("dt",null,Object(a.b)("code",null,"max_choices")),Object(a.b)("dd",null,"Maximum number of selectable choices. Defaults to no limit."),Object(a.b)("dt",null,Object(a.b)("code",null,"disabled")),Object(a.b)("dd",null,"Controls whether the picker should be disabled or not."),Object(a.b)("dt",null,Object(a.b)("code",null,"visible")),Object(a.b)("dd",null,"True if the component should be visible. Defaults to true."),Object(a.b)("dt",null,Object(a.b)("code",null,"tooltip")),Object(a.b)("dd",null,"An optional tooltip message displayed when a user clicks the help icon to the right of the component.")),Object(a.b)("h5",{id:"returns"},"Returns"),Object(a.b)("p",null,"A ",Object(a.b)("code",null,Object(a.b)("a",{title:"h2o_wave.types.Picker",href:"types#h2o_wave.types.Picker"},"Picker"))," instance.")))),Object(a.b)("div",{className:"api"},Object(a.b)("h3",{id:"pixel_art_card"},"pixel_art_card ",Object(a.b)("a",{name:"h2o_wave.ui.pixel_art_card"})),Object(a.b)("div",{className:"api__body"},Object(a.b)("div",{className:"api__signature"},"def ",Object(a.b)("span",{class:"ident"},"pixel_art_card"),"(box:\xa0str, title:\xa0str, data:\xa0Union[dict,\xa0str], commands:\xa0Union[List[",Object(a.b)("a",{title:"h2o_wave.types.Command",href:"types#h2o_wave.types.Command"},"Command"),"],\xa0NoneType]\xa0=\xa0None) \u2011>\xa0",Object(a.b)("a",{title:"h2o_wave.types.PixelArtCard",href:"types#h2o_wave.types.PixelArtCard"},"PixelArtCard")),Object(a.b)("div",{className:"api__description"},Object(a.b)("p",null,"Create a card displaying a collaborative Pixel art tool, just for kicks."),Object(a.b)("h5",{id:"args"},"Args"),Object(a.b)("dl",null,Object(a.b)("dt",null,Object(a.b)("code",null,"box")),Object(a.b)("dd",null,"A string indicating how to place this component on the page."),Object(a.b)("dt",null,Object(a.b)("code",null,"title")),Object(a.b)("dd",null,"The title for this card."),Object(a.b)("dt",null,Object(a.b)("code",null,"data")),Object(a.b)("dd",null,"The data for this card."),Object(a.b)("dt",null,Object(a.b)("code",null,"commands")),Object(a.b)("dd",null,"Contextual menu commands for this component.")),Object(a.b)("h5",{id:"returns"},"Returns"),Object(a.b)("p",null,"A ",Object(a.b)("code",null,Object(a.b)("a",{title:"h2o_wave.types.PixelArtCard",href:"types#h2o_wave.types.PixelArtCard"},"PixelArtCard"))," instance.")))),Object(a.b)("div",{className:"api"},Object(a.b)("h3",{id:"plot"},"plot ",Object(a.b)("a",{name:"h2o_wave.ui.plot"})),Object(a.b)("div",{className:"api__body"},Object(a.b)("div",{className:"api__signature"},"def ",Object(a.b)("span",{class:"ident"},"plot"),"(marks:\xa0List[",Object(a.b)("a",{title:"h2o_wave.types.Mark",href:"types#h2o_wave.types.Mark"},"Mark"),"]) \u2011>\xa0",Object(a.b)("a",{title:"h2o_wave.types.Plot",href:"types#h2o_wave.types.Plot"},"Plot")),Object(a.b)("div",{className:"api__description"},Object(a.b)("p",null,"Create a plot. A plot is composed of one or more graphical mark layers."),Object(a.b)("h5",{id:"args"},"Args"),Object(a.b)("dl",null,Object(a.b)("dt",null,Object(a.b)("code",null,"marks")),Object(a.b)("dd",null,"The graphical mark layers contained in this plot.")),Object(a.b)("h5",{id:"returns"},"Returns"),Object(a.b)("p",null,"A ",Object(a.b)("code",null,Object(a.b)("a",{title:"h2o_wave.types.Plot",href:"types#h2o_wave.types.Plot"},"Plot"))," instance.")))),Object(a.b)("div",{className:"api"},Object(a.b)("h3",{id:"plot_card"},"plot_card ",Object(a.b)("a",{name:"h2o_wave.ui.plot_card"})),Object(a.b)("div",{className:"api__body"},Object(a.b)("div",{className:"api__signature"},"def ",Object(a.b)("span",{class:"ident"},"plot_card"),"(box:\xa0str, title:\xa0str, data:\xa0Union[dict,\xa0str], plot:\xa0",Object(a.b)("a",{title:"h2o_wave.types.Plot",href:"types#h2o_wave.types.Plot"},"Plot"),", commands:\xa0Union[List[",Object(a.b)("a",{title:"h2o_wave.types.Command",href:"types#h2o_wave.types.Command"},"Command"),"],\xa0NoneType]\xa0=\xa0None) \u2011>\xa0",Object(a.b)("a",{title:"h2o_wave.types.PlotCard",href:"types#h2o_wave.types.PlotCard"},"PlotCard")),Object(a.b)("div",{className:"api__description"},Object(a.b)("p",null,"Create a card displaying a plot."),Object(a.b)("h5",{id:"args"},"Args"),Object(a.b)("dl",null,Object(a.b)("dt",null,Object(a.b)("code",null,"box")),Object(a.b)("dd",null,"A string indicating how to place this component on the page."),Object(a.b)("dt",null,Object(a.b)("code",null,"title")),Object(a.b)("dd",null,"The title for this card."),Object(a.b)("dt",null,Object(a.b)("code",null,"data")),Object(a.b)("dd",null,"Data for this card."),Object(a.b)("dt",null,Object(a.b)("code",null,"plot")),Object(a.b)("dd",null,"The plot to be displayed in this card."),Object(a.b)("dt",null,Object(a.b)("code",null,"commands")),Object(a.b)("dd",null,"Contextual menu commands for this component.")),Object(a.b)("h5",{id:"returns"},"Returns"),Object(a.b)("p",null,"A ",Object(a.b)("code",null,Object(a.b)("a",{title:"h2o_wave.types.PlotCard",href:"types#h2o_wave.types.PlotCard"},"PlotCard"))," instance.")))),Object(a.b)("div",{className:"api"},Object(a.b)("h3",{id:"progress"},"progress ",Object(a.b)("a",{name:"h2o_wave.ui.progress"})),Object(a.b)("div",{className:"api__body"},Object(a.b)("div",{className:"api__signature"},"def ",Object(a.b)("span",{class:"ident"},"progress"),"(label:\xa0str, caption:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, value:\xa0Union[float,\xa0NoneType]\xa0=\xa0None, visible:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, tooltip:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, name:\xa0Union[str,\xa0NoneType]\xa0=\xa0None) \u2011>\xa0",Object(a.b)("a",{title:"h2o_wave.types.Component",href:"types#h2o_wave.types.Component"},"Component")),Object(a.b)("div",{className:"api__description"},Object(a.b)("p",null,"Create a progress bar."),Object(a.b)("p",null,"Progress bars are used to show the completion status of an operation lasting more than 2 seconds. If the state of progress cannot be determined, do not set a value. Progress bars feature a bar showing total units to completion, and total units finished. The label appears above the bar, and the caption appears below. The label should tell someone exactly what the operation is doing."),Object(a.b)("p",null,"Examples of formatting include: [Object] is being [operation name], or [Object] is being [operation name] to [destination name] or [Object] is being [operation name] from [source name] to [destination name]"),Object(a.b)("p",null,"Status text is generally in units elapsed and total units. Real-world examples include copying files to a storage location, saving edits to a file, and more. Use units that are informative and relevant to give the best idea to users of how long the operation will take to complete. Avoid time units as they are rarely accurate enough to be trustworthy. Also, combine steps of a complex operation into one total bar to avoid \u201crewinding\u201d the bar. Instead change the label to reflect the change if necessary. Bars moving backwards reduce confidence in the service."),Object(a.b)("h5",{id:"args"},"Args"),Object(a.b)("dl",null,Object(a.b)("dt",null,Object(a.b)("code",null,"label")),Object(a.b)("dd",null,"The text displayed above the bar."),Object(a.b)("dt",null,Object(a.b)("code",null,"caption")),Object(a.b)("dd",null,"The text displayed below the bar."),Object(a.b)("dt",null,Object(a.b)("code",null,"value")),Object(a.b)("dd",null,"The progress, between 0.0 and 1.0, or -1 (default) if indeterminate."),Object(a.b)("dt",null,Object(a.b)("code",null,"visible")),Object(a.b)("dd",null,"True if the component should be visible. Defaults to true."),Object(a.b)("dt",null,Object(a.b)("code",null,"tooltip")),Object(a.b)("dd",null,"An optional tooltip message displayed when a user clicks the help icon to the right of the component."),Object(a.b)("dt",null,Object(a.b)("code",null,"name")),Object(a.b)("dd",null,"An identifying name for this component.")),Object(a.b)("h5",{id:"returns"},"Returns"),Object(a.b)("p",null,"A ",Object(a.b)("code",null,Object(a.b)("a",{title:"h2o_wave.types.Progress",href:"types#h2o_wave.types.Progress"},"Progress"))," instance.")))),Object(a.b)("div",{className:"api"},Object(a.b)("h3",{id:"progress_table_cell_type"},"progress_table_cell_type ",Object(a.b)("a",{name:"h2o_wave.ui.progress_table_cell_type"})),Object(a.b)("div",{className:"api__body"},Object(a.b)("div",{className:"api__signature"},"def ",Object(a.b)("span",{class:"ident"},"progress_table_cell_type"),"(color:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, name:\xa0Union[str,\xa0NoneType]\xa0=\xa0None) \u2011>\xa0",Object(a.b)("a",{title:"h2o_wave.types.TableCellType",href:"types#h2o_wave.types.TableCellType"},"TableCellType")),Object(a.b)("div",{className:"api__description"},Object(a.b)("p",null,"Create a cell type that renders a column's cells as progress bars instead of plain text. If set on a column, the cell value must be between 0.0 and 1.0."),Object(a.b)("h5",{id:"args"},"Args"),Object(a.b)("dl",null,Object(a.b)("dt",null,Object(a.b)("code",null,"color")),Object(a.b)("dd",null,"Color of the progress arc."),Object(a.b)("dt",null,Object(a.b)("code",null,"name")),Object(a.b)("dd",null,"An identifying name for this component.")),Object(a.b)("h5",{id:"returns"},"Returns"),Object(a.b)("p",null,"A ",Object(a.b)("code",null,Object(a.b)("a",{title:"h2o_wave.types.ProgressTableCellType",href:"types#h2o_wave.types.ProgressTableCellType"},"ProgressTableCellType"))," instance.")))),Object(a.b)("div",{className:"api"},Object(a.b)("h3",{id:"range_slider"},"range_slider ",Object(a.b)("a",{name:"h2o_wave.ui.range_slider"})),Object(a.b)("div",{className:"api__body"},Object(a.b)("div",{className:"api__signature"},"def ",Object(a.b)("span",{class:"ident"},"range_slider"),"(name:\xa0str, label:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, min:\xa0Union[float,\xa0NoneType]\xa0=\xa0None, max:\xa0Union[float,\xa0NoneType]\xa0=\xa0None, step:\xa0Union[float,\xa0NoneType]\xa0=\xa0None, min_value:\xa0Union[float,\xa0NoneType]\xa0=\xa0None, max_value:\xa0Union[float,\xa0NoneType]\xa0=\xa0None, disabled:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, trigger:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, visible:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, tooltip:\xa0Union[str,\xa0NoneType]\xa0=\xa0None) \u2011>\xa0",Object(a.b)("a",{title:"h2o_wave.types.Component",href:"types#h2o_wave.types.Component"},"Component")),Object(a.b)("div",{className:"api__description"},Object(a.b)("p",null,"Create a range slider."),Object(a.b)("p",null,"A range slider is an element used to select a value range. It provides a visual indication of adjustable content, as well as the current setting in the total range of content. It is displayed as a horizontal track with options on either side. Knobs or levers are dragged to one end or the other to make the choice, indicating the current max and min value."),Object(a.b)("h5",{id:"args"},"Args"),Object(a.b)("dl",null,Object(a.b)("dt",null,Object(a.b)("code",null,"name")),Object(a.b)("dd",null,"An identifying name for this component."),Object(a.b)("dt",null,Object(a.b)("code",null,"label")),Object(a.b)("dd",null,"Text to be displayed alongside the component."),Object(a.b)("dt",null,Object(a.b)("code",null,"min")),Object(a.b)("dd",null,"The minimum value of the slider. Defaults to 0."),Object(a.b)("dt",null,Object(a.b)("code",null,"max")),Object(a.b)("dd",null,"The maximum value of the slider. Defaults to 100."),Object(a.b)("dt",null,Object(a.b)("code",null,"step")),Object(a.b)("dd",null,"The difference between two adjacent values of the slider."),Object(a.b)("dt",null,Object(a.b)("code",null,"min_value")),Object(a.b)("dd",null,"The lower bound of the selected range."),Object(a.b)("dt",null,Object(a.b)("code",null,"max_value")),Object(a.b)("dd",null,"The upper bound of the selected range."),Object(a.b)("dt",null,Object(a.b)("code",null,"disabled")),Object(a.b)("dd",null,"True if this field is disabled."),Object(a.b)("dt",null,Object(a.b)("code",null,"trigger")),Object(a.b)("dd",null,"True if the form should be submitted when the slider value changes."),Object(a.b)("dt",null,Object(a.b)("code",null,"visible")),Object(a.b)("dd",null,"True if the component should be visible. Defaults to true."),Object(a.b)("dt",null,Object(a.b)("code",null,"tooltip")),Object(a.b)("dd",null,"An optional tooltip message displayed when a user clicks the help icon to the right of the component.")),Object(a.b)("h5",{id:"returns"},"Returns"),Object(a.b)("p",null,"A ",Object(a.b)("code",null,Object(a.b)("a",{title:"h2o_wave.types.RangeSlider",href:"types#h2o_wave.types.RangeSlider"},"RangeSlider"))," instance.")))),Object(a.b)("div",{className:"api"},Object(a.b)("h3",{id:"repeat_card"},"repeat_card ",Object(a.b)("a",{name:"h2o_wave.ui.repeat_card"})),Object(a.b)("div",{className:"api__body"},Object(a.b)("div",{className:"api__signature"},"def ",Object(a.b)("span",{class:"ident"},"repeat_card"),"(box:\xa0str, item_view:\xa0str, item_props:\xa0Union[dict,\xa0str], data:\xa0Union[",Object(a.b)("a",{title:"h2o_wave.core.Data",href:"core#h2o_wave.core.Data"},"Data"),",\xa0str], commands:\xa0Union[List[",Object(a.b)("a",{title:"h2o_wave.types.Command",href:"types#h2o_wave.types.Command"},"Command"),"],\xa0NoneType]\xa0=\xa0None) \u2011>\xa0",Object(a.b)("a",{title:"h2o_wave.types.RepeatCard",href:"types#h2o_wave.types.RepeatCard"},"RepeatCard")),Object(a.b)("div",{className:"api__description"},Object(a.b)("p",null,"EXPERIMENTAL. DO NOT USE. Create a card containing other cards."),Object(a.b)("h5",{id:"args"},"Args"),Object(a.b)("dl",null,Object(a.b)("dt",null,Object(a.b)("code",null,"box")),Object(a.b)("dd",null,"A string indicating how to place this component on the page."),Object(a.b)("dt",null,Object(a.b)("code",null,"item_view")),Object(a.b)("dd",null,"EXPERIMENTAL. DO NOT USE."),Object(a.b)("dt",null,Object(a.b)("code",null,"item_props")),Object(a.b)("dd",null,"The child card properties."),Object(a.b)("dt",null,Object(a.b)("code",null,"data")),Object(a.b)("dd",null,"Data for this card."),Object(a.b)("dt",null,Object(a.b)("code",null,"commands")),Object(a.b)("dd",null,"Contextual menu commands for this component.")),Object(a.b)("h5",{id:"returns"},"Returns"),Object(a.b)("p",null,"A ",Object(a.b)("code",null,Object(a.b)("a",{title:"h2o_wave.types.RepeatCard",href:"types#h2o_wave.types.RepeatCard"},"RepeatCard"))," instance.")))),Object(a.b)("div",{className:"api"},Object(a.b)("h3",{id:"separator"},"separator ",Object(a.b)("a",{name:"h2o_wave.ui.separator"})),Object(a.b)("div",{className:"api__body"},Object(a.b)("div",{className:"api__signature"},"def ",Object(a.b)("span",{class:"ident"},"separator"),"(label:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, name:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, visible:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None) \u2011>\xa0",Object(a.b)("a",{title:"h2o_wave.types.Component",href:"types#h2o_wave.types.Component"},"Component")),Object(a.b)("div",{className:"api__description"},Object(a.b)("p",null,"Create a separator."),Object(a.b)("p",null,"A separator visually separates content into groups."),Object(a.b)("h5",{id:"args"},"Args"),Object(a.b)("dl",null,Object(a.b)("dt",null,Object(a.b)("code",null,"label")),Object(a.b)("dd",null,"The text displayed on the separator."),Object(a.b)("dt",null,Object(a.b)("code",null,"name")),Object(a.b)("dd",null,"An identifying name for this component."),Object(a.b)("dt",null,Object(a.b)("code",null,"visible")),Object(a.b)("dd",null,"True if the component should be visible. Defaults to true.")),Object(a.b)("h5",{id:"returns"},"Returns"),Object(a.b)("p",null,"A ",Object(a.b)("code",null,Object(a.b)("a",{title:"h2o_wave.types.Separator",href:"types#h2o_wave.types.Separator"},"Separator"))," instance.")))),Object(a.b)("div",{className:"api"},Object(a.b)("h3",{id:"slider"},"slider ",Object(a.b)("a",{name:"h2o_wave.ui.slider"})),Object(a.b)("div",{className:"api__body"},Object(a.b)("div",{className:"api__signature"},"def ",Object(a.b)("span",{class:"ident"},"slider"),"(name:\xa0str, label:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, min:\xa0Union[float,\xa0NoneType]\xa0=\xa0None, max:\xa0Union[float,\xa0NoneType]\xa0=\xa0None, step:\xa0Union[float,\xa0NoneType]\xa0=\xa0None, value:\xa0Union[float,\xa0NoneType]\xa0=\xa0None, disabled:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, trigger:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, visible:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, tooltip:\xa0Union[str,\xa0NoneType]\xa0=\xa0None) \u2011>\xa0",Object(a.b)("a",{title:"h2o_wave.types.Component",href:"types#h2o_wave.types.Component"},"Component")),Object(a.b)("div",{className:"api__description"},Object(a.b)("p",null,"Create a slider."),Object(a.b)("p",null,"A slider is an element used to set a value. It provides a visual indication of adjustable content, as well as the current setting in the total range of content. It is displayed as a horizontal track with options on either side. A knob or lever is dragged to one end or the other to make the choice, indicating the current value. Marks on the slider bar can show values and users can choose where they want to drag the knob or lever to set the value."),Object(a.b)("p",null,"A slider is a good choice when you know that users think of the value as a relative quantity, not a numeric value. For example, users think about setting their audio volume to low or medium \u2014 not about setting the value to two or five."),Object(a.b)("p",null,"The default value of the slider will be zero or be constrained to the min and max values. The min will be returned if the value is set under the min and the max will be returned if set higher than the max value."),Object(a.b)("h5",{id:"args"},"Args"),Object(a.b)("dl",null,Object(a.b)("dt",null,Object(a.b)("code",null,"name")),Object(a.b)("dd",null,"An identifying name for this component."),Object(a.b)("dt",null,Object(a.b)("code",null,"label")),Object(a.b)("dd",null,"Text to be displayed alongside the component."),Object(a.b)("dt",null,Object(a.b)("code",null,"min")),Object(a.b)("dd",null,"The minimum value of the slider."),Object(a.b)("dt",null,Object(a.b)("code",null,"max")),Object(a.b)("dd",null,"The maximum value of the slider."),Object(a.b)("dt",null,Object(a.b)("code",null,"step")),Object(a.b)("dd",null,"The difference between two adjacent values of the slider."),Object(a.b)("dt",null,Object(a.b)("code",null,"value")),Object(a.b)("dd",null,"The current value of the slider."),Object(a.b)("dt",null,Object(a.b)("code",null,"disabled")),Object(a.b)("dd",null,"True if this field is disabled."),Object(a.b)("dt",null,Object(a.b)("code",null,"trigger")),Object(a.b)("dd",null,"True if the form should be submitted when the slider value changes."),Object(a.b)("dt",null,Object(a.b)("code",null,"visible")),Object(a.b)("dd",null,"True if the component should be visible. Defaults to true."),Object(a.b)("dt",null,Object(a.b)("code",null,"tooltip")),Object(a.b)("dd",null,"An optional tooltip message displayed when a user clicks the help icon to the right of the component.")),Object(a.b)("h5",{id:"returns"},"Returns"),Object(a.b)("p",null,"A ",Object(a.b)("code",null,Object(a.b)("a",{title:"h2o_wave.types.Slider",href:"types#h2o_wave.types.Slider"},"Slider"))," instance.")))),Object(a.b)("div",{className:"api"},Object(a.b)("h3",{id:"small_series_stat_card"},"small_series_stat_card ",Object(a.b)("a",{name:"h2o_wave.ui.small_series_stat_card"})),Object(a.b)("div",{className:"api__body"},Object(a.b)("div",{className:"api__signature"},"def ",Object(a.b)("span",{class:"ident"},"small_series_stat_card"),"(box:\xa0str, title:\xa0str, value:\xa0str, plot_data:\xa0Union[",Object(a.b)("a",{title:"h2o_wave.core.Data",href:"core#h2o_wave.core.Data"},"Data"),",\xa0str], plot_value:\xa0str, plot_zero_value:\xa0Union[float,\xa0NoneType]\xa0=\xa0None, plot_category:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, plot_type:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, plot_curve:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, plot_color:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, data:\xa0Union[dict,\xa0str,\xa0NoneType]\xa0=\xa0None, commands:\xa0Union[List[",Object(a.b)("a",{title:"h2o_wave.types.Command",href:"types#h2o_wave.types.Command"},"Command"),"],\xa0NoneType]\xa0=\xa0None) \u2011>\xa0",Object(a.b)("a",{title:"h2o_wave.types.SmallSeriesStatCard",href:"types#h2o_wave.types.SmallSeriesStatCard"},"SmallSeriesStatCard")),Object(a.b)("div",{className:"api__description"},Object(a.b)("p",null,"Create a small stat card displaying a primary value and a series plot."),Object(a.b)("h5",{id:"args"},"Args"),Object(a.b)("dl",null,Object(a.b)("dt",null,Object(a.b)("code",null,"box")),Object(a.b)("dd",null,"A string indicating how to place this component on the page."),Object(a.b)("dt",null,Object(a.b)("code",null,"title")),Object(a.b)("dd",null,"The card's title."),Object(a.b)("dt",null,Object(a.b)("code",null,"value")),Object(a.b)("dd",null,"The primary value displayed."),Object(a.b)("dt",null,Object(a.b)("code",null,"plot_data")),Object(a.b)("dd",null,"The plot's data."),Object(a.b)("dt",null,Object(a.b)("code",null,"plot_value")),Object(a.b)("dd",null,"The data field to use for y-axis values."),Object(a.b)("dt",null,Object(a.b)("code",null,"plot_zero_value")),Object(a.b)("dd",null,"The base value to use for each y-axis mark. Set this to ",Object(a.b)("code",null,"0")," if you want to pin the x-axis at ",Object(a.b)("code",null,"y=0"),". If not provided, the minimum value from the data is used."),Object(a.b)("dt",null,Object(a.b)("code",null,"plot_category")),Object(a.b)("dd",null,"The data field to use for x-axis values (ignored if ",Object(a.b)("code",null,"plot_type")," is ",Object(a.b)("code",null,"area"),"; must be provided if ",Object(a.b)("code",null,"plot_type")," is ",Object(a.b)("code",null,"interval"),"). Defaults to 'x'."),Object(a.b)("dt",null,Object(a.b)("code",null,"plot_type")),Object(a.b)("dd",null,"The type of plot. Defaults to ",Object(a.b)("code",null,"area"),". One of 'area', 'interval'."),Object(a.b)("dt",null,Object(a.b)("code",null,"plot_curve")),Object(a.b)("dd",null,"The plot's curve style. Defaults to ",Object(a.b)("code",null,"linear"),". One of 'linear', 'smooth', 'step', 'step-after', 'step-before'."),Object(a.b)("dt",null,Object(a.b)("code",null,"plot_color")),Object(a.b)("dd",null,"The plot's color."),Object(a.b)("dt",null,Object(a.b)("code",null,"data")),Object(a.b)("dd",null,"Data for this card."),Object(a.b)("dt",null,Object(a.b)("code",null,"commands")),Object(a.b)("dd",null,"Contextual menu commands for this component.")),Object(a.b)("h5",{id:"returns"},"Returns"),Object(a.b)("p",null,"A ",Object(a.b)("code",null,Object(a.b)("a",{title:"h2o_wave.types.SmallSeriesStatCard",href:"types#h2o_wave.types.SmallSeriesStatCard"},"SmallSeriesStatCard"))," instance.")))),Object(a.b)("div",{className:"api"},Object(a.b)("h3",{id:"small_stat_card"},"small_stat_card ",Object(a.b)("a",{name:"h2o_wave.ui.small_stat_card"})),Object(a.b)("div",{className:"api__body"},Object(a.b)("div",{className:"api__signature"},"def ",Object(a.b)("span",{class:"ident"},"small_stat_card"),"(box:\xa0str, title:\xa0str, value:\xa0str, data:\xa0Union[dict,\xa0str,\xa0NoneType]\xa0=\xa0None, commands:\xa0Union[List[",Object(a.b)("a",{title:"h2o_wave.types.Command",href:"types#h2o_wave.types.Command"},"Command"),"],\xa0NoneType]\xa0=\xa0None) \u2011>\xa0",Object(a.b)("a",{title:"h2o_wave.types.SmallStatCard",href:"types#h2o_wave.types.SmallStatCard"},"SmallStatCard")),Object(a.b)("div",{className:"api__description"},Object(a.b)("p",null,"Create a stat card displaying a single value."),Object(a.b)("h5",{id:"args"},"Args"),Object(a.b)("dl",null,Object(a.b)("dt",null,Object(a.b)("code",null,"box")),Object(a.b)("dd",null,"A string indicating how to place this component on the page."),Object(a.b)("dt",null,Object(a.b)("code",null,"title")),Object(a.b)("dd",null,"The card's title."),Object(a.b)("dt",null,Object(a.b)("code",null,"value")),Object(a.b)("dd",null,"The primary value displayed."),Object(a.b)("dt",null,Object(a.b)("code",null,"data")),Object(a.b)("dd",null,"Data for this card."),Object(a.b)("dt",null,Object(a.b)("code",null,"commands")),Object(a.b)("dd",null,"Contextual menu commands for this component.")),Object(a.b)("h5",{id:"returns"},"Returns"),Object(a.b)("p",null,"A ",Object(a.b)("code",null,Object(a.b)("a",{title:"h2o_wave.types.SmallStatCard",href:"types#h2o_wave.types.SmallStatCard"},"SmallStatCard"))," instance.")))),Object(a.b)("div",{className:"api"},Object(a.b)("h3",{id:"spinbox"},"spinbox ",Object(a.b)("a",{name:"h2o_wave.ui.spinbox"})),Object(a.b)("div",{className:"api__body"},Object(a.b)("div",{className:"api__signature"},"def ",Object(a.b)("span",{class:"ident"},"spinbox"),"(name:\xa0str, label:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, min:\xa0Union[float,\xa0NoneType]\xa0=\xa0None, max:\xa0Union[float,\xa0NoneType]\xa0=\xa0None, step:\xa0Union[float,\xa0NoneType]\xa0=\xa0None, value:\xa0Union[float,\xa0NoneType]\xa0=\xa0None, disabled:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, visible:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, tooltip:\xa0Union[str,\xa0NoneType]\xa0=\xa0None) \u2011>\xa0",Object(a.b)("a",{title:"h2o_wave.types.Component",href:"types#h2o_wave.types.Component"},"Component")),Object(a.b)("div",{className:"api__description"},Object(a.b)("p",null,"Create a spinbox."),Object(a.b)("p",null,"A spinbox allows the user to incrementally adjust a value in small steps. It is mainly used for numeric values, but other values are supported too."),Object(a.b)("h5",{id:"args"},"Args"),Object(a.b)("dl",null,Object(a.b)("dt",null,Object(a.b)("code",null,"name")),Object(a.b)("dd",null,"An identifying name for this component."),Object(a.b)("dt",null,Object(a.b)("code",null,"label")),Object(a.b)("dd",null,"Text to be displayed alongside the component."),Object(a.b)("dt",null,Object(a.b)("code",null,"min")),Object(a.b)("dd",null,"The minimum value of the spinbox."),Object(a.b)("dt",null,Object(a.b)("code",null,"max")),Object(a.b)("dd",null,"The maximum value of the spinbox."),Object(a.b)("dt",null,Object(a.b)("code",null,"step")),Object(a.b)("dd",null,"The difference between two adjacent values of the spinbox."),Object(a.b)("dt",null,Object(a.b)("code",null,"value")),Object(a.b)("dd",null,"The current value of the spinbox."),Object(a.b)("dt",null,Object(a.b)("code",null,"disabled")),Object(a.b)("dd",null,"True if this field is disabled."),Object(a.b)("dt",null,Object(a.b)("code",null,"visible")),Object(a.b)("dd",null,"True if the component should be visible. Defaults to true."),Object(a.b)("dt",null,Object(a.b)("code",null,"tooltip")),Object(a.b)("dd",null,"An optional tooltip message displayed when a user clicks the help icon to the right of the component.")),Object(a.b)("h5",{id:"returns"},"Returns"),Object(a.b)("p",null,"A ",Object(a.b)("code",null,Object(a.b)("a",{title:"h2o_wave.types.Spinbox",href:"types#h2o_wave.types.Spinbox"},"Spinbox"))," instance.")))),Object(a.b)("div",{className:"api"},Object(a.b)("h3",{id:"step"},"step ",Object(a.b)("a",{name:"h2o_wave.ui.step"})),Object(a.b)("div",{className:"api__body"},Object(a.b)("div",{className:"api__signature"},"def ",Object(a.b)("span",{class:"ident"},"step"),"(label:\xa0str, icon:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, done:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None) \u2011>\xa0",Object(a.b)("a",{title:"h2o_wave.types.Step",href:"types#h2o_wave.types.Step"},"Step")),Object(a.b)("div",{className:"api__description"},Object(a.b)("p",null,"Create a step for a stepper."),Object(a.b)("h5",{id:"args"},"Args"),Object(a.b)("dl",null,Object(a.b)("dt",null,Object(a.b)("code",null,"label")),Object(a.b)("dd",null,"Text displayed below icon."),Object(a.b)("dt",null,Object(a.b)("code",null,"icon")),Object(a.b)("dd",null,"Icon to be displayed."),Object(a.b)("dt",null,Object(a.b)("code",null,"done")),Object(a.b)("dd",null,"Indicates whether this step has already been completed.")),Object(a.b)("h5",{id:"returns"},"Returns"),Object(a.b)("p",null,"A ",Object(a.b)("code",null,Object(a.b)("a",{title:"h2o_wave.types.Step",href:"types#h2o_wave.types.Step"},"Step"))," instance.")))),Object(a.b)("div",{className:"api"},Object(a.b)("h3",{id:"stepper"},"stepper ",Object(a.b)("a",{name:"h2o_wave.ui.stepper"})),Object(a.b)("div",{className:"api__body"},Object(a.b)("div",{className:"api__signature"},"def ",Object(a.b)("span",{class:"ident"},"stepper"),"(name:\xa0str, items:\xa0List[",Object(a.b)("a",{title:"h2o_wave.types.Step",href:"types#h2o_wave.types.Step"},"Step"),"], visible:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, tooltip:\xa0Union[str,\xa0NoneType]\xa0=\xa0None) \u2011>\xa0",Object(a.b)("a",{title:"h2o_wave.types.Component",href:"types#h2o_wave.types.Component"},"Component")),Object(a.b)("div",{className:"api__description"},Object(a.b)("p",null,"Create a component that displays a sequence of steps in a process. The steps keep users informed about where they are in the process and how much is left to complete."),Object(a.b)("h5",{id:"args"},"Args"),Object(a.b)("dl",null,Object(a.b)("dt",null,Object(a.b)("code",null,"name")),Object(a.b)("dd",null,"An identifying name for this component."),Object(a.b)("dt",null,Object(a.b)("code",null,"items")),Object(a.b)("dd",null,"The sequence of steps to be displayed."),Object(a.b)("dt",null,Object(a.b)("code",null,"visible")),Object(a.b)("dd",null,"True if the component should be visible. Defaults to true."),Object(a.b)("dt",null,Object(a.b)("code",null,"tooltip")),Object(a.b)("dd",null,"An optional tooltip message displayed when a user clicks the help icon to the right of the component.")),Object(a.b)("h5",{id:"returns"},"Returns"),Object(a.b)("p",null,"A ",Object(a.b)("code",null,Object(a.b)("a",{title:"h2o_wave.types.Stepper",href:"types#h2o_wave.types.Stepper"},"Stepper"))," instance.")))),Object(a.b)("div",{className:"api"},Object(a.b)("h3",{id:"tab"},"tab ",Object(a.b)("a",{name:"h2o_wave.ui.tab"})),Object(a.b)("div",{className:"api__body"},Object(a.b)("div",{className:"api__signature"},"def ",Object(a.b)("span",{class:"ident"},"tab"),"(name:\xa0str, label:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, icon:\xa0Union[str,\xa0NoneType]\xa0=\xa0None) \u2011>\xa0",Object(a.b)("a",{title:"h2o_wave.types.Tab",href:"types#h2o_wave.types.Tab"},"Tab")),Object(a.b)("div",{className:"api__description"},Object(a.b)("p",null,"Create a tab."),Object(a.b)("h5",{id:"args"},"Args"),Object(a.b)("dl",null,Object(a.b)("dt",null,Object(a.b)("code",null,"name")),Object(a.b)("dd",null,"An identifying name for this component."),Object(a.b)("dt",null,Object(a.b)("code",null,"label")),Object(a.b)("dd",null,"The text displayed on the tab."),Object(a.b)("dt",null,Object(a.b)("code",null,"icon")),Object(a.b)("dd",null,"The icon displayed on the tab.")),Object(a.b)("h5",{id:"returns"},"Returns"),Object(a.b)("p",null,"A ",Object(a.b)("code",null,Object(a.b)("a",{title:"h2o_wave.types.Tab",href:"types#h2o_wave.types.Tab"},"Tab"))," instance.")))),Object(a.b)("div",{className:"api"},Object(a.b)("h3",{id:"tab_card"},"tab_card ",Object(a.b)("a",{name:"h2o_wave.ui.tab_card"})),Object(a.b)("div",{className:"api__body"},Object(a.b)("div",{className:"api__signature"},"def ",Object(a.b)("span",{class:"ident"},"tab_card"),"(box:\xa0str, items:\xa0List[",Object(a.b)("a",{title:"h2o_wave.types.Tab",href:"types#h2o_wave.types.Tab"},"Tab"),"], value:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, link:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, commands:\xa0Union[List[",Object(a.b)("a",{title:"h2o_wave.types.Command",href:"types#h2o_wave.types.Command"},"Command"),"],\xa0NoneType]\xa0=\xa0None) \u2011>\xa0",Object(a.b)("a",{title:"h2o_wave.types.TabCard",href:"types#h2o_wave.types.TabCard"},"TabCard")),Object(a.b)("div",{className:"api__description"},Object(a.b)("p",null,"Create a card containing tabs for navigation."),Object(a.b)("h5",{id:"args"},"Args"),Object(a.b)("dl",null,Object(a.b)("dt",null,Object(a.b)("code",null,"box")),Object(a.b)("dd",null,"A string indicating how to place this component on the page."),Object(a.b)("dt",null,Object(a.b)("code",null,"items")),Object(a.b)("dd",null,"Items to render."),Object(a.b)("dt",null,Object(a.b)("code",null,"value")),Object(a.b)("dd",null,"The name of the tab to select."),Object(a.b)("dt",null,Object(a.b)("code",null,"link")),Object(a.b)("dd",null,"True if tabs should be rendered as links and not a standard tab."),Object(a.b)("dt",null,Object(a.b)("code",null,"commands")),Object(a.b)("dd",null,"Contextual menu commands for this component.")),Object(a.b)("h5",{id:"returns"},"Returns"),Object(a.b)("p",null,"A ",Object(a.b)("code",null,Object(a.b)("a",{title:"h2o_wave.types.TabCard",href:"types#h2o_wave.types.TabCard"},"TabCard"))," instance.")))),Object(a.b)("div",{className:"api"},Object(a.b)("h3",{id:"table"},"table ",Object(a.b)("a",{name:"h2o_wave.ui.table"})),Object(a.b)("div",{className:"api__body"},Object(a.b)("div",{className:"api__signature"},"def ",Object(a.b)("span",{class:"ident"},"table"),"(name:\xa0str, columns:\xa0List[",Object(a.b)("a",{title:"h2o_wave.types.TableColumn",href:"types#h2o_wave.types.TableColumn"},"TableColumn"),"], rows:\xa0List[",Object(a.b)("a",{title:"h2o_wave.types.TableRow",href:"types#h2o_wave.types.TableRow"},"TableRow"),"], multiple:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, groupable:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, downloadable:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, resettable:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, height:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, values:\xa0Union[List[str],\xa0NoneType]\xa0=\xa0None, visible:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, tooltip:\xa0Union[str,\xa0NoneType]\xa0=\xa0None) \u2011>\xa0",Object(a.b)("a",{title:"h2o_wave.types.Component",href:"types#h2o_wave.types.Component"},"Component")),Object(a.b)("div",{className:"api__description"},Object(a.b)("p",null,"Create an interactive table."),Object(a.b)("p",null,"This table differs from a markdown table in that it supports clicking or selecting rows. If you simply want to display a non-interactive table of information, use a markdown table."),Object(a.b)("p",null,"If ",Object(a.b)("code",null,"multiple")," is set to False (default), each row in the table is clickable. When a row is clicked, the form is submitted automatically, and ",Object(a.b)("code",null,"q.args.table_name")," is set to ",Object(a.b)("code",null,"[row_name]"),", where ",Object(a.b)("code",null,"table_name")," is the ",Object(a.b)("code",null,"name")," of the table, and ",Object(a.b)("code",null,"row_name")," is the ",Object(a.b)("code",null,"name")," of the row that was clicked on."),Object(a.b)("p",null,"If ",Object(a.b)("code",null,"multiple")," is set to True, each row in the table is selectable. A row can be selected by clicking on it. Multiple rows can be selected either by shift+clicking or using marquee selection. When the form is submitted,",Object(a.b)("code",null,"q.args.table_name")," is set to ",Object(a.b)("code",null,"[row1_name, row2_name, \u2026]")," where ",Object(a.b)("code",null,"table_name")," is the ",Object(a.b)("code",null,"name")," of the table, and ",Object(a.b)("code",null,"row1_name"),", ",Object(a.b)("code",null,"row2_name")," are the ",Object(a.b)("code",null,"name")," of the rows that were selected. Note that if ",Object(a.b)("code",null,"multiple")," is set to True, the form is not submitted automatically, and one or more buttons are required in the form to trigger submission."),Object(a.b)("h5",{id:"args"},"Args"),Object(a.b)("dl",null,Object(a.b)("dt",null,Object(a.b)("code",null,"name")),Object(a.b)("dd",null,"An identifying name for this component."),Object(a.b)("dt",null,Object(a.b)("code",null,"columns")),Object(a.b)("dd",null,"The columns in this table."),Object(a.b)("dt",null,Object(a.b)("code",null,"rows")),Object(a.b)("dd",null,"The rows in this table."),Object(a.b)("dt",null,Object(a.b)("code",null,"multiple")),Object(a.b)("dd",null,"True to allow multiple rows to be selected."),Object(a.b)("dt",null,Object(a.b)("code",null,"groupable")),Object(a.b)("dd",null,"True to allow group by feature."),Object(a.b)("dt",null,Object(a.b)("code",null,"downloadable")),Object(a.b)("dd",null,"Indicates whether the contents of this table can be downloaded and saved as a CSV file. Defaults to False."),Object(a.b)("dt",null,Object(a.b)("code",null,"resettable")),Object(a.b)("dd",null,"Indicates whether a Reset button should be displayed to reset search / filter / group-by values to their defaults. Defaults to False."),Object(a.b)("dt",null,Object(a.b)("code",null,"height")),Object(a.b)("dd",null,"The height of the table, e.g. '400px', '50%', etc."),Object(a.b)("dt",null,Object(a.b)("code",null,"values")),Object(a.b)("dd",null,"The names of the selected rows. If this parameter is set, multiple selections will be allowed (",Object(a.b)("code",null,"multiple")," is assumed to be ",Object(a.b)("code",null,"True"),")."),Object(a.b)("dt",null,Object(a.b)("code",null,"visible")),Object(a.b)("dd",null,"True if the component should be visible. Defaults to true."),Object(a.b)("dt",null,Object(a.b)("code",null,"tooltip")),Object(a.b)("dd",null,"An optional tooltip message displayed when a user clicks the help icon to the right of the component.")),Object(a.b)("h5",{id:"returns"},"Returns"),Object(a.b)("p",null,"A ",Object(a.b)("code",null,Object(a.b)("a",{title:"h2o_wave.types.Table",href:"types#h2o_wave.types.Table"},"Table"))," instance.")))),Object(a.b)("div",{className:"api"},Object(a.b)("h3",{id:"table_cell_type"},"table_cell_type ",Object(a.b)("a",{name:"h2o_wave.ui.table_cell_type"})),Object(a.b)("div",{className:"api__body"},Object(a.b)("div",{className:"api__signature"},"def ",Object(a.b)("span",{class:"ident"},"table_cell_type"),"(progress:\xa0Union[",Object(a.b)("a",{title:"h2o_wave.types.ProgressTableCellType",href:"types#h2o_wave.types.ProgressTableCellType"},"ProgressTableCellType"),",\xa0NoneType]\xa0=\xa0None, icon:\xa0Union[",Object(a.b)("a",{title:"h2o_wave.types.IconTableCellType",href:"types#h2o_wave.types.IconTableCellType"},"IconTableCellType"),",\xa0NoneType]\xa0=\xa0None) \u2011>\xa0",Object(a.b)("a",{title:"h2o_wave.types.TableCellType",href:"types#h2o_wave.types.TableCellType"},"TableCellType")),Object(a.b)("div",{className:"api__description"},Object(a.b)("p",null,"Defines cell content to be rendered instead of a simple text."),Object(a.b)("h5",{id:"args"},"Args"),Object(a.b)("dl",null,Object(a.b)("dt",null,Object(a.b)("code",null,"progress")),Object(a.b)("dd",null,"No documentation available."),Object(a.b)("dt",null,Object(a.b)("code",null,"icon")),Object(a.b)("dd",null,"No documentation available.")),Object(a.b)("h5",{id:"returns"},"Returns"),Object(a.b)("p",null,"A ",Object(a.b)("code",null,Object(a.b)("a",{title:"h2o_wave.types.TableCellType",href:"types#h2o_wave.types.TableCellType"},"TableCellType"))," instance.")))),Object(a.b)("div",{className:"api"},Object(a.b)("h3",{id:"table_column"},"table_column ",Object(a.b)("a",{name:"h2o_wave.ui.table_column"})),Object(a.b)("div",{className:"api__body"},Object(a.b)("div",{className:"api__signature"},"def ",Object(a.b)("span",{class:"ident"},"table_column"),"(name:\xa0str, label:\xa0str, min_width:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, max_width:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, sortable:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, searchable:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, filterable:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, link:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, cell_type:\xa0Union[",Object(a.b)("a",{title:"h2o_wave.types.TableCellType",href:"types#h2o_wave.types.TableCellType"},"TableCellType"),",\xa0NoneType]\xa0=\xa0None) \u2011>\xa0",Object(a.b)("a",{title:"h2o_wave.types.TableColumn",href:"types#h2o_wave.types.TableColumn"},"TableColumn")),Object(a.b)("div",{className:"api__description"},Object(a.b)("p",null,"Create a table column."),Object(a.b)("h5",{id:"args"},"Args"),Object(a.b)("dl",null,Object(a.b)("dt",null,Object(a.b)("code",null,"name")),Object(a.b)("dd",null,"An identifying name for this column."),Object(a.b)("dt",null,Object(a.b)("code",null,"label")),Object(a.b)("dd",null,"The text displayed on the column header."),Object(a.b)("dt",null,Object(a.b)("code",null,"min_width")),Object(a.b)("dd",null,"The minimum width of this column, e.g. '50px'. Only ",Object(a.b)("code",null,"px")," units are supported at this time."),Object(a.b)("dt",null,Object(a.b)("code",null,"max_width")),Object(a.b)("dd",null,"The maximum width of this column, e.g. '100px'. Only ",Object(a.b)("code",null,"px")," units are supported at this time."),Object(a.b)("dt",null,Object(a.b)("code",null,"sortable")),Object(a.b)("dd",null,"Indicates whether the column is sortable."),Object(a.b)("dt",null,Object(a.b)("code",null,"searchable")),Object(a.b)("dd",null,"Indicates whether the contents of this column can be searched through. Enables a search box for the table if true."),Object(a.b)("dt",null,Object(a.b)("code",null,"filterable")),Object(a.b)("dd",null,"Indicates whether the contents of this column are displayed as filters in a dropdown."),Object(a.b)("dt",null,Object(a.b)("code",null,"link")),Object(a.b)("dd",null,"Indicates whether each cell in this column should be displayed as a clickable link."),Object(a.b)("dt",null,Object(a.b)("code",null,"cell_type")),Object(a.b)("dd",null,"Defines how to render each cell in this column. Defaults to plain text.")),Object(a.b)("h5",{id:"returns"},"Returns"),Object(a.b)("p",null,"A ",Object(a.b)("code",null,Object(a.b)("a",{title:"h2o_wave.types.TableColumn",href:"types#h2o_wave.types.TableColumn"},"TableColumn"))," instance.")))),Object(a.b)("div",{className:"api"},Object(a.b)("h3",{id:"table_row"},"table_row ",Object(a.b)("a",{name:"h2o_wave.ui.table_row"})),Object(a.b)("div",{className:"api__body"},Object(a.b)("div",{className:"api__signature"},"def ",Object(a.b)("span",{class:"ident"},"table_row"),"(name:\xa0str, cells:\xa0List[str]) \u2011>\xa0",Object(a.b)("a",{title:"h2o_wave.types.TableRow",href:"types#h2o_wave.types.TableRow"},"TableRow")),Object(a.b)("div",{className:"api__description"},Object(a.b)("p",null,"Create a table row."),Object(a.b)("h5",{id:"args"},"Args"),Object(a.b)("dl",null,Object(a.b)("dt",null,Object(a.b)("code",null,"name")),Object(a.b)("dd",null,"An identifying name for this row."),Object(a.b)("dt",null,Object(a.b)("code",null,"cells")),Object(a.b)("dd",null,"The cells in this row (displayed left to right).")),Object(a.b)("h5",{id:"returns"},"Returns"),Object(a.b)("p",null,"A ",Object(a.b)("code",null,Object(a.b)("a",{title:"h2o_wave.types.TableRow",href:"types#h2o_wave.types.TableRow"},"TableRow"))," instance.")))),Object(a.b)("div",{className:"api"},Object(a.b)("h3",{id:"tabs"},"tabs ",Object(a.b)("a",{name:"h2o_wave.ui.tabs"})),Object(a.b)("div",{className:"api__body"},Object(a.b)("div",{className:"api__signature"},"def ",Object(a.b)("span",{class:"ident"},"tabs"),"(name:\xa0str, value:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, items:\xa0Union[List[",Object(a.b)("a",{title:"h2o_wave.types.Tab",href:"types#h2o_wave.types.Tab"},"Tab"),"],\xa0NoneType]\xa0=\xa0None, visible:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None) \u2011>\xa0",Object(a.b)("a",{title:"h2o_wave.types.Component",href:"types#h2o_wave.types.Component"},"Component")),Object(a.b)("div",{className:"api__description"},Object(a.b)("p",null,"Create a tab bar."),Object(a.b)("h5",{id:"args"},"Args"),Object(a.b)("dl",null,Object(a.b)("dt",null,Object(a.b)("code",null,"name")),Object(a.b)("dd",null,"An identifying name for this component."),Object(a.b)("dt",null,Object(a.b)("code",null,"value")),Object(a.b)("dd",null,"The name of the tab to select."),Object(a.b)("dt",null,Object(a.b)("code",null,"items")),Object(a.b)("dd",null,"The tabs in this tab bar."),Object(a.b)("dt",null,Object(a.b)("code",null,"visible")),Object(a.b)("dd",null,"True if the component should be visible. Defaults to true.")),Object(a.b)("h5",{id:"returns"},"Returns"),Object(a.b)("p",null,"A ",Object(a.b)("code",null,Object(a.b)("a",{title:"h2o_wave.types.Tabs",href:"types#h2o_wave.types.Tabs"},"Tabs"))," instance.")))),Object(a.b)("div",{className:"api"},Object(a.b)("h3",{id:"tall_gauge_stat_card"},"tall_gauge_stat_card ",Object(a.b)("a",{name:"h2o_wave.ui.tall_gauge_stat_card"})),Object(a.b)("div",{className:"api__body"},Object(a.b)("div",{className:"api__signature"},"def ",Object(a.b)("span",{class:"ident"},"tall_gauge_stat_card"),"(box:\xa0str, title:\xa0str, value:\xa0str, aux_value:\xa0str, progress:\xa0float, plot_color:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, data:\xa0Union[dict,\xa0str,\xa0NoneType]\xa0=\xa0None, commands:\xa0Union[List[",Object(a.b)("a",{title:"h2o_wave.types.Command",href:"types#h2o_wave.types.Command"},"Command"),"],\xa0NoneType]\xa0=\xa0None) \u2011>\xa0",Object(a.b)("a",{title:"h2o_wave.types.TallGaugeStatCard",href:"types#h2o_wave.types.TallGaugeStatCard"},"TallGaugeStatCard")),Object(a.b)("div",{className:"api__description"},Object(a.b)("p",null,"Create a tall stat card displaying a primary value, an auxiliary value and a progress gauge."),Object(a.b)("h5",{id:"args"},"Args"),Object(a.b)("dl",null,Object(a.b)("dt",null,Object(a.b)("code",null,"box")),Object(a.b)("dd",null,"A string indicating how to place this component on the page."),Object(a.b)("dt",null,Object(a.b)("code",null,"title")),Object(a.b)("dd",null,"The card's title."),Object(a.b)("dt",null,Object(a.b)("code",null,"value")),Object(a.b)("dd",null,"The primary value displayed."),Object(a.b)("dt",null,Object(a.b)("code",null,"aux_value")),Object(a.b)("dd",null,"The auxiliary value displayed next to the primary value."),Object(a.b)("dt",null,Object(a.b)("code",null,"progress")),Object(a.b)("dd",null,"The value of the progress gauge, between 0 and 1."),Object(a.b)("dt",null,Object(a.b)("code",null,"plot_color")),Object(a.b)("dd",null,"The color of the progress gauge."),Object(a.b)("dt",null,Object(a.b)("code",null,"data")),Object(a.b)("dd",null,"Data for this card."),Object(a.b)("dt",null,Object(a.b)("code",null,"commands")),Object(a.b)("dd",null,"Contextual menu commands for this component.")),Object(a.b)("h5",{id:"returns"},"Returns"),Object(a.b)("p",null,"A ",Object(a.b)("code",null,Object(a.b)("a",{title:"h2o_wave.types.TallGaugeStatCard",href:"types#h2o_wave.types.TallGaugeStatCard"},"TallGaugeStatCard"))," instance.")))),Object(a.b)("div",{className:"api"},Object(a.b)("h3",{id:"tall_series_stat_card"},"tall_series_stat_card ",Object(a.b)("a",{name:"h2o_wave.ui.tall_series_stat_card"})),Object(a.b)("div",{className:"api__body"},Object(a.b)("div",{className:"api__signature"},"def ",Object(a.b)("span",{class:"ident"},"tall_series_stat_card"),"(box:\xa0str, title:\xa0str, value:\xa0str, aux_value:\xa0str, plot_data:\xa0Union[",Object(a.b)("a",{title:"h2o_wave.core.Data",href:"core#h2o_wave.core.Data"},"Data"),",\xa0str], plot_value:\xa0str, plot_zero_value:\xa0Union[float,\xa0NoneType]\xa0=\xa0None, plot_category:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, plot_type:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, plot_curve:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, plot_color:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, data:\xa0Union[dict,\xa0str,\xa0NoneType]\xa0=\xa0None, commands:\xa0Union[List[",Object(a.b)("a",{title:"h2o_wave.types.Command",href:"types#h2o_wave.types.Command"},"Command"),"],\xa0NoneType]\xa0=\xa0None) \u2011>\xa0",Object(a.b)("a",{title:"h2o_wave.types.TallSeriesStatCard",href:"types#h2o_wave.types.TallSeriesStatCard"},"TallSeriesStatCard")),Object(a.b)("div",{className:"api__description"},Object(a.b)("p",null,"Create a tall stat card displaying a primary value, an auxiliary value and a series plot."),Object(a.b)("h5",{id:"args"},"Args"),Object(a.b)("dl",null,Object(a.b)("dt",null,Object(a.b)("code",null,"box")),Object(a.b)("dd",null,"A string indicating how to place this component on the page."),Object(a.b)("dt",null,Object(a.b)("code",null,"title")),Object(a.b)("dd",null,"The card's title."),Object(a.b)("dt",null,Object(a.b)("code",null,"value")),Object(a.b)("dd",null,"The primary value displayed."),Object(a.b)("dt",null,Object(a.b)("code",null,"aux_value")),Object(a.b)("dd",null,"The auxiliary value displayed below the primary value."),Object(a.b)("dt",null,Object(a.b)("code",null,"plot_data")),Object(a.b)("dd",null,"The plot's data."),Object(a.b)("dt",null,Object(a.b)("code",null,"plot_value")),Object(a.b)("dd",null,"The data field to use for y-axis values."),Object(a.b)("dt",null,Object(a.b)("code",null,"plot_zero_value")),Object(a.b)("dd",null,"The base value to use for each y-axis mark. Set this to ",Object(a.b)("code",null,"0")," if you want to pin the x-axis at ",Object(a.b)("code",null,"y=0"),". If not provided, the minimum value from the data is used."),Object(a.b)("dt",null,Object(a.b)("code",null,"plot_category")),Object(a.b)("dd",null,"The data field to use for x-axis values (ignored if ",Object(a.b)("code",null,"plot_type")," is ",Object(a.b)("code",null,"area"),"; must be provided if ",Object(a.b)("code",null,"plot_type")," is ",Object(a.b)("code",null,"interval"),"). Defaults to 'x'."),Object(a.b)("dt",null,Object(a.b)("code",null,"plot_type")),Object(a.b)("dd",null,"The type of plot. Defaults to ",Object(a.b)("code",null,"area"),". One of 'area', 'interval'."),Object(a.b)("dt",null,Object(a.b)("code",null,"plot_curve")),Object(a.b)("dd",null,"The plot's curve style. Defaults to ",Object(a.b)("code",null,"linear"),". One of 'linear', 'smooth', 'step', 'step-after', 'step-before'."),Object(a.b)("dt",null,Object(a.b)("code",null,"plot_color")),Object(a.b)("dd",null,"The plot's color."),Object(a.b)("dt",null,Object(a.b)("code",null,"data")),Object(a.b)("dd",null,"Data for this card."),Object(a.b)("dt",null,Object(a.b)("code",null,"commands")),Object(a.b)("dd",null,"Contextual menu commands for this component.")),Object(a.b)("h5",{id:"returns"},"Returns"),Object(a.b)("p",null,"A ",Object(a.b)("code",null,Object(a.b)("a",{title:"h2o_wave.types.TallSeriesStatCard",href:"types#h2o_wave.types.TallSeriesStatCard"},"TallSeriesStatCard"))," instance.")))),Object(a.b)("div",{className:"api"},Object(a.b)("h3",{id:"template"},"template ",Object(a.b)("a",{name:"h2o_wave.ui.template"})),Object(a.b)("div",{className:"api__body"},Object(a.b)("div",{className:"api__signature"},"def ",Object(a.b)("span",{class:"ident"},"template"),"(content:\xa0str, data:\xa0Union[dict,\xa0str,\xa0NoneType]\xa0=\xa0None, name:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, visible:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None) \u2011>\xa0",Object(a.b)("a",{title:"h2o_wave.types.Component",href:"types#h2o_wave.types.Component"},"Component")),Object(a.b)("div",{className:"api__description"},Object(a.b)("p",null,"Render dynamic content using an HTML template."),Object(a.b)("h5",{id:"args"},"Args"),Object(a.b)("dl",null,Object(a.b)("dt",null,Object(a.b)("code",null,"content")),Object(a.b)("dd",null,"The Handlebars template. ",Object(a.b)("a",{href:"https://handlebarsjs.com/guide/"},"https://handlebarsjs.com/guide/")),Object(a.b)("dt",null,Object(a.b)("code",null,"data")),Object(a.b)("dd",null,"Data for the Handlebars template"),Object(a.b)("dt",null,Object(a.b)("code",null,"name")),Object(a.b)("dd",null,"An identifying name for this component."),Object(a.b)("dt",null,Object(a.b)("code",null,"visible")),Object(a.b)("dd",null,"True if the component should be visible. Defaults to true.")),Object(a.b)("h5",{id:"returns"},"Returns"),Object(a.b)("p",null,"A ",Object(a.b)("code",null,Object(a.b)("a",{title:"h2o_wave.types.Template",href:"types#h2o_wave.types.Template"},"Template"))," instance.")))),Object(a.b)("div",{className:"api"},Object(a.b)("h3",{id:"template_card"},"template_card ",Object(a.b)("a",{name:"h2o_wave.ui.template_card"})),Object(a.b)("div",{className:"api__body"},Object(a.b)("div",{className:"api__signature"},"def ",Object(a.b)("span",{class:"ident"},"template_card"),"(box:\xa0str, title:\xa0str, content:\xa0str, data:\xa0Union[dict,\xa0str,\xa0NoneType]\xa0=\xa0None, commands:\xa0Union[List[",Object(a.b)("a",{title:"h2o_wave.types.Command",href:"types#h2o_wave.types.Command"},"Command"),"],\xa0NoneType]\xa0=\xa0None) \u2011>\xa0",Object(a.b)("a",{title:"h2o_wave.types.TemplateCard",href:"types#h2o_wave.types.TemplateCard"},"TemplateCard")),Object(a.b)("div",{className:"api__description"},Object(a.b)("p",null,"Render dynamic content using an HTML template."),Object(a.b)("h5",{id:"args"},"Args"),Object(a.b)("dl",null,Object(a.b)("dt",null,Object(a.b)("code",null,"box")),Object(a.b)("dd",null,"A string indicating how to place this component on the page."),Object(a.b)("dt",null,Object(a.b)("code",null,"title")),Object(a.b)("dd",null,"The title for this card."),Object(a.b)("dt",null,Object(a.b)("code",null,"content")),Object(a.b)("dd",null,"The Handlebars template. ",Object(a.b)("a",{href:"https://handlebarsjs.com/guide/"},"https://handlebarsjs.com/guide/")),Object(a.b)("dt",null,Object(a.b)("code",null,"data")),Object(a.b)("dd",null,"Data for the Handlebars template."),Object(a.b)("dt",null,Object(a.b)("code",null,"commands")),Object(a.b)("dd",null,"Contextual menu commands for this component.")),Object(a.b)("h5",{id:"returns"},"Returns"),Object(a.b)("p",null,"A ",Object(a.b)("code",null,Object(a.b)("a",{title:"h2o_wave.types.TemplateCard",href:"types#h2o_wave.types.TemplateCard"},"TemplateCard"))," instance.")))),Object(a.b)("div",{className:"api"},Object(a.b)("h3",{id:"text"},"text ",Object(a.b)("a",{name:"h2o_wave.ui.text"})),Object(a.b)("div",{className:"api__body"},Object(a.b)("div",{className:"api__signature"},"def ",Object(a.b)("span",{class:"ident"},"text"),"(content:\xa0str, size:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, visible:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, tooltip:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, name:\xa0Union[str,\xa0NoneType]\xa0=\xa0None) \u2011>\xa0",Object(a.b)("a",{title:"h2o_wave.types.Component",href:"types#h2o_wave.types.Component"},"Component")),Object(a.b)("div",{className:"api__description"},Object(a.b)("p",null,"Create text content."),Object(a.b)("h5",{id:"args"},"Args"),Object(a.b)("dl",null,Object(a.b)("dt",null,Object(a.b)("code",null,"content")),Object(a.b)("dd",null,"The text content."),Object(a.b)("dt",null,Object(a.b)("code",null,"size")),Object(a.b)("dd",null,"The font size of the text content. One of 'xl', 'l', 'm', 's', 'xs'."),Object(a.b)("dt",null,Object(a.b)("code",null,"visible")),Object(a.b)("dd",null,"True if the component should be visible. Defaults to true."),Object(a.b)("dt",null,Object(a.b)("code",null,"tooltip")),Object(a.b)("dd",null,"Tooltip message."),Object(a.b)("dt",null,Object(a.b)("code",null,"name")),Object(a.b)("dd",null,"An identifying name for this component.")),Object(a.b)("h5",{id:"returns"},"Returns"),Object(a.b)("p",null,"A ",Object(a.b)("code",null,Object(a.b)("a",{title:"h2o_wave.types.Text",href:"types#h2o_wave.types.Text"},"Text"))," instance.")))),Object(a.b)("div",{className:"api"},Object(a.b)("h3",{id:"text_l"},"text_l ",Object(a.b)("a",{name:"h2o_wave.ui.text_l"})),Object(a.b)("div",{className:"api__body"},Object(a.b)("div",{className:"api__signature"},"def ",Object(a.b)("span",{class:"ident"},"text_l"),"(content:\xa0str, visible:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, tooltip:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, commands:\xa0Union[List[",Object(a.b)("a",{title:"h2o_wave.types.Command",href:"types#h2o_wave.types.Command"},"Command"),"],\xa0NoneType]\xa0=\xa0None, name:\xa0Union[str,\xa0NoneType]\xa0=\xa0None) \u2011>\xa0",Object(a.b)("a",{title:"h2o_wave.types.Component",href:"types#h2o_wave.types.Component"},"Component")),Object(a.b)("div",{className:"api__description"},Object(a.b)("p",null,"Create large sized text content."),Object(a.b)("h5",{id:"args"},"Args"),Object(a.b)("dl",null,Object(a.b)("dt",null,Object(a.b)("code",null,"content")),Object(a.b)("dd",null,"The text content."),Object(a.b)("dt",null,Object(a.b)("code",null,"visible")),Object(a.b)("dd",null,"True if the component should be visible. Defaults to true."),Object(a.b)("dt",null,Object(a.b)("code",null,"tooltip")),Object(a.b)("dd",null,"Tooltip message."),Object(a.b)("dt",null,Object(a.b)("code",null,"commands")),Object(a.b)("dd",null,"Contextual menu commands for this component."),Object(a.b)("dt",null,Object(a.b)("code",null,"name")),Object(a.b)("dd",null,"An identifying name for this component.")),Object(a.b)("h5",{id:"returns"},"Returns"),Object(a.b)("p",null,"A ",Object(a.b)("code",null,Object(a.b)("a",{title:"h2o_wave.types.TextL",href:"types#h2o_wave.types.TextL"},"TextL"))," instance.")))),Object(a.b)("div",{className:"api"},Object(a.b)("h3",{id:"text_m"},"text_m ",Object(a.b)("a",{name:"h2o_wave.ui.text_m"})),Object(a.b)("div",{className:"api__body"},Object(a.b)("div",{className:"api__signature"},"def ",Object(a.b)("span",{class:"ident"},"text_m"),"(content:\xa0str, visible:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, tooltip:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, name:\xa0Union[str,\xa0NoneType]\xa0=\xa0None) \u2011>\xa0",Object(a.b)("a",{title:"h2o_wave.types.Component",href:"types#h2o_wave.types.Component"},"Component")),Object(a.b)("div",{className:"api__description"},Object(a.b)("p",null,"Create medium sized text content."),Object(a.b)("h5",{id:"args"},"Args"),Object(a.b)("dl",null,Object(a.b)("dt",null,Object(a.b)("code",null,"content")),Object(a.b)("dd",null,"The text content."),Object(a.b)("dt",null,Object(a.b)("code",null,"visible")),Object(a.b)("dd",null,"True if the component should be visible. Defaults to true."),Object(a.b)("dt",null,Object(a.b)("code",null,"tooltip")),Object(a.b)("dd",null,"Tooltip message."),Object(a.b)("dt",null,Object(a.b)("code",null,"name")),Object(a.b)("dd",null,"An identifying name for this component.")),Object(a.b)("h5",{id:"returns"},"Returns"),Object(a.b)("p",null,"A ",Object(a.b)("code",null,Object(a.b)("a",{title:"h2o_wave.types.TextM",href:"types#h2o_wave.types.TextM"},"TextM"))," instance.")))),Object(a.b)("div",{className:"api"},Object(a.b)("h3",{id:"text_s"},"text_s ",Object(a.b)("a",{name:"h2o_wave.ui.text_s"})),Object(a.b)("div",{className:"api__body"},Object(a.b)("div",{className:"api__signature"},"def ",Object(a.b)("span",{class:"ident"},"text_s"),"(content:\xa0str, visible:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, tooltip:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, name:\xa0Union[str,\xa0NoneType]\xa0=\xa0None) \u2011>\xa0",Object(a.b)("a",{title:"h2o_wave.types.Component",href:"types#h2o_wave.types.Component"},"Component")),Object(a.b)("div",{className:"api__description"},Object(a.b)("p",null,"Create small sized text content."),Object(a.b)("h5",{id:"args"},"Args"),Object(a.b)("dl",null,Object(a.b)("dt",null,Object(a.b)("code",null,"content")),Object(a.b)("dd",null,"The text content."),Object(a.b)("dt",null,Object(a.b)("code",null,"visible")),Object(a.b)("dd",null,"True if the component should be visible. Defaults to true."),Object(a.b)("dt",null,Object(a.b)("code",null,"tooltip")),Object(a.b)("dd",null,"Tooltip message."),Object(a.b)("dt",null,Object(a.b)("code",null,"name")),Object(a.b)("dd",null,"An identifying name for this component.")),Object(a.b)("h5",{id:"returns"},"Returns"),Object(a.b)("p",null,"A ",Object(a.b)("code",null,Object(a.b)("a",{title:"h2o_wave.types.TextS",href:"types#h2o_wave.types.TextS"},"TextS"))," instance.")))),Object(a.b)("div",{className:"api"},Object(a.b)("h3",{id:"text_xl"},"text_xl ",Object(a.b)("a",{name:"h2o_wave.ui.text_xl"})),Object(a.b)("div",{className:"api__body"},Object(a.b)("div",{className:"api__signature"},"def ",Object(a.b)("span",{class:"ident"},"text_xl"),"(content:\xa0str, visible:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, tooltip:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, commands:\xa0Union[List[",Object(a.b)("a",{title:"h2o_wave.types.Command",href:"types#h2o_wave.types.Command"},"Command"),"],\xa0NoneType]\xa0=\xa0None, name:\xa0Union[str,\xa0NoneType]\xa0=\xa0None) \u2011>\xa0",Object(a.b)("a",{title:"h2o_wave.types.Component",href:"types#h2o_wave.types.Component"},"Component")),Object(a.b)("div",{className:"api__description"},Object(a.b)("p",null,"Create extra-large sized text content."),Object(a.b)("h5",{id:"args"},"Args"),Object(a.b)("dl",null,Object(a.b)("dt",null,Object(a.b)("code",null,"content")),Object(a.b)("dd",null,"The text content."),Object(a.b)("dt",null,Object(a.b)("code",null,"visible")),Object(a.b)("dd",null,"True if the component should be visible. Defaults to true."),Object(a.b)("dt",null,Object(a.b)("code",null,"tooltip")),Object(a.b)("dd",null,"Tooltip message."),Object(a.b)("dt",null,Object(a.b)("code",null,"commands")),Object(a.b)("dd",null,"Contextual menu commands for this component."),Object(a.b)("dt",null,Object(a.b)("code",null,"name")),Object(a.b)("dd",null,"An identifying name for this component.")),Object(a.b)("h5",{id:"returns"},"Returns"),Object(a.b)("p",null,"A ",Object(a.b)("code",null,Object(a.b)("a",{title:"h2o_wave.types.TextXl",href:"types#h2o_wave.types.TextXl"},"TextXl"))," instance.")))),Object(a.b)("div",{className:"api"},Object(a.b)("h3",{id:"text_xs"},"text_xs ",Object(a.b)("a",{name:"h2o_wave.ui.text_xs"})),Object(a.b)("div",{className:"api__body"},Object(a.b)("div",{className:"api__signature"},"def ",Object(a.b)("span",{class:"ident"},"text_xs"),"(content:\xa0str, visible:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, tooltip:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, name:\xa0Union[str,\xa0NoneType]\xa0=\xa0None) \u2011>\xa0",Object(a.b)("a",{title:"h2o_wave.types.Component",href:"types#h2o_wave.types.Component"},"Component")),Object(a.b)("div",{className:"api__description"},Object(a.b)("p",null,"Create extra-small sized text content."),Object(a.b)("h5",{id:"args"},"Args"),Object(a.b)("dl",null,Object(a.b)("dt",null,Object(a.b)("code",null,"content")),Object(a.b)("dd",null,"The text content."),Object(a.b)("dt",null,Object(a.b)("code",null,"visible")),Object(a.b)("dd",null,"True if the component should be visible. Defaults to true."),Object(a.b)("dt",null,Object(a.b)("code",null,"tooltip")),Object(a.b)("dd",null,"Tooltip message."),Object(a.b)("dt",null,Object(a.b)("code",null,"name")),Object(a.b)("dd",null,"An identifying name for this component.")),Object(a.b)("h5",{id:"returns"},"Returns"),Object(a.b)("p",null,"A ",Object(a.b)("code",null,Object(a.b)("a",{title:"h2o_wave.types.TextXs",href:"types#h2o_wave.types.TextXs"},"TextXs"))," instance.")))),Object(a.b)("div",{className:"api"},Object(a.b)("h3",{id:"textbox"},"textbox ",Object(a.b)("a",{name:"h2o_wave.ui.textbox"})),Object(a.b)("div",{className:"api__body"},Object(a.b)("div",{className:"api__signature"},"def ",Object(a.b)("span",{class:"ident"},"textbox"),"(name:\xa0str, label:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, placeholder:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, value:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, mask:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, icon:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, prefix:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, suffix:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, error:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, required:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, disabled:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, readonly:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, multiline:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, password:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, trigger:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, visible:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, tooltip:\xa0Union[str,\xa0NoneType]\xa0=\xa0None) \u2011>\xa0",Object(a.b)("a",{title:"h2o_wave.types.Component",href:"types#h2o_wave.types.Component"},"Component")),Object(a.b)("div",{className:"api__description"},Object(a.b)("p",null,"Create a text box."),Object(a.b)("p",null,"The text box component enables a user to type text into an app. It's typically used to capture a single line of text, but can be configured to capture multiple lines of text. The text displays on the screen in a simple, uniform format."),Object(a.b)("h5",{id:"args"},"Args"),Object(a.b)("dl",null,Object(a.b)("dt",null,Object(a.b)("code",null,"name")),Object(a.b)("dd",null,"An identifying name for this component."),Object(a.b)("dt",null,Object(a.b)("code",null,"label")),Object(a.b)("dd",null,"The text displayed above the field."),Object(a.b)("dt",null,Object(a.b)("code",null,"placeholder")),Object(a.b)("dd",null,"A string that provides a brief hint to the user as to what kind of information is expected in the field. It should be a word or short phrase that demonstrates the expected type of data, rather than an explanatory message."),Object(a.b)("dt",null,Object(a.b)("code",null,"value")),Object(a.b)("dd",null,"Text to be displayed inside the text box."),Object(a.b)("dt",null,Object(a.b)("code",null,"mask")),Object(a.b)("dd",null,"The masking string that defines the mask's behavior. A backslash will escape any character. Special format characters are: '9': [0-9] 'a': [a-zA-Z] '*': [a-zA-Z0-9]."),Object(a.b)("dt",null,Object(a.b)("code",null,"icon")),Object(a.b)("dd",null,"Icon displayed in the far right end of the text field."),Object(a.b)("dt",null,Object(a.b)("code",null,"prefix")),Object(a.b)("dd",null,"Text to be displayed before the text box contents."),Object(a.b)("dt",null,Object(a.b)("code",null,"suffix")),Object(a.b)("dd",null,"Text to be displayed after the text box contents."),Object(a.b)("dt",null,Object(a.b)("code",null,"error")),Object(a.b)("dd",null,"Text to be displayed as an error below the text box."),Object(a.b)("dt",null,Object(a.b)("code",null,"required")),Object(a.b)("dd",null,"True if the text box is a required field."),Object(a.b)("dt",null,Object(a.b)("code",null,"disabled")),Object(a.b)("dd",null,"True if the text box is disabled."),Object(a.b)("dt",null,Object(a.b)("code",null,"readonly")),Object(a.b)("dd",null,"True if the text box is a read-only field."),Object(a.b)("dt",null,Object(a.b)("code",null,"multiline")),Object(a.b)("dd",null,"True if the text box should allow multi-line text entry."),Object(a.b)("dt",null,Object(a.b)("code",null,"password")),Object(a.b)("dd",null,"True if the text box should hide text content."),Object(a.b)("dt",null,Object(a.b)("code",null,"trigger")),Object(a.b)("dd",null,"True if the form should be submitted when the text value changes."),Object(a.b)("dt",null,Object(a.b)("code",null,"visible")),Object(a.b)("dd",null,"True if the component should be visible. Defaults to true."),Object(a.b)("dt",null,Object(a.b)("code",null,"tooltip")),Object(a.b)("dd",null,"An optional tooltip message displayed when a user clicks the help icon to the right of the component.")),Object(a.b)("h5",{id:"returns"},"Returns"),Object(a.b)("p",null,"A ",Object(a.b)("code",null,Object(a.b)("a",{title:"h2o_wave.types.Textbox",href:"types#h2o_wave.types.Textbox"},"Textbox"))," instance.")))),Object(a.b)("div",{className:"api"},Object(a.b)("h3",{id:"toggle"},"toggle ",Object(a.b)("a",{name:"h2o_wave.ui.toggle"})),Object(a.b)("div",{className:"api__body"},Object(a.b)("div",{className:"api__signature"},"def ",Object(a.b)("span",{class:"ident"},"toggle"),"(name:\xa0str, label:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, value:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, disabled:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, trigger:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, visible:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None, tooltip:\xa0Union[str,\xa0NoneType]\xa0=\xa0None) \u2011>\xa0",Object(a.b)("a",{title:"h2o_wave.types.Component",href:"types#h2o_wave.types.Component"},"Component")),Object(a.b)("div",{className:"api__description"},Object(a.b)("p",null,"Create a toggle. Toggles represent a physical switch that allows users to turn things on or off. Use toggles to present users with two mutually exclusive options (like on/off), where choosing an option results in an immediate action."),Object(a.b)("p",null,"Use a toggle for binary operations that take effect right after the user flips the Toggle. For example, use a Toggle to turn services or hardware components on or off. In other words, if a physical switch would work for the action, a Toggle is probably the best component to use."),Object(a.b)("h5",{id:"args"},"Args"),Object(a.b)("dl",null,Object(a.b)("dt",null,Object(a.b)("code",null,"name")),Object(a.b)("dd",null,"An identifying name for this component."),Object(a.b)("dt",null,Object(a.b)("code",null,"label")),Object(a.b)("dd",null,"Text to be displayed alongside the component."),Object(a.b)("dt",null,Object(a.b)("code",null,"value")),Object(a.b)("dd",null,"True if selected, False if unselected."),Object(a.b)("dt",null,Object(a.b)("code",null,"disabled")),Object(a.b)("dd",null,"True if the checkbox is disabled."),Object(a.b)("dt",null,Object(a.b)("code",null,"trigger")),Object(a.b)("dd",null,"True if the form should be submitted when the toggle value changes."),Object(a.b)("dt",null,Object(a.b)("code",null,"visible")),Object(a.b)("dd",null,"True if the component should be visible. Defaults to true."),Object(a.b)("dt",null,Object(a.b)("code",null,"tooltip")),Object(a.b)("dd",null,"An optional tooltip message displayed when a user clicks the help icon to the right of the component.")),Object(a.b)("h5",{id:"returns"},"Returns"),Object(a.b)("p",null,"A ",Object(a.b)("code",null,Object(a.b)("a",{title:"h2o_wave.types.Toggle",href:"types#h2o_wave.types.Toggle"},"Toggle"))," instance.")))),Object(a.b)("div",{className:"api"},Object(a.b)("h3",{id:"toolbar_card"},"toolbar_card ",Object(a.b)("a",{name:"h2o_wave.ui.toolbar_card"})),Object(a.b)("div",{className:"api__body"},Object(a.b)("div",{className:"api__signature"},"def ",Object(a.b)("span",{class:"ident"},"toolbar_card"),"(box:\xa0str, items:\xa0List[",Object(a.b)("a",{title:"h2o_wave.types.Command",href:"types#h2o_wave.types.Command"},"Command"),"], secondary_items:\xa0Union[List[",Object(a.b)("a",{title:"h2o_wave.types.Command",href:"types#h2o_wave.types.Command"},"Command"),"],\xa0NoneType]\xa0=\xa0None, overflow_items:\xa0Union[List[",Object(a.b)("a",{title:"h2o_wave.types.Command",href:"types#h2o_wave.types.Command"},"Command"),"],\xa0NoneType]\xa0=\xa0None, commands:\xa0Union[List[",Object(a.b)("a",{title:"h2o_wave.types.Command",href:"types#h2o_wave.types.Command"},"Command"),"],\xa0NoneType]\xa0=\xa0None) \u2011>\xa0",Object(a.b)("a",{title:"h2o_wave.types.ToolbarCard",href:"types#h2o_wave.types.ToolbarCard"},"ToolbarCard")),Object(a.b)("div",{className:"api__description"},Object(a.b)("p",null,"Create a card containing a toolbar."),Object(a.b)("h5",{id:"args"},"Args"),Object(a.b)("dl",null,Object(a.b)("dt",null,Object(a.b)("code",null,"box")),Object(a.b)("dd",null,"A string indicating how to place this component on the page."),Object(a.b)("dt",null,Object(a.b)("code",null,"items")),Object(a.b)("dd",null,"Items to render."),Object(a.b)("dt",null,Object(a.b)("code",null,"secondary_items")),Object(a.b)("dd",null,"Items to render on the right side (or left, in RTL)."),Object(a.b)("dt",null,Object(a.b)("code",null,"overflow_items")),Object(a.b)("dd",null,"Items to render in an overflow menu."),Object(a.b)("dt",null,Object(a.b)("code",null,"commands")),Object(a.b)("dd",null,"Contextual menu commands for this component.")),Object(a.b)("h5",{id:"returns"},"Returns"),Object(a.b)("p",null,"A ",Object(a.b)("code",null,Object(a.b)("a",{title:"h2o_wave.types.ToolbarCard",href:"types#h2o_wave.types.ToolbarCard"},"ToolbarCard"))," instance.")))),Object(a.b)("div",{className:"api"},Object(a.b)("h3",{id:"vega_card"},"vega_card ",Object(a.b)("a",{name:"h2o_wave.ui.vega_card"})),Object(a.b)("div",{className:"api__body"},Object(a.b)("div",{className:"api__signature"},"def ",Object(a.b)("span",{class:"ident"},"vega_card"),"(box:\xa0str, title:\xa0str, specification:\xa0str, data:\xa0Union[dict,\xa0str,\xa0NoneType]\xa0=\xa0None, commands:\xa0Union[List[",Object(a.b)("a",{title:"h2o_wave.types.Command",href:"types#h2o_wave.types.Command"},"Command"),"],\xa0NoneType]\xa0=\xa0None) \u2011>\xa0",Object(a.b)("a",{title:"h2o_wave.types.VegaCard",href:"types#h2o_wave.types.VegaCard"},"VegaCard")),Object(a.b)("div",{className:"api__description"},Object(a.b)("p",null,"Create a card containing a Vega-lite plot."),Object(a.b)("h5",{id:"args"},"Args"),Object(a.b)("dl",null,Object(a.b)("dt",null,Object(a.b)("code",null,"box")),Object(a.b)("dd",null,"A string indicating how to place this component on the page."),Object(a.b)("dt",null,Object(a.b)("code",null,"title")),Object(a.b)("dd",null,"The title of this card."),Object(a.b)("dt",null,Object(a.b)("code",null,"specification")),Object(a.b)("dd",null,"The Vega-lite specification."),Object(a.b)("dt",null,Object(a.b)("code",null,"data")),Object(a.b)("dd",null,"Data for the plot, if any."),Object(a.b)("dt",null,Object(a.b)("code",null,"commands")),Object(a.b)("dd",null,"Contextual menu commands for this component.")),Object(a.b)("h5",{id:"returns"},"Returns"),Object(a.b)("p",null,"A ",Object(a.b)("code",null,Object(a.b)("a",{title:"h2o_wave.types.VegaCard",href:"types#h2o_wave.types.VegaCard"},"VegaCard"))," instance.")))),Object(a.b)("div",{className:"api"},Object(a.b)("h3",{id:"vega_visualization"},"vega_visualization ",Object(a.b)("a",{name:"h2o_wave.ui.vega_visualization"})),Object(a.b)("div",{className:"api__body"},Object(a.b)("div",{className:"api__signature"},"def ",Object(a.b)("span",{class:"ident"},"vega_visualization"),"(specification:\xa0str, data:\xa0Union[dict,\xa0str,\xa0NoneType]\xa0=\xa0None, width:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, height:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, name:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, visible:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None) \u2011>\xa0",Object(a.b)("a",{title:"h2o_wave.types.Component",href:"types#h2o_wave.types.Component"},"Component")),Object(a.b)("div",{className:"api__description"},Object(a.b)("p",null,"Create a Vega-lite plot for display inside a form."),Object(a.b)("h5",{id:"args"},"Args"),Object(a.b)("dl",null,Object(a.b)("dt",null,Object(a.b)("code",null,"specification")),Object(a.b)("dd",null,"The Vega-lite specification."),Object(a.b)("dt",null,Object(a.b)("code",null,"data")),Object(a.b)("dd",null,"Data for the plot, if any."),Object(a.b)("dt",null,Object(a.b)("code",null,"width")),Object(a.b)("dd",null,"The width of the visualization. Defaults to 100%."),Object(a.b)("dt",null,Object(a.b)("code",null,"height")),Object(a.b)("dd",null,"The height of the visualization. Defaults to 300px."),Object(a.b)("dt",null,Object(a.b)("code",null,"name")),Object(a.b)("dd",null,"An identifying name for this component."),Object(a.b)("dt",null,Object(a.b)("code",null,"visible")),Object(a.b)("dd",null,"True if the component should be visible. Defaults to true.")),Object(a.b)("h5",{id:"returns"},"Returns"),Object(a.b)("p",null,"A ",Object(a.b)("code",null,Object(a.b)("a",{title:"h2o_wave.types.VegaVisualization",href:"types#h2o_wave.types.VegaVisualization"},"VegaVisualization"))," instance.")))),Object(a.b)("div",{className:"api"},Object(a.b)("h3",{id:"visualization"},"visualization ",Object(a.b)("a",{name:"h2o_wave.ui.visualization"})),Object(a.b)("div",{className:"api__body"},Object(a.b)("div",{className:"api__signature"},"def ",Object(a.b)("span",{class:"ident"},"visualization"),"(plot:\xa0",Object(a.b)("a",{title:"h2o_wave.types.Plot",href:"types#h2o_wave.types.Plot"},"Plot"),", data:\xa0Union[dict,\xa0str], width:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, height:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, name:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, visible:\xa0Union[bool,\xa0NoneType]\xa0=\xa0None) \u2011>\xa0",Object(a.b)("a",{title:"h2o_wave.types.Component",href:"types#h2o_wave.types.Component"},"Component")),Object(a.b)("div",{className:"api__description"},Object(a.b)("p",null,"Create a visualization for display inside a form."),Object(a.b)("h5",{id:"args"},"Args"),Object(a.b)("dl",null,Object(a.b)("dt",null,Object(a.b)("code",null,"plot")),Object(a.b)("dd",null,"The plot to be rendered in this visualization."),Object(a.b)("dt",null,Object(a.b)("code",null,"data")),Object(a.b)("dd",null,"Data for this visualization."),Object(a.b)("dt",null,Object(a.b)("code",null,"width")),Object(a.b)("dd",null,"The width of the visualization. Defaults to 100%."),Object(a.b)("dt",null,Object(a.b)("code",null,"height")),Object(a.b)("dd",null,"The hight of the visualization. Defaults to 300px."),Object(a.b)("dt",null,Object(a.b)("code",null,"name")),Object(a.b)("dd",null,"An identifying name for this component."),Object(a.b)("dt",null,Object(a.b)("code",null,"visible")),Object(a.b)("dd",null,"True if the component should be visible. Defaults to true.")),Object(a.b)("h5",{id:"returns"},"Returns"),Object(a.b)("p",null,"A ",Object(a.b)("code",null,Object(a.b)("a",{title:"h2o_wave.types.Visualization",href:"types#h2o_wave.types.Visualization"},"Visualization"))," instance.")))),Object(a.b)("div",{className:"api"},Object(a.b)("h3",{id:"wide_bar_stat_card"},"wide_bar_stat_card ",Object(a.b)("a",{name:"h2o_wave.ui.wide_bar_stat_card"})),Object(a.b)("div",{className:"api__body"},Object(a.b)("div",{className:"api__signature"},"def ",Object(a.b)("span",{class:"ident"},"wide_bar_stat_card"),"(box:\xa0str, title:\xa0str, value:\xa0str, aux_value:\xa0str, progress:\xa0float, plot_color:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, data:\xa0Union[dict,\xa0str,\xa0NoneType]\xa0=\xa0None, commands:\xa0Union[List[",Object(a.b)("a",{title:"h2o_wave.types.Command",href:"types#h2o_wave.types.Command"},"Command"),"],\xa0NoneType]\xa0=\xa0None) \u2011>\xa0",Object(a.b)("a",{title:"h2o_wave.types.WideBarStatCard",href:"types#h2o_wave.types.WideBarStatCard"},"WideBarStatCard")),Object(a.b)("div",{className:"api__description"},Object(a.b)("p",null,"Create a wide stat card displaying a primary value, an auxiliary value and a progress bar."),Object(a.b)("h5",{id:"args"},"Args"),Object(a.b)("dl",null,Object(a.b)("dt",null,Object(a.b)("code",null,"box")),Object(a.b)("dd",null,"A string indicating how to place this component on the page."),Object(a.b)("dt",null,Object(a.b)("code",null,"title")),Object(a.b)("dd",null,"The card's title."),Object(a.b)("dt",null,Object(a.b)("code",null,"value")),Object(a.b)("dd",null,"The primary value displayed."),Object(a.b)("dt",null,Object(a.b)("code",null,"aux_value")),Object(a.b)("dd",null,"The auxiliary value displayed next to the primary value."),Object(a.b)("dt",null,Object(a.b)("code",null,"progress")),Object(a.b)("dd",null,"The value of the progress bar, between 0 and 1."),Object(a.b)("dt",null,Object(a.b)("code",null,"plot_color")),Object(a.b)("dd",null,"The color of the progress bar."),Object(a.b)("dt",null,Object(a.b)("code",null,"data")),Object(a.b)("dd",null,"Data for this card."),Object(a.b)("dt",null,Object(a.b)("code",null,"commands")),Object(a.b)("dd",null,"Contextual menu commands for this component.")),Object(a.b)("h5",{id:"returns"},"Returns"),Object(a.b)("p",null,"A ",Object(a.b)("code",null,Object(a.b)("a",{title:"h2o_wave.types.WideBarStatCard",href:"types#h2o_wave.types.WideBarStatCard"},"WideBarStatCard"))," instance.")))),Object(a.b)("div",{className:"api"},Object(a.b)("h3",{id:"wide_gauge_stat_card"},"wide_gauge_stat_card ",Object(a.b)("a",{name:"h2o_wave.ui.wide_gauge_stat_card"})),Object(a.b)("div",{className:"api__body"},Object(a.b)("div",{className:"api__signature"},"def ",Object(a.b)("span",{class:"ident"},"wide_gauge_stat_card"),"(box:\xa0str, title:\xa0str, value:\xa0str, aux_value:\xa0str, progress:\xa0float, plot_color:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, data:\xa0Union[dict,\xa0str,\xa0NoneType]\xa0=\xa0None, commands:\xa0Union[List[",Object(a.b)("a",{title:"h2o_wave.types.Command",href:"types#h2o_wave.types.Command"},"Command"),"],\xa0NoneType]\xa0=\xa0None) \u2011>\xa0",Object(a.b)("a",{title:"h2o_wave.types.WideGaugeStatCard",href:"types#h2o_wave.types.WideGaugeStatCard"},"WideGaugeStatCard")),Object(a.b)("div",{className:"api__description"},Object(a.b)("p",null,"Create a wide stat card displaying a primary value, an auxiliary value and a progress gauge."),Object(a.b)("h5",{id:"args"},"Args"),Object(a.b)("dl",null,Object(a.b)("dt",null,Object(a.b)("code",null,"box")),Object(a.b)("dd",null,"A string indicating how to place this component on the page."),Object(a.b)("dt",null,Object(a.b)("code",null,"title")),Object(a.b)("dd",null,"The card's title."),Object(a.b)("dt",null,Object(a.b)("code",null,"value")),Object(a.b)("dd",null,"The primary value displayed."),Object(a.b)("dt",null,Object(a.b)("code",null,"aux_value")),Object(a.b)("dd",null,"The auxiliary value displayed next to the primary value."),Object(a.b)("dt",null,Object(a.b)("code",null,"progress")),Object(a.b)("dd",null,"The value of the progress gauge, between 0 and 1."),Object(a.b)("dt",null,Object(a.b)("code",null,"plot_color")),Object(a.b)("dd",null,"The color of the progress gauge."),Object(a.b)("dt",null,Object(a.b)("code",null,"data")),Object(a.b)("dd",null,"Data for this card."),Object(a.b)("dt",null,Object(a.b)("code",null,"commands")),Object(a.b)("dd",null,"Contextual menu commands for this component.")),Object(a.b)("h5",{id:"returns"},"Returns"),Object(a.b)("p",null,"A ",Object(a.b)("code",null,Object(a.b)("a",{title:"h2o_wave.types.WideGaugeStatCard",href:"types#h2o_wave.types.WideGaugeStatCard"},"WideGaugeStatCard"))," instance.")))),Object(a.b)("div",{className:"api"},Object(a.b)("h3",{id:"wide_series_stat_card"},"wide_series_stat_card ",Object(a.b)("a",{name:"h2o_wave.ui.wide_series_stat_card"})),Object(a.b)("div",{className:"api__body"},Object(a.b)("div",{className:"api__signature"},"def ",Object(a.b)("span",{class:"ident"},"wide_series_stat_card"),"(box:\xa0str, title:\xa0str, value:\xa0str, aux_value:\xa0str, plot_data:\xa0Union[",Object(a.b)("a",{title:"h2o_wave.core.Data",href:"core#h2o_wave.core.Data"},"Data"),",\xa0str], plot_value:\xa0str, plot_zero_value:\xa0Union[float,\xa0NoneType]\xa0=\xa0None, plot_category:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, plot_type:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, plot_curve:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, plot_color:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, data:\xa0Union[dict,\xa0str,\xa0NoneType]\xa0=\xa0None, commands:\xa0Union[List[",Object(a.b)("a",{title:"h2o_wave.types.Command",href:"types#h2o_wave.types.Command"},"Command"),"],\xa0NoneType]\xa0=\xa0None) \u2011>\xa0",Object(a.b)("a",{title:"h2o_wave.types.WideSeriesStatCard",href:"types#h2o_wave.types.WideSeriesStatCard"},"WideSeriesStatCard")),Object(a.b)("div",{className:"api__description"},Object(a.b)("p",null,"Create a wide stat card displaying a primary value, an auxiliary value and a series plot."),Object(a.b)("h5",{id:"args"},"Args"),Object(a.b)("dl",null,Object(a.b)("dt",null,Object(a.b)("code",null,"box")),Object(a.b)("dd",null,"A string indicating how to place this component on the page."),Object(a.b)("dt",null,Object(a.b)("code",null,"title")),Object(a.b)("dd",null,"The card's title."),Object(a.b)("dt",null,Object(a.b)("code",null,"value")),Object(a.b)("dd",null,"The primary value displayed."),Object(a.b)("dt",null,Object(a.b)("code",null,"aux_value")),Object(a.b)("dd",null,"The auxiliary value displayed below the primary value."),Object(a.b)("dt",null,Object(a.b)("code",null,"plot_data")),Object(a.b)("dd",null,"The plot's data."),Object(a.b)("dt",null,Object(a.b)("code",null,"plot_value")),Object(a.b)("dd",null,"The data field to use for y-axis values."),Object(a.b)("dt",null,Object(a.b)("code",null,"plot_zero_value")),Object(a.b)("dd",null,"The base value to use for each y-axis mark. Set this to ",Object(a.b)("code",null,"0")," if you want to pin the x-axis at ",Object(a.b)("code",null,"y=0"),". If not provided, the minimum value from the data is used."),Object(a.b)("dt",null,Object(a.b)("code",null,"plot_category")),Object(a.b)("dd",null,"The data field to use for x-axis values (ignored if ",Object(a.b)("code",null,"plot_type")," is ",Object(a.b)("code",null,"area"),"; must be provided if ",Object(a.b)("code",null,"plot_type")," is ",Object(a.b)("code",null,"interval"),"). Defaults to 'x'."),Object(a.b)("dt",null,Object(a.b)("code",null,"plot_type")),Object(a.b)("dd",null,"The type of plot. Defaults to ",Object(a.b)("code",null,"area"),". One of 'area', 'interval'."),Object(a.b)("dt",null,Object(a.b)("code",null,"plot_curve")),Object(a.b)("dd",null,"The plot's curve style. Defaults to ",Object(a.b)("code",null,"linear"),". One of 'linear', 'smooth', 'step', 'step-after', 'step-before'."),Object(a.b)("dt",null,Object(a.b)("code",null,"plot_color")),Object(a.b)("dd",null,"The plot's color."),Object(a.b)("dt",null,Object(a.b)("code",null,"data")),Object(a.b)("dd",null,"Data for this card."),Object(a.b)("dt",null,Object(a.b)("code",null,"commands")),Object(a.b)("dd",null,"Contextual menu commands for this component.")),Object(a.b)("h5",{id:"returns"},"Returns"),Object(a.b)("p",null,"A ",Object(a.b)("code",null,Object(a.b)("a",{title:"h2o_wave.types.WideSeriesStatCard",href:"types#h2o_wave.types.WideSeriesStatCard"},"WideSeriesStatCard"))," instance.")))))}s.isMDXComponent=!0},292:function(e,t,l){"use strict";l.d(t,"a",(function(){return r})),l.d(t,"b",(function(){return O}));var n=l(0),b=l.n(n);function a(e,t,l){return t in e?Object.defineProperty(e,t,{value:l,enumerable:!0,configurable:!0,writable:!0}):e[t]=l,e}function o(e,t){var l=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),l.push.apply(l,n)}return l}function c(e){for(var t=1;t=0||(b[l]=e[l]);return b}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,l)&&(b[l]=e[l])}return b}var i=b.a.createContext({}),s=function(e){var t=b.a.useContext(i),l=t;return e&&(l="function"==typeof e?e(t):c(c({},t),e)),l},r=function(e){var t=s(e.components);return b.a.createElement(i.Provider,{value:t},e.children)},u={inlineCode:"code",wrapper:function(e){var t=e.children;return b.a.createElement(b.a.Fragment,{},t)}},p=b.a.forwardRef((function(e,t){var l=e.components,n=e.mdxType,a=e.originalType,o=e.parentName,i=d(e,["components","mdxType","originalType","parentName"]),r=s(l),p=n,O=r["".concat(o,".").concat(p)]||r[p]||u[p]||a;return l?b.a.createElement(O,c(c({ref:t},i),{},{components:l})):b.a.createElement(O,c({ref:t},i))}));function O(e,t){var l=arguments,n=t&&t.mdxType;if("string"==typeof e||n){var a=l.length,o=new Array(a);o[0]=p;var c={};for(var d in t)hasOwnProperty.call(t,d)&&(c[d]=t[d]);c.originalType=e,c.mdxType="string"==typeof e?e:n,o[1]=c;for(var i=2;i=0||(a[r]=e[r]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(a[r]=e[r])}return a}var l=a.a.createContext({}),s=function(e){var t=a.a.useContext(l),r=t;return e&&(r="function"==typeof e?e(t):i(i({},t),e)),r},u=function(e){var t=s(e.components);return a.a.createElement(l.Provider,{value:t},e.children)},d={inlineCode:"code",wrapper:function(e){var t=e.children;return a.a.createElement(a.a.Fragment,{},t)}},f=a.a.forwardRef((function(e,t){var r=e.components,n=e.mdxType,o=e.originalType,c=e.parentName,l=p(e,["components","mdxType","originalType","parentName"]),u=s(r),f=n,m=u["".concat(c,".").concat(f)]||u[f]||d[f]||o;return r?a.a.createElement(m,i(i({ref:t},l),{},{components:r})):a.a.createElement(m,i({ref:t},l))}));function m(e,t){var r=arguments,n=t&&t.mdxType;if("string"==typeof e||n){var o=r.length,c=new Array(o);c[0]=f;var i={};for(var p in t)hasOwnProperty.call(t,p)&&(i[p]=t[p]);i.originalType=e,i.mdxType="string"==typeof e?e:n,c[1]=i;for(var l=2;l=0||(a[r]=e[r]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(a[r]=e[r])}return a}var l=a.a.createContext({}),s=function(e){var t=a.a.useContext(l),r=t;return e&&(r="function"==typeof e?e(t):i(i({},t),e)),r},u=function(e){var t=s(e.components);return a.a.createElement(l.Provider,{value:t},e.children)},d={inlineCode:"code",wrapper:function(e){var t=e.children;return a.a.createElement(a.a.Fragment,{},t)}},f=a.a.forwardRef((function(e,t){var r=e.components,n=e.mdxType,o=e.originalType,c=e.parentName,l=p(e,["components","mdxType","originalType","parentName"]),u=s(r),f=n,m=u["".concat(c,".").concat(f)]||u[f]||d[f]||o;return r?a.a.createElement(m,i(i({ref:t},l),{},{components:r})):a.a.createElement(m,i({ref:t},l))}));function m(e,t){var r=arguments,n=t&&t.mdxType;if("string"==typeof e||n){var o=r.length,c=new Array(o);c[0]=f;var i={};for(var p in t)hasOwnProperty.call(t,p)&&(i[p]=t[p]);i.originalType=e,i.mdxType="string"==typeof e?e:n,c[1]=i;for(var l=2;l=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var c=o.a.createContext({}),u=function(e){var t=o.a.useContext(c),n=t;return e&&(n="function"==typeof e?e(t):l(l({},t),e)),n},s=function(e){var t=u(e.components);return o.a.createElement(c.Provider,{value:t},e.children)},m={inlineCode:"code",wrapper:function(e){var t=e.children;return o.a.createElement(o.a.Fragment,{},t)}},f=o.a.forwardRef((function(e,t){var n=e.components,r=e.mdxType,a=e.originalType,i=e.parentName,c=p(e,["components","mdxType","originalType","parentName"]),s=u(n),f=r,d=s["".concat(i,".").concat(f)]||s[f]||m[f]||a;return n?o.a.createElement(d,l(l({ref:t},c),{},{components:n})):o.a.createElement(d,l({ref:t},c))}));function d(e,t){var n=arguments,r=t&&t.mdxType;if("string"==typeof e||r){var a=n.length,i=new Array(a);i[0]=f;var l={};for(var p in t)hasOwnProperty.call(t,p)&&(l[p]=t[p]);l.originalType=e,l.mdxType="string"==typeof e?e:r,i[1]=l;for(var c=2;c=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var c=o.a.createContext({}),u=function(e){var t=o.a.useContext(c),n=t;return e&&(n="function"==typeof e?e(t):l(l({},t),e)),n},s=function(e){var t=u(e.components);return o.a.createElement(c.Provider,{value:t},e.children)},m={inlineCode:"code",wrapper:function(e){var t=e.children;return o.a.createElement(o.a.Fragment,{},t)}},f=o.a.forwardRef((function(e,t){var n=e.components,r=e.mdxType,a=e.originalType,i=e.parentName,c=p(e,["components","mdxType","originalType","parentName"]),s=u(n),f=r,d=s["".concat(i,".").concat(f)]||s[f]||m[f]||a;return n?o.a.createElement(d,l(l({ref:t},c),{},{components:n})):o.a.createElement(d,l({ref:t},c))}));function d(e,t){var n=arguments,r=t&&t.mdxType;if("string"==typeof e||r){var a=n.length,i=new Array(a);i[0]=f;var l={};for(var p in t)hasOwnProperty.call(t,p)&&(l[p]=t[p]);l.originalType=e,l.mdxType="string"==typeof e?e:r,i[1]=l;for(var c=2;c=0||(a[r]=e[r]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(a[r]=e[r])}return a}var c=a.a.createContext({}),m=function(e){var t=a.a.useContext(c),r=t;return e&&(r="function"==typeof e?e(t):i(i({},t),e)),r},p=function(e){var t=m(e.components);return a.a.createElement(c.Provider,{value:t},e.children)},u={inlineCode:"code",wrapper:function(e){var t=e.children;return a.a.createElement(a.a.Fragment,{},t)}},d=a.a.forwardRef((function(e,t){var r=e.components,n=e.mdxType,o=e.originalType,l=e.parentName,c=s(e,["components","mdxType","originalType","parentName"]),p=m(r),d=n,f=p["".concat(l,".").concat(d)]||p[d]||u[d]||o;return r?a.a.createElement(f,i(i({ref:t},c),{},{components:r})):a.a.createElement(f,i({ref:t},c))}));function f(e,t){var r=arguments,n=t&&t.mdxType;if("string"==typeof e||n){var o=r.length,l=new Array(o);l[0]=d;var i={};for(var s in t)hasOwnProperty.call(t,s)&&(i[s]=t[s]);i.originalType=e,i.mdxType="string"==typeof e?e:n,l[1]=i;for(var c=2;c=0||(a[r]=e[r]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(a[r]=e[r])}return a}var c=a.a.createContext({}),m=function(e){var t=a.a.useContext(c),r=t;return e&&(r="function"==typeof e?e(t):i(i({},t),e)),r},p=function(e){var t=m(e.components);return a.a.createElement(c.Provider,{value:t},e.children)},u={inlineCode:"code",wrapper:function(e){var t=e.children;return a.a.createElement(a.a.Fragment,{},t)}},d=a.a.forwardRef((function(e,t){var r=e.components,n=e.mdxType,o=e.originalType,l=e.parentName,c=s(e,["components","mdxType","originalType","parentName"]),p=m(r),d=n,f=p["".concat(l,".").concat(d)]||p[d]||u[d]||o;return r?a.a.createElement(f,i(i({ref:t},c),{},{components:r})):a.a.createElement(f,i({ref:t},c))}));function f(e,t){var r=arguments,n=t&&t.mdxType;if("string"==typeof e||n){var o=r.length,l=new Array(o);l[0]=d;var i={};for(var s in t)hasOwnProperty.call(t,s)&&(i[s]=t[s]);i.originalType=e,i.mdxType="string"==typeof e?e:n,l[1]=i;for(var c=2;c=0||(r[t]=e[t]);return r}(e,n);if(Object.getOwnPropertySymbols){var J=Object.getOwnPropertySymbols(e);for(i=0;i=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(r[t]=e[t])}return r}var E=r.a.createContext({}),S=function(e){var n=r.a.useContext(E),t=n;return e&&(t="function"==typeof e?e(n):k(k({},n),e)),t},I=function(e){var n=S(e.components);return r.a.createElement(E.Provider,{value:n},e.children)},o={inlineCode:"code",wrapper:function(e){var n=e.children;return r.a.createElement(r.a.Fragment,{},n)}},l=r.a.forwardRef((function(e,n){var t=e.components,i=e.mdxType,J=e.originalType,A=e.parentName,E=a(e,["components","mdxType","originalType","parentName"]),I=S(t),l=i,g=I["".concat(A,".").concat(l)]||I[l]||o[l]||J;return t?r.a.createElement(g,k(k({ref:n},E),{},{components:t})):r.a.createElement(g,k({ref:n},E))}));function g(e,n){var t=arguments,i=n&&n.mdxType;if("string"==typeof e||i){var J=t.length,A=new Array(J);A[0]=l;var k={};for(var a in n)hasOwnProperty.call(n,a)&&(k[a]=n[a]);k.originalType=e,k.mdxType="string"==typeof e?e:i,A[1]=k;for(var E=2;E=0||(r[t]=e[t]);return r}(e,n);if(Object.getOwnPropertySymbols){var J=Object.getOwnPropertySymbols(e);for(i=0;i=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(r[t]=e[t])}return r}var E=r.a.createContext({}),S=function(e){var n=r.a.useContext(E),t=n;return e&&(t="function"==typeof e?e(n):k(k({},n),e)),t},I=function(e){var n=S(e.components);return r.a.createElement(E.Provider,{value:n},e.children)},o={inlineCode:"code",wrapper:function(e){var n=e.children;return r.a.createElement(r.a.Fragment,{},n)}},l=r.a.forwardRef((function(e,n){var t=e.components,i=e.mdxType,J=e.originalType,A=e.parentName,E=a(e,["components","mdxType","originalType","parentName"]),I=S(t),l=i,g=I["".concat(A,".").concat(l)]||I[l]||o[l]||J;return t?r.a.createElement(g,k(k({ref:n},E),{},{components:t})):r.a.createElement(g,k({ref:n},E))}));function g(e,n){var t=arguments,i=n&&n.mdxType;if("string"==typeof e||i){var J=t.length,A=new Array(J);A[0]=l;var k={};for(var a in n)hasOwnProperty.call(n,a)&&(k[a]=n[a]);k.originalType=e,k.mdxType="string"==typeof e?e:i,A[1]=k;for(var E=2;E=0||(i[t]=e[t]);return i}(e,r);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(i[t]=e[t])}return i}var s=i.a.createContext({}),p=function(e){var r=i.a.useContext(s),t=r;return e&&(t="function"==typeof e?e(r):l(l({},r),e)),t},u=function(e){var r=p(e.components);return i.a.createElement(s.Provider,{value:r},e.children)},d={inlineCode:"code",wrapper:function(e){var r=e.children;return i.a.createElement(i.a.Fragment,{},r)}},h=i.a.forwardRef((function(e,r){var t=e.components,n=e.mdxType,a=e.originalType,c=e.parentName,s=o(e,["components","mdxType","originalType","parentName"]),u=p(t),h=n,b=u["".concat(c,".").concat(h)]||u[h]||d[h]||a;return t?i.a.createElement(b,l(l({ref:r},s),{},{components:t})):i.a.createElement(b,l({ref:r},s))}));function b(e,r){var t=arguments,n=r&&r.mdxType;if("string"==typeof e||n){var a=t.length,c=new Array(a);c[0]=h;var l={};for(var o in r)hasOwnProperty.call(r,o)&&(l[o]=r[o]);l.originalType=e,l.mdxType="string"==typeof e?e:n,c[1]=l;for(var s=2;s=0||(i[t]=e[t]);return i}(e,r);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(i[t]=e[t])}return i}var s=i.a.createContext({}),p=function(e){var r=i.a.useContext(s),t=r;return e&&(t="function"==typeof e?e(r):l(l({},r),e)),t},u=function(e){var r=p(e.components);return i.a.createElement(s.Provider,{value:r},e.children)},d={inlineCode:"code",wrapper:function(e){var r=e.children;return i.a.createElement(i.a.Fragment,{},r)}},h=i.a.forwardRef((function(e,r){var t=e.components,n=e.mdxType,a=e.originalType,c=e.parentName,s=o(e,["components","mdxType","originalType","parentName"]),u=p(t),h=n,b=u["".concat(c,".").concat(h)]||u[h]||d[h]||a;return t?i.a.createElement(b,l(l({ref:r},s),{},{components:t})):i.a.createElement(b,l({ref:r},s))}));function b(e,r){var t=arguments,n=r&&r.mdxType;if("string"==typeof e||n){var a=t.length,c=new Array(a);c[0]=h;var l={};for(var o in r)hasOwnProperty.call(r,o)&&(l[o]=r[o]);l.originalType=e,l.mdxType="string"==typeof e?e:n,c[1]=l;for(var s=2;s=0||(o[t]=e[t]);return o}(e,n);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);for(a=0;a=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(o[t]=e[t])}return o}var m=o.a.createContext({}),p=function(e){var n=o.a.useContext(m),t=n;return e&&(t="function"==typeof e?e(n):i(i({},n),e)),t},s=function(e){var n=p(e.components);return o.a.createElement(m.Provider,{value:n},e.children)},u={inlineCode:"code",wrapper:function(e){var n=e.children;return o.a.createElement(o.a.Fragment,{},n)}},d=o.a.forwardRef((function(e,n){var t=e.components,a=e.mdxType,r=e.originalType,c=e.parentName,m=l(e,["components","mdxType","originalType","parentName"]),s=p(t),d=a,b=s["".concat(c,".").concat(d)]||s[d]||u[d]||r;return t?o.a.createElement(b,i(i({ref:n},m),{},{components:t})):o.a.createElement(b,i({ref:n},m))}));function b(e,n){var t=arguments,a=n&&n.mdxType;if("string"==typeof e||a){var r=t.length,c=new Array(r);c[0]=d;var i={};for(var l in n)hasOwnProperty.call(n,l)&&(i[l]=n[l]);i.originalType=e,i.mdxType="string"==typeof e?e:a,c[1]=i;for(var m=2;m=0||(o[t]=e[t]);return o}(e,n);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);for(a=0;a=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(o[t]=e[t])}return o}var m=o.a.createContext({}),p=function(e){var n=o.a.useContext(m),t=n;return e&&(t="function"==typeof e?e(n):i(i({},n),e)),t},s=function(e){var n=p(e.components);return o.a.createElement(m.Provider,{value:n},e.children)},u={inlineCode:"code",wrapper:function(e){var n=e.children;return o.a.createElement(o.a.Fragment,{},n)}},d=o.a.forwardRef((function(e,n){var t=e.components,a=e.mdxType,r=e.originalType,c=e.parentName,m=l(e,["components","mdxType","originalType","parentName"]),s=p(t),d=a,b=s["".concat(c,".").concat(d)]||s[d]||u[d]||r;return t?o.a.createElement(b,i(i({ref:n},m),{},{components:t})):o.a.createElement(b,i({ref:n},m))}));function b(e,n){var t=arguments,a=n&&n.mdxType;if("string"==typeof e||a){var r=t.length,c=new Array(r);c[0]=d;var i={};for(var l in n)hasOwnProperty.call(n,l)&&(i[l]=n[l]);i.originalType=e,i.mdxType="string"==typeof e?e:a,c[1]=i;for(var m=2;m=0||(n[r]=e[r]);return n}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(a=0;a=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(n[r]=e[r])}return n}var b=n.a.createContext({}),p=function(e){var t=n.a.useContext(b),r=t;return e&&(r="function"==typeof e?e(t):i(i({},t),e)),r},c=function(e){var t=p(e.components);return n.a.createElement(b.Provider,{value:t},e.children)},u={inlineCode:"code",wrapper:function(e){var t=e.children;return n.a.createElement(n.a.Fragment,{},t)}},d=n.a.forwardRef((function(e,t){var r=e.components,a=e.mdxType,o=e.originalType,l=e.parentName,b=s(e,["components","mdxType","originalType","parentName"]),c=p(r),d=a,h=c["".concat(l,".").concat(d)]||c[d]||u[d]||o;return r?n.a.createElement(h,i(i({ref:t},b),{},{components:r})):n.a.createElement(h,i({ref:t},b))}));function h(e,t){var r=arguments,a=t&&t.mdxType;if("string"==typeof e||a){var o=r.length,l=new Array(o);l[0]=d;var i={};for(var s in t)hasOwnProperty.call(t,s)&&(i[s]=t[s]);i.originalType=e,i.mdxType="string"==typeof e?e:a,l[1]=i;for(var b=2;b=0||(n[r]=e[r]);return n}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(a=0;a=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(n[r]=e[r])}return n}var b=n.a.createContext({}),p=function(e){var t=n.a.useContext(b),r=t;return e&&(r="function"==typeof e?e(t):i(i({},t),e)),r},c=function(e){var t=p(e.components);return n.a.createElement(b.Provider,{value:t},e.children)},u={inlineCode:"code",wrapper:function(e){var t=e.children;return n.a.createElement(n.a.Fragment,{},t)}},d=n.a.forwardRef((function(e,t){var r=e.components,a=e.mdxType,o=e.originalType,l=e.parentName,b=s(e,["components","mdxType","originalType","parentName"]),c=p(r),d=a,h=c["".concat(l,".").concat(d)]||c[d]||u[d]||o;return r?n.a.createElement(h,i(i({ref:t},b),{},{components:r})):n.a.createElement(h,i({ref:t},b))}));function h(e,t){var r=arguments,a=t&&t.mdxType;if("string"==typeof e||a){var o=r.length,l=new Array(o);l[0]=d;var i={};for(var s in t)hasOwnProperty.call(t,s)&&(i[s]=t[s]);i.originalType=e,i.mdxType="string"==typeof e?e:a,l[1]=i;for(var b=2;b=0||(i[n]=e[n]);return i}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(a=0;a=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(i[n]=e[n])}return i}var l=i.a.createContext({}),p=function(e){var t=i.a.useContext(l),n=t;return e&&(n="function"==typeof e?e(t):s(s({},t),e)),n},b=function(e){var t=p(e.components);return i.a.createElement(l.Provider,{value:t},e.children)},u={inlineCode:"code",wrapper:function(e){var t=e.children;return i.a.createElement(i.a.Fragment,{},t)}},m=i.a.forwardRef((function(e,t){var n=e.components,a=e.mdxType,o=e.originalType,r=e.parentName,l=c(e,["components","mdxType","originalType","parentName"]),b=p(n),m=a,d=b["".concat(r,".").concat(m)]||b[m]||u[m]||o;return n?i.a.createElement(d,s(s({ref:t},l),{},{components:n})):i.a.createElement(d,s({ref:t},l))}));function d(e,t){var n=arguments,a=t&&t.mdxType;if("string"==typeof e||a){var o=n.length,r=new Array(o);r[0]=m;var s={};for(var c in t)hasOwnProperty.call(t,c)&&(s[c]=t[c]);s.originalType=e,s.mdxType="string"==typeof e?e:a,r[1]=s;for(var l=2;l=0||(i[n]=e[n]);return i}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(a=0;a=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(i[n]=e[n])}return i}var s=i.a.createContext({}),b=function(e){var t=i.a.useContext(s),n=t;return e&&(n="function"==typeof e?e(t):p(p({},t),e)),n},l=function(e){var t=b(e.components);return i.a.createElement(s.Provider,{value:t},e.children)},u={inlineCode:"code",wrapper:function(e){var t=e.children;return i.a.createElement(i.a.Fragment,{},t)}},m=i.a.forwardRef((function(e,t){var n=e.components,a=e.mdxType,o=e.originalType,r=e.parentName,s=c(e,["components","mdxType","originalType","parentName"]),l=b(n),m=a,d=l["".concat(r,".").concat(m)]||l[m]||u[m]||o;return n?i.a.createElement(d,p(p({ref:t},s),{},{components:n})):i.a.createElement(d,p({ref:t},s))}));function d(e,t){var n=arguments,a=t&&t.mdxType;if("string"==typeof e||a){var o=n.length,r=new Array(o);r[0]=m;var p={};for(var c in t)hasOwnProperty.call(t,c)&&(p[c]=t[c]);p.originalType=e,p.mdxType="string"==typeof e?e:a,r[1]=p;for(var s=2;s=0||(a[n]=e[n]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(a[n]=e[n])}return a}var p=a.a.createContext({}),s=function(e){var t=a.a.useContext(p),n=t;return e&&(n="function"==typeof e?e(t):c(c({},t),e)),n},u=function(e){var t=s(e.components);return a.a.createElement(p.Provider,{value:t},e.children)},m={inlineCode:"code",wrapper:function(e){var t=e.children;return a.a.createElement(a.a.Fragment,{},t)}},d=a.a.forwardRef((function(e,t){var n=e.components,r=e.mdxType,o=e.originalType,i=e.parentName,p=l(e,["components","mdxType","originalType","parentName"]),u=s(n),d=r,f=u["".concat(i,".").concat(d)]||u[d]||m[d]||o;return n?a.a.createElement(f,c(c({ref:t},p),{},{components:n})):a.a.createElement(f,c({ref:t},p))}));function f(e,t){var n=arguments,r=t&&t.mdxType;if("string"==typeof e||r){var o=n.length,i=new Array(o);i[0]=d;var c={};for(var l in t)hasOwnProperty.call(t,l)&&(c[l]=t[l]);c.originalType=e,c.mdxType="string"==typeof e?e:r,i[1]=c;for(var p=2;p=0||(a[n]=e[n]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(a[n]=e[n])}return a}var p=a.a.createContext({}),s=function(e){var t=a.a.useContext(p),n=t;return e&&(n="function"==typeof e?e(t):c(c({},t),e)),n},u=function(e){var t=s(e.components);return a.a.createElement(p.Provider,{value:t},e.children)},m={inlineCode:"code",wrapper:function(e){var t=e.children;return a.a.createElement(a.a.Fragment,{},t)}},d=a.a.forwardRef((function(e,t){var n=e.components,r=e.mdxType,o=e.originalType,i=e.parentName,p=l(e,["components","mdxType","originalType","parentName"]),u=s(n),d=r,f=u["".concat(i,".").concat(d)]||u[d]||m[d]||o;return n?a.a.createElement(f,c(c({ref:t},p),{},{components:n})):a.a.createElement(f,c({ref:t},p))}));function f(e,t){var n=arguments,r=t&&t.mdxType;if("string"==typeof e||r){var o=n.length,i=new Array(o);i[0]=d;var c={};for(var l in t)hasOwnProperty.call(t,l)&&(c[l]=t[l]);c.originalType=e,c.mdxType="string"==typeof e?e:r,i[1]=c;for(var p=2;p=0||(n[r]=e[r]);return n}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(a=0;a=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(n[r]=e[r])}return n}var p=n.a.createContext({}),s=function(e){var t=n.a.useContext(p),r=t;return e&&(r="function"==typeof e?e(t):c(c({},t),e)),r},u=function(e){var t=s(e.components);return n.a.createElement(p.Provider,{value:t},e.children)},d={inlineCode:"code",wrapper:function(e){var t=e.children;return n.a.createElement(n.a.Fragment,{},t)}},m=n.a.forwardRef((function(e,t){var r=e.components,a=e.mdxType,i=e.originalType,o=e.parentName,p=l(e,["components","mdxType","originalType","parentName"]),u=s(r),m=a,b=u["".concat(o,".").concat(m)]||u[m]||d[m]||i;return r?n.a.createElement(b,c(c({ref:t},p),{},{components:r})):n.a.createElement(b,c({ref:t},p))}));function b(e,t){var r=arguments,a=t&&t.mdxType;if("string"==typeof e||a){var i=r.length,o=new Array(i);o[0]=m;var c={};for(var l in t)hasOwnProperty.call(t,l)&&(c[l]=t[l]);c.originalType=e,c.mdxType="string"==typeof e?e:a,o[1]=c;for(var p=2;p=0||(n[r]=e[r]);return n}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(a=0;a=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(n[r]=e[r])}return n}var l=n.a.createContext({}),s=function(e){var t=n.a.useContext(l),r=t;return e&&(r="function"==typeof e?e(t):c(c({},t),e)),r},u=function(e){var t=s(e.components);return n.a.createElement(l.Provider,{value:t},e.children)},d={inlineCode:"code",wrapper:function(e){var t=e.children;return n.a.createElement(n.a.Fragment,{},t)}},m=n.a.forwardRef((function(e,t){var r=e.components,a=e.mdxType,i=e.originalType,o=e.parentName,l=p(e,["components","mdxType","originalType","parentName"]),u=s(r),m=a,b=u["".concat(o,".").concat(m)]||u[m]||d[m]||i;return r?n.a.createElement(b,c(c({ref:t},l),{},{components:r})):n.a.createElement(b,c({ref:t},l))}));function b(e,t){var r=arguments,a=t&&t.mdxType;if("string"==typeof e||a){var i=r.length,o=new Array(i);o[0]=m;var c={};for(var p in t)hasOwnProperty.call(t,p)&&(c[p]=t[p]);c.originalType=e,c.mdxType="string"==typeof e?e:a,o[1]=c;for(var l=2;l=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var p=o.a.createContext({}),s=function(e){var t=o.a.useContext(p),n=t;return e&&(n="function"==typeof e?e(t):c(c({},t),e)),n},l=function(e){var t=s(e.components);return o.a.createElement(p.Provider,{value:t},e.children)},f={inlineCode:"code",wrapper:function(e){var t=e.children;return o.a.createElement(o.a.Fragment,{},t)}},d=o.a.forwardRef((function(e,t){var n=e.components,r=e.mdxType,i=e.originalType,a=e.parentName,p=u(e,["components","mdxType","originalType","parentName"]),l=s(n),d=r,m=l["".concat(a,".").concat(d)]||l[d]||f[d]||i;return n?o.a.createElement(m,c(c({ref:t},p),{},{components:n})):o.a.createElement(m,c({ref:t},p))}));function m(e,t){var n=arguments,r=t&&t.mdxType;if("string"==typeof e||r){var i=n.length,a=new Array(i);a[0]=d;var c={};for(var u in t)hasOwnProperty.call(t,u)&&(c[u]=t[u]);c.originalType=e,c.mdxType="string"==typeof e?e:r,a[1]=c;for(var p=2;p=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var p=o.a.createContext({}),s=function(e){var t=o.a.useContext(p),n=t;return e&&(n="function"==typeof e?e(t):c(c({},t),e)),n},l=function(e){var t=s(e.components);return o.a.createElement(p.Provider,{value:t},e.children)},f={inlineCode:"code",wrapper:function(e){var t=e.children;return o.a.createElement(o.a.Fragment,{},t)}},d=o.a.forwardRef((function(e,t){var n=e.components,r=e.mdxType,i=e.originalType,a=e.parentName,p=u(e,["components","mdxType","originalType","parentName"]),l=s(n),d=r,m=l["".concat(a,".").concat(d)]||l[d]||f[d]||i;return n?o.a.createElement(m,c(c({ref:t},p),{},{components:n})):o.a.createElement(m,c({ref:t},p))}));function m(e,t){var n=arguments,r=t&&t.mdxType;if("string"==typeof e||r){var i=n.length,a=new Array(i);a[0]=d;var c={};for(var u in t)hasOwnProperty.call(t,u)&&(c[u]=t[u]);c.originalType=e,c.mdxType="string"==typeof e?e:r,a[1]=c;for(var p=2;p>>"'}),"from h2o_wave import site\npage = site['/hello']\n")),Object(o.b)("h3",{id:"grab-a-reference-to-our-card"},"Grab a reference to our card"),Object(o.b)("pre",null,Object(o.b)("code",Object(n.a)({parentName:"pre"},{className:"language-py",metastring:'title=">>>"',title:'">>>"'}),"quote = page['quote']\n")),Object(o.b)("h3",{id:"change-the-title"},"Change the title"),Object(o.b)("pre",null,Object(o.b)("code",Object(n.a)({parentName:"pre"},{className:"language-py",metastring:'title=">>>"',title:'">>>"'}),"quote.title = 'Hello Again!'\npage.save()\n")),Object(o.b)("p",null,Object(o.b)("img",{alt:"Hello World 2",src:a(516).default})),Object(o.b)("h3",{id:"change-the-content"},"Change the content"),Object(o.b)("pre",null,Object(o.b)("code",Object(n.a)({parentName:"pre"},{className:"language-py",metastring:'title=">>>"',title:'">>>"'}),'quote.content = "D\'oh! - *Homer Simpson*"\npage.save()\n')),Object(o.b)("p",null,Object(o.b)("img",{alt:"Hello World 3",src:a(517).default})),Object(o.b)("h3",{id:"quit-your-repl"},"Quit your REPL"),Object(o.b)("pre",null,Object(o.b)("code",Object(n.a)({parentName:"pre"},{className:"language-py",metastring:'title=">>>"',title:'">>>"'}),"quit()\n")),Object(o.b)("h2",{id:"summary"},"Summary"),Object(o.b)("p",null,"What we just did - add content from one program and make edits to it from another - illustrates another important aspect of Wave's programming model: ",Object(o.b)("em",{parentName:"p"},"The Wave server retains content"),". Your ",Object(o.b)("inlineCode",{parentName:"p"},"hello_world.py")," program did its thing and exited. So did your REPL. But your content was retained for the viewing pleasure of future visitors to ",Object(o.b)("inlineCode",{parentName:"p"},"/hello"),". "),Object(o.b)("p",null,"Next, we'll take the principles we learned from this tutorial and apply it towards a supposedly spirited folk song involving arithmetic progressions."))}b.isMDXComponent=!0},292:function(e,t,a){"use strict";a.d(t,"a",(function(){return b})),a.d(t,"b",(function(){return h}));var n=a(0),r=a.n(n);function o(e,t,a){return t in e?Object.defineProperty(e,t,{value:a,enumerable:!0,configurable:!0,writable:!0}):e[t]=a,e}function c(e,t){var a=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),a.push.apply(a,n)}return a}function l(e){for(var t=1;t=0||(r[a]=e[a]);return r}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,a)&&(r[a]=e[a])}return r}var p=r.a.createContext({}),s=function(e){var t=r.a.useContext(p),a=t;return e&&(a="function"==typeof e?e(t):l(l({},t),e)),a},b=function(e){var t=s(e.components);return r.a.createElement(p.Provider,{value:t},e.children)},d={inlineCode:"code",wrapper:function(e){var t=e.children;return r.a.createElement(r.a.Fragment,{},t)}},u=r.a.forwardRef((function(e,t){var a=e.components,n=e.mdxType,o=e.originalType,c=e.parentName,p=i(e,["components","mdxType","originalType","parentName"]),b=s(a),u=n,h=b["".concat(c,".").concat(u)]||b[u]||d[u]||o;return a?r.a.createElement(h,l(l({ref:t},p),{},{components:a})):r.a.createElement(h,l({ref:t},p))}));function h(e,t){var a=arguments,n=t&&t.mdxType;if("string"==typeof e||n){var o=a.length,c=new Array(o);c[0]=u;var l={};for(var i in t)hasOwnProperty.call(t,i)&&(l[i]=t[i]);l.originalType=e,l.mdxType="string"==typeof e?e:n,c[1]=l;for(var p=2;p>>"'}),"from h2o_wave import site\npage = site['/hello']\n")),Object(o.b)("h3",{id:"grab-a-reference-to-our-card"},"Grab a reference to our card"),Object(o.b)("pre",null,Object(o.b)("code",Object(n.a)({parentName:"pre"},{className:"language-py",metastring:'title=">>>"',title:'">>>"'}),"quote = page['quote']\n")),Object(o.b)("h3",{id:"change-the-title"},"Change the title"),Object(o.b)("pre",null,Object(o.b)("code",Object(n.a)({parentName:"pre"},{className:"language-py",metastring:'title=">>>"',title:'">>>"'}),"quote.title = 'Hello Again!'\npage.save()\n")),Object(o.b)("p",null,Object(o.b)("img",{alt:"Hello World 2",src:a(508).default})),Object(o.b)("h3",{id:"change-the-content"},"Change the content"),Object(o.b)("pre",null,Object(o.b)("code",Object(n.a)({parentName:"pre"},{className:"language-py",metastring:'title=">>>"',title:'">>>"'}),'quote.content = "D\'oh! - *Homer Simpson*"\npage.save()\n')),Object(o.b)("p",null,Object(o.b)("img",{alt:"Hello World 3",src:a(509).default})),Object(o.b)("h3",{id:"quit-your-repl"},"Quit your REPL"),Object(o.b)("pre",null,Object(o.b)("code",Object(n.a)({parentName:"pre"},{className:"language-py",metastring:'title=">>>"',title:'">>>"'}),"quit()\n")),Object(o.b)("h2",{id:"summary"},"Summary"),Object(o.b)("p",null,"What we just did - add content from one program and make edits to it from another - illustrates another important aspect of Wave's programming model: ",Object(o.b)("em",{parentName:"p"},"The Wave server retains content"),". Your ",Object(o.b)("inlineCode",{parentName:"p"},"hello_world.py")," program did its thing and exited. So did your REPL. But your content was retained for the viewing pleasure of future visitors to ",Object(o.b)("inlineCode",{parentName:"p"},"/hello"),". "),Object(o.b)("p",null,"Next, we'll take the principles we learned from this tutorial and apply it towards a supposedly spirited folk song involving arithmetic progressions."))}b.isMDXComponent=!0},290:function(e,t,a){"use strict";a.d(t,"a",(function(){return b})),a.d(t,"b",(function(){return h}));var n=a(0),r=a.n(n);function o(e,t,a){return t in e?Object.defineProperty(e,t,{value:a,enumerable:!0,configurable:!0,writable:!0}):e[t]=a,e}function c(e,t){var a=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),a.push.apply(a,n)}return a}function l(e){for(var t=1;t=0||(r[a]=e[a]);return r}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,a)&&(r[a]=e[a])}return r}var p=r.a.createContext({}),s=function(e){var t=r.a.useContext(p),a=t;return e&&(a="function"==typeof e?e(t):l(l({},t),e)),a},b=function(e){var t=s(e.components);return r.a.createElement(p.Provider,{value:t},e.children)},d={inlineCode:"code",wrapper:function(e){var t=e.children;return r.a.createElement(r.a.Fragment,{},t)}},u=r.a.forwardRef((function(e,t){var a=e.components,n=e.mdxType,o=e.originalType,c=e.parentName,p=i(e,["components","mdxType","originalType","parentName"]),b=s(a),u=n,h=b["".concat(c,".").concat(u)]||b[u]||d[u]||o;return a?r.a.createElement(h,l(l({ref:t},p),{},{components:a})):r.a.createElement(h,l({ref:t},p))}));function h(e,t){var a=arguments,n=t&&t.mdxType;if("string"==typeof e||n){var o=a.length,c=new Array(o);c[0]=u;var l={};for(var i in t)hasOwnProperty.call(t,i)&&(l[i]=t[i]);l.originalType=e,l.mdxType="string"==typeof e?e:n,c[1]=l;for(var p=2;p=0||(n[r]=e[r]);return n}(e,o);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(t=0;t=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(n[r]=e[r])}return n}var b=n.a.createContext({}),s=function(e){var o=n.a.useContext(b),r=o;return e&&(r="function"==typeof e?e(o):i(i({},o),e)),r},m=function(e){var o=s(e.components);return n.a.createElement(b.Provider,{value:o},e.children)},u={inlineCode:"code",wrapper:function(e){var o=e.children;return n.a.createElement(n.a.Fragment,{},o)}},p=n.a.forwardRef((function(e,o){var r=e.components,t=e.mdxType,a=e.originalType,c=e.parentName,b=l(e,["components","mdxType","originalType","parentName"]),m=s(r),p=t,d=m["".concat(c,".").concat(p)]||m[p]||u[p]||a;return r?n.a.createElement(d,i(i({ref:o},b),{},{components:r})):n.a.createElement(d,i({ref:o},b))}));function d(e,o){var r=arguments,t=o&&o.mdxType;if("string"==typeof e||t){var a=r.length,c=new Array(a);c[0]=p;var i={};for(var l in o)hasOwnProperty.call(o,l)&&(i[l]=o[l]);i.originalType=e,i.mdxType="string"==typeof e?e:t,c[1]=i;for(var b=2;b=0||(n[r]=e[r]);return n}(e,o);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(t=0;t=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(n[r]=e[r])}return n}var b=n.a.createContext({}),s=function(e){var o=n.a.useContext(b),r=o;return e&&(r="function"==typeof e?e(o):i(i({},o),e)),r},m=function(e){var o=s(e.components);return n.a.createElement(b.Provider,{value:o},e.children)},u={inlineCode:"code",wrapper:function(e){var o=e.children;return n.a.createElement(n.a.Fragment,{},o)}},p=n.a.forwardRef((function(e,o){var r=e.components,t=e.mdxType,a=e.originalType,c=e.parentName,b=l(e,["components","mdxType","originalType","parentName"]),m=s(r),p=t,d=m["".concat(c,".").concat(p)]||m[p]||u[p]||a;return r?n.a.createElement(d,i(i({ref:o},b),{},{components:r})):n.a.createElement(d,i({ref:o},b))}));function d(e,o){var r=arguments,t=o&&o.mdxType;if("string"==typeof e||t){var a=r.length,c=new Array(a);c[0]=p;var i={};for(var l in o)hasOwnProperty.call(o,l)&&(i[l]=o[l]);i.originalType=e,i.mdxType="string"==typeof e?e:t,c[1]=i;for(var b=2;b=0||(n[i]=e[i]);return n}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,i)&&(n[i]=e[i])}return n}var s=n.a.createContext({}),R=function(e){var t=n.a.useContext(s),i=t;return e&&(i="function"==typeof e?e(t):d(d({},t),e)),i},l=function(e){var t=R(e.components);return n.a.createElement(s.Provider,{value:t},e.children)},f={inlineCode:"code",wrapper:function(e){var t=e.children;return n.a.createElement(n.a.Fragment,{},t)}},u=n.a.forwardRef((function(e,t){var i=e.components,r=e.mdxType,a=e.originalType,o=e.parentName,s=c(e,["components","mdxType","originalType","parentName"]),l=R(i),u=r,m=l["".concat(o,".").concat(u)]||l[u]||f[u]||a;return i?n.a.createElement(m,d(d({ref:t},s),{},{components:i})):n.a.createElement(m,d({ref:t},s))}));function m(e,t){var i=arguments,r=t&&t.mdxType;if("string"==typeof e||r){var a=i.length,o=new Array(a);o[0]=u;var d={};for(var c in t)hasOwnProperty.call(t,c)&&(d[c]=t[c]);d.originalType=e,d.mdxType="string"==typeof e?e:r,o[1]=d;for(var s=2;s=0||(n[i]=e[i]);return n}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,i)&&(n[i]=e[i])}return n}var s=n.a.createContext({}),R=function(e){var t=n.a.useContext(s),i=t;return e&&(i="function"==typeof e?e(t):d(d({},t),e)),i},l=function(e){var t=R(e.components);return n.a.createElement(s.Provider,{value:t},e.children)},f={inlineCode:"code",wrapper:function(e){var t=e.children;return n.a.createElement(n.a.Fragment,{},t)}},m=n.a.forwardRef((function(e,t){var i=e.components,r=e.mdxType,a=e.originalType,o=e.parentName,s=c(e,["components","mdxType","originalType","parentName"]),l=R(i),m=r,u=l["".concat(o,".").concat(m)]||l[m]||f[m]||a;return i?n.a.createElement(u,d(d({ref:t},s),{},{components:i})):n.a.createElement(u,d({ref:t},s))}));function u(e,t){var i=arguments,r=t&&t.mdxType;if("string"==typeof e||r){var a=i.length,o=new Array(a);o[0]=m;var d={};for(var c in t)hasOwnProperty.call(t,c)&&(d[c]=t[c]);d.originalType=e,d.mdxType="string"==typeof e?e:r,o[1]=d;for(var s=2;s Hello from H2O Wave | H2O Wave - - - - - - + + + + + +
      -

      Realtime Web Apps and Dashboards for Python

      From the makers of H2O

      Get Started

      Know Python?

      No HTML, CSS, Javascript skills required. Build rich, interactive web apps using pure Python.

      Realtime Sync

      Broadcast live information, visualizations and graphics using Wave's low-latency realtime server.

      Collaborative Content

      Instant control over every connected web browser using a simple and intuitive programming model.

      Develop Quickly

      Preview your app live as you code. Dramatically reduce the time and effort to build web apps.

      Deploy Instantly

      Easily share your apps with end-users, get feedback, improve and iterate.

      Run Anywhere

      ~10MB static executables for Linux, Windows, OSX, BSD, Solaris on AMD64, 386, ARM, PPC. Run it on a RPi Zero for great good!

      - - - - - - +

      Realtime Web Apps and Dashboards for Python

      From the makers of H2O

      Get Started

      Know Python?

      No HTML, CSS, Javascript skills required. Build rich, interactive web apps using pure Python.

      Realtime Sync

      Broadcast live information, visualizations and graphics using Wave's low-latency realtime server.

      Collaborative Content

      Instant control over every connected web browser using a simple and intuitive programming model.

      Develop Quickly

      Preview your app live as you code. Dramatically reduce the time and effort to build web apps.

      Deploy Instantly

      Easily share your apps with end-users, get feedback, improve and iterate.

      Run Anywhere

      ~10MB static executables for Linux, Windows, OSX, BSD, Solaris on AMD64, 386, ARM, PPC. Run it on a RPi Zero for great good!

      + + + + + + \ No newline at end of file diff --git a/docs/main.0720c80c.js b/docs/main.0720c80c.js new file mode 100644 index 0000000000..f684d772c2 --- /dev/null +++ b/docs/main.0720c80c.js @@ -0,0 +1,2 @@ +/*! For license information please see main.0720c80c.js.LICENSE.txt */ +(window.webpackJsonp=window.webpackJsonp||[]).push([[235],[function(e,t,n){"use strict";e.exports=n(30)},function(e,t,n){"use strict";n.d(t,"a",(function(){return b})),n.d(t,"b",(function(){return w})),n.d(t,"c",(function(){return S})),n.d(t,"d",(function(){return C})),n.d(t,"e",(function(){return g})),n.d(t,"f",(function(){return F})),n.d(t,"g",(function(){return L})),n.d(t,"h",(function(){return v})),n.d(t,"i",(function(){return E})),n.d(t,"j",(function(){return O})),n.d(t,"k",(function(){return M})),n.d(t,"l",(function(){return z})),n.d(t,"m",(function(){return $})),n.d(t,"n",(function(){return U})),n.d(t,"o",(function(){return D}));var a=n(3),o=n(0),r=n.n(o),i=(n(7),n(5)),l=n(17),s=n(4),c=n(2),u=n(18),p=n.n(u),d=(n(22),n(6)),f=n(27),m=n.n(f),h=function(e){var t=Object(l.a)();return t.displayName=e,t}("Router-History"),v=function(e){var t=Object(l.a)();return t.displayName=e,t}("Router"),g=function(e){function t(t){var n;return(n=e.call(this,t)||this).state={location:t.history.location},n._isMounted=!1,n._pendingLocation=null,t.staticContext||(n.unlisten=t.history.listen((function(e){n._isMounted?n.setState({location:e}):n._pendingLocation=e}))),n}Object(a.a)(t,e),t.computeRootMatch=function(e){return{path:"/",url:"/",params:{},isExact:"/"===e}};var n=t.prototype;return n.componentDidMount=function(){this._isMounted=!0,this._pendingLocation&&this.setState({location:this._pendingLocation})},n.componentWillUnmount=function(){this.unlisten&&this.unlisten()},n.render=function(){return r.a.createElement(v.Provider,{value:{history:this.props.history,location:this.state.location,match:t.computeRootMatch(this.state.location.pathname),staticContext:this.props.staticContext}},r.a.createElement(h.Provider,{children:this.props.children||null,value:this.props.history}))},t}(r.a.Component);var b=function(e){function t(){for(var t,n=arguments.length,a=new Array(n),o=0;o=0;d--){var f=i[d];"."===f?r(i,d):".."===f?(r(i,d),p++):p&&(r(i,d),p--)}if(!c)for(;p--;p)i.unshift("..");!c||""===i[0]||i[0]&&o(i[0])||i.unshift("");var m=i.join("/");return n&&"/"!==m.substr(-1)&&(m+="/"),m};function l(e){return e.valueOf?e.valueOf():Object.prototype.valueOf.call(e)}var s=function e(t,n){if(t===n)return!0;if(null==t||null==n)return!1;if(Array.isArray(t))return Array.isArray(n)&&t.length===n.length&&t.every((function(t,a){return e(t,n[a])}));if("object"==typeof t||"object"==typeof n){var a=l(t),o=l(n);return a!==t||o!==n?e(a,o):Object.keys(Object.assign({},t,n)).every((function(a){return e(t[a],n[a])}))}return!1},c=n(4);function u(e){return"/"===e.charAt(0)?e:"/"+e}function p(e){return"/"===e.charAt(0)?e.substr(1):e}function d(e,t){return function(e,t){return 0===e.toLowerCase().indexOf(t.toLowerCase())&&-1!=="/?#".indexOf(e.charAt(t.length))}(e,t)?e.substr(t.length):e}function f(e){return"/"===e.charAt(e.length-1)?e.slice(0,-1):e}function m(e){var t=e.pathname,n=e.search,a=e.hash,o=t||"/";return n&&"?"!==n&&(o+="?"===n.charAt(0)?n:"?"+n),a&&"#"!==a&&(o+="#"===a.charAt(0)?a:"#"+a),o}function h(e,t,n,o){var r;"string"==typeof e?(r=function(e){var t=e||"/",n="",a="",o=t.indexOf("#");-1!==o&&(a=t.substr(o),t=t.substr(0,o));var r=t.indexOf("?");return-1!==r&&(n=t.substr(r),t=t.substr(0,r)),{pathname:t,search:"?"===n?"":n,hash:"#"===a?"":a}}(e)).state=t:(void 0===(r=Object(a.a)({},e)).pathname&&(r.pathname=""),r.search?"?"!==r.search.charAt(0)&&(r.search="?"+r.search):r.search="",r.hash?"#"!==r.hash.charAt(0)&&(r.hash="#"+r.hash):r.hash="",void 0!==t&&void 0===r.state&&(r.state=t));try{r.pathname=decodeURI(r.pathname)}catch(l){throw l instanceof URIError?new URIError('Pathname "'+r.pathname+'" could not be decoded. This is likely caused by an invalid percent-encoding.'):l}return n&&(r.key=n),o?r.pathname?"/"!==r.pathname.charAt(0)&&(r.pathname=i(r.pathname,o.pathname)):r.pathname=o.pathname:r.pathname||(r.pathname="/"),r}function v(e,t){return e.pathname===t.pathname&&e.search===t.search&&e.hash===t.hash&&e.key===t.key&&s(e.state,t.state)}function g(){var e=null;var t=[];return{setPrompt:function(t){return e=t,function(){e===t&&(e=null)}},confirmTransitionTo:function(t,n,a,o){if(null!=e){var r="function"==typeof e?e(t,n):e;"string"==typeof r?"function"==typeof a?a(r,o):o(!0):o(!1!==r)}else o(!0)},appendListener:function(e){var n=!0;function a(){n&&e.apply(void 0,arguments)}return t.push(a),function(){n=!1,t=t.filter((function(e){return e!==a}))}},notifyListeners:function(){for(var e=arguments.length,n=new Array(e),a=0;at?n.splice(t,n.length-t,o):n.push(o),p({action:a,location:o,index:t,entries:n})}}))},replace:function(e,t){var a="REPLACE",o=h(e,t,d(),w.location);u.confirmTransitionTo(o,a,n,(function(e){e&&(w.entries[w.index]=o,p({action:a,location:o}))}))},go:x,goBack:function(){x(-1)},goForward:function(){x(1)},canGo:function(e){var t=w.index+e;return t>=0&&t=0||(o[n]=e[n]);return o}n.d(t,"a",(function(){return a}))},function(e,t,n){e.exports=n(34)()},function(e,t,n){"use strict";n.d(t,"a",(function(){return l})),n.d(t,"b",(function(){return s}));var a=n(1),o=n(2),r=n(0),i=n.n(r);function l(e,t,n){return void 0===n&&(n=[]),e.some((function(e){var o=e.path?Object(a.j)(t,e):n.length?n[n.length-1].match:a.e.computeRootMatch(t);return o&&(n.push({route:e,match:o}),e.routes&&l(e.routes,t,n)),o})),n}function s(e,t,n){return void 0===t&&(t={}),void 0===n&&(n={}),e?i.a.createElement(a.g,n,e.map((function(e,n){return i.a.createElement(a.d,{key:e.key||n,path:e.path,exact:e.exact,strict:e.strict,render:function(n){return e.render?e.render(Object(o.a)({},n,{},t,{route:e})):i.a.createElement(e.component,Object(o.a)({},n,t,{route:e}))}})}))):null}},function(e,t,n){"use strict";n.r(t),t.default={title:"H2O Wave",tagline:"From the makers of H2O",url:"https://h2oai.github.io/wave/",baseUrl:"/wave/",onBrokenLinks:"throw",favicon:"img/favicon.ico",organizationName:"h2oai",projectName:"wave",themeConfig:{prism:{additionalLanguages:["toml"]},navbar:{title:"H2O Wave",logo:{alt:"H2O Wave",src:"img/logo.svg"},items:[{to:"docs/examples",label:"Gallery",position:"left"},{to:"docs/getting-started",label:"Get Started",position:"left"},{to:"docs/guide",label:"Guide",position:"left"},{to:"docs/enterprise",label:"Enterprise",position:"left"},{to:"docs/api/index",label:"API",position:"left"},{to:"blog",label:"Blog",position:"left"},{to:"https://github.com/h2oai/wave/releases/latest",label:"Download",position:"right"},{href:"https://github.com/h2oai/wave",label:"GitHub",position:"right"}],hideOnScroll:!1},footer:{style:"dark",links:[{title:"Learn",items:[{label:"Gallery",to:"docs/examples"},{label:"Get Started",to:"docs/getting-started",activeBasePath:"docs"},{label:"Guide",to:"docs/guide"},{label:"Enterprise",to:"docs/enterprise"},{label:"API",to:"docs/api/index"}]},{title:"Community",items:[{label:"Stack Overflow",href:"https://stackoverflow.com/questions/tagged/h2o-wave"},{label:"Twitter",href:"https://twitter.com/h2oai"}]},{title:"More",items:[{label:"Download",href:"https://github.com/h2oai/wave/releases/latest"},{label:"GitHub",href:"https://github.com/h2oai/wave"}]}],copyright:"Copyright \xa9 2020 H2O.ai, Inc."},colorMode:{defaultMode:"light",disableSwitch:!1,respectPrefersColorScheme:!1,switchConfig:{darkIcon:"\ud83c\udf1c",darkIconStyle:{},lightIcon:"\ud83c\udf1e",lightIconStyle:{}}},metadatas:[]},presets:[["@docusaurus/preset-classic",{docs:{sidebarPath:"/home/elp/git/wave/website/sidebars.js",editUrl:"https://github.com/h2oai/wave/edit/master/website/"},blog:{showReadingTime:!0,editUrl:"https://github.com/facebook/docusaurus/edit/master/website/blog/"},theme:{customCss:"/home/elp/git/wave/website/src/css/custom.css"}}]],onDuplicateRoutes:"warn",customFields:{},plugins:[],themes:[],titleDelimiter:"|"}},function(e,t,n){"use strict";const a=!("undefined"==typeof window||!window.document||!window.document.createElement),o={canUseDOM:a,canUseEventListeners:a&&!(!window.addEventListener&&!window.attachEvent),canUseIntersectionObserver:a&&"IntersectionObserver"in window,canUseViewport:a&&!!window.screen};t.a=o},function(e){e.exports=JSON.parse('{"/wave/-1a9":{"component":"c4f5d8e4","config":"5e9f5e1a"},"/wave/blog-22a":{"component":"a6aa9e1f","items":[{"content":"e7ad456d"}],"metadata":"0eb58673"},"/wave/blog/release-0.9.0-282":{"component":"ccc49370","content":"08f25880"},"/wave/blog/tags-f9b":{"component":"01a85c17","tags":"121dd878"},"/wave/blog/tags/release-4a7":{"component":"6875c492","items":[{"content":"e7ad456d"}],"metadata":"2dd92585"},"/wave/docs-2e3":{"component":"1be78505","versionMetadata":"935f2afb"},"/wave/docs/_start_q-1b6":{"component":"17896441","content":"15a78352"},"/wave/docs/api/autoreload-136":{"component":"17896441","content":"28283d16"},"/wave/docs/api/cli-59a":{"component":"17896441","content":"26a8c297"},"/wave/docs/api/core-506":{"component":"17896441","content":"36fe3260"},"/wave/docs/api/db-270":{"component":"17896441","content":"a50fe136"},"/wave/docs/api/graphics-576":{"component":"17896441","content":"7f8f4b62"},"/wave/docs/api/index-d57":{"component":"17896441","content":"5e8c322a"},"/wave/docs/api/server-e76":{"component":"17896441","content":"296a8b4f"},"/wave/docs/api/test-5bd":{"component":"17896441","content":"430c4fb3"},"/wave/docs/api/types-82d":{"component":"17896441","content":"b999a6e4"},"/wave/docs/api/ui-1df":{"component":"17896441","content":"f151ab1a"},"/wave/docs/apps-b2f":{"component":"17896441","content":"d3f54ca5"},"/wave/docs/architecture-1aa":{"component":"17896441","content":"5281b7a2"},"/wave/docs/arguments-dd1":{"component":"17896441","content":"65b8ef03"},"/wave/docs/background-21e":{"component":"17896441","content":"b4d5475e"},"/wave/docs/backup-06a":{"component":"17896441","content":"1b0f8c91"},"/wave/docs/browser-testing-85e":{"component":"17896441","content":"3713dbfc"},"/wave/docs/buffers-70a":{"component":"17896441","content":"649e08dd"},"/wave/docs/cards-4c7":{"component":"17896441","content":"4f6dabb0"},"/wave/docs/change-log-095":{"component":"17896441","content":"3b64911a"},"/wave/docs/cli-067":{"component":"17896441","content":"1a20bc57"},"/wave/docs/components-2bb":{"component":"17896441","content":"1f7c204c"},"/wave/docs/configuration-e5a":{"component":"17896441","content":"9ed00105"},"/wave/docs/contributing-b63":{"component":"17896441","content":"4d54d076"},"/wave/docs/deployment-b65":{"component":"17896441","content":"a3713279"},"/wave/docs/development-e3f":{"component":"17896441","content":"8f030830"},"/wave/docs/enterprise/-197":{"component":"17896441","content":"ca1ac85d"},"/wave/docs/enterprise/basic-concepts-9ca":{"component":"17896441","content":"6ee3bac7"},"/wave/docs/enterprise/developer-guide-f02":{"component":"17896441","content":"1375ade1"},"/wave/docs/examples-247":{"component":"17896441","content":"bf614533"},"/wave/docs/examples/background-914":{"component":"17896441","content":"3da9dc01"},"/wave/docs/examples/background-executor-bca":{"component":"17896441","content":"2e8e6962"},"/wave/docs/examples/breadcrumbs-42a":{"component":"17896441","content":"c07c3c71"},"/wave/docs/examples/button-d1c":{"component":"17896441","content":"879fc8a6"},"/wave/docs/examples/buttons-4f3":{"component":"17896441","content":"452608cb"},"/wave/docs/examples/card-menu-52c":{"component":"17896441","content":"9152460a"},"/wave/docs/examples/checkbox-8fd":{"component":"17896441","content":"8c12d624"},"/wave/docs/examples/checklist-35d":{"component":"17896441","content":"7d1cd1c9"},"/wave/docs/examples/choice-group-f4d":{"component":"17896441","content":"82f75f63"},"/wave/docs/examples/color-picker-014":{"component":"17896441","content":"4612f97b"},"/wave/docs/examples/combobox-fe1":{"component":"17896441","content":"fd056868"},"/wave/docs/examples/counter-broadcast-5e7":{"component":"17896441","content":"917fcb62"},"/wave/docs/examples/counter-global-921":{"component":"17896441","content":"dceb90d2"},"/wave/docs/examples/counter-multicast-d7a":{"component":"17896441","content":"bd7ed1d7"},"/wave/docs/examples/counter-unicast-823":{"component":"17896441","content":"47b3e1f7"},"/wave/docs/examples/dashboard-613":{"component":"17896441","content":"0965cdf6"},"/wave/docs/examples/date-picker-1b7":{"component":"17896441","content":"faf81df8"},"/wave/docs/examples/date-picker-trigger-8c1":{"component":"17896441","content":"fe4d4432"},"/wave/docs/examples/dropdown-0e1":{"component":"17896441","content":"b140a32d"},"/wave/docs/examples/file-upload-429":{"component":"17896441","content":"3aa768f5"},"/wave/docs/examples/form-8d7":{"component":"17896441","content":"883d6399"},"/wave/docs/examples/form-frame-078":{"component":"17896441","content":"e4e8fb51"},"/wave/docs/examples/form-frame-path-5e9":{"component":"17896441","content":"77770fc3"},"/wave/docs/examples/form-markup-bf4":{"component":"17896441","content":"41849bc6"},"/wave/docs/examples/form-menu-035":{"component":"17896441","content":"7ca2f128"},"/wave/docs/examples/form-template-6f7":{"component":"17896441","content":"a9331674"},"/wave/docs/examples/frame-6ff":{"component":"17896441","content":"b1e50d5a"},"/wave/docs/examples/frame-path-f9c":{"component":"17896441","content":"746a1919"},"/wave/docs/examples/glider-gun-b5d":{"component":"17896441","content":"18fdb351"},"/wave/docs/examples/graphics-clock-3a3":{"component":"17896441","content":"6ce0e474"},"/wave/docs/examples/graphics-hilbert-ecc":{"component":"17896441","content":"f349fb86"},"/wave/docs/examples/graphics-path-8af":{"component":"17896441","content":"7ecd2c5c"},"/wave/docs/examples/graphics-primitives-169":{"component":"17896441","content":"8954e356"},"/wave/docs/examples/graphics-spline-4c7":{"component":"17896441","content":"b18fb770"},"/wave/docs/examples/graphics-turtle-134":{"component":"17896441","content":"9363aca1"},"/wave/docs/examples/hash-routing-600":{"component":"17896441","content":"f132454a"},"/wave/docs/examples/header-2b4":{"component":"17896441","content":"207f87c1"},"/wave/docs/examples/hello-world-49b":{"component":"17896441","content":"a8b2a833"},"/wave/docs/examples/image-5b5":{"component":"17896441","content":"b81c5e46"},"/wave/docs/examples/issue-tracker-073":{"component":"17896441","content":"549ea605"},"/wave/docs/examples/label-15f":{"component":"17896441","content":"10172759"},"/wave/docs/examples/layout-342":{"component":"17896441","content":"dc705eb8"},"/wave/docs/examples/layout-size-4bf":{"component":"17896441","content":"f3473c5b"},"/wave/docs/examples/link-bc8":{"component":"17896441","content":"ecdac497"},"/wave/docs/examples/markdown-d09":{"component":"17896441","content":"997fea1d"},"/wave/docs/examples/markdown-data-2ac":{"component":"17896441","content":"b8435c12"},"/wave/docs/examples/markup-180":{"component":"17896441","content":"6d36af6b"},"/wave/docs/examples/message-bar-97f":{"component":"17896441","content":"1ae86ebe"},"/wave/docs/examples/meta-icon-3a2":{"component":"17896441","content":"ca84abdc"},"/wave/docs/examples/meta-notification-ae1":{"component":"17896441","content":"e7ba74f4"},"/wave/docs/examples/meta-redirect-f63":{"component":"17896441","content":"3584c003"},"/wave/docs/examples/meta-refresh-0b0":{"component":"17896441","content":"b9e4d6e6"},"/wave/docs/examples/meta-title-a2d":{"component":"17896441","content":"f09ebdf1"},"/wave/docs/examples/nav-50d":{"component":"17896441","content":"c1570962"},"/wave/docs/examples/picker-396":{"component":"17896441","content":"4ab7b8a0"},"/wave/docs/examples/picker-selection-015":{"component":"17896441","content":"1a4f1376"},"/wave/docs/examples/pixel-art-588":{"component":"17896441","content":"37382beb"},"/wave/docs/examples/plot-altair-9c7":{"component":"17896441","content":"2673e11f"},"/wave/docs/examples/plot-area-e26":{"component":"17896441","content":"31f8b56c"},"/wave/docs/examples/plot-area-groups-ae1":{"component":"17896441","content":"53da2547"},"/wave/docs/examples/plot-area-line-3a6":{"component":"17896441","content":"bb5446ac"},"/wave/docs/examples/plot-area-line-groups-49e":{"component":"17896441","content":"7d744a8f"},"/wave/docs/examples/plot-area-line-smooth-8df":{"component":"17896441","content":"f846e950"},"/wave/docs/examples/plot-area-negative-5bf":{"component":"17896441","content":"273cfbdf"},"/wave/docs/examples/plot-area-range-5c0":{"component":"17896441","content":"126e0b0e"},"/wave/docs/examples/plot-area-smooth-cb7":{"component":"17896441","content":"718f151f"},"/wave/docs/examples/plot-area-stacked-85c":{"component":"17896441","content":"97d9aba4"},"/wave/docs/examples/plot-axis-title-ebc":{"component":"17896441","content":"c0ac41fc"},"/wave/docs/examples/plot-bokeh-75a":{"component":"17896441","content":"109e456e"},"/wave/docs/examples/plot-d3-d44":{"component":"17896441","content":"1486e3bc"},"/wave/docs/examples/plot-form-d4d":{"component":"17896441","content":"48786391"},"/wave/docs/examples/plot-histogram-cc7":{"component":"17896441","content":"eb2bb38c"},"/wave/docs/examples/plot-interval-8cf":{"component":"17896441","content":"12e676cf"},"/wave/docs/examples/plot-interval-annotation-977":{"component":"17896441","content":"aa7f648d"},"/wave/docs/examples/plot-interval-annotation-transpose-65e":{"component":"17896441","content":"4e3b2ad1"},"/wave/docs/examples/plot-interval-groups-4cb":{"component":"17896441","content":"c1cf1fe4"},"/wave/docs/examples/plot-interval-groups-transpose-646":{"component":"17896441","content":"97e78655"},"/wave/docs/examples/plot-interval-helix-3ee":{"component":"17896441","content":"e96704c5"},"/wave/docs/examples/plot-interval-labels-5dc":{"component":"17896441","content":"8eaf94d7"},"/wave/docs/examples/plot-interval-polar-aeb":{"component":"17896441","content":"9a52a2f7"},"/wave/docs/examples/plot-interval-polar-stacked-978":{"component":"17896441","content":"2db704cb"},"/wave/docs/examples/plot-interval-range-0da":{"component":"17896441","content":"a8dc7269"},"/wave/docs/examples/plot-interval-range-transpose-0f2":{"component":"17896441","content":"bd0b0bbe"},"/wave/docs/examples/plot-interval-stacked-d35":{"component":"17896441","content":"22188a36"},"/wave/docs/examples/plot-interval-stacked-grouped-4dd":{"component":"17896441","content":"f1ec6cfa"},"/wave/docs/examples/plot-interval-stacked-grouped-transpose-d39":{"component":"17896441","content":"c7b62599"},"/wave/docs/examples/plot-interval-stacked-transpose-5fa":{"component":"17896441","content":"cd329814"},"/wave/docs/examples/plot-interval-theta-035":{"component":"17896441","content":"31c3c419"},"/wave/docs/examples/plot-interval-transpose-aae":{"component":"17896441","content":"ac27f894"},"/wave/docs/examples/plot-line-238":{"component":"17896441","content":"d05981be"},"/wave/docs/examples/plot-line-annotation-27b":{"component":"17896441","content":"e013439f"},"/wave/docs/examples/plot-line-groups-812":{"component":"17896441","content":"f21433ff"},"/wave/docs/examples/plot-line-labels-187":{"component":"17896441","content":"6c3eb428"},"/wave/docs/examples/plot-line-labels-no-overlap-d7f":{"component":"17896441","content":"3f5dd320"},"/wave/docs/examples/plot-line-labels-stroked-1e3":{"component":"17896441","content":"54aab825"},"/wave/docs/examples/plot-line-smooth-e21":{"component":"17896441","content":"c9e5c590"},"/wave/docs/examples/plot-matplotlib-366":{"component":"17896441","content":"e7c32899"},"/wave/docs/examples/plot-path-1d1":{"component":"17896441","content":"2fa9e1ff"},"/wave/docs/examples/plot-path-point-b35":{"component":"17896441","content":"de02e8e6"},"/wave/docs/examples/plot-path-smooth-46b":{"component":"17896441","content":"c87c151a"},"/wave/docs/examples/plot-plotly-470":{"component":"17896441","content":"aa9ca283"},"/wave/docs/examples/plot-point-c44":{"component":"17896441","content":"34cd3da4"},"/wave/docs/examples/plot-point-annotation-faf":{"component":"17896441","content":"ed3db3ec"},"/wave/docs/examples/plot-point-custom-fe9":{"component":"17896441","content":"190e4f21"},"/wave/docs/examples/plot-point-groups-3be":{"component":"17896441","content":"1ac8922b"},"/wave/docs/examples/plot-point-map-8f7":{"component":"17896441","content":"38067279"},"/wave/docs/examples/plot-point-shapes-086":{"component":"17896441","content":"4b953dd8"},"/wave/docs/examples/plot-point-sizes-a9d":{"component":"17896441","content":"1cc3ff79"},"/wave/docs/examples/plot-polygon-c78":{"component":"17896441","content":"a814b970"},"/wave/docs/examples/plot-step-c36":{"component":"17896441","content":"17b5adee"},"/wave/docs/examples/plot-step-after-afc":{"component":"17896441","content":"941b9d10"},"/wave/docs/examples/plot-step-before-b83":{"component":"17896441","content":"26907763"},"/wave/docs/examples/plot-vegalite-cf6":{"component":"17896441","content":"b22f7242"},"/wave/docs/examples/plot-vegalite-form-e1b":{"component":"17896441","content":"4104f38c"},"/wave/docs/examples/plot-vegalite-update-e40":{"component":"17896441","content":"3697284d"},"/wave/docs/examples/progress-b94":{"component":"17896441","content":"4784cd26"},"/wave/docs/examples/progress-update-122":{"component":"17896441","content":"c641a4e8"},"/wave/docs/examples/range-slider-82e":{"component":"17896441","content":"eec6e613"},"/wave/docs/examples/separator-daf":{"component":"17896441","content":"cc0ea0cf"},"/wave/docs/examples/site-async-7b7":{"component":"17896441","content":"3ae7008e"},"/wave/docs/examples/slider-ae1":{"component":"17896441","content":"ca622d62"},"/wave/docs/examples/spinbox-309":{"component":"17896441","content":"d8689276"},"/wave/docs/examples/stat-large-5a2":{"component":"17896441","content":"ba1aeef8"},"/wave/docs/examples/stat-large-bar-927":{"component":"17896441","content":"692ea9bc"},"/wave/docs/examples/stat-small-1db":{"component":"17896441","content":"a54511d2"},"/wave/docs/examples/stat-small-series-area-4b9":{"component":"17896441","content":"f21d2ab0"},"/wave/docs/examples/stat-small-series-interval-44e":{"component":"17896441","content":"5e52c414"},"/wave/docs/examples/stat-tall-gauge-1b3":{"component":"17896441","content":"11e3ce2c"},"/wave/docs/examples/stat-tall-series-area-91c":{"component":"17896441","content":"9747bb1a"},"/wave/docs/examples/stat-tall-series-interval-0ac":{"component":"17896441","content":"424c54c2"},"/wave/docs/examples/stat-wide-bar-5f0":{"component":"17896441","content":"4f49ed83"},"/wave/docs/examples/stat-wide-gauge-515":{"component":"17896441","content":"5168cb29"},"/wave/docs/examples/stat-wide-series-area-9bc":{"component":"17896441","content":"79d0d182"},"/wave/docs/examples/stat-wide-series-interval-8d4":{"component":"17896441","content":"360edac9"},"/wave/docs/examples/stepper-394":{"component":"17896441","content":"8c8ea2c1"},"/wave/docs/examples/swatch-picker-6dc":{"component":"17896441","content":"1c59264e"},"/wave/docs/examples/tab-07b":{"component":"17896441","content":"661410ac"},"/wave/docs/examples/tab-delete-9c5":{"component":"17896441","content":"58b13b12"},"/wave/docs/examples/tab-link-478":{"component":"17896441","content":"bdc330a7"},"/wave/docs/examples/tab-routing-6e6":{"component":"17896441","content":"36db7894"},"/wave/docs/examples/table-63d":{"component":"17896441","content":"135cee2a"},"/wave/docs/examples/table-download-667":{"component":"17896441","content":"88c2f924"},"/wave/docs/examples/table-filter-185":{"component":"17896441","content":"600ae505"},"/wave/docs/examples/table-filter-backend-7d8":{"component":"17896441","content":"887b127f"},"/wave/docs/examples/table-groupby-2d7":{"component":"17896441","content":"6eb0e506"},"/wave/docs/examples/table-markdown-c18":{"component":"17896441","content":"0f2a58c8"},"/wave/docs/examples/table-search-cef":{"component":"17896441","content":"c0b6bb44"},"/wave/docs/examples/table-select-2b7":{"component":"17896441","content":"d8aa093c"},"/wave/docs/examples/table-sort-3f0":{"component":"17896441","content":"15837ef3"},"/wave/docs/examples/tabs-2de":{"component":"17896441","content":"8542acf3"},"/wave/docs/examples/template-7a0":{"component":"17896441","content":"2bf08973"},"/wave/docs/examples/template-data-998":{"component":"17896441","content":"d4ee2b4f"},"/wave/docs/examples/text-bf6":{"component":"17896441","content":"50b74c5f"},"/wave/docs/examples/text-sizes-25f":{"component":"17896441","content":"e32c5859"},"/wave/docs/examples/textbox-d9f":{"component":"17896441","content":"7c1cba9e"},"/wave/docs/examples/textbox-trigger-381":{"component":"17896441","content":"35dabcf3"},"/wave/docs/examples/todo-28c":{"component":"17896441","content":"bbdd3825"},"/wave/docs/examples/toggle-75f":{"component":"17896441","content":"b9f028e1"},"/wave/docs/examples/toolbar-7fe":{"component":"17896441","content":"f60be60c"},"/wave/docs/examples/toolbar-routing-1ae":{"component":"17896441","content":"948118d6"},"/wave/docs/examples/upload-d1b":{"component":"17896441","content":"0923c366"},"/wave/docs/examples/upload-async-476":{"component":"17896441","content":"d145135f"},"/wave/docs/examples/upload-download-70e":{"component":"17896441","content":"c10c720e"},"/wave/docs/examples/upload-ui-550":{"component":"17896441","content":"ce88eaaa"},"/wave/docs/examples/wizard-730":{"component":"17896441","content":"174d8305"},"/wave/docs/expressions-7e5":{"component":"17896441","content":"3b464fa6"},"/wave/docs/files-eb6":{"component":"17896441","content":"854481fc"},"/wave/docs/getting-started-cdc":{"component":"17896441","content":"d589d3a7"},"/wave/docs/graphics-23e":{"component":"17896441","content":"6264312d"},"/wave/docs/guide-de8":{"component":"17896441","content":"a8bb5334"},"/wave/docs/installation-5c8":{"component":"17896441","content":"3b8c55ea"},"/wave/docs/layout-362":{"component":"17896441","content":"472f8a66"},"/wave/docs/logging-63d":{"component":"17896441","content":"3abe8fb9"},"/wave/docs/migrating-0-830":{"component":"17896441","content":"0fd1debb"},"/wave/docs/migrating-0-8-ba0":{"component":"17896441","content":"8caadd29"},"/wave/docs/pages-2dc":{"component":"17896441","content":"a64331b1"},"/wave/docs/plotting-2c7":{"component":"17896441","content":"e8c1c6e8"},"/wave/docs/realtime-374":{"component":"17896441","content":"6405c95c"},"/wave/docs/routing-f63":{"component":"17896441","content":"f811e444"},"/wave/docs/scripts-cee":{"component":"17896441","content":"e833177e"},"/wave/docs/security-c61":{"component":"17896441","content":"db32d859"},"/wave/docs/state-fcc":{"component":"17896441","content":"5a34328a"},"/wave/docs/testing-1ff":{"component":"17896441","content":"fbe93038"},"/wave/docs/tour-6aa":{"component":"17896441","content":"47a365f9"},"/wave/docs/tutorial-beer-f5d":{"component":"17896441","content":"f7ea47c5"},"/wave/docs/tutorial-counter-da3":{"component":"17896441","content":"950656ac"},"/wave/docs/tutorial-hello-0f5":{"component":"17896441","content":"fcfc3752"},"/wave/docs/tutorial-monitor-390":{"component":"17896441","content":"0a6c0f5b"},"/wave/docs/tutorial-todo-762":{"component":"17896441","content":"996e93c8"}}')},function(e,t,n){var a,o;void 0===(o="function"==typeof(a=function(){var e,t,n={version:"0.2.0"},a=n.settings={minimum:.08,easing:"ease",positionUsing:"",speed:200,trickle:!0,trickleRate:.02,trickleSpeed:800,showSpinner:!0,barSelector:'[role="bar"]',spinnerSelector:'[role="spinner"]',parent:"body",template:'
      '};function o(e,t,n){return en?n:e}function r(e){return 100*(-1+e)}function i(e,t,n){var o;return(o="translate3d"===a.positionUsing?{transform:"translate3d("+r(e)+"%,0,0)"}:"translate"===a.positionUsing?{transform:"translate("+r(e)+"%,0)"}:{"margin-left":r(e)+"%"}).transition="all "+t+"ms "+n,o}n.configure=function(e){var t,n;for(t in e)void 0!==(n=e[t])&&e.hasOwnProperty(t)&&(a[t]=n);return this},n.status=null,n.set=function(e){var t=n.isStarted();e=o(e,a.minimum,1),n.status=1===e?null:e;var r=n.render(!t),c=r.querySelector(a.barSelector),u=a.speed,p=a.easing;return r.offsetWidth,l((function(t){""===a.positionUsing&&(a.positionUsing=n.getPositioningCSS()),s(c,i(e,u,p)),1===e?(s(r,{transition:"none",opacity:1}),r.offsetWidth,setTimeout((function(){s(r,{transition:"all "+u+"ms linear",opacity:0}),setTimeout((function(){n.remove(),t()}),u)}),u)):setTimeout(t,u)})),this},n.isStarted=function(){return"number"==typeof n.status},n.start=function(){n.status||n.set(0);var e=function(){setTimeout((function(){n.status&&(n.trickle(),e())}),a.trickleSpeed)};return a.trickle&&e(),this},n.done=function(e){return e||n.status?n.inc(.3+.5*Math.random()).set(1):this},n.inc=function(e){var t=n.status;return t?("number"!=typeof e&&(e=(1-t)*o(Math.random()*t,.1,.95)),t=o(t+e,0,.994),n.set(t)):n.start()},n.trickle=function(){return n.inc(Math.random()*a.trickleRate)},e=0,t=0,n.promise=function(a){return a&&"resolved"!==a.state()?(0===t&&n.start(),e++,t++,a.always((function(){0==--t?(e=0,n.done()):n.set((e-t)/e)})),this):this},n.render=function(e){if(n.isRendered())return document.getElementById("nprogress");u(document.documentElement,"nprogress-busy");var t=document.createElement("div");t.id="nprogress",t.innerHTML=a.template;var o,i=t.querySelector(a.barSelector),l=e?"-100":r(n.status||0),c=document.querySelector(a.parent);return s(i,{transition:"all 0 linear",transform:"translate3d("+l+"%,0,0)"}),a.showSpinner||(o=t.querySelector(a.spinnerSelector))&&f(o),c!=document.body&&u(c,"nprogress-custom-parent"),c.appendChild(t),t},n.remove=function(){p(document.documentElement,"nprogress-busy"),p(document.querySelector(a.parent),"nprogress-custom-parent");var e=document.getElementById("nprogress");e&&f(e)},n.isRendered=function(){return!!document.getElementById("nprogress")},n.getPositioningCSS=function(){var e=document.body.style,t="WebkitTransform"in e?"Webkit":"MozTransform"in e?"Moz":"msTransform"in e?"ms":"OTransform"in e?"O":"";return t+"Perspective"in e?"translate3d":t+"Transform"in e?"translate":"margin"};var l=function(){var e=[];function t(){var n=e.shift();n&&n(t)}return function(n){e.push(n),1==e.length&&t()}}(),s=function(){var e=["Webkit","O","Moz","ms"],t={};function n(e){return e.replace(/^-ms-/,"ms-").replace(/-([\da-z])/gi,(function(e,t){return t.toUpperCase()}))}function a(t){var n=document.body.style;if(t in n)return t;for(var a,o=e.length,r=t.charAt(0).toUpperCase()+t.slice(1);o--;)if((a=e[o]+r)in n)return a;return t}function o(e){return e=n(e),t[e]||(t[e]=a(e))}function r(e,t,n){t=o(t),e.style[t]=n}return function(e,t){var n,a,o=arguments;if(2==o.length)for(n in t)void 0!==(a=t[n])&&t.hasOwnProperty(n)&&r(e,n,a);else r(e,o[1],o[2])}}();function c(e,t){return("string"==typeof e?e:d(e)).indexOf(" "+t+" ")>=0}function u(e,t){var n=d(e),a=n+t;c(n,t)||(e.className=a.substring(1))}function p(e,t){var n,a=d(e);c(e,t)&&(n=a.replace(" "+t+" "," "),e.className=n.substring(1,n.length-1))}function d(e){return(" "+(e.className||"")+" ").replace(/\s+/gi," ")}function f(e){e&&e.parentNode&&e.parentNode.removeChild(e)}return n})?a.call(t,n,t,e):a)||(e.exports=o)},function(e,t,n){"use strict";n.d(t,"a",(function(){return p})),n.d(t,"b",(function(){return d})),n.d(t,"c",(function(){return b})),n.d(t,"e",(function(){return y}));var a=n(1);n.d(t,"d",(function(){return a.a})),n.d(t,"f",(function(){return a.b})),n.d(t,"g",(function(){return a.c})),n.d(t,"h",(function(){return a.d})),n.d(t,"i",(function(){return a.e})),n.d(t,"j",(function(){return a.f})),n.d(t,"k",(function(){return a.g})),n.d(t,"l",(function(){return a.i})),n.d(t,"m",(function(){return a.j})),n.d(t,"n",(function(){return a.k})),n.d(t,"o",(function(){return a.l})),n.d(t,"p",(function(){return a.m})),n.d(t,"q",(function(){return a.n})),n.d(t,"r",(function(){return a.o}));var o=n(3),r=n(0),i=n.n(r),l=n(5),s=(n(7),n(2)),c=n(6),u=n(4),p=function(e){function t(){for(var t,n=arguments.length,a=new Array(n),o=0;oe.length)return;if(!(y instanceof s)){if(h&&x!=t.length-1){if(d.lastIndex=w,!(O=d.exec(e)))break;for(var k=O.index+(m?O[1].length:0),E=O.index+O[0].length,S=x,T=w,_=t.length;S<_&&(T=(T+=t[S].length)&&(++x,w=T);if(t[x]instanceof s)continue;C=S-x,y=e.slice(w,T),O.index-=w}else{d.lastIndex=0;var O=d.exec(y),C=1}if(O){m&&(v=O[1]?O[1].length:0),E=(k=O.index+v)+(O=O[0].slice(v)).length;var P=y.slice(0,k),N=y.slice(E),A=[x,C];P&&(++x,w+=P.length,A.push(P));var R=new s(c,f?o.tokenize(O,f):O,g,O,h);if(A.push(R),N&&A.push(N),Array.prototype.splice.apply(t,A),1!=C&&o.matchGrammar(e,t,n,x,w,!0,c),i)break}else if(i)break}}}}},hooks:{add:function(){}},tokenize:function(e,t,n){var a=[e],r=t.rest;if(r){for(var i in r)t[i]=r[i];delete t.rest}return o.matchGrammar(e,a,t,0,0,!1),a}},(r=o.Token=function(e,t,n,a,o){this.type=e,this.content=t,this.alias=n,this.length=0|(a||"").length,this.greedy=!!o}).stringify=function(e,t,n){if("string"==typeof e)return e;if("Array"===o.util.type(e))return e.map((function(n){return r.stringify(n,t,e)})).join("");var a={type:e.type,content:r.stringify(e.content,t,n),tag:"span",classes:["token",e.type],attributes:{},language:t,parent:n};if(e.alias){var i="Array"===o.util.type(e.alias)?e.alias:[e.alias];Array.prototype.push.apply(a.classes,i)}var l=Object.keys(a.attributes).map((function(e){return e+'="'+(a.attributes[e]||"").replace(/"/g,""")+'"'})).join(" ");return"<"+a.tag+' class="'+a.classes.join(" ")+'"'+(l?" "+l:"")+">"+a.content+""},o);i.languages.markup={comment://,prolog:/<\?[\s\S]+?\?>/,doctype://i,cdata://i,tag:{pattern:/<\/?(?!\d)[^\s>\/=$<%]+(?:\s(?:\s*[^\s>\/=]+(?:\s*=\s*(?:"[^"]*"|'[^']*'|[^\s'">=]+(?=[\s>]))|(?=[\s/>])))+)?\s*\/?>/i,greedy:!0,inside:{tag:{pattern:/^<\/?[^\s>\/]+/i,inside:{punctuation:/^<\/?/,namespace:/^[^\s>\/:]+:/}},"attr-value":{pattern:/=\s*(?:"[^"]*"|'[^']*'|[^\s'">=]+)/i,inside:{punctuation:[/^=/,{pattern:/^(\s*)["']|["']$/,lookbehind:!0}]}},punctuation:/\/?>/,"attr-name":{pattern:/[^\s>\/]+/,inside:{namespace:/^[^\s>\/:]+:/}}}},entity:/&#?[\da-z]{1,8};/i},i.languages.markup.tag.inside["attr-value"].inside.entity=i.languages.markup.entity,i.hooks.add("wrap",(function(e){"entity"===e.type&&(e.attributes.title=e.content.replace(/&/,"&"))})),Object.defineProperty(i.languages.markup.tag,"addInlined",{value:function(e,t){var n={};n["language-"+t]={pattern:/(^$)/i,lookbehind:!0,inside:i.languages[t]},n.cdata=/^$/i;var a={"included-cdata":{pattern://i,inside:n}};a["language-"+t]={pattern:/[\s\S]+/,inside:i.languages[t]};var o={};o[e]={pattern:RegExp(/(<__[\s\S]*?>)(?:\s*|[\s\S])*?(?=<\/__>)/.source.replace(/__/g,e),"i"),lookbehind:!0,greedy:!0,inside:a},i.languages.insertBefore("markup","cdata",o)}}),i.languages.xml=i.languages.extend("markup",{}),i.languages.html=i.languages.markup,i.languages.mathml=i.languages.markup,i.languages.svg=i.languages.markup,function(e){var t="\\b(?:BASH|BASHOPTS|BASH_ALIASES|BASH_ARGC|BASH_ARGV|BASH_CMDS|BASH_COMPLETION_COMPAT_DIR|BASH_LINENO|BASH_REMATCH|BASH_SOURCE|BASH_VERSINFO|BASH_VERSION|COLORTERM|COLUMNS|COMP_WORDBREAKS|DBUS_SESSION_BUS_ADDRESS|DEFAULTS_PATH|DESKTOP_SESSION|DIRSTACK|DISPLAY|EUID|GDMSESSION|GDM_LANG|GNOME_KEYRING_CONTROL|GNOME_KEYRING_PID|GPG_AGENT_INFO|GROUPS|HISTCONTROL|HISTFILE|HISTFILESIZE|HISTSIZE|HOME|HOSTNAME|HOSTTYPE|IFS|INSTANCE|JOB|LANG|LANGUAGE|LC_ADDRESS|LC_ALL|LC_IDENTIFICATION|LC_MEASUREMENT|LC_MONETARY|LC_NAME|LC_NUMERIC|LC_PAPER|LC_TELEPHONE|LC_TIME|LESSCLOSE|LESSOPEN|LINES|LOGNAME|LS_COLORS|MACHTYPE|MAILCHECK|MANDATORY_PATH|NO_AT_BRIDGE|OLDPWD|OPTERR|OPTIND|ORBIT_SOCKETDIR|OSTYPE|PAPERSIZE|PATH|PIPESTATUS|PPID|PS1|PS2|PS3|PS4|PWD|RANDOM|REPLY|SECONDS|SELINUX_INIT|SESSION|SESSIONTYPE|SESSION_MANAGER|SHELL|SHELLOPTS|SHLVL|SSH_AUTH_SOCK|TERM|UID|UPSTART_EVENTS|UPSTART_INSTANCE|UPSTART_JOB|UPSTART_SESSION|USER|WINDOWID|XAUTHORITY|XDG_CONFIG_DIRS|XDG_CURRENT_DESKTOP|XDG_DATA_DIRS|XDG_GREETER_DATA_DIR|XDG_MENU_PREFIX|XDG_RUNTIME_DIR|XDG_SEAT|XDG_SEAT_PATH|XDG_SESSION_DESKTOP|XDG_SESSION_ID|XDG_SESSION_PATH|XDG_SESSION_TYPE|XDG_VTNR|XMODIFIERS)\\b",n={environment:{pattern:RegExp("\\$"+t),alias:"constant"},variable:[{pattern:/\$?\(\([\s\S]+?\)\)/,greedy:!0,inside:{variable:[{pattern:/(^\$\(\([\s\S]+)\)\)/,lookbehind:!0},/^\$\(\(/],number:/\b0x[\dA-Fa-f]+\b|(?:\b\d+\.?\d*|\B\.\d+)(?:[Ee]-?\d+)?/,operator:/--?|-=|\+\+?|\+=|!=?|~|\*\*?|\*=|\/=?|%=?|<<=?|>>=?|<=?|>=?|==?|&&?|&=|\^=?|\|\|?|\|=|\?|:/,punctuation:/\(\(?|\)\)?|,|;/}},{pattern:/\$\((?:\([^)]+\)|[^()])+\)|`[^`]+`/,greedy:!0,inside:{variable:/^\$\(|^`|\)$|`$/}},{pattern:/\$\{[^}]+\}/,greedy:!0,inside:{operator:/:[-=?+]?|[!\/]|##?|%%?|\^\^?|,,?/,punctuation:/[\[\]]/,environment:{pattern:RegExp("(\\{)"+t),lookbehind:!0,alias:"constant"}}},/\$(?:\w+|[#?*!@$])/],entity:/\\(?:[abceEfnrtv\\"]|O?[0-7]{1,3}|x[0-9a-fA-F]{1,2}|u[0-9a-fA-F]{4}|U[0-9a-fA-F]{8})/};e.languages.bash={shebang:{pattern:/^#!\s*\/.*/,alias:"important"},comment:{pattern:/(^|[^"{\\$])#.*/,lookbehind:!0},"function-name":[{pattern:/(\bfunction\s+)\w+(?=(?:\s*\(?:\s*\))?\s*\{)/,lookbehind:!0,alias:"function"},{pattern:/\b\w+(?=\s*\(\s*\)\s*\{)/,alias:"function"}],"for-or-select":{pattern:/(\b(?:for|select)\s+)\w+(?=\s+in\s)/,alias:"variable",lookbehind:!0},"assign-left":{pattern:/(^|[\s;|&]|[<>]\()\w+(?=\+?=)/,inside:{environment:{pattern:RegExp("(^|[\\s;|&]|[<>]\\()"+t),lookbehind:!0,alias:"constant"}},alias:"variable",lookbehind:!0},string:[{pattern:/((?:^|[^<])<<-?\s*)(\w+?)\s*(?:\r?\n|\r)(?:[\s\S])*?(?:\r?\n|\r)\2/,lookbehind:!0,greedy:!0,inside:n},{pattern:/((?:^|[^<])<<-?\s*)(["'])(\w+)\2\s*(?:\r?\n|\r)(?:[\s\S])*?(?:\r?\n|\r)\3/,lookbehind:!0,greedy:!0},{pattern:/(["'])(?:\\[\s\S]|\$\([^)]+\)|`[^`]+`|(?!\1)[^\\])*\1/,greedy:!0,inside:n}],environment:{pattern:RegExp("\\$?"+t),alias:"constant"},variable:n.variable,function:{pattern:/(^|[\s;|&]|[<>]\()(?:add|apropos|apt|aptitude|apt-cache|apt-get|aspell|automysqlbackup|awk|basename|bash|bc|bconsole|bg|bzip2|cal|cat|cfdisk|chgrp|chkconfig|chmod|chown|chroot|cksum|clear|cmp|column|comm|cp|cron|crontab|csplit|curl|cut|date|dc|dd|ddrescue|debootstrap|df|diff|diff3|dig|dir|dircolors|dirname|dirs|dmesg|du|egrep|eject|env|ethtool|expand|expect|expr|fdformat|fdisk|fg|fgrep|file|find|fmt|fold|format|free|fsck|ftp|fuser|gawk|git|gparted|grep|groupadd|groupdel|groupmod|groups|grub-mkconfig|gzip|halt|head|hg|history|host|hostname|htop|iconv|id|ifconfig|ifdown|ifup|import|install|ip|jobs|join|kill|killall|less|link|ln|locate|logname|logrotate|look|lpc|lpr|lprint|lprintd|lprintq|lprm|ls|lsof|lynx|make|man|mc|mdadm|mkconfig|mkdir|mke2fs|mkfifo|mkfs|mkisofs|mknod|mkswap|mmv|more|most|mount|mtools|mtr|mutt|mv|nano|nc|netstat|nice|nl|nohup|notify-send|npm|nslookup|op|open|parted|passwd|paste|pathchk|ping|pkill|pnpm|popd|pr|printcap|printenv|ps|pushd|pv|quota|quotacheck|quotactl|ram|rar|rcp|reboot|remsync|rename|renice|rev|rm|rmdir|rpm|rsync|scp|screen|sdiff|sed|sendmail|seq|service|sftp|sh|shellcheck|shuf|shutdown|sleep|slocate|sort|split|ssh|stat|strace|su|sudo|sum|suspend|swapon|sync|tac|tail|tar|tee|time|timeout|top|touch|tr|traceroute|tsort|tty|umount|uname|unexpand|uniq|units|unrar|unshar|unzip|update-grub|uptime|useradd|userdel|usermod|users|uudecode|uuencode|v|vdir|vi|vim|virsh|vmstat|wait|watch|wc|wget|whereis|which|who|whoami|write|xargs|xdg-open|yarn|yes|zenity|zip|zsh|zypper)(?=$|[)\s;|&])/,lookbehind:!0},keyword:{pattern:/(^|[\s;|&]|[<>]\()(?:if|then|else|elif|fi|for|while|in|case|esac|function|select|do|done|until)(?=$|[)\s;|&])/,lookbehind:!0},builtin:{pattern:/(^|[\s;|&]|[<>]\()(?:\.|:|break|cd|continue|eval|exec|exit|export|getopts|hash|pwd|readonly|return|shift|test|times|trap|umask|unset|alias|bind|builtin|caller|command|declare|echo|enable|help|let|local|logout|mapfile|printf|read|readarray|source|type|typeset|ulimit|unalias|set|shopt)(?=$|[)\s;|&])/,lookbehind:!0,alias:"class-name"},boolean:{pattern:/(^|[\s;|&]|[<>]\()(?:true|false)(?=$|[)\s;|&])/,lookbehind:!0},"file-descriptor":{pattern:/\B&\d\b/,alias:"important"},operator:{pattern:/\d?<>|>\||\+=|==?|!=?|=~|<<[<-]?|[&\d]?>>|\d?[<>]&?|&[>&]?|\|[&|]?|<=?|>=?/,inside:{"file-descriptor":{pattern:/^\d/,alias:"important"}}},punctuation:/\$?\(\(?|\)\)?|\.\.|[{}[\];\\]/,number:{pattern:/(^|\s)(?:[1-9]\d*|0)(?:[.,]\d+)?\b/,lookbehind:!0}};for(var a=["comment","function-name","for-or-select","assign-left","string","environment","function","keyword","builtin","boolean","file-descriptor","operator","punctuation","number"],o=n.variable[1].inside,r=0;r=?|==?=?|&&?|\|\|?|\?|\*|\/|~|\^|%/,punctuation:/[{}[\];(),.:]/},i.languages.c=i.languages.extend("clike",{"class-name":{pattern:/(\b(?:enum|struct)\s+)\w+/,lookbehind:!0},keyword:/\b(?:_Alignas|_Alignof|_Atomic|_Bool|_Complex|_Generic|_Imaginary|_Noreturn|_Static_assert|_Thread_local|asm|typeof|inline|auto|break|case|char|const|continue|default|do|double|else|enum|extern|float|for|goto|if|int|long|register|return|short|signed|sizeof|static|struct|switch|typedef|union|unsigned|void|volatile|while)\b/,operator:/>>=?|<<=?|->|([-+&|:])\1|[?:~]|[-+*/%&|^!=<>]=?/,number:/(?:\b0x(?:[\da-f]+\.?[\da-f]*|\.[\da-f]+)(?:p[+-]?\d+)?|(?:\b\d+\.?\d*|\B\.\d+)(?:e[+-]?\d+)?)[ful]*/i}),i.languages.insertBefore("c","string",{macro:{pattern:/(^\s*)#\s*[a-z]+(?:[^\r\n\\]|\\(?:\r\n|[\s\S]))*/im,lookbehind:!0,alias:"property",inside:{string:{pattern:/(#\s*include\s*)(?:<.+?>|("|')(?:\\?.)+?\2)/,lookbehind:!0},directive:{pattern:/(#\s*)\b(?:define|defined|elif|else|endif|error|ifdef|ifndef|if|import|include|line|pragma|undef|using)\b/,lookbehind:!0,alias:"keyword"}}},constant:/\b(?:__FILE__|__LINE__|__DATE__|__TIME__|__TIMESTAMP__|__func__|EOF|NULL|SEEK_CUR|SEEK_END|SEEK_SET|stdin|stdout|stderr)\b/}),delete i.languages.c.boolean,i.languages.cpp=i.languages.extend("c",{"class-name":{pattern:/(\b(?:class|enum|struct)\s+)\w+/,lookbehind:!0},keyword:/\b(?:alignas|alignof|asm|auto|bool|break|case|catch|char|char16_t|char32_t|class|compl|const|constexpr|const_cast|continue|decltype|default|delete|do|double|dynamic_cast|else|enum|explicit|export|extern|float|for|friend|goto|if|inline|int|int8_t|int16_t|int32_t|int64_t|uint8_t|uint16_t|uint32_t|uint64_t|long|mutable|namespace|new|noexcept|nullptr|operator|private|protected|public|register|reinterpret_cast|return|short|signed|sizeof|static|static_assert|static_cast|struct|switch|template|this|thread_local|throw|try|typedef|typeid|typename|union|unsigned|using|virtual|void|volatile|wchar_t|while)\b/,number:{pattern:/(?:\b0b[01']+|\b0x(?:[\da-f']+\.?[\da-f']*|\.[\da-f']+)(?:p[+-]?[\d']+)?|(?:\b[\d']+\.?[\d']*|\B\.[\d']+)(?:e[+-]?[\d']+)?)[ful]*/i,greedy:!0},operator:/>>=?|<<=?|->|([-+&|:])\1|[?:~]|[-+*/%&|^!=<>]=?|\b(?:and|and_eq|bitand|bitor|not|not_eq|or|or_eq|xor|xor_eq)\b/,boolean:/\b(?:true|false)\b/}),i.languages.insertBefore("cpp","string",{"raw-string":{pattern:/R"([^()\\ ]{0,16})\([\s\S]*?\)\1"/,alias:"string",greedy:!0}}),function(e){var t=/("|')(?:\\(?:\r\n|[\s\S])|(?!\1)[^\\\r\n])*\1/;e.languages.css={comment:/\/\*[\s\S]*?\*\//,atrule:{pattern:/@[\w-]+[\s\S]*?(?:;|(?=\s*\{))/,inside:{rule:/@[\w-]+/}},url:{pattern:RegExp("url\\((?:"+t.source+"|[^\n\r()]*)\\)","i"),inside:{function:/^url/i,punctuation:/^\(|\)$/}},selector:RegExp("[^{}\\s](?:[^{};\"']|"+t.source+")*?(?=\\s*\\{)"),string:{pattern:t,greedy:!0},property:/[-_a-z\xA0-\uFFFF][-\w\xA0-\uFFFF]*(?=\s*:)/i,important:/!important\b/i,function:/[-a-z0-9]+(?=\()/i,punctuation:/[(){};:,]/},e.languages.css.atrule.inside.rest=e.languages.css;var n=e.languages.markup;n&&(n.tag.addInlined("style","css"),e.languages.insertBefore("inside","attr-value",{"style-attr":{pattern:/\s*style=("|')(?:\\[\s\S]|(?!\1)[^\\])*\1/i,inside:{"attr-name":{pattern:/^\s*style/i,inside:n.tag.inside},punctuation:/^\s*=\s*['"]|['"]\s*$/,"attr-value":{pattern:/.+/i,inside:e.languages.css}},alias:"language-css"}},n.tag))}(i),i.languages.css.selector={pattern:i.languages.css.selector,inside:{"pseudo-element":/:(?:after|before|first-letter|first-line|selection)|::[-\w]+/,"pseudo-class":/:[-\w]+/,class:/\.[-:.\w]+/,id:/#[-:.\w]+/,attribute:{pattern:/\[(?:[^[\]"']|("|')(?:\\(?:\r\n|[\s\S])|(?!\1)[^\\\r\n])*\1)*\]/,greedy:!0,inside:{punctuation:/^\[|\]$/,"case-sensitivity":{pattern:/(\s)[si]$/i,lookbehind:!0,alias:"keyword"},namespace:{pattern:/^(\s*)[-*\w\xA0-\uFFFF]*\|(?!=)/,lookbehind:!0,inside:{punctuation:/\|$/}},attribute:{pattern:/^(\s*)[-\w\xA0-\uFFFF]+/,lookbehind:!0},value:[/("|')(?:\\(?:\r\n|[\s\S])|(?!\1)[^\\\r\n])*\1/,{pattern:/(=\s*)[-\w\xA0-\uFFFF]+(?=\s*$)/,lookbehind:!0}],operator:/[|~*^$]?=/}},"n-th":[{pattern:/(\(\s*)[+-]?\d*[\dn](?:\s*[+-]\s*\d+)?(?=\s*\))/,lookbehind:!0,inside:{number:/[\dn]+/,operator:/[+-]/}},{pattern:/(\(\s*)(?:even|odd)(?=\s*\))/i,lookbehind:!0}],punctuation:/[()]/}},i.languages.insertBefore("css","property",{variable:{pattern:/(^|[^-\w\xA0-\uFFFF])--[-_a-z\xA0-\uFFFF][-\w\xA0-\uFFFF]*/i,lookbehind:!0}}),i.languages.insertBefore("css","function",{operator:{pattern:/(\s)[+\-*\/](?=\s)/,lookbehind:!0},hexcode:/#[\da-f]{3,8}/i,entity:/\\[\da-f]{1,8}/i,unit:{pattern:/(\d)(?:%|[a-z]+)/,lookbehind:!0},number:/-?[\d.]+/}),i.languages.javascript=i.languages.extend("clike",{"class-name":[i.languages.clike["class-name"],{pattern:/(^|[^$\w\xA0-\uFFFF])[_$A-Z\xA0-\uFFFF][$\w\xA0-\uFFFF]*(?=\.(?:prototype|constructor))/,lookbehind:!0}],keyword:[{pattern:/((?:^|})\s*)(?:catch|finally)\b/,lookbehind:!0},{pattern:/(^|[^.])\b(?:as|async(?=\s*(?:function\b|\(|[$\w\xA0-\uFFFF]|$))|await|break|case|class|const|continue|debugger|default|delete|do|else|enum|export|extends|for|from|function|get|if|implements|import|in|instanceof|interface|let|new|null|of|package|private|protected|public|return|set|static|super|switch|this|throw|try|typeof|undefined|var|void|while|with|yield)\b/,lookbehind:!0}],number:/\b(?:(?:0[xX](?:[\dA-Fa-f](?:_[\dA-Fa-f])?)+|0[bB](?:[01](?:_[01])?)+|0[oO](?:[0-7](?:_[0-7])?)+)n?|(?:\d(?:_\d)?)+n|NaN|Infinity)\b|(?:\b(?:\d(?:_\d)?)+\.?(?:\d(?:_\d)?)*|\B\.(?:\d(?:_\d)?)+)(?:[Ee][+-]?(?:\d(?:_\d)?)+)?/,function:/#?[_$a-zA-Z\xA0-\uFFFF][$\w\xA0-\uFFFF]*(?=\s*(?:\.\s*(?:apply|bind|call)\s*)?\()/,operator:/-[-=]?|\+[+=]?|!=?=?|<>?>?=?|=(?:==?|>)?|&[&=]?|\|[|=]?|\*\*?=?|\/=?|~|\^=?|%=?|\?|\.{3}/}),i.languages.javascript["class-name"][0].pattern=/(\b(?:class|interface|extends|implements|instanceof|new)\s+)[\w.\\]+/,i.languages.insertBefore("javascript","keyword",{regex:{pattern:/((?:^|[^$\w\xA0-\uFFFF."'\])\s])\s*)\/(\[(?:[^\]\\\r\n]|\\.)*]|\\.|[^/\\\[\r\n])+\/[gimyus]{0,6}(?=\s*($|[\r\n,.;})\]]))/,lookbehind:!0,greedy:!0},"function-variable":{pattern:/#?[_$a-zA-Z\xA0-\uFFFF][$\w\xA0-\uFFFF]*(?=\s*[=:]\s*(?:async\s*)?(?:\bfunction\b|(?:\((?:[^()]|\([^()]*\))*\)|[_$a-zA-Z\xA0-\uFFFF][$\w\xA0-\uFFFF]*)\s*=>))/,alias:"function"},parameter:[{pattern:/(function(?:\s+[_$A-Za-z\xA0-\uFFFF][$\w\xA0-\uFFFF]*)?\s*\(\s*)(?!\s)(?:[^()]|\([^()]*\))+?(?=\s*\))/,lookbehind:!0,inside:i.languages.javascript},{pattern:/[_$a-z\xA0-\uFFFF][$\w\xA0-\uFFFF]*(?=\s*=>)/i,inside:i.languages.javascript},{pattern:/(\(\s*)(?!\s)(?:[^()]|\([^()]*\))+?(?=\s*\)\s*=>)/,lookbehind:!0,inside:i.languages.javascript},{pattern:/((?:\b|\s|^)(?!(?:as|async|await|break|case|catch|class|const|continue|debugger|default|delete|do|else|enum|export|extends|finally|for|from|function|get|if|implements|import|in|instanceof|interface|let|new|null|of|package|private|protected|public|return|set|static|super|switch|this|throw|try|typeof|undefined|var|void|while|with|yield)(?![$\w\xA0-\uFFFF]))(?:[_$A-Za-z\xA0-\uFFFF][$\w\xA0-\uFFFF]*\s*)\(\s*)(?!\s)(?:[^()]|\([^()]*\))+?(?=\s*\)\s*\{)/,lookbehind:!0,inside:i.languages.javascript}],constant:/\b[A-Z](?:[A-Z_]|\dx?)*\b/}),i.languages.insertBefore("javascript","string",{"template-string":{pattern:/`(?:\\[\s\S]|\${(?:[^{}]|{(?:[^{}]|{[^}]*})*})+}|(?!\${)[^\\`])*`/,greedy:!0,inside:{"template-punctuation":{pattern:/^`|`$/,alias:"string"},interpolation:{pattern:/((?:^|[^\\])(?:\\{2})*)\${(?:[^{}]|{(?:[^{}]|{[^}]*})*})+}/,lookbehind:!0,inside:{"interpolation-punctuation":{pattern:/^\${|}$/,alias:"punctuation"},rest:i.languages.javascript}},string:/[\s\S]+/}}}),i.languages.markup&&i.languages.markup.tag.addInlined("script","javascript"),i.languages.js=i.languages.javascript,function(e){var t=e.util.clone(e.languages.javascript);e.languages.jsx=e.languages.extend("markup",t),e.languages.jsx.tag.pattern=/<\/?(?:[\w.:-]+\s*(?:\s+(?:[\w.:-]+(?:=(?:("|')(?:\\[\s\S]|(?!\1)[^\\])*\1|[^\s{'">=]+|\{(?:\{(?:\{[^}]*\}|[^{}])*\}|[^{}])+\}))?|\{\.{3}[a-z_$][\w$]*(?:\.[a-z_$][\w$]*)*\}))*\s*\/?)?>/i,e.languages.jsx.tag.inside.tag.pattern=/^<\/?[^\s>\/]*/i,e.languages.jsx.tag.inside["attr-value"].pattern=/=(?!\{)(?:("|')(?:\\[\s\S]|(?!\1)[^\\])*\1|[^\s'">]+)/i,e.languages.jsx.tag.inside.tag.inside["class-name"]=/^[A-Z]\w*(?:\.[A-Z]\w*)*$/,e.languages.insertBefore("inside","attr-name",{spread:{pattern:/\{\.{3}[a-z_$][\w$]*(?:\.[a-z_$][\w$]*)*\}/,inside:{punctuation:/\.{3}|[{}.]/,"attr-value":/\w+/}}},e.languages.jsx.tag),e.languages.insertBefore("inside","attr-value",{script:{pattern:/=(\{(?:\{(?:\{[^}]*\}|[^}])*\}|[^}])+\})/i,inside:{"script-punctuation":{pattern:/^=(?={)/,alias:"punctuation"},rest:e.languages.jsx},alias:"language-javascript"}},e.languages.jsx.tag);var n=function(e){return e?"string"==typeof e?e:"string"==typeof e.content?e.content:e.content.map(n).join(""):""},a=function(t){for(var o=[],r=0;r0&&o[o.length-1].tagName===n(i.content[0].content[1])&&o.pop():"/>"===i.content[i.content.length-1].content||o.push({tagName:n(i.content[0].content[1]),openedBraces:0}):o.length>0&&"punctuation"===i.type&&"{"===i.content?o[o.length-1].openedBraces++:o.length>0&&o[o.length-1].openedBraces>0&&"punctuation"===i.type&&"}"===i.content?o[o.length-1].openedBraces--:l=!0),(l||"string"==typeof i)&&o.length>0&&0===o[o.length-1].openedBraces){var s=n(i);r0&&("string"==typeof t[r-1]||"plain-text"===t[r-1].type)&&(s=n(t[r-1])+s,t.splice(r-1,1),r--),t[r]=new e.Token("plain-text",s,null,s)}i.content&&"string"!=typeof i.content&&a(i.content)}};e.hooks.add("after-tokenize",(function(e){"jsx"!==e.language&&"tsx"!==e.language||a(e.tokens)}))}(i),function(e){var t=e.languages.javadoclike={parameter:{pattern:/(^\s*(?:\/{3}|\*|\/\*\*)\s*@(?:param|arg|arguments)\s+)\w+/m,lookbehind:!0},keyword:{pattern:/(^\s*(?:\/{3}|\*|\/\*\*)\s*|\{)@[a-z][a-zA-Z-]+\b/m,lookbehind:!0},punctuation:/[{}]/};Object.defineProperty(t,"addSupport",{value:function(t,n){"string"==typeof t&&(t=[t]),t.forEach((function(t){!function(t,n){var a="doc-comment",o=e.languages[t];if(o){var r=o[a];if(!r){var i={"doc-comment":{pattern:/(^|[^\\])\/\*\*[^/][\s\S]*?(?:\*\/|$)/,alias:"comment"}};r=(o=e.languages.insertBefore(t,"comment",i))[a]}if(r instanceof RegExp&&(r=o[a]={pattern:r}),Array.isArray(r))for(var l=0,s=r.length;l>>?=?|->|([-+&|])\2|[?:~]|[-+*/%&|^!=<>]=?)/m,lookbehind:!0}}),e.languages.insertBefore("java","class-name",{annotation:{alias:"punctuation",pattern:/(^|[^.])@\w+/,lookbehind:!0},namespace:{pattern:/(\b(?:exports|import(?:\s+static)?|module|open|opens|package|provides|requires|to|transitive|uses|with)\s+)[a-z]\w*(\.[a-z]\w*)+/,lookbehind:!0,inside:{punctuation:/\./}},generics:{pattern:/<(?:[\w\s,.&?]|<(?:[\w\s,.&?]|<(?:[\w\s,.&?]|<[\w\s,.&?]*>)*>)*>)*>/,inside:{"class-name":n,keyword:t,punctuation:/[<>(),.:]/,operator:/[?&|]/}}})}(i),function(e){function t(e,t){return"___"+e.toUpperCase()+t+"___"}Object.defineProperties(e.languages["markup-templating"]={},{buildPlaceholders:{value:function(n,a,o,r){if(n.language===a){var i=n.tokenStack=[];n.code=n.code.replace(o,(function(e){if("function"==typeof r&&!r(e))return e;for(var o,l=i.length;-1!==n.code.indexOf(o=t(a,l));)++l;return i[l]=e,o})),n.grammar=e.languages.markup}}},tokenizePlaceholders:{value:function(n,a){if(n.language===a&&n.tokenStack){n.grammar=e.languages[a];var o=0,r=Object.keys(n.tokenStack);!function i(l){for(var s=0;s=r.length);s++){var c=l[s];if("string"==typeof c||c.content&&"string"==typeof c.content){var u=r[o],p=n.tokenStack[u],d="string"==typeof c?c:c.content,f=t(a,u),m=d.indexOf(f);if(m>-1){++o;var h=d.substring(0,m),v=new e.Token(a,e.tokenize(p,n.grammar),"language-"+a,p),g=d.substring(m+f.length),b=[];h&&b.push.apply(b,i([h])),b.push(v),g&&b.push.apply(b,i([g])),"string"==typeof c?l.splice.apply(l,[s,1].concat(b)):c.content=b}}else c.content&&i(c.content)}return l}(n.tokens)}}}})}(i),function(e){e.languages.php=e.languages.extend("clike",{keyword:/\b(?:__halt_compiler|abstract|and|array|as|break|callable|case|catch|class|clone|const|continue|declare|default|die|do|echo|else|elseif|empty|enddeclare|endfor|endforeach|endif|endswitch|endwhile|eval|exit|extends|final|finally|for|foreach|function|global|goto|if|implements|include|include_once|instanceof|insteadof|interface|isset|list|namespace|new|or|parent|print|private|protected|public|require|require_once|return|static|switch|throw|trait|try|unset|use|var|while|xor|yield)\b/i,boolean:{pattern:/\b(?:false|true)\b/i,alias:"constant"},constant:[/\b[A-Z_][A-Z0-9_]*\b/,/\b(?:null)\b/i],comment:{pattern:/(^|[^\\])(?:\/\*[\s\S]*?\*\/|\/\/.*)/,lookbehind:!0}}),e.languages.insertBefore("php","string",{"shell-comment":{pattern:/(^|[^\\])#.*/,lookbehind:!0,alias:"comment"}}),e.languages.insertBefore("php","comment",{delimiter:{pattern:/\?>$|^<\?(?:php(?=\s)|=)?/i,alias:"important"}}),e.languages.insertBefore("php","keyword",{variable:/\$+(?:\w+\b|(?={))/i,package:{pattern:/(\\|namespace\s+|use\s+)[\w\\]+/,lookbehind:!0,inside:{punctuation:/\\/}}}),e.languages.insertBefore("php","operator",{property:{pattern:/(->)[\w]+/,lookbehind:!0}});var t={pattern:/{\$(?:{(?:{[^{}]+}|[^{}]+)}|[^{}])+}|(^|[^\\{])\$+(?:\w+(?:\[.+?]|->\w+)*)/,lookbehind:!0,inside:{rest:e.languages.php}};e.languages.insertBefore("php","string",{"nowdoc-string":{pattern:/<<<'([^']+)'(?:\r\n?|\n)(?:.*(?:\r\n?|\n))*?\1;/,greedy:!0,alias:"string",inside:{delimiter:{pattern:/^<<<'[^']+'|[a-z_]\w*;$/i,alias:"symbol",inside:{punctuation:/^<<<'?|[';]$/}}}},"heredoc-string":{pattern:/<<<(?:"([^"]+)"(?:\r\n?|\n)(?:.*(?:\r\n?|\n))*?\1;|([a-z_]\w*)(?:\r\n?|\n)(?:.*(?:\r\n?|\n))*?\2;)/i,greedy:!0,alias:"string",inside:{delimiter:{pattern:/^<<<(?:"[^"]+"|[a-z_]\w*)|[a-z_]\w*;$/i,alias:"symbol",inside:{punctuation:/^<<<"?|[";]$/}},interpolation:t}},"single-quoted-string":{pattern:/'(?:\\[\s\S]|[^\\'])*'/,greedy:!0,alias:"string"},"double-quoted-string":{pattern:/"(?:\\[\s\S]|[^\\"])*"/,greedy:!0,alias:"string",inside:{interpolation:t}}}),delete e.languages.php.string,e.hooks.add("before-tokenize",(function(t){if(/<\?/.test(t.code)){e.languages["markup-templating"].buildPlaceholders(t,"php",/<\?(?:[^"'/#]|\/(?![*/])|("|')(?:\\[\s\S]|(?!\1)[^\\])*\1|(?:\/\/|#)(?:[^?\n\r]|\?(?!>))*|\/\*[\s\S]*?(?:\*\/|$))*?(?:\?>|$)/gi)}})),e.hooks.add("after-tokenize",(function(t){e.languages["markup-templating"].tokenizePlaceholders(t,"php")}))}(i),function(e){var t=e.languages.javascript,n=/{(?:[^{}]|{(?:[^{}]|{[^{}]*})*})+}/.source,a="(@(?:param|arg|argument|property)\\s+(?:"+n+"\\s+)?)";e.languages.jsdoc=e.languages.extend("javadoclike",{parameter:{pattern:RegExp(a+/[$\w\xA0-\uFFFF.]+(?=\s|$)/.source),lookbehind:!0,inside:{punctuation:/\./}}}),e.languages.insertBefore("jsdoc","keyword",{"optional-parameter":{pattern:RegExp(a+/\[[$\w\xA0-\uFFFF.]+(?:=[^[\]]+)?\](?=\s|$)/.source),lookbehind:!0,inside:{parameter:{pattern:/(^\[)[$\w\xA0-\uFFFF\.]+/,lookbehind:!0,inside:{punctuation:/\./}},code:{pattern:/(=)[\s\S]*(?=\]$)/,lookbehind:!0,inside:t,alias:"language-javascript"},punctuation:/[=[\]]/}},"class-name":[{pattern:RegExp("(@[a-z]+\\s+)"+n),lookbehind:!0,inside:{punctuation:/[.,:?=<>|{}()[\]]/}},{pattern:/(@(?:augments|extends|class|interface|memberof!?|this)\s+)[A-Z]\w*(?:\.[A-Z]\w*)*/,lookbehind:!0,inside:{punctuation:/\./}}],example:{pattern:/(@example\s+)[^@]+?(?=\s*(?:\*\s*)?(?:@\w|\*\/))/,lookbehind:!0,inside:{code:{pattern:/^(\s*(?:\*\s*)?).+$/m,lookbehind:!0,inside:t,alias:"language-javascript"}}}}),e.languages.javadoclike.addSupport("javascript",e.languages.jsdoc)}(i),i.languages.actionscript=i.languages.extend("javascript",{keyword:/\b(?:as|break|case|catch|class|const|default|delete|do|else|extends|finally|for|function|if|implements|import|in|instanceof|interface|internal|is|native|new|null|package|private|protected|public|return|super|switch|this|throw|try|typeof|use|var|void|while|with|dynamic|each|final|get|include|namespace|native|override|set|static)\b/,operator:/\+\+|--|(?:[+\-*\/%^]|&&?|\|\|?|<>?>?|[!=]=?)=?|[~?@]/}),i.languages.actionscript["class-name"].alias="function",i.languages.markup&&i.languages.insertBefore("actionscript","string",{xml:{pattern:/(^|[^.])<\/?\w+(?:\s+[^\s>\/=]+=("|')(?:\\[\s\S]|(?!\2)[^\\])*\2)*\s*\/?>/,lookbehind:!0,inside:{rest:i.languages.markup}}}),function(e){var t=/#(?!\{).+/,n={pattern:/#\{[^}]+\}/,alias:"variable"};e.languages.coffeescript=e.languages.extend("javascript",{comment:t,string:[{pattern:/'(?:\\[\s\S]|[^\\'])*'/,greedy:!0},{pattern:/"(?:\\[\s\S]|[^\\"])*"/,greedy:!0,inside:{interpolation:n}}],keyword:/\b(?:and|break|by|catch|class|continue|debugger|delete|do|each|else|extend|extends|false|finally|for|if|in|instanceof|is|isnt|let|loop|namespace|new|no|not|null|of|off|on|or|own|return|super|switch|then|this|throw|true|try|typeof|undefined|unless|until|when|while|window|with|yes|yield)\b/,"class-member":{pattern:/@(?!\d)\w+/,alias:"variable"}}),e.languages.insertBefore("coffeescript","comment",{"multiline-comment":{pattern:/###[\s\S]+?###/,alias:"comment"},"block-regex":{pattern:/\/{3}[\s\S]*?\/{3}/,alias:"regex",inside:{comment:t,interpolation:n}}}),e.languages.insertBefore("coffeescript","string",{"inline-javascript":{pattern:/`(?:\\[\s\S]|[^\\`])*`/,inside:{delimiter:{pattern:/^`|`$/,alias:"punctuation"},rest:e.languages.javascript}},"multiline-string":[{pattern:/'''[\s\S]*?'''/,greedy:!0,alias:"string"},{pattern:/"""[\s\S]*?"""/,greedy:!0,alias:"string",inside:{interpolation:n}}]}),e.languages.insertBefore("coffeescript","keyword",{property:/(?!\d)\w+(?=\s*:(?!:))/}),delete e.languages.coffeescript["template-string"],e.languages.coffee=e.languages.coffeescript}(i),function(e){e.languages.insertBefore("javascript","function-variable",{"method-variable":{pattern:RegExp("(\\.\\s*)"+e.languages.javascript["function-variable"].pattern.source),lookbehind:!0,alias:["function-variable","method","function","property-access"]}}),e.languages.insertBefore("javascript","function",{method:{pattern:RegExp("(\\.\\s*)"+e.languages.javascript.function.source),lookbehind:!0,alias:["function","property-access"]}}),e.languages.insertBefore("javascript","constant",{"known-class-name":[{pattern:/\b(?:(?:(?:Uint|Int)(?:8|16|32)|Uint8Clamped|Float(?:32|64))?Array|ArrayBuffer|BigInt|Boolean|DataView|Date|Error|Function|Intl|JSON|Math|Number|Object|Promise|Proxy|Reflect|RegExp|String|Symbol|(?:Weak)?(?:Set|Map)|WebAssembly)\b/,alias:"class-name"},{pattern:/\b(?:[A-Z]\w*)Error\b/,alias:"class-name"}]}),e.languages.javascript.keyword.unshift({pattern:/\b(?:as|default|export|from|import)\b/,alias:"module"},{pattern:/\bnull\b/,alias:["null","nil"]},{pattern:/\bundefined\b/,alias:"nil"}),e.languages.insertBefore("javascript","operator",{spread:{pattern:/\.{3}/,alias:"operator"},arrow:{pattern:/=>/,alias:"operator"}}),e.languages.insertBefore("javascript","punctuation",{"property-access":{pattern:/(\.\s*)#?[_$a-zA-Z\xA0-\uFFFF][$\w\xA0-\uFFFF]*/,lookbehind:!0},"maybe-class-name":{pattern:/(^|[^$\w\xA0-\uFFFF])[A-Z][$\w\xA0-\uFFFF]+/,lookbehind:!0},dom:{pattern:/\b(?:document|location|navigator|performance|(?:local|session)Storage|window)\b/,alias:"variable"},console:{pattern:/\bconsole(?=\s*\.)/,alias:"class-name"}});for(var t=["function","function-variable","method","method-variable","property-access"],n=0;n))/i,delete e.languages.flow.parameter,e.languages.insertBefore("flow","operator",{"flow-punctuation":{pattern:/\{\||\|\}/,alias:"punctuation"}}),Array.isArray(e.languages.flow.keyword)||(e.languages.flow.keyword=[e.languages.flow.keyword]),e.languages.flow.keyword.unshift({pattern:/(^|[^$]\b)(?:type|opaque|declare|Class)\b(?!\$)/,lookbehind:!0},{pattern:/(^|[^$]\B)\$(?:await|Diff|Exact|Keys|ObjMap|PropertyType|Shape|Record|Supertype|Subtype|Enum)\b(?!\$)/,lookbehind:!0})}(i),i.languages.n4js=i.languages.extend("javascript",{keyword:/\b(?:any|Array|boolean|break|case|catch|class|const|constructor|continue|debugger|declare|default|delete|do|else|enum|export|extends|false|finally|for|from|function|get|if|implements|import|in|instanceof|interface|let|module|new|null|number|package|private|protected|public|return|set|static|string|super|switch|this|throw|true|try|typeof|var|void|while|with|yield)\b/}),i.languages.insertBefore("n4js","constant",{annotation:{pattern:/@+\w+/,alias:"operator"}}),i.languages.n4jsd=i.languages.n4js,i.languages.typescript=i.languages.extend("javascript",{keyword:/\b(?:abstract|as|async|await|break|case|catch|class|const|constructor|continue|debugger|declare|default|delete|do|else|enum|export|extends|finally|for|from|function|get|if|implements|import|in|instanceof|interface|is|keyof|let|module|namespace|new|null|of|package|private|protected|public|readonly|return|require|set|static|super|switch|this|throw|try|type|typeof|var|void|while|with|yield)\b/,builtin:/\b(?:string|Function|any|number|boolean|Array|symbol|console|Promise|unknown|never)\b/}),i.languages.ts=i.languages.typescript,function(e){var t=e.languages.javascript["template-string"],n=t.pattern.source,a=t.inside.interpolation,o=a.inside["interpolation-punctuation"],r=a.pattern.source;function i(t,a){if(e.languages[t])return{pattern:RegExp("((?:"+a+")\\s*)"+n),lookbehind:!0,greedy:!0,inside:{"template-punctuation":{pattern:/^`|`$/,alias:"string"},"embedded-code":{pattern:/[\s\S]+/,alias:t}}}}function l(e,t){return"___"+t.toUpperCase()+"_"+e+"___"}function s(t,n,a){var o={code:t,grammar:n,language:a};return e.hooks.run("before-tokenize",o),o.tokens=e.tokenize(o.code,o.grammar),e.hooks.run("after-tokenize",o),o.tokens}function c(t){var n={};n["interpolation-punctuation"]=o;var r=e.tokenize(t,n);if(3===r.length){var i=[1,1];i.push.apply(i,s(r[1],e.languages.javascript,"javascript")),r.splice.apply(r,i)}return new e.Token("interpolation",r,a.alias,t)}function u(t,n,a){var o=e.tokenize(t,{interpolation:{pattern:RegExp(r),lookbehind:!0}}),i=0,u={},p=s(o.map((function(e){if("string"==typeof e)return e;for(var n,o=e.content;-1!==t.indexOf(n=l(i++,a)););return u[n]=o,n})).join(""),n,a),d=Object.keys(u);return i=0,function e(t){for(var n=0;n=d.length)return;var a=t[n];if("string"==typeof a||"string"==typeof a.content){var o=d[i],r="string"==typeof a?a:a.content,l=r.indexOf(o);if(-1!==l){++i;var s=r.substring(0,l),p=c(u[o]),f=r.substring(l+o.length),m=[];if(s&&m.push(s),m.push(p),f){var h=[f];e(h),m.push.apply(m,h)}"string"==typeof a?(t.splice.apply(t,[n,1].concat(m)),n+=m.length-1):a.content=m}}else{var v=a.content;Array.isArray(v)?e(v):e([v])}}}(p),new e.Token(a,p,"language-"+a,t)}e.languages.javascript["template-string"]=[i("css",/\b(?:styled(?:\([^)]*\))?(?:\s*\.\s*\w+(?:\([^)]*\))*)*|css(?:\s*\.\s*(?:global|resolve))?|createGlobalStyle|keyframes)/.source),i("html",/\bhtml|\.\s*(?:inner|outer)HTML\s*\+?=/.source),i("svg",/\bsvg/.source),i("markdown",/\b(?:md|markdown)/.source),i("graphql",/\b(?:gql|graphql(?:\s*\.\s*experimental)?)/.source),t].filter(Boolean);var p={javascript:!0,js:!0,typescript:!0,ts:!0,jsx:!0,tsx:!0};function d(e){return"string"==typeof e?e:Array.isArray(e)?e.map(d).join(""):d(e.content)}e.hooks.add("after-tokenize",(function(t){t.language in p&&function t(n){for(var a=0,o=n.length;a/g,t),n&&(e=e+"|"+e.replace(/_/g,"\\*")),RegExp(/((?:^|[^\\])(?:\\{2})*)/.source+"(?:"+e+")")}var a=/(?:\\.|``.+?``|`[^`\r\n]+`|[^\\|\r\n`])+/.source,o=/\|?__(?:\|__)+\|?(?:(?:\r?\n|\r)|$)/.source.replace(/__/g,a),r=/\|?[ \t]*:?-{3,}:?[ \t]*(?:\|[ \t]*:?-{3,}:?[ \t]*)+\|?(?:\r?\n|\r)/.source;e.languages.markdown=e.languages.extend("markup",{}),e.languages.insertBefore("markdown","prolog",{blockquote:{pattern:/^>(?:[\t ]*>)*/m,alias:"punctuation"},table:{pattern:RegExp("^"+o+r+"(?:"+o+")*","m"),inside:{"table-data-rows":{pattern:RegExp("^("+o+r+")(?:"+o+")*$"),lookbehind:!0,inside:{"table-data":{pattern:RegExp(a),inside:e.languages.markdown},punctuation:/\|/}},"table-line":{pattern:RegExp("^("+o+")"+r+"$"),lookbehind:!0,inside:{punctuation:/\||:?-{3,}:?/}},"table-header-row":{pattern:RegExp("^"+o+"$"),inside:{"table-header":{pattern:RegExp(a),alias:"important",inside:e.languages.markdown},punctuation:/\|/}}}},code:[{pattern:/(^[ \t]*(?:\r?\n|\r))(?: {4}|\t).+(?:(?:\r?\n|\r)(?: {4}|\t).+)*/m,lookbehind:!0,alias:"keyword"},{pattern:/``.+?``|`[^`\r\n]+`/,alias:"keyword"},{pattern:/^```[\s\S]*?^```$/m,greedy:!0,inside:{"code-block":{pattern:/^(```.*(?:\r?\n|\r))[\s\S]+?(?=(?:\r?\n|\r)^```$)/m,lookbehind:!0},"code-language":{pattern:/^(```).+/,lookbehind:!0},punctuation:/```/}}],title:[{pattern:/\S.*(?:\r?\n|\r)(?:==+|--+)(?=[ \t]*$)/m,alias:"important",inside:{punctuation:/==+$|--+$/}},{pattern:/(^\s*)#+.+/m,lookbehind:!0,alias:"important",inside:{punctuation:/^#+|#+$/}}],hr:{pattern:/(^\s*)([*-])(?:[\t ]*\2){2,}(?=\s*$)/m,lookbehind:!0,alias:"punctuation"},list:{pattern:/(^\s*)(?:[*+-]|\d+\.)(?=[\t ].)/m,lookbehind:!0,alias:"punctuation"},"url-reference":{pattern:/!?\[[^\]]+\]:[\t ]+(?:\S+|<(?:\\.|[^>\\])+>)(?:[\t ]+(?:"(?:\\.|[^"\\])*"|'(?:\\.|[^'\\])*'|\((?:\\.|[^)\\])*\)))?/,inside:{variable:{pattern:/^(!?\[)[^\]]+/,lookbehind:!0},string:/(?:"(?:\\.|[^"\\])*"|'(?:\\.|[^'\\])*'|\((?:\\.|[^)\\])*\))$/,punctuation:/^[\[\]!:]|[<>]/},alias:"url"},bold:{pattern:n(/__(?:(?!_)|_(?:(?!_))+_)+__/.source,!0),lookbehind:!0,greedy:!0,inside:{content:{pattern:/(^..)[\s\S]+(?=..$)/,lookbehind:!0,inside:{}},punctuation:/\*\*|__/}},italic:{pattern:n(/_(?:(?!_)|__(?:(?!_))+__)+_/.source,!0),lookbehind:!0,greedy:!0,inside:{content:{pattern:/(^.)[\s\S]+(?=.$)/,lookbehind:!0,inside:{}},punctuation:/[*_]/}},strike:{pattern:n(/(~~?)(?:(?!~))+?\2/.source,!1),lookbehind:!0,greedy:!0,inside:{content:{pattern:/(^~~?)[\s\S]+(?=\1$)/,lookbehind:!0,inside:{}},punctuation:/~~?/}},url:{pattern:n(/!?\[(?:(?!\]))+\](?:\([^\s)]+(?:[\t ]+"(?:\\.|[^"\\])*")?\)| ?\[(?:(?!\]))+\])/.source,!1),lookbehind:!0,greedy:!0,inside:{variable:{pattern:/(\[)[^\]]+(?=\]$)/,lookbehind:!0},content:{pattern:/(^!?\[)[^\]]+(?=\])/,lookbehind:!0,inside:{}},string:{pattern:/"(?:\\.|[^"\\])*"(?=\)$)/}}}}),["url","bold","italic","strike"].forEach((function(t){["url","bold","italic","strike"].forEach((function(n){t!==n&&(e.languages.markdown[t].inside.content.inside[n]=e.languages.markdown[n])}))})),e.hooks.add("after-tokenize",(function(e){"markdown"!==e.language&&"md"!==e.language||function e(t){if(t&&"string"!=typeof t)for(var n=0,a=t.length;n",unchanged:" ",diff:"!"};Object.keys(t).forEach((function(n){var a=t[n],o=[];/^\w+$/.test(n)||o.push(/\w+/.exec(n)[0]),"diff"===n&&o.push("bold"),e.languages.diff[n]={pattern:RegExp("^(?:["+a+"].*(?:\r\n?|\n|(?![\\s\\S])))+","m"),alias:o}})),Object.defineProperty(e.languages.diff,"PREFIXES",{value:t})}(i),i.languages.git={comment:/^#.*/m,deleted:/^[-\u2013].*/m,inserted:/^\+.*/m,string:/("|')(?:\\.|(?!\1)[^\\\r\n])*\1/m,command:{pattern:/^.*\$ git .*$/m,inside:{parameter:/\s--?\w+/m}},coord:/^@@.*@@$/m,commit_sha1:/^commit \w{40}$/m},i.languages.go=i.languages.extend("clike",{keyword:/\b(?:break|case|chan|const|continue|default|defer|else|fallthrough|for|func|go(?:to)?|if|import|interface|map|package|range|return|select|struct|switch|type|var)\b/,builtin:/\b(?:bool|byte|complex(?:64|128)|error|float(?:32|64)|rune|string|u?int(?:8|16|32|64)?|uintptr|append|cap|close|complex|copy|delete|imag|len|make|new|panic|print(?:ln)?|real|recover)\b/,boolean:/\b(?:_|iota|nil|true|false)\b/,operator:/[*\/%^!=]=?|\+[=+]?|-[=-]?|\|[=|]?|&(?:=|&|\^=?)?|>(?:>=?|=)?|<(?:<=?|=|-)?|:=|\.\.\./,number:/(?:\b0x[a-f\d]+|(?:\b\d+\.?\d*|\B\.\d+)(?:e[-+]?\d+)?)i?/i,string:{pattern:/(["'`])(\\[\s\S]|(?!\1)[^\\])*\1/,greedy:!0}}),delete i.languages.go["class-name"],function(e){e.languages.handlebars={comment:/\{\{![\s\S]*?\}\}/,delimiter:{pattern:/^\{\{\{?|\}\}\}?$/i,alias:"punctuation"},string:/(["'])(?:\\.|(?!\1)[^\\\r\n])*\1/,number:/\b0x[\dA-Fa-f]+\b|(?:\b\d+\.?\d*|\B\.\d+)(?:[Ee][+-]?\d+)?/,boolean:/\b(?:true|false)\b/,block:{pattern:/^(\s*~?\s*)[#\/]\S+?(?=\s*~?\s*$|\s)/i,lookbehind:!0,alias:"keyword"},brackets:{pattern:/\[[^\]]+\]/,inside:{punctuation:/\[|\]/,variable:/[\s\S]+/}},punctuation:/[!"#%&'()*+,.\/;<=>@\[\\\]^`{|}~]/,variable:/[^!"#%&'()*+,.\/;<=>@\[\\\]^`{|}~\s]+/},e.hooks.add("before-tokenize",(function(t){e.languages["markup-templating"].buildPlaceholders(t,"handlebars",/\{\{\{[\s\S]+?\}\}\}|\{\{[\s\S]+?\}\}/g)})),e.hooks.add("after-tokenize",(function(t){e.languages["markup-templating"].tokenizePlaceholders(t,"handlebars")}))}(i),i.languages.json={property:{pattern:/"(?:\\.|[^\\"\r\n])*"(?=\s*:)/,greedy:!0},string:{pattern:/"(?:\\.|[^\\"\r\n])*"(?!\s*:)/,greedy:!0},comment:/\/\/.*|\/\*[\s\S]*?(?:\*\/|$)/,number:/-?\d+\.?\d*(e[+-]?\d+)?/i,punctuation:/[{}[\],]/,operator:/:/,boolean:/\b(?:true|false)\b/,null:{pattern:/\bnull\b/,alias:"keyword"}},i.languages.less=i.languages.extend("css",{comment:[/\/\*[\s\S]*?\*\//,{pattern:/(^|[^\\])\/\/.*/,lookbehind:!0}],atrule:{pattern:/@[\w-]+?(?:\([^{}]+\)|[^(){};])*?(?=\s*\{)/i,inside:{punctuation:/[:()]/}},selector:{pattern:/(?:@\{[\w-]+\}|[^{};\s@])(?:@\{[\w-]+\}|\([^{}]*\)|[^{};@])*?(?=\s*\{)/,inside:{variable:/@+[\w-]+/}},property:/(?:@\{[\w-]+\}|[\w-])+(?:\+_?)?(?=\s*:)/i,operator:/[+\-*\/]/}),i.languages.insertBefore("less","property",{variable:[{pattern:/@[\w-]+\s*:/,inside:{punctuation:/:/}},/@@?[\w-]+/],"mixin-usage":{pattern:/([{;]\s*)[.#](?!\d)[\w-]+.*?(?=[(;])/,lookbehind:!0,alias:"function"}}),i.languages.makefile={comment:{pattern:/(^|[^\\])#(?:\\(?:\r\n|[\s\S])|[^\\\r\n])*/,lookbehind:!0},string:{pattern:/(["'])(?:\\(?:\r\n|[\s\S])|(?!\1)[^\\\r\n])*\1/,greedy:!0},builtin:/\.[A-Z][^:#=\s]+(?=\s*:(?!=))/,symbol:{pattern:/^[^:=\r\n]+(?=\s*:(?!=))/m,inside:{variable:/\$+(?:[^(){}:#=\s]+|(?=[({]))/}},variable:/\$+(?:[^(){}:#=\s]+|\([@*%<^+?][DF]\)|(?=[({]))/,keyword:[/-include\b|\b(?:define|else|endef|endif|export|ifn?def|ifn?eq|include|override|private|sinclude|undefine|unexport|vpath)\b/,{pattern:/(\()(?:addsuffix|abspath|and|basename|call|dir|error|eval|file|filter(?:-out)?|findstring|firstword|flavor|foreach|guile|if|info|join|lastword|load|notdir|or|origin|patsubst|realpath|shell|sort|strip|subst|suffix|value|warning|wildcard|word(?:s|list)?)(?=[ \t])/,lookbehind:!0}],operator:/(?:::|[?:+!])?=|[|@]/,punctuation:/[:;(){}]/},i.languages.objectivec=i.languages.extend("c",{keyword:/\b(?:asm|typeof|inline|auto|break|case|char|const|continue|default|do|double|else|enum|extern|float|for|goto|if|int|long|register|return|short|signed|sizeof|static|struct|switch|typedef|union|unsigned|void|volatile|while|in|self|super)\b|(?:@interface|@end|@implementation|@protocol|@class|@public|@protected|@private|@property|@try|@catch|@finally|@throw|@synthesize|@dynamic|@selector)\b/,string:/("|')(?:\\(?:\r\n|[\s\S])|(?!\1)[^\\\r\n])*\1|@"(?:\\(?:\r\n|[\s\S])|[^"\\\r\n])*"/,operator:/-[->]?|\+\+?|!=?|<>?=?|==?|&&?|\|\|?|[~^%?*\/@]/}),delete i.languages.objectivec["class-name"],i.languages.ocaml={comment:/\(\*[\s\S]*?\*\)/,string:[{pattern:/"(?:\\.|[^\\\r\n"])*"/,greedy:!0},{pattern:/(['`])(?:\\(?:\d+|x[\da-f]+|.)|(?!\1)[^\\\r\n])\1/i,greedy:!0}],number:/\b(?:0x[\da-f][\da-f_]+|(?:0[bo])?\d[\d_]*\.?[\d_]*(?:e[+-]?[\d_]+)?)/i,type:{pattern:/\B['`]\w*/,alias:"variable"},directive:{pattern:/\B#\w+/,alias:"function"},keyword:/\b(?:as|assert|begin|class|constraint|do|done|downto|else|end|exception|external|for|fun|function|functor|if|in|include|inherit|initializer|lazy|let|match|method|module|mutable|new|object|of|open|prefix|private|rec|then|sig|struct|to|try|type|val|value|virtual|where|while|with)\b/,boolean:/\b(?:false|true)\b/,operator:/:=|[=<>@^|&+\-*\/$%!?~][!$%&*+\-.\/:<=>?@^|~]*|\b(?:and|asr|land|lor|lxor|lsl|lsr|mod|nor|or)\b/,punctuation:/[(){}\[\]|_.,:;]/},i.languages.python={comment:{pattern:/(^|[^\\])#.*/,lookbehind:!0},"string-interpolation":{pattern:/(?:f|rf|fr)(?:("""|''')[\s\S]+?\1|("|')(?:\\.|(?!\2)[^\\\r\n])*\2)/i,greedy:!0,inside:{interpolation:{pattern:/((?:^|[^{])(?:{{)*){(?!{)(?:[^{}]|{(?!{)(?:[^{}]|{(?!{)(?:[^{}])+})+})+}/,lookbehind:!0,inside:{"format-spec":{pattern:/(:)[^:(){}]+(?=}$)/,lookbehind:!0},"conversion-option":{pattern:/![sra](?=[:}]$)/,alias:"punctuation"},rest:null}},string:/[\s\S]+/}},"triple-quoted-string":{pattern:/(?:[rub]|rb|br)?("""|''')[\s\S]+?\1/i,greedy:!0,alias:"string"},string:{pattern:/(?:[rub]|rb|br)?("|')(?:\\.|(?!\1)[^\\\r\n])*\1/i,greedy:!0},function:{pattern:/((?:^|\s)def[ \t]+)[a-zA-Z_]\w*(?=\s*\()/g,lookbehind:!0},"class-name":{pattern:/(\bclass\s+)\w+/i,lookbehind:!0},decorator:{pattern:/(^\s*)@\w+(?:\.\w+)*/i,lookbehind:!0,alias:["annotation","punctuation"],inside:{punctuation:/\./}},keyword:/\b(?:and|as|assert|async|await|break|class|continue|def|del|elif|else|except|exec|finally|for|from|global|if|import|in|is|lambda|nonlocal|not|or|pass|print|raise|return|try|while|with|yield)\b/,builtin:/\b(?:__import__|abs|all|any|apply|ascii|basestring|bin|bool|buffer|bytearray|bytes|callable|chr|classmethod|cmp|coerce|compile|complex|delattr|dict|dir|divmod|enumerate|eval|execfile|file|filter|float|format|frozenset|getattr|globals|hasattr|hash|help|hex|id|input|int|intern|isinstance|issubclass|iter|len|list|locals|long|map|max|memoryview|min|next|object|oct|open|ord|pow|property|range|raw_input|reduce|reload|repr|reversed|round|set|setattr|slice|sorted|staticmethod|str|sum|super|tuple|type|unichr|unicode|vars|xrange|zip)\b/,boolean:/\b(?:True|False|None)\b/,number:/(?:\b(?=\d)|\B(?=\.))(?:0[bo])?(?:(?:\d|0x[\da-f])[\da-f]*\.?\d*|\.\d+)(?:e[+-]?\d+)?j?\b/i,operator:/[-+%=]=?|!=|\*\*?=?|\/\/?=?|<[<=>]?|>[=>]?|[&|^~]/,punctuation:/[{}[\];(),.:]/},i.languages.python["string-interpolation"].inside.interpolation.inside.rest=i.languages.python,i.languages.py=i.languages.python,i.languages.reason=i.languages.extend("clike",{comment:{pattern:/(^|[^\\])\/\*[\s\S]*?\*\//,lookbehind:!0},string:{pattern:/"(?:\\(?:\r\n|[\s\S])|[^\\\r\n"])*"/,greedy:!0},"class-name":/\b[A-Z]\w*/,keyword:/\b(?:and|as|assert|begin|class|constraint|do|done|downto|else|end|exception|external|for|fun|function|functor|if|in|include|inherit|initializer|lazy|let|method|module|mutable|new|nonrec|object|of|open|or|private|rec|sig|struct|switch|then|to|try|type|val|virtual|when|while|with)\b/,operator:/\.{3}|:[:=]|\|>|->|=(?:==?|>)?|<=?|>=?|[|^?'#!~`]|[+\-*\/]\.?|\b(?:mod|land|lor|lxor|lsl|lsr|asr)\b/}),i.languages.insertBefore("reason","class-name",{character:{pattern:/'(?:\\x[\da-f]{2}|\\o[0-3][0-7][0-7]|\\\d{3}|\\.|[^'\\\r\n])'/,alias:"string"},constructor:{pattern:/\b[A-Z]\w*\b(?!\s*\.)/,alias:"variable"},label:{pattern:/\b[a-z]\w*(?=::)/,alias:"symbol"}}),delete i.languages.reason.function,function(e){e.languages.sass=e.languages.extend("css",{comment:{pattern:/^([ \t]*)\/[\/*].*(?:(?:\r?\n|\r)\1[ \t]+.+)*/m,lookbehind:!0}}),e.languages.insertBefore("sass","atrule",{"atrule-line":{pattern:/^(?:[ \t]*)[@+=].+/m,inside:{atrule:/(?:@[\w-]+|[+=])/m}}}),delete e.languages.sass.atrule;var t=/\$[-\w]+|#\{\$[-\w]+\}/,n=[/[+*\/%]|[=!]=|<=?|>=?|\b(?:and|or|not)\b/,{pattern:/(\s+)-(?=\s)/,lookbehind:!0}];e.languages.insertBefore("sass","property",{"variable-line":{pattern:/^[ \t]*\$.+/m,inside:{punctuation:/:/,variable:t,operator:n}},"property-line":{pattern:/^[ \t]*(?:[^:\s]+ *:.*|:[^:\s]+.*)/m,inside:{property:[/[^:\s]+(?=\s*:)/,{pattern:/(:)[^:\s]+/,lookbehind:!0}],punctuation:/:/,variable:t,operator:n,important:e.languages.sass.important}}}),delete e.languages.sass.property,delete e.languages.sass.important,e.languages.insertBefore("sass","punctuation",{selector:{pattern:/([ \t]*)\S(?:,?[^,\r\n]+)*(?:,(?:\r?\n|\r)\1[ \t]+\S(?:,?[^,\r\n]+)*)*/,lookbehind:!0}})}(i),i.languages.scss=i.languages.extend("css",{comment:{pattern:/(^|[^\\])(?:\/\*[\s\S]*?\*\/|\/\/.*)/,lookbehind:!0},atrule:{pattern:/@[\w-]+(?:\([^()]+\)|[^(])*?(?=\s+[{;])/,inside:{rule:/@[\w-]+/}},url:/(?:[-a-z]+-)?url(?=\()/i,selector:{pattern:/(?=\S)[^@;{}()]?(?:[^@;{}()]|#\{\$[-\w]+\})+(?=\s*\{(?:\}|\s|[^}]+[:{][^}]+))/m,inside:{parent:{pattern:/&/,alias:"important"},placeholder:/%[-\w]+/,variable:/\$[-\w]+|#\{\$[-\w]+\}/}},property:{pattern:/(?:[\w-]|\$[-\w]+|#\{\$[-\w]+\})+(?=\s*:)/,inside:{variable:/\$[-\w]+|#\{\$[-\w]+\}/}}}),i.languages.insertBefore("scss","atrule",{keyword:[/@(?:if|else(?: if)?|for|each|while|import|extend|debug|warn|mixin|include|function|return|content)/i,{pattern:/( +)(?:from|through)(?= )/,lookbehind:!0}]}),i.languages.insertBefore("scss","important",{variable:/\$[-\w]+|#\{\$[-\w]+\}/}),i.languages.insertBefore("scss","function",{placeholder:{pattern:/%[-\w]+/,alias:"selector"},statement:{pattern:/\B!(?:default|optional)\b/i,alias:"keyword"},boolean:/\b(?:true|false)\b/,null:{pattern:/\bnull\b/,alias:"keyword"},operator:{pattern:/(\s)(?:[-+*\/%]|[=!]=|<=?|>=?|and|or|not)(?=\s)/,lookbehind:!0}}),i.languages.scss.atrule.inside.rest=i.languages.scss,i.languages.sql={comment:{pattern:/(^|[^\\])(?:\/\*[\s\S]*?\*\/|(?:--|\/\/|#).*)/,lookbehind:!0},variable:[{pattern:/@(["'`])(?:\\[\s\S]|(?!\1)[^\\])+\1/,greedy:!0},/@[\w.$]+/],string:{pattern:/(^|[^@\\])("|')(?:\\[\s\S]|(?!\2)[^\\]|\2\2)*\2/,greedy:!0,lookbehind:!0},function:/\b(?:AVG|COUNT|FIRST|FORMAT|LAST|LCASE|LEN|MAX|MID|MIN|MOD|NOW|ROUND|SUM|UCASE)(?=\s*\()/i,keyword:/\b(?:ACTION|ADD|AFTER|ALGORITHM|ALL|ALTER|ANALYZE|ANY|APPLY|AS|ASC|AUTHORIZATION|AUTO_INCREMENT|BACKUP|BDB|BEGIN|BERKELEYDB|BIGINT|BINARY|BIT|BLOB|BOOL|BOOLEAN|BREAK|BROWSE|BTREE|BULK|BY|CALL|CASCADED?|CASE|CHAIN|CHAR(?:ACTER|SET)?|CHECK(?:POINT)?|CLOSE|CLUSTERED|COALESCE|COLLATE|COLUMNS?|COMMENT|COMMIT(?:TED)?|COMPUTE|CONNECT|CONSISTENT|CONSTRAINT|CONTAINS(?:TABLE)?|CONTINUE|CONVERT|CREATE|CROSS|CURRENT(?:_DATE|_TIME|_TIMESTAMP|_USER)?|CURSOR|CYCLE|DATA(?:BASES?)?|DATE(?:TIME)?|DAY|DBCC|DEALLOCATE|DEC|DECIMAL|DECLARE|DEFAULT|DEFINER|DELAYED|DELETE|DELIMITERS?|DENY|DESC|DESCRIBE|DETERMINISTIC|DISABLE|DISCARD|DISK|DISTINCT|DISTINCTROW|DISTRIBUTED|DO|DOUBLE|DROP|DUMMY|DUMP(?:FILE)?|DUPLICATE|ELSE(?:IF)?|ENABLE|ENCLOSED|END|ENGINE|ENUM|ERRLVL|ERRORS|ESCAPED?|EXCEPT|EXEC(?:UTE)?|EXISTS|EXIT|EXPLAIN|EXTENDED|FETCH|FIELDS|FILE|FILLFACTOR|FIRST|FIXED|FLOAT|FOLLOWING|FOR(?: EACH ROW)?|FORCE|FOREIGN|FREETEXT(?:TABLE)?|FROM|FULL|FUNCTION|GEOMETRY(?:COLLECTION)?|GLOBAL|GOTO|GRANT|GROUP|HANDLER|HASH|HAVING|HOLDLOCK|HOUR|IDENTITY(?:_INSERT|COL)?|IF|IGNORE|IMPORT|INDEX|INFILE|INNER|INNODB|INOUT|INSERT|INT|INTEGER|INTERSECT|INTERVAL|INTO|INVOKER|ISOLATION|ITERATE|JOIN|KEYS?|KILL|LANGUAGE|LAST|LEAVE|LEFT|LEVEL|LIMIT|LINENO|LINES|LINESTRING|LOAD|LOCAL|LOCK|LONG(?:BLOB|TEXT)|LOOP|MATCH(?:ED)?|MEDIUM(?:BLOB|INT|TEXT)|MERGE|MIDDLEINT|MINUTE|MODE|MODIFIES|MODIFY|MONTH|MULTI(?:LINESTRING|POINT|POLYGON)|NATIONAL|NATURAL|NCHAR|NEXT|NO|NONCLUSTERED|NULLIF|NUMERIC|OFF?|OFFSETS?|ON|OPEN(?:DATASOURCE|QUERY|ROWSET)?|OPTIMIZE|OPTION(?:ALLY)?|ORDER|OUT(?:ER|FILE)?|OVER|PARTIAL|PARTITION|PERCENT|PIVOT|PLAN|POINT|POLYGON|PRECEDING|PRECISION|PREPARE|PREV|PRIMARY|PRINT|PRIVILEGES|PROC(?:EDURE)?|PUBLIC|PURGE|QUICK|RAISERROR|READS?|REAL|RECONFIGURE|REFERENCES|RELEASE|RENAME|REPEAT(?:ABLE)?|REPLACE|REPLICATION|REQUIRE|RESIGNAL|RESTORE|RESTRICT|RETURNS?|REVOKE|RIGHT|ROLLBACK|ROUTINE|ROW(?:COUNT|GUIDCOL|S)?|RTREE|RULE|SAVE(?:POINT)?|SCHEMA|SECOND|SELECT|SERIAL(?:IZABLE)?|SESSION(?:_USER)?|SET(?:USER)?|SHARE|SHOW|SHUTDOWN|SIMPLE|SMALLINT|SNAPSHOT|SOME|SONAME|SQL|START(?:ING)?|STATISTICS|STATUS|STRIPED|SYSTEM_USER|TABLES?|TABLESPACE|TEMP(?:ORARY|TABLE)?|TERMINATED|TEXT(?:SIZE)?|THEN|TIME(?:STAMP)?|TINY(?:BLOB|INT|TEXT)|TOP?|TRAN(?:SACTIONS?)?|TRIGGER|TRUNCATE|TSEQUAL|TYPES?|UNBOUNDED|UNCOMMITTED|UNDEFINED|UNION|UNIQUE|UNLOCK|UNPIVOT|UNSIGNED|UPDATE(?:TEXT)?|USAGE|USE|USER|USING|VALUES?|VAR(?:BINARY|CHAR|CHARACTER|YING)|VIEW|WAITFOR|WARNINGS|WHEN|WHERE|WHILE|WITH(?: ROLLUP|IN)?|WORK|WRITE(?:TEXT)?|YEAR)\b/i,boolean:/\b(?:TRUE|FALSE|NULL)\b/i,number:/\b0x[\da-f]+\b|\b\d+\.?\d*|\B\.\d+\b/i,operator:/[-+*\/=%^~]|&&?|\|\|?|!=?|<(?:=>?|<|>)?|>[>=]?|\b(?:AND|BETWEEN|IN|LIKE|NOT|OR|IS|DIV|REGEXP|RLIKE|SOUNDS LIKE|XOR)\b/i,punctuation:/[;[\]()`,.]/},function(e){var t={url:/url\((["']?).*?\1\)/i,string:{pattern:/("|')(?:(?!\1)[^\\\r\n]|\\(?:\r\n|[\s\S]))*\1/,greedy:!0},interpolation:null,func:null,important:/\B!(?:important|optional)\b/i,keyword:{pattern:/(^|\s+)(?:(?:if|else|for|return|unless)(?=\s+|$)|@[\w-]+)/,lookbehind:!0},hexcode:/#[\da-f]{3,6}/i,number:/\b\d+(?:\.\d+)?%?/,boolean:/\b(?:true|false)\b/,operator:[/~|[+!\/%<>?=]=?|[-:]=|\*[*=]?|\.+|&&|\|\||\B-\B|\b(?:and|in|is(?: a| defined| not|nt)?|not|or)\b/],punctuation:/[{}()\[\];:,]/};t.interpolation={pattern:/\{[^\r\n}:]+\}/,alias:"variable",inside:{delimiter:{pattern:/^{|}$/,alias:"punctuation"},rest:t}},t.func={pattern:/[\w-]+\([^)]*\).*/,inside:{function:/^[^(]+/,rest:t}},e.languages.stylus={comment:{pattern:/(^|[^\\])(\/\*[\s\S]*?\*\/|\/\/.*)/,lookbehind:!0},"atrule-declaration":{pattern:/(^\s*)@.+/m,lookbehind:!0,inside:{atrule:/^@[\w-]+/,rest:t}},"variable-declaration":{pattern:/(^[ \t]*)[\w$-]+\s*.?=[ \t]*(?:(?:\{[^}]*\}|.+)|$)/m,lookbehind:!0,inside:{variable:/^\S+/,rest:t}},statement:{pattern:/(^[ \t]*)(?:if|else|for|return|unless)[ \t]+.+/m,lookbehind:!0,inside:{keyword:/^\S+/,rest:t}},"property-declaration":{pattern:/((?:^|\{)([ \t]*))(?:[\w-]|\{[^}\r\n]+\})+(?:\s*:\s*|[ \t]+)[^{\r\n]*(?:;|[^{\r\n,](?=$)(?!(\r?\n|\r)(?:\{|\2[ \t]+)))/m,lookbehind:!0,inside:{property:{pattern:/^[^\s:]+/,inside:{interpolation:t.interpolation}},rest:t}},selector:{pattern:/(^[ \t]*)(?:(?=\S)(?:[^{}\r\n:()]|::?[\w-]+(?:\([^)\r\n]*\))?|\{[^}\r\n]+\})+)(?:(?:\r?\n|\r)(?:\1(?:(?=\S)(?:[^{}\r\n:()]|::?[\w-]+(?:\([^)\r\n]*\))?|\{[^}\r\n]+\})+)))*(?:,$|\{|(?=(?:\r?\n|\r)(?:\{|\1[ \t]+)))/m,lookbehind:!0,inside:{interpolation:t.interpolation,punctuation:/[{},]/}},func:t.func,string:t.string,interpolation:t.interpolation,punctuation:/[{}()\[\];:.]/}}(i);var l=i.util.clone(i.languages.typescript);i.languages.tsx=i.languages.extend("jsx",l),i.languages.wasm={comment:[/\(;[\s\S]*?;\)/,{pattern:/;;.*/,greedy:!0}],string:{pattern:/"(?:\\[\s\S]|[^"\\])*"/,greedy:!0},keyword:[{pattern:/\b(?:align|offset)=/,inside:{operator:/=/}},{pattern:/\b(?:(?:f32|f64|i32|i64)(?:\.(?:abs|add|and|ceil|clz|const|convert_[su]\/i(?:32|64)|copysign|ctz|demote\/f64|div(?:_[su])?|eqz?|extend_[su]\/i32|floor|ge(?:_[su])?|gt(?:_[su])?|le(?:_[su])?|load(?:(?:8|16|32)_[su])?|lt(?:_[su])?|max|min|mul|nearest|neg?|or|popcnt|promote\/f32|reinterpret\/[fi](?:32|64)|rem_[su]|rot[lr]|shl|shr_[su]|store(?:8|16|32)?|sqrt|sub|trunc(?:_[su]\/f(?:32|64))?|wrap\/i64|xor))?|memory\.(?:grow|size))\b/,inside:{punctuation:/\./}},/\b(?:anyfunc|block|br(?:_if|_table)?|call(?:_indirect)?|data|drop|elem|else|end|export|func|get_(?:global|local)|global|if|import|local|loop|memory|module|mut|nop|offset|param|result|return|select|set_(?:global|local)|start|table|tee_local|then|type|unreachable)\b/],variable:/\$[\w!#$%&'*+\-./:<=>?@\\^_`|~]+/i,number:/[+-]?\b(?:\d(?:_?\d)*(?:\.\d(?:_?\d)*)?(?:[eE][+-]?\d(?:_?\d)*)?|0x[\da-fA-F](?:_?[\da-fA-F])*(?:\.[\da-fA-F](?:_?[\da-fA-D])*)?(?:[pP][+-]?\d(?:_?\d)*)?)\b|\binf\b|\bnan(?::0x[\da-fA-F](?:_?[\da-fA-D])*)?\b/,punctuation:/[()]/},i.languages.yaml={scalar:{pattern:/([\-:]\s*(?:![^\s]+)?[ \t]*[|>])[ \t]*(?:((?:\r?\n|\r)[ \t]+)[^\r\n]+(?:\2[^\r\n]+)*)/,lookbehind:!0,alias:"string"},comment:/#.*/,key:{pattern:/(\s*(?:^|[:\-,[{\r\n?])[ \t]*(?:![^\s]+)?[ \t]*)[^\r\n{[\]},#\s]+?(?=\s*:\s)/,lookbehind:!0,alias:"atrule"},directive:{pattern:/(^[ \t]*)%.+/m,lookbehind:!0,alias:"important"},datetime:{pattern:/([:\-,[{]\s*(?:![^\s]+)?[ \t]*)(?:\d{4}-\d\d?-\d\d?(?:[tT]|[ \t]+)\d\d?:\d{2}:\d{2}(?:\.\d*)?[ \t]*(?:Z|[-+]\d\d?(?::\d{2})?)?|\d{4}-\d{2}-\d{2}|\d\d?:\d{2}(?::\d{2}(?:\.\d*)?)?)(?=[ \t]*(?:$|,|]|}))/m,lookbehind:!0,alias:"number"},boolean:{pattern:/([:\-,[{]\s*(?:![^\s]+)?[ \t]*)(?:true|false)[ \t]*(?=$|,|]|})/im,lookbehind:!0,alias:"important"},null:{pattern:/([:\-,[{]\s*(?:![^\s]+)?[ \t]*)(?:null|~)[ \t]*(?=$|,|]|})/im,lookbehind:!0,alias:"important"},string:{pattern:/([:\-,[{]\s*(?:![^\s]+)?[ \t]*)("|')(?:(?!\2)[^\\\r\n]|\\.)*\2(?=[ \t]*(?:$|,|]|}|\s*#))/m,lookbehind:!0,greedy:!0},number:{pattern:/([:\-,[{]\s*(?:![^\s]+)?[ \t]*)[+-]?(?:0x[\da-f]+|0o[0-7]+|(?:\d+\.?\d*|\.?\d+)(?:e[+-]?\d+)?|\.inf|\.nan)[ \t]*(?=$|,|]|})/im,lookbehind:!0},tag:/![^\s]+/,important:/[&*][\w]+/,punctuation:/---|[:[\]{}\-,|>?]|\.\.\./},i.languages.yml=i.languages.yaml,t.a=i},function(e,t,n){"use strict";var a=Object.getOwnPropertySymbols,o=Object.prototype.hasOwnProperty,r=Object.prototype.propertyIsEnumerable;function i(e){if(null==e)throw new TypeError("Object.assign cannot be called with null or undefined");return Object(e)}e.exports=function(){try{if(!Object.assign)return!1;var e=new String("abc");if(e[5]="de","5"===Object.getOwnPropertyNames(e)[0])return!1;for(var t={},n=0;n<10;n++)t["_"+String.fromCharCode(n)]=n;if("0123456789"!==Object.getOwnPropertyNames(t).map((function(e){return t[e]})).join(""))return!1;var a={};return"abcdefghijklmnopqrst".split("").forEach((function(e){a[e]=e})),"abcdefghijklmnopqrst"===Object.keys(Object.assign({},a)).join("")}catch(o){return!1}}()?Object.assign:function(e,t){for(var n,l,s=i(e),c=1;cN.length&&N.push(e)}function I(e,t,n,a){var o=typeof e;"undefined"!==o&&"boolean"!==o||(e=null);var l=!1;if(null===e)l=!0;else switch(o){case"string":case"number":l=!0;break;case"object":switch(e.$$typeof){case r:case i:l=!0}}if(l)return n(a,e,""===t?"."+L(e,0):t),1;if(l=0,t=""===t?".":t+":",Array.isArray(e))for(var s=0;s