{ "cells": [ { "cell_type": "markdown", "metadata": {}, "source": [ "

" ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "# Add bespoke package\n", "\n", "It is possible to add a custom package to your project without creating a new project and package.\n", "\n", "It is possible to extend the list of underlying external packages using the Import module in Epyk.\n", "This module is in charge of keeping the scope of external packages (Javascript and CSS) with the current version.\n", "\n", "The version of the external packages is fixed as it is important to ensure that m\n", "\n", "## Extend the Imports" ] }, { "cell_type": "code", "execution_count": 1, "metadata": {}, "outputs": [], "source": [ "from epyk.core.js import Imports\n", "\n", "# Extend the current list of packages to include Google charts as a reference\n", "Imports.extend(\"google-chart\", [('loader.js', 'charts/')], version=None, cdnjs_url=\"https://www.gstatic.com\", required=None)\n", "\n", " " ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "## Adding components\n", "\n", "Next step is to create the new component using this new alias\n", "\n", "The class must look like a classic HTML page\n", "\n" ] }, { "cell_type": "code", "execution_count": 4, "metadata": {}, "outputs": [], "source": [ "from epyk.core.html import Html\n", "\n", "# Create the bespoke HTML component\n", "class Chart(Html.Html):\n", " # Link this component to the external Javascript module\n", " __reqJs = [\"google-chart\"]\n", "\n", " def __init__(self, report, vals, htmlCode=None, width=None, height=None, options=None, profile=None):\n", " super(Chart, self).__init__(report, vals, htmlCode=htmlCode, css_attrs={\"width\": width, \"height\": height})\n", " self._jsStyles = options or {}\n", "\n", " @property\n", " def _js__builder__(self):\n", " # Create the generic build function for those object\n", " # Those generic Javascrip builder are receiving the below parameters\n", " # - htmlObj: The HTML dom object\n", " # - data: The value passed in the vals variable\n", " # - options: The self._jsStyles object\n", " # This function is generic and will be used by all the different object created\n", " # This Js fragment will be used in the refresh and build method\n", " return '''\n", " var chart = new google.visualization.AreaChart(htmlObj);\n", " chart.draw(google.visualization.arrayToDataTable(data), options) '''\n", "\n", " def __str__(self):\n", " # Load the Google module\n", " # This module require some specific loading function\n", " self._report._props.setdefault('js', {}).setdefault(\"builders\", []).append(\"google.charts.load('current', {'packages':['corechart']})\")\n", " self._report._props.setdefault('js', {}).setdefault(\"builders\", []).append(\"google.charts.setOnLoadCallback( (function(){return %s}) )\" % self.refresh())\n", " # The HTML component\n", " return '

' % self.get_attrs(pyClassNames=self.style.get_classes())\n", "\n" ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "## Report use\n", "\n", "Then this new component can be used directly by passing the class from the **bespoke** function in the ui property. The following parameters to this function are all the parameter defined in the __init__ method in the above class" ] }, { "cell_type": "code", "execution_count": 7, "metadata": {}, "outputs": [ { "data": { "text/html": [ "\n", "\n", "\n", "\n", "\n", "

\n", "\n", "" ], "text/plain": [ "" ] }, "execution_count": 7, "metadata": {}, "output_type": "execute_result" } ], "source": [ "from epyk.core.Page import Report\n", "\n", "# Create a basic report object\n", "rptObj = Report()\n", "\n", "# The input data from https://developers.google.com/chart/interactive/docs/gallery/areachart\n", "data = [['Year', 'Sales', 'Expenses'], ['2013', 1000, 400], ['2014', 1170, 460], ['2015', 660, 1120], ['2016', 1030, 540]]\n", "\n", "# Create an object on the Javascript side\n", "rptObj.ui.bespoke(Chart, vals=data)\n", "\n", "rptObj.outs.jupyter()" ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "[Go back to the tutorials page](../../tutorials.ipynb)\n", "\n", "

\n", "Do not forget that this is a collaborative framework so do not hesitate to give feedbacks and like the different repository to get more visbility.\n", "\n", "Also any help is more than welcome !" ] } ], "metadata": { "kernelspec": { "display_name": "Python 3", "language": "python", "name": "python3" }, "language_info": { "codemirror_mode": { "name": "ipython", "version": 3 }, "file_extension": ".py", "mimetype": "text/x-python", "name": "python", "nbconvert_exporter": "python", "pygments_lexer": "ipython3", "version": "3.8.2" } }, "nbformat": 4, "nbformat_minor": 4 }