Metadata-Version: 2.1
Name: lona-chartjs
Version: 0.2
Summary: Chart.js bindings for Lona
Author-email: Florian Scherf <mail@florianscherf.de>
License: MIT License
        
        Copyright (c) 2021 Florian Scherf
        
        Permission is hereby granted, free of charge, to any person obtaining a copy
        of this software and associated documentation files (the "Software"), to deal
        in the Software without restriction, including without limitation the rights
        to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
        copies of the Software, and to permit persons to whom the Software is
        furnished to do so, subject to the following conditions:
        
        The above copyright notice and this permission notice shall be included in all
        copies or substantial portions of the Software.
        
        THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
        IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
        FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
        AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
        LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
        OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
        SOFTWARE.
        
Project-URL: Homepage, https://github.com/lona-web-org/lona-chartjs
Project-URL: Repository, https://github.com/lona-web-org/lona-chartjs
Project-URL: Bug Tracker, https://github.com/lona-web-org/lona-chartjs/issues
Classifier: License :: OSI Approved :: MIT License
Requires-Python: >=3.7
Description-Content-Type: text/x-rst
Provides-Extra: packaging
License-File: LICENSE.txt

lona-chartjs
============

This package contains `Chart.js <https://www.chartjs.org/>`_ bindings for
`Lona <http://lona-web.org>`_


Installation
------------

.. code-block:: text

    $ pip install lona-chartjs


Usage
-----

``lona_chartjs.html.Chart`` defines a thin wrapper around the Javascript API of
Chart.js. You can take any demo off
``chartjs.org <https://www.chartjs.org/docs/3.5.0/>`` and pass the chart config
into ``Chart.data``.

All data you passed in is available in ``Chart.data`` and can be reset and
altered. To redraw the chart with altered data run ``self.show(chart)`` from
your view.

.. image:: images/bar-chart.png

.. code-block:: python

    from lona.html import HTML, H1, H2
    from lona import App, View

    from lona_chartjs.html import Chart

    app = App(__file__)


    BAR_CHART_DATA = {
        # Taken from https://www.chartjs.org/docs/latest/getting-started/usage.html

        'type': 'bar',
        'data': {
            'labels': ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
            'datasets': [{
                'label': '# of Votes',
                'data': [12, 19, 3, 5, 2, 3],
                'backgroundColor': [
                    'rgba(255, 99, 132, 0.2)',
                    'rgba(54, 162, 235, 0.2)',
                    'rgba(255, 206, 86, 0.2)',
                    'rgba(75, 192, 192, 0.2)',
                    'rgba(153, 102, 255, 0.2)',
                    'rgba(255, 159, 64, 0.2)'
                ],
                'borderColor': [
                    'rgba(255, 99, 132, 1)',
                    'rgba(54, 162, 235, 1)',
                    'rgba(255, 206, 86, 1)',
                    'rgba(75, 192, 192, 1)',
                    'rgba(153, 102, 255, 1)',
                    'rgba(255, 159, 64, 1)'
                ],
                'borderWidth': 1
            }]
        },
        'options': {
            'responsive': False,
            'scales': {
                'y': {
                    'beginAtZero': True,
                }
            }
        }
    }


    @app.route('/')
    class MyLonaView(View):
        def handle_request(self, request):
            html = HTML(
                H1('Hello World'),
                H2('Bar Chart'),
                Chart(
                    width='500px',
                    height='300px',
                    data=BAR_CHART_DATA,
                ),
            )

            return html


    app.run()
