You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
{"config":{"lang":["en"],"separator":"[\\s\\-]+","pipeline":["stopWordFilter"]},"docs":[{"location":"","title":"Welcome to Chartlets","text":"<p>Chartlets is a software framework that allows websites developed with React to be extended by server-side widgets programmed in Python or other programming languages. </p>"},{"location":"#how-it-works","title":"How it works","text":"<p>Users write the widgets in, e.g. Python, and a REST server implements three endpoints to publish the widgets:</p> <ul> <li><code>GET /contributions</code>: Called once after application UI starts up. Returns an object whose keys are contribution points (e.g., \"panels\") and whose values are arrays of contribution objects.</li> <li><code>POST /layout/{contribPoint}/{contribIndex}</code>: Called once for every contribution when it becomes visible in the UI. Returns the contribution's initial component tree.</li> <li><code>POST /callback</code>: Called when users interact with the component tree or on application state changes. Returns an array of contribution changes where each contribution change contains an array of actions to be applied to the component tree.</li> </ul> <p>The following sequence diagram depicts how the library is supposed to work. The top shows the JavaScript frontend that uses this library. The bottom shows the lifeline of the backend REST server.</p> <p></p>"},{"location":"components/","title":"Components","text":"<p>Given here is a list of the components supported by Chartlets.</p> <p>Using the Python package <code>chartlets</code>, the related component classes can be imported from the <code>chartlets.components</code> module, e.g.</p> <pre><code>from chartlets.components import Checkbox\n</code></pre>"},{"location":"components/#classes","title":"Classes","text":""},{"location":"components/#chartlets.components.Box","title":"<code>chartlets.components.Box</code> <code>dataclass</code>","text":"<p> Bases: <code>Container</code></p> <p>The Box component is a generic container for grouping other components. It's a fundamental building block. Think of it as an HTML <code><div></code> element.</p> <p>Use the <code>style</code> attribute to layout the box and its child components.</p>"},{"location":"components/#chartlets.components.Button","title":"<code>chartlets.components.Button</code> <code>dataclass</code>","text":"<p> Bases: <code>Component</code></p> <p>Buttons allow users to take actions, and make choices, with a single tap.</p>"},{"location":"components/#chartlets.components.Checkbox","title":"<code>chartlets.components.Checkbox</code> <code>dataclass</code>","text":"<p> Bases: <code>Component</code></p> <p>Checkboxes allow the user to select one or more items from a set. They can be used to turn an option on or off.</p>"},{"location":"components/#chartlets.components.Dropdown","title":"<code>chartlets.components.Dropdown</code> <code>dataclass</code>","text":"<p> Bases: <code>Component</code></p> <p>Dropdown components are used for collecting user provided information from a list of options.</p>"},{"location":"components/#chartlets.components.Typography","title":"<code>chartlets.components.Typography</code> <code>dataclass</code>","text":"<p> Bases: <code>Component</code></p> <p>Use typography to present your design and content as clearly and efficiently as possible.</p>"},{"location":"components/#base-classes","title":"Base classes","text":""},{"location":"components/#chartlets.Component","title":"<code>chartlets.Component</code> <code>dataclass</code>","text":"<p> Bases: <code>ABC</code></p> <p>Base class for components. Provides the common attributes that apply to all components.</p>"},{"location":"components/#chartlets.Container","title":"<code>chartlets.Container</code> <code>dataclass</code>","text":"<p> Bases: <code>Component</code>, <code>ABC</code></p> <p>Base class for components that require child components to be useful.</p>"},{"location":"demo/","title":"Demo","text":"<p>Chartlets provides a simple demo that serves as a reference for the framework usage and testbed for its features.</p> <pre><code>git clone https://github.com/bcdev/chartlets.git\n</code></pre>"},{"location":"demo/#run-the-server","title":"Run the server","text":"<pre><code>cd chartlets/chartlets.py\nconda env create\nconda activate chartlets\npip install -ve . \npython -m chartlets.demo.server\n</code></pre>"},{"location":"demo/#run-the-ui","title":"Run the UI","text":"<pre><code>cd ../chartlets.js\nnpm install\nnpm run dev\n</code></pre>"},{"location":"usage/","title":"Usage","text":"<p>The Chartlets framework has two types of users. </p> <ul> <li>Application contributors develop new contributions for a specific web application.</li> <li>Application providers develop the web application and the service that allows for server-side UI contributions.</li> </ul>"},{"location":"usage/#application-contributor-guide","title":"Application contributor guide","text":"<p>As a application contributors you develop a Python module that is consumed by the application's backend service.</p> <p>Your module is supposed to export one or more instances of the <code>chartlets.Extension</code> class. An extension object is a container for your UI contributions. It groups contributions that logically belong together. </p> <p>To develop an extension, follow these steps:</p> <ol> <li>Create the extension object</li> <li>Create the contribution object</li> <li>Implement the contribution layout</li> <li>Implement the contribution callbacks</li> <li>Register the contribution</li> </ol> <p>In the following the above steps are detailed further. </p>"},{"location":"usage/#create-the-extension-object","title":"Create the extension object","text":"<p>Your contributions to the application are published using a <code>chartlets.Extension</code> object that is exported from your extension module. </p> <pre><code>from chartlets import Extension\n\next = Extension(\"my_dashboard\")\n</code></pre>"},{"location":"usage/#create-the-contribution-object","title":"Create the contribution object","text":"<p>In a submodule you create a contribution object from an application specific contribution, e.g., a <code>Panel</code>. Application-specific contribution classes are always derived from <code>chartlets.Contribution</code>.</p> <pre><code>from chartlets.demo import Panel\n\npanel = Panel(title=\"Click Statistics\")\n</code></pre>"},{"location":"usage/#implement-the-contribution-layout","title":"Implement the contribution layout","text":"<p>In the submodule</p> <pre><code>@panel.layout()\ndef get_layout(ctx):\n return Button(id=\"button\", text=\"Click me\")\n</code></pre>"},{"location":"usage/#implement-the-contribution-callback","title":"Implement the contribution callback","text":"<p>In the submodule</p> <pre><code>from chartlets import Import, Output\n\[email protected](\n Input(\"button\", \"n_clicks\"),\n Output(\"button\", \"text\")\n)\ndef on_button_click(ctx, n_clicks):\n n = n_clicks + 1\n s = {1: \"st\", 2: \"nd\", 3: \"rd\"}.get(n, \"th\")\n return f\"Click me a {n}{s} time\"\n</code></pre>"},{"location":"usage/#register-the-contribution","title":"Register the contribution","text":"<p>In the extension module</p> <pre><code>from chartlets import Extension\nfrom .stats_panel import panel as stats_panel\n\next = Extension(\"my_dashboard\")\next.add(stats_panel)\n</code></pre>"},{"location":"usage/#application-provider-guide","title":"Application provider guide","text":"<p>As an application provider you allow for enhancing your web application by server-side UI-contributions provided by an application contributor. </p> <p>The Chartlets backend implementation is provided by the Python module <code>chartlets.controllers</code>. It makes it easy to implement the Chartlet endpoints in your preferred webserver framework, such as Flask, FastAPI, or Tornado.</p> <p>The following steps are required to enable your web server to support UI-contributions:</p> <ol> <li>Implement the possible contributions</li> <li>Define the contributions points</li> <li>Load the extensions</li> <li>Publish the extensions </li> <li>Consume the extensions</li> </ol> <p>In the following the above steps are detailed further. </p>"},{"location":"usage/#implement-the-possible-contributions","title":"Implement the possible contributions","text":"<p>Implement the application-specific contributions that users can add to their extensions.</p> <p>As an example, see <code>panel.py</code> of the demo:</p> <pre><code>from chartlets import Contribution\n\n\nclass Panel(Contribution):\n \"\"\"Panel contribution\"\"\"\n\n def __init__(self, name: str, title: str | None = None):\n super().__init__(name, title=title)\n</code></pre>"},{"location":"usage/#define-the-contributions-points","title":"Define the contributions points","text":"<p>Define the possible contribution points in your application.</p> <p>As an example, see <code>server.py</code> of the demo:</p> <pre><code>from chartlets import Extension\nfrom chartlets.demo.contribs import Panel\n\nExtension.add_contrib_point(\"panels\", Panel)\n</code></pre>"},{"location":"usage/#load-the-extensions","title":"Load the extensions","text":"<p>Load the extensions that augment your application.</p> <p>As an example, see <code>server.py</code> of the demo:</p> <pre><code>from chartlets import ExtensionContext\n\next_ctx = ExtensionContext.load(app_ctx, extension_refs)\n</code></pre>"},{"location":"usage/#publish-the-extensions","title":"Publish the extensions","text":"<p>Implement the Chartlets API in your application-specific webserver using the controller implementations in <code>chartlets.controllers</code>. </p> <p>As an example, see <code>server.py</code> of the demo.</p>"},{"location":"usage/#consume-the-extensions","title":"Consume the extensions","text":"<p>Use JavaScript package <code>chartlets</code> in your frontend to implement the contribution lifecycle in your React application.</p> <p>As an example, see the demo application.</p>"}]}
1
+
{"config":{"lang":["en"],"separator":"[\\s\\-]+","pipeline":["stopWordFilter"]},"docs":[{"location":"","title":"Welcome to Chartlets","text":"<p>Chartlets is a software framework that allows websites developed with React to be extended by server-side widgets programmed in Python or other programming languages. </p>"},{"location":"#how-it-works","title":"How it works","text":"<p>Users write the widgets in, e.g. Python, and a REST server implements three endpoints to publish the widgets:</p> <ul> <li><code>GET /contributions</code>: Called once after application UI starts up. Returns an object whose keys are contribution points (e.g., \"panels\") and whose values are arrays of contribution objects.</li> <li><code>POST /layout/{contribPoint}/{contribIndex}</code>: Called once for every contribution when it becomes visible in the UI. Returns the contribution's initial component tree.</li> <li><code>POST /callback</code>: Called when users interact with the component tree or on application state changes. Returns an array of contribution changes where each contribution change contains an array of actions to be applied to the component tree.</li> </ul> <p>The following sequence diagram depicts how the library is supposed to work. The top shows the JavaScript frontend that uses this library. The bottom shows the lifeline of the backend REST server.</p> <p></p>"},{"location":"components/","title":"Components","text":"<p>Given here is a list of the components supported by Chartlets.</p> <p>Using the Python package <code>chartlets</code>, the related component classes can be imported from the <code>chartlets.components</code> module, e.g.</p> <pre><code>from chartlets.components import Checkbox\n</code></pre>"},{"location":"components/#classes","title":"Classes","text":""},{"location":"components/#chartlets.components.Box","title":"<code>chartlets.components.Box</code> <code>dataclass</code>","text":"<p> Bases: <code>Container</code></p> <p>The Box component is a generic container for grouping other components. It's a fundamental building block. Think of it as an HTML <code><div></code> element.</p> <p>Use the <code>style</code> attribute to layout the box and its child components.</p>"},{"location":"components/#chartlets.components.Button","title":"<code>chartlets.components.Button</code> <code>dataclass</code>","text":"<p> Bases: <code>Component</code></p> <p>Buttons allow users to take actions, and make choices, with a single tap.</p>"},{"location":"components/#chartlets.components.Checkbox","title":"<code>chartlets.components.Checkbox</code> <code>dataclass</code>","text":"<p> Bases: <code>Component</code></p> <p>Checkboxes allow the user to select one or more items from a set. They can be used to turn an option on or off.</p>"},{"location":"components/#chartlets.components.Dropdown","title":"<code>chartlets.components.Dropdown</code> <code>dataclass</code>","text":"<p> Bases: <code>Component</code></p> <p>Dropdown components are used for collecting user provided information from a list of options.</p>"},{"location":"components/#chartlets.components.Typography","title":"<code>chartlets.components.Typography</code> <code>dataclass</code>","text":"<p> Bases: <code>Component</code></p> <p>Use typography to present your design and content as clearly and efficiently as possible.</p>"},{"location":"components/#base-classes","title":"Base classes","text":""},{"location":"components/#chartlets.Component","title":"<code>chartlets.Component</code> <code>dataclass</code>","text":"<p> Bases: <code>ABC</code></p> <p>Base class for components. Provides the common attributes that apply to all components.</p>"},{"location":"components/#chartlets.Container","title":"<code>chartlets.Container</code> <code>dataclass</code>","text":"<p> Bases: <code>Component</code>, <code>ABC</code></p> <p>Base class for components that require child components to be useful.</p>"},{"location":"demo/","title":"Demo","text":"<p>Chartlets provides a simple demo that serves as a reference for the framework usage and testbed for its features.</p> <pre><code>git clone https://github.com/bcdev/chartlets.git\n</code></pre>"},{"location":"demo/#run-the-server","title":"Run the server","text":"<pre><code>cd chartlets/chartlets.py\nconda env create\nconda activate chartlets\npip install -ve . \npython -m chartlets.demo.server\n</code></pre>"},{"location":"demo/#run-the-ui","title":"Run the UI","text":"<pre><code>cd ../chartlets.js\nnpm install\nnpm run dev\n</code></pre>"},{"location":"usage/","title":"Usage","text":"<p>The Chartlets framework has two types of users. </p> <ul> <li>Application contributors develop new contributions for a specific web application.</li> <li>Application providers develop the web application and the service that allows for server-side UI contributions.</li> </ul>"},{"location":"usage/#application-contributor-guide","title":"Application contributor guide","text":"<p>As a application contributors you develop a Python module that is consumed by the application's backend service.</p> <p>Your module is supposed to export one or more instances of the <code>chartlets.Extension</code> class. An extension object is a container for your UI contributions. It groups contributions that logically belong together.</p> <p>As an example, see <code>my_extension</code> of the demo.</p> <p>To develop an extension, follow these steps:</p> <ol> <li>Create the extension object</li> <li>Create the contribution object</li> <li>Implement the contribution layout</li> <li>Implement the contribution callbacks</li> <li>Register the contribution</li> </ol> <p>In the following the above steps are detailed further. </p>"},{"location":"usage/#create-the-extension-object","title":"Create the extension object","text":"<p>Your contributions to the application are published using a <code>chartlets.Extension</code> object that is exported from your extension module. </p> <pre><code>from chartlets import Extension\n\next = Extension(\"my_dashboard\")\n</code></pre>"},{"location":"usage/#create-the-contribution-object","title":"Create the contribution object","text":"<p>In a submodule you create a contribution object from an application specific contribution, e.g., a <code>Panel</code>. Application-specific contribution classes are always derived from <code>chartlets.Contribution</code>.</p> <pre><code>from chartlets.demo import Panel\n\npanel = Panel(title=\"Click Statistics\")\n</code></pre>"},{"location":"usage/#implement-the-contribution-layout","title":"Implement the contribution layout","text":"<p>In the submodule</p> <pre><code>@panel.layout()\ndef get_layout(ctx):\n return Button(id=\"button\", text=\"Click me\")\n</code></pre>"},{"location":"usage/#implement-the-contribution-callback","title":"Implement the contribution callback","text":"<p>In the submodule</p> <pre><code>from chartlets import Import, Output\n\[email protected](\n Input(\"button\", \"n_clicks\"),\n Output(\"button\", \"text\")\n)\ndef on_button_click(ctx, n_clicks):\n n = n_clicks + 1\n s = {1: \"st\", 2: \"nd\", 3: \"rd\"}.get(n, \"th\")\n return f\"Click me a {n}{s} time\"\n</code></pre>"},{"location":"usage/#register-the-contribution","title":"Register the contribution","text":"<p>In the extension module</p> <pre><code>from chartlets import Extension\nfrom .stats_panel import panel as stats_panel\n\next = Extension(\"my_dashboard\")\next.add(stats_panel)\n</code></pre>"},{"location":"usage/#application-provider-guide","title":"Application provider guide","text":"<p>As an application provider you allow for enhancing your web application by server-side UI-contributions provided by an application contributor. </p> <p>The Chartlets backend implementation is provided by the Python module <code>chartlets.controllers</code>. It makes it easy to implement the Chartlet endpoints in your preferred webserver framework, such as Flask, FastAPI, or Tornado.</p> <p>The following steps are required to enable your web server to support UI-contributions:</p> <ol> <li>Implement the possible contributions</li> <li>Define the contributions points</li> <li>Load the extensions</li> <li>Publish the extensions </li> <li>Consume the extensions</li> </ol> <p>In the following the above steps are detailed further. </p>"},{"location":"usage/#implement-the-possible-contributions","title":"Implement the possible contributions","text":"<p>Implement the application-specific contributions that users can add to their extensions.</p> <p>As an example, see <code>panel.py</code> of the demo:</p> <pre><code>from chartlets import Contribution\n\n\nclass Panel(Contribution):\n \"\"\"Panel contribution\"\"\"\n\n def __init__(self, name: str, title: str | None = None):\n super().__init__(name, title=title)\n</code></pre>"},{"location":"usage/#define-the-contributions-points","title":"Define the contributions points","text":"<p>Define the possible contribution points in your application.</p> <p>As an example, see <code>server.py</code> of the demo:</p> <pre><code>from chartlets import Extension\nfrom chartlets.demo.contribs import Panel\n\nExtension.add_contrib_point(\"panels\", Panel)\n</code></pre>"},{"location":"usage/#load-the-extensions","title":"Load the extensions","text":"<p>Load the extensions that augment your application.</p> <p>As an example, see <code>server.py</code> of the demo:</p> <pre><code>from chartlets import ExtensionContext\n\next_ctx = ExtensionContext.load(app_ctx, extension_refs)\n</code></pre>"},{"location":"usage/#publish-the-extensions","title":"Publish the extensions","text":"<p>Implement the Chartlets API in your application-specific webserver using the controller implementations in <code>chartlets.controllers</code>. </p> <p>As an example, see <code>server.py</code> of the demo.</p>"},{"location":"usage/#consume-the-extensions","title":"Consume the extensions","text":"<p>Use JavaScript package <code>chartlets</code> in your frontend to implement the contribution lifecycle in your React application.</p> <p>As an example, see the demo application.</p>"}]}
0 commit comments