Skip to main content

A cutechart integration for DashPlotly

Project description

💡 Idea

GitHub license GitHub stars GitHub forks

chart.xkcd-react 📊 is an interesting visualization library written in React based on chart.xkcd, the chart style of chart.xkcd-react is so beautiful that I love it at first sight. 😍😍

There is no doubt that Modern JavaScript has more advantages in interaction as well as visual effects. Besides that, as we all know, Python 🐍 is an expressive language and is loved by data science community. To build data sciecne products the community love to use dash. I tried to combine both dashplotly with chart.xkcd-react ended up building the dash_cute_charts component for dash.

image

Get started with demo example:

  1. git clone https://github.com/muntakim1/dash_cute_charts.git
  2. Install Dash and its dependencies: https://dash.plotly.com/installation
  3. Run python usage.py
  4. Visit http://localhost:8050 in your web browser

Usage 👨‍🏫

Install

Install the dash-cute-charts from pypip using below command

pip install dash-cute-charts

Usage with Dash

import dash
import dash_html_components as html
from dash.dependencies import Input, Output

import dash_cute_charts

app = dash.Dash(__name__)

app.layout = html.Div(
    [
        # Pie Chart
        dash_cute_charts.PieChart(
            id="pieChart",
            title="What Tim made of",
            dataset=[
                {
                    "data": [500, 200, 80, 90, 100],
                }
            ],
            labels=["a", "b", "e", "f", "g"],
            options=[
                {
                    "innerRadius": 0.5,
                }
            ],
        ),
        # Line Chart
        dash_cute_charts.LineChart(
            id="lineChart",
            title="Monthly income of an indie developer",
            xLabel="Month",
            yLabel="$ Dollors",
            labels=["1", "2", "3", "4", "5", "6", "7", "8", "9", "10"],
            dataset=[
                {
                    "label": "Plan",
                    "data": [30, 70, 200, 300, 500, 800, 1500, 2900, 5000, 8000],
                },
                {
                    "label": "Reality",
                    "data": [0, 1, 30, 70, 80, 100, 50, 80, 40, 150],
                },
            ],
        ),
        # BarChart
        dash_cute_charts.BarChart(
            id="barchart",
            title="github stars VS patron number",
            dataset=[
                {
                    "data": [100, 2],
                }
            ],
            labels=["github stars", "patrons"],
            options=[{"yTickCount": 2}],
        ),
    ]
)


if __name__ == "__main__":
    app.run_server(debug=True)

Components 🧱

LineChart 📈

id (String)(Required): Id to identify in dash callbacks.

title(String)(Optional): Title for the chart.

xLabel(String)(Optional): X axis label.

yLabel(String)(Optional): Y axis label.

labels(Array)(Required): Array of labels (Strings / Numbers) Example:python [30, 70, 200, 300, 500, 800, 1500, 2900, 5000, 8000]

dataset(Array)(Required): Array of Python Dictionary. Example:[{"label": "Plan", "data": [30, 70, 200, 300, 500, 800, 1500, 2900, 5000, 8000], },{ "label": "Reality", "data": [0, 1, 30, 70, 80, 100, 50, 80, 40, 150], },]

options(Array)(Optional): Pass chart.xkcd-react options as object array options=[{"yTickCount": 2}],

Barchart 📊

id (String)(Required): Id to identify in dash callbacks.

title(String)(Optional): Title for the chart.

xLabel(String)(Optional): X axis label.

yLabel(String)(Optional): Y axis label.

labels(Array)(Required): Array of labels (Strings / Numbers, Example:['A','B']

dataset(Array)(Required): Array of Python Dictionary. Example: {"data": [30, 70,] },

options(Array)(Optional): Pass chart.xkcd-react options as object array options=[{"yTickCount": 2}],

PieChart 🧿

id (String)(Required): Id to identify in dash callbacks.

title(String)(Optional): Title for the chart.

xLabel(String)(Optional): X axis label.

yLabel(String)(Optional): Y axis label.

labels(Array)(Required): Array of labels (Strings / Numbers,Example: ["a", "b", "e", "f", "g"]

dataset(Array)(Required): Array of Python Dictionary, Example:{"data": [500, 200, 80, 90, 100]},

options(Array)(Optional): Pass chart.xkcd-react options as object array options=[{ "innerRadius": 0.5,}],

Contributing

See CONTRIBUTING.md

Install dependencies

If you have selected install_dependencies during the prompt, you can skip this part.

  1. Install npm packages

    $ npm install
    
  2. Create a virtual env and activate.

    $ virtualenv venv
    $ . venv/bin/activate
    

    Note: venv\Scripts\activate for windows

  3. Install python packages required to build components.

    $ pip install -r requirements.txt
    
  4. Install the python packages for testing (optional)

    $ pip install -r tests/requirements.txt
    
  • Run code in a Python environment:
    1. Build your code
      $ npm run build
      
    2. Run and modify the usage.py sample dash app:
      $ python usage.py
      

Maintainer 🤵

Muntakimur Rahaman

IBM Certified Data Scientist

website: www.muntakim.xyz

Credits 🙏

chart.xkcd-react chart.xkcd

📃 License

MIT ©muntakim

Project details


Download files

Download the file for your platform. If you're not sure which to choose, learn more about installing packages.

Source Distribution

dash_cute_charts-0.0.2.tar.gz (83.3 kB view hashes)

Uploaded Source

Built Distribution

dash_cute_charts-0.0.2-py3-none-any.whl (84.4 kB view hashes)

Uploaded Python 3

Supported by

AWS AWS Cloud computing and Security Sponsor Datadog Datadog Monitoring Fastly Fastly CDN Google Google Download Analytics Microsoft Microsoft PSF Sponsor Pingdom Pingdom Monitoring Sentry Sentry Error logging StatusPage StatusPage Status page