Adding data visualization to your Flask app with
![Adding data visualization to your Flask app with React Victory charts Allyn Hunt Adding data visualization to your Flask app with React Victory charts Allyn Hunt](https://slidetodoc.com/presentation_image_h/33c3fc5a8bf03ef4b2cb63798ef5c4ff/image-1.jpg)
![Allyn Hunt Father | Gamer | Maker | Engineer Allyn. H. com | @Allyn_H_ Allyn Hunt Father | Gamer | Maker | Engineer Allyn. H. com | @Allyn_H_](https://slidetodoc.com/presentation_image_h/33c3fc5a8bf03ef4b2cb63798ef5c4ff/image-2.jpg)
![Previous work Py. Con UK 2017: Py. Con Ireland 2018: Destiny Vault Raider app Previous work Py. Con UK 2017: Py. Con Ireland 2018: Destiny Vault Raider app](https://slidetodoc.com/presentation_image_h/33c3fc5a8bf03ef4b2cb63798ef5c4ff/image-3.jpg)
![Flask application Project setup, storing data, creating app Blueprints. 1 4 Flask application Project setup, storing data, creating app Blueprints. 1 4](https://slidetodoc.com/presentation_image_h/33c3fc5a8bf03ef4b2cb63798ef5c4ff/image-4.jpg)
![Technology stack: Server side: Frontend: ◉ Python 3. 6+ ◉ Flask ◉ ◉ SQL Technology stack: Server side: Frontend: ◉ Python 3. 6+ ◉ Flask ◉ ◉ SQL](https://slidetodoc.com/presentation_image_h/33c3fc5a8bf03ef4b2cb63798ef5c4ff/image-5.jpg)
![| config. py | microblog. py | +---app | cli. py | models. py | config. py | microblog. py | +---app | cli. py | models. py](https://slidetodoc.com/presentation_image_h/33c3fc5a8bf03ef4b2cb63798ef5c4ff/image-6.jpg)
![Displaying data can be tough Getting data into your database is easy: ◉ Build Displaying data can be tough Getting data into your database is easy: ◉ Build](https://slidetodoc.com/presentation_image_h/33c3fc5a8bf03ef4b2cb63798ef5c4ff/image-7.jpg)
![{ "BUSINESS_TYPE": "Manufacturing", "COMPANY": "Stark Industries" , "COMPANY_CEO": "Pepper Potts", "FINANCE": [ { "Q { "BUSINESS_TYPE": "Manufacturing", "COMPANY": "Stark Industries" , "COMPANY_CEO": "Pepper Potts", "FINANCE": [ { "Q](https://slidetodoc.com/presentation_image_h/33c3fc5a8bf03ef4b2cb63798ef5c4ff/image-8.jpg)
![How I feel 9 How I feel 9](https://slidetodoc.com/presentation_image_h/33c3fc5a8bf03ef4b2cb63798ef5c4ff/image-9.jpg)
![What my boss sees 10 What my boss sees 10](https://slidetodoc.com/presentation_image_h/33c3fc5a8bf03ef4b2cb63798ef5c4ff/image-10.jpg)
![{ "BUSINESS_TYPE": "Manufacturing", "COMPANY": "Stark Industries" , "COMPANY_CEO": "Pepper Potts", "FINANCE": [ { "Q { "BUSINESS_TYPE": "Manufacturing", "COMPANY": "Stark Industries" , "COMPANY_CEO": "Pepper Potts", "FINANCE": [ { "Q](https://slidetodoc.com/presentation_image_h/33c3fc5a8bf03ef4b2cb63798ef5c4ff/image-11.jpg)
![Add Finance item to database Database model class Finance(db. Model): __tablename__ = 'finance' id Add Finance item to database Database model class Finance(db. Model): __tablename__ = 'finance' id](https://slidetodoc.com/presentation_image_h/33c3fc5a8bf03ef4b2cb63798ef5c4ff/image-12.jpg)
![Add Company item to database Database model class Company(db. Model): __tablename__ = 'company' id Add Company item to database Database model class Company(db. Model): __tablename__ = 'company' id](https://slidetodoc.com/presentation_image_h/33c3fc5a8bf03ef4b2cb63798ef5c4ff/image-13.jpg)
![Viewing our SQL data 14 Viewing our SQL data 14](https://slidetodoc.com/presentation_image_h/33c3fc5a8bf03ef4b2cb63798ef5c4ff/image-14.jpg)
![Create relationships my_company = Company( name = company_waynecorp["COMPANY"], company_ceo = company_waynecorp["COMPANY_CEO"], business_type = company_waynecorp["BUSINESS_TYPE"] Create relationships my_company = Company( name = company_waynecorp["COMPANY"], company_ceo = company_waynecorp["COMPANY_CEO"], business_type = company_waynecorp["BUSINESS_TYPE"]](https://slidetodoc.com/presentation_image_h/33c3fc5a8bf03ef4b2cb63798ef5c4ff/image-15.jpg)
![Flask Blueprints App. py Unauthorized endpoints Authorized endpoints Request Response API endpoints 16 Flask Blueprints App. py Unauthorized endpoints Authorized endpoints Request Response API endpoints 16](https://slidetodoc.com/presentation_image_h/33c3fc5a8bf03ef4b2cb63798ef5c4ff/image-16.jpg)
![Creating an API endpoint to send JSON data. app/api_1_0/__init__. py app/api_1_0/routes. py from flask Creating an API endpoint to send JSON data. app/api_1_0/__init__. py app/api_1_0/routes. py from flask](https://slidetodoc.com/presentation_image_h/33c3fc5a8bf03ef4b2cb63798ef5c4ff/image-17.jpg)
![Testing the endpoint: ◉ Chrome will display the JSON response ◉ Values are now Testing the endpoint: ◉ Chrome will display the JSON response ◉ Values are now](https://slidetodoc.com/presentation_image_h/33c3fc5a8bf03ef4b2cb63798ef5c4ff/image-18.jpg)
![What have we done so far? Serve HTML / Data 19 What have we done so far? Serve HTML / Data 19](https://slidetodoc.com/presentation_image_h/33c3fc5a8bf03ef4b2cb63798ef5c4ff/image-19.jpg)
![Adding a React frontend Install Webpack, Babel, React, make some API calls from React. Adding a React frontend Install Webpack, Babel, React, make some API calls from React.](https://slidetodoc.com/presentation_image_h/33c3fc5a8bf03ef4b2cb63798ef5c4ff/image-20.jpg)
![Why do we need Java. Script? /login_user Navigation Chart 1 | Login Chart 2 Why do we need Java. Script? /login_user Navigation Chart 1 | Login Chart 2](https://slidetodoc.com/presentation_image_h/33c3fc5a8bf03ef4b2cb63798ef5c4ff/image-21.jpg)
![Inportant files │ package-lock. json │ package. json │ webpack. config. js │ ├───css Inportant files │ package-lock. json │ package. json │ webpack. config. js │ ├───css](https://slidetodoc.com/presentation_image_h/33c3fc5a8bf03ef4b2cb63798ef5c4ff/image-22.jpg)
![Webpack 23 Webpack 23](https://slidetodoc.com/presentation_image_h/33c3fc5a8bf03ef4b2cb63798ef5c4ff/image-23.jpg)
![Setting up Web Pack ◉ Initialise your project: ◉ Install Web Pack CLI ◉ Setting up Web Pack ◉ Initialise your project: ◉ Install Web Pack CLI ◉](https://slidetodoc.com/presentation_image_h/33c3fc5a8bf03ef4b2cb63798ef5c4ff/image-24.jpg)
![Babel 25 Babel 25](https://slidetodoc.com/presentation_image_h/33c3fc5a8bf03ef4b2cb63798ef5c4ff/image-25.jpg)
![Setting up Babel ◉ Install Babel npm i @babel/core babel-loader @babel/preset-env Setting up Babel ◉ Install Babel npm i @babel/core babel-loader @babel/preset-env](https://slidetodoc.com/presentation_image_h/33c3fc5a8bf03ef4b2cb63798ef5c4ff/image-26.jpg)
![Installing React and Victory ◉ Install React & React DOM. npm i react-dom [--save-dev] Installing React and Victory ◉ Install React & React DOM. npm i react-dom [--save-dev]](https://slidetodoc.com/presentation_image_h/33c3fc5a8bf03ef4b2cb63798ef5c4ff/image-27.jpg)
![{ "name": "flask-data-visualization", "version": "1. 0. 0", Setting up Webpack scripts "description": "Example Flask { "name": "flask-data-visualization", "version": "1. 0. 0", Setting up Webpack scripts "description": "Example Flask](https://slidetodoc.com/presentation_image_h/33c3fc5a8bf03ef4b2cb63798ef5c4ff/image-28.jpg)
![const webpack = require('webpack'); const config = { entry: __dirname + '/scripts/index. js', output: const webpack = require('webpack'); const config = { entry: __dirname + '/scripts/index. js', output:](https://slidetodoc.com/presentation_image_h/33c3fc5a8bf03ef4b2cb63798ef5c4ff/image-29.jpg)
![> webpack --help webpack-cli 3. 3. 9 Usage: webpack-cli [options] --entry <entry> --output <output> > webpack --help webpack-cli 3. 3. 9 Usage: webpack-cli [options] --entry <entry> --output <output>](https://slidetodoc.com/presentation_image_h/33c3fc5a8bf03ef4b2cb63798ef5c4ff/image-30.jpg)
![React – Hello, World! app/static/scripts/Hello. World. js import React from 'react'; class Hello. World React – Hello, World! app/static/scripts/Hello. World. js import React from 'react'; class Hello. World](https://slidetodoc.com/presentation_image_h/33c3fc5a8bf03ef4b2cb63798ef5c4ff/image-31.jpg)
![Adding React to your Flask app ◉ Create the “react-root” div. ◉ Add the Adding React to your Flask app ◉ Create the “react-root” div. ◉ Add the](https://slidetodoc.com/presentation_image_h/33c3fc5a8bf03ef4b2cb63798ef5c4ff/image-32.jpg)
![Viewing your React app Not much here yet… But it’s working! 33 Viewing your React app Not much here yet… But it’s working! 33](https://slidetodoc.com/presentation_image_h/33c3fc5a8bf03ef4b2cb63798ef5c4ff/image-33.jpg)
![class Finance extends React. Component { constructor(props) { super(props); this. state = { error: class Finance extends React. Component { constructor(props) { super(props); this. state = { error:](https://slidetodoc.com/presentation_image_h/33c3fc5a8bf03ef4b2cb63798ef5c4ff/image-34.jpg)
![URL parameters let url = window. location. href. replace(/. *finance/). split("/"); const company_id = URL parameters let url = window. location. href. replace(/. *finance/). split("/"); const company_id =](https://slidetodoc.com/presentation_image_h/33c3fc5a8bf03ef4b2cb63798ef5c4ff/image-35.jpg)
![What have we done so far? Serve HTML / Data Make API call with What have we done so far? Serve HTML / Data Make API call with](https://slidetodoc.com/presentation_image_h/33c3fc5a8bf03ef4b2cb63798ef5c4ff/image-36.jpg)
![Victory Charts Make a basic chart, look at how to create some really cool Victory Charts Make a basic chart, look at how to create some really cool](https://slidetodoc.com/presentation_image_h/33c3fc5a8bf03ef4b2cb63798ef5c4ff/image-37.jpg)
![VICTORY CHARTS Formidable Labs 38 VICTORY CHARTS Formidable Labs 38](https://slidetodoc.com/presentation_image_h/33c3fc5a8bf03ef4b2cb63798ef5c4ff/image-38.jpg)
![Chart 127. 0. 0. 1 - - [09/Oct/2019 22: 05: 07] "GET /api_1_0/get_finances/1/2018 HTTP/1. Chart 127. 0. 0. 1 - - [09/Oct/2019 22: 05: 07] "GET /api_1_0/get_finances/1/2018 HTTP/1.](https://slidetodoc.com/presentation_image_h/33c3fc5a8bf03ef4b2cb63798ef5c4ff/image-39.jpg)
![Victory. Bar <Victory. Bar data={finance_data} /> 40 Victory. Bar <Victory. Bar data={finance_data} /> 40](https://slidetodoc.com/presentation_image_h/33c3fc5a8bf03ef4b2cb63798ef5c4ff/image-40.jpg)
![Victory Chart <Victory. Chart > <Victory. Axis tick. Values={finance_axis} /> <Victory. Axis dependent. Axis Victory Chart <Victory. Chart > <Victory. Axis tick. Values={finance_axis} /> <Victory. Axis dependent. Axis](https://slidetodoc.com/presentation_image_h/33c3fc5a8bf03ef4b2cb63798ef5c4ff/image-41.jpg)
![Some style <Victory. Chart padding={{ left: 100, right: 50, bottom: 100, top: 30 }} Some style <Victory. Chart padding={{ left: 100, right: 50, bottom: 100, top: 30 }}](https://slidetodoc.com/presentation_image_h/33c3fc5a8bf03ef4b2cb63798ef5c4ff/image-42.jpg)
![Victory. Box. Plot example class Box. Plot extends React. Component { render() { return Victory. Box. Plot example class Box. Plot extends React. Component { render() { return](https://slidetodoc.com/presentation_image_h/33c3fc5a8bf03ef4b2cb63798ef5c4ff/image-43.jpg)
![What have we done so far? Serve HTML / Data Make API call with What have we done so far? Serve HTML / Data Make API call with](https://slidetodoc.com/presentation_image_h/33c3fc5a8bf03ef4b2cb63798ef5c4ff/image-44.jpg)
![Secure your API Some tips to secure your API and database. 4 45 Secure your API Some tips to secure your API and database. 4 45](https://slidetodoc.com/presentation_image_h/33c3fc5a8bf03ef4b2cb63798ef5c4ff/image-45.jpg)
![Making secure API requests app/api_1_0/routes. py @bp. route('/get_company/<id>') @login_required def get_company(id): c = Company. Making secure API requests app/api_1_0/routes. py @bp. route('/get_company/<id>') @login_required def get_company(id): c = Company.](https://slidetodoc.com/presentation_image_h/33c3fc5a8bf03ef4b2cb63798ef5c4ff/image-46.jpg)
![THANKS! Any questions? @Allyn_H_ / Allyn. H@gmail. com Git. Hub. com/Allyn. H 47 THANKS! Any questions? @Allyn_H_ / Allyn. H@gmail. com Git. Hub. com/Allyn. H 47](https://slidetodoc.com/presentation_image_h/33c3fc5a8bf03ef4b2cb63798ef5c4ff/image-47.jpg)
- Slides: 47
![Adding data visualization to your Flask app with React Victory charts Allyn Hunt Adding data visualization to your Flask app with React Victory charts Allyn Hunt](https://slidetodoc.com/presentation_image_h/33c3fc5a8bf03ef4b2cb63798ef5c4ff/image-1.jpg)
Adding data visualization to your Flask app with React Victory charts Allyn Hunt
![Allyn Hunt Father Gamer Maker Engineer Allyn H com AllynH Allyn Hunt Father | Gamer | Maker | Engineer Allyn. H. com | @Allyn_H_](https://slidetodoc.com/presentation_image_h/33c3fc5a8bf03ef4b2cb63798ef5c4ff/image-2.jpg)
Allyn Hunt Father | Gamer | Maker | Engineer Allyn. H. com | @Allyn_H_ | Git. Hub. com/Allyn. H 2
![Previous work Py Con UK 2017 Py Con Ireland 2018 Destiny Vault Raider app Previous work Py. Con UK 2017: Py. Con Ireland 2018: Destiny Vault Raider app](https://slidetodoc.com/presentation_image_h/33c3fc5a8bf03ef4b2cb63798ef5c4ff/image-3.jpg)
Previous work Py. Con UK 2017: Py. Con Ireland 2018: Destiny Vault Raider app Python, Flask, Celery and React. 3
![Flask application Project setup storing data creating app Blueprints 1 4 Flask application Project setup, storing data, creating app Blueprints. 1 4](https://slidetodoc.com/presentation_image_h/33c3fc5a8bf03ef4b2cb63798ef5c4ff/image-4.jpg)
Flask application Project setup, storing data, creating app Blueprints. 1 4
![Technology stack Server side Frontend Python 3 6 Flask SQL Technology stack: Server side: Frontend: ◉ Python 3. 6+ ◉ Flask ◉ ◉ SQL](https://slidetodoc.com/presentation_image_h/33c3fc5a8bf03ef4b2cb63798ef5c4ff/image-5.jpg)
Technology stack: Server side: Frontend: ◉ Python 3. 6+ ◉ Flask ◉ ◉ SQL Alchemy ◉ ◉ App structure: ◉ ◉ ◉ Cloned from Miguel Grinbergs microblog app code. Flask Large app structure. Blueprints ◉ NPM ◉ ◉ React. JS React Victory Charts Web. Pack Bable 5
![config py microblog py app cli py models py | config. py | microblog. py | +---app | cli. py | models. py](https://slidetodoc.com/presentation_image_h/33c3fc5a8bf03ef4b2cb63798ef5c4ff/image-6.jpg)
| config. py | microblog. py | +---app | cli. py | models. py | __init__. py | +---api_1_0 | routes. py | __init__. py | +---main | forms. py | routes. py | __init__. py | +---static | loading. gif | +---templates | base. html | index. html | user. html | ---errors 404. html 500. html Web applications are fun! Database definition from flask import Flask app = Flask(__name__) Database models @app. route('/') def hello_world(): return 'Hello, World!' API route and config React frontend 6
![Displaying data can be tough Getting data into your database is easy Build Displaying data can be tough Getting data into your database is easy: ◉ Build](https://slidetodoc.com/presentation_image_h/33c3fc5a8bf03ef4b2cb63798ef5c4ff/image-7.jpg)
Displaying data can be tough Getting data into your database is easy: ◉ Build multiple tables. ◉ Complex relationships. How do you display this data? : ◉ Dates / Times ◉ Dictionaries ◉ Lists { "BUSINESS_TYPE": "Manufacturing", "COMPANY": "Stark Industries", "COMPANY_CEO": "Pepper Potts", "FINANCE": [ { "Q 1_EARNINGS": 7825000000. 0, "Q 2_EARNINGS": 7825000000. 0, "Q 3_EARNINGS": 7825000000. 0, "Q 4_EARNINGS": 7825000000. 0, "YEAR": 2018 }, { "Q 1_EARNINGS": 7825000000. 0, "Q 2_EARNINGS": 7825000000. 0, "Q 3_EARNINGS": 7825000000. 0, "Q 4_EARNINGS": 7825000000. 0, "YEAR": 2017 }, { "Q 1_EARNINGS": 7825000000. 0, "Q 2_EARNINGS": 7825000000. 0, "Q 3_EARNINGS": 7825000000. 0, "Q 4_EARNINGS": 7825000000. 0, "YEAR": 2016 }, { "Q 1_EARNINGS": 7825000000. 0, "Q 2_EARNINGS": 7825000000. 0, "Q 3_EARNINGS": 7825000000. 0, "Q 4_EARNINGS": 7825000000. 0, "YEAR": 2015 } ] } 7
![BUSINESSTYPE Manufacturing COMPANY Stark Industries COMPANYCEO Pepper Potts FINANCE Q { "BUSINESS_TYPE": "Manufacturing", "COMPANY": "Stark Industries" , "COMPANY_CEO": "Pepper Potts", "FINANCE": [ { "Q](https://slidetodoc.com/presentation_image_h/33c3fc5a8bf03ef4b2cb63798ef5c4ff/image-8.jpg)
{ "BUSINESS_TYPE": "Manufacturing", "COMPANY": "Stark Industries" , "COMPANY_CEO": "Pepper Potts", "FINANCE": [ { "Q 1_EARNINGS": 7825000000. 0, "Q 2_EARNINGS": 7825000000. 0, "Q 3_EARNINGS": 7825000000. 0, "Q 4_EARNINGS": 7825000000. 0, "YEAR": 2018 }, { "Q 1_EARNINGS": 7825000000. 0, "Q 2_EARNINGS": 7825000000. 0, "Q 3_EARNINGS": 7825000000. 0, "Q 4_EARNINGS": 7825000000. 0, "YEAR": 2017 }, { "Q 1_EARNINGS": 7825000000. 0, "Q 2_EARNINGS": 7825000000. 0, "Q 3_EARNINGS": 7825000000. 0, "Q 4_EARNINGS": 7825000000. 0, "YEAR": 2016 }, { "Q 1_EARNINGS": 7825000000. 0, "Q 2_EARNINGS": 7825000000. 0, "Q 3_EARNINGS": 7825000000. 0, "Q 4_EARNINGS": 7825000000. 0, "YEAR": 2015 } ] } { "DATA": [ { "BUSINESS_TYPE": "Manufacturing", "COMPANY": "Stark Industries" , "COMPANY_CEO": "Pepper Potts", "FINANCE": [… ] }, { "BUSINESS_TYPE": "Multinational Conglomerate" , "COMPANY": "Wayne. Corp", "COMPANY_CEO": "Bruce Wayne", "FINANCE": [ … ] } ] } 8
![How I feel 9 How I feel 9](https://slidetodoc.com/presentation_image_h/33c3fc5a8bf03ef4b2cb63798ef5c4ff/image-9.jpg)
How I feel 9
![What my boss sees 10 What my boss sees 10](https://slidetodoc.com/presentation_image_h/33c3fc5a8bf03ef4b2cb63798ef5c4ff/image-10.jpg)
What my boss sees 10
![BUSINESSTYPE Manufacturing COMPANY Stark Industries COMPANYCEO Pepper Potts FINANCE Q { "BUSINESS_TYPE": "Manufacturing", "COMPANY": "Stark Industries" , "COMPANY_CEO": "Pepper Potts", "FINANCE": [ { "Q](https://slidetodoc.com/presentation_image_h/33c3fc5a8bf03ef4b2cb63798ef5c4ff/image-11.jpg)
{ "BUSINESS_TYPE": "Manufacturing", "COMPANY": "Stark Industries" , "COMPANY_CEO": "Pepper Potts", "FINANCE": [ { "Q 1_EARNINGS": 7825000000. 0, "Q 2_EARNINGS": 7825000000. 0, "Q 3_EARNINGS": 7825000000. 0, "Q 4_EARNINGS": 7825000000. 0, "YEAR": 2018 }, { "Q 1_EARNINGS": 7825000000. 0, "Q 2_EARNINGS": 7825000000. 0, "Q 3_EARNINGS": 7825000000. 0, "Q 4_EARNINGS": 7825000000. 0, "YEAR": 2017 }, { "Q 1_EARNINGS": 7825000000. 0, "Q 2_EARNINGS": 7825000000. 0, "Q 3_EARNINGS": 7825000000. 0, "Q 4_EARNINGS": 7825000000. 0, "YEAR": 2016 }, { "Q 1_EARNINGS": 7825000000. 0, "Q 2_EARNINGS": 7825000000. 0, "Q 3_EARNINGS": 7825000000. 0, "Q 4_EARNINGS": 7825000000. 0, "YEAR": 2015 } ] } Company § § § Finance § § Q 1 earnings Q 2 earnings Q 3 earnings Q 4 earnings Name CEO name Business type Finance § § § § Q 1 earnings Q 2 earnings Q 3 earnings Q 4 earnings 11
![Add Finance item to database Database model class Financedb Model tablename finance id Add Finance item to database Database model class Finance(db. Model): __tablename__ = 'finance' id](https://slidetodoc.com/presentation_image_h/33c3fc5a8bf03ef4b2cb63798ef5c4ff/image-12.jpg)
Add Finance item to database Database model class Finance(db. Model): __tablename__ = 'finance' id = db. Column(db. Integer, primary_key=True) year = db. Column(db. Integer, default=1999) q 1_earnings = db. Column(db. Float) q 2_earnings = db. Column(db. Float) q 3_earnings = db. Column(db. Float) q 4_earnings = db. Column(db. Float) company_id = db. Column(db. Integer, db. Foreign. Key('company. id')) def __repr__(self): return '<Finance {}>'. format(self. id) List of Finance objects stark_finance_y 1 = Finance( year = stark_finance_y 1[ "YEAR"], q 1_earnings = stark_finance_y 1[ "Q 1_EARNINGS"], q 2_earnings = stark_finance_y 1[ "Q 2_EARNINGS"], q 3_earnings = stark_finance_y 1[ "Q 3_EARNINGS"], q 4_earnings = stark_finance_y 1[ "Q 4_EARNINGS"] ) : stark_finance_y 4 = Finance( year = stark_finance_y 4[ "YEAR"], q 1_earnings = stark_finance_y 4["Q 1_EARNINGS"], q 2_earnings = stark_finance_y 4["Q 2_EARNINGS"], q 3_earnings = stark_finance_y 4["Q 3_EARNINGS"], q 4_earnings = stark_finance_y 4["Q 4_EARNINGS"] ) finance_list = [stark_finance_y 1, stark_finance_y 2, stark_finance_y 3, stark_finance_y 4 ] 12
![Add Company item to database Database model class Companydb Model tablename company id Add Company item to database Database model class Company(db. Model): __tablename__ = 'company' id](https://slidetodoc.com/presentation_image_h/33c3fc5a8bf03ef4b2cb63798ef5c4ff/image-13.jpg)
Add Company item to database Database model class Company(db. Model): __tablename__ = 'company' id = db. Column(db. Integer, primary_key=True) name = db. Column(db. String(140)) company_ceo = db. Column(db. String(140)) business_type = db. Column(db. String(140)) finances = db. relationship('Finance', backref='finance', lazy='dynamic') def __repr__(self): return '<Company {}>'. format(self. name) Add item to database my_stark_company = Company( name = stark_company["COMPANY"], company_ceo = stark_company["COMPANY_CEO"], business_type = stark_company["BUSINESS_TYPE"], finances = finance_list ) db. session. add(my_stark_company) db. session. commit() 13
![Viewing our SQL data 14 Viewing our SQL data 14](https://slidetodoc.com/presentation_image_h/33c3fc5a8bf03ef4b2cb63798ef5c4ff/image-14.jpg)
Viewing our SQL data 14
![Create relationships mycompany Company name companywaynecorpCOMPANY companyceo companywaynecorpCOMPANYCEO businesstype companywaynecorpBUSINESSTYPE Create relationships my_company = Company( name = company_waynecorp["COMPANY"], company_ceo = company_waynecorp["COMPANY_CEO"], business_type = company_waynecorp["BUSINESS_TYPE"]](https://slidetodoc.com/presentation_image_h/33c3fc5a8bf03ef4b2cb63798ef5c4ff/image-15.jpg)
Create relationships my_company = Company( name = company_waynecorp["COMPANY"], company_ceo = company_waynecorp["COMPANY_CEO"], business_type = company_waynecorp["BUSINESS_TYPE"] ) db. session. add(my_company) Create database relationships Add item to database company 1_finance_y 1 = Finance( year = wayne_finance_y 1["YEAR"], q 1_earnings = wayne_finance_y 1["Q 1_EARNINGS"], q 2_earnings = wayne_finance_y 1["Q 2_EARNINGS"], q 3_earnings = wayne_finance_y 1["Q 3_EARNINGS"], q 4_earnings = wayne_finance_y 1["Q 4_EARNINGS"] ) company 1_finance_y 2 = Finance( year = wayne_finance_y 2["YEAR"], q 1_earnings = wayne_finance_y 2["Q 1_EARNINGS"], q 2_earnings = wayne_finance_y 2["Q 2_EARNINGS"], q 3_earnings = wayne_finance_y 2["Q 3_EARNINGS"], q 4_earnings = wayne_finance_y 2["Q 4_EARNINGS"] ) my_company. finances. append(company 1_finance_y 1) my_company. finances. append(company 1_finance_y 2) 15
![Flask Blueprints App py Unauthorized endpoints Authorized endpoints Request Response API endpoints 16 Flask Blueprints App. py Unauthorized endpoints Authorized endpoints Request Response API endpoints 16](https://slidetodoc.com/presentation_image_h/33c3fc5a8bf03ef4b2cb63798ef5c4ff/image-16.jpg)
Flask Blueprints App. py Unauthorized endpoints Authorized endpoints Request Response API endpoints 16
![Creating an API endpoint to send JSON data appapi10init py appapi10routes py from flask Creating an API endpoint to send JSON data. app/api_1_0/__init__. py app/api_1_0/routes. py from flask](https://slidetodoc.com/presentation_image_h/33c3fc5a8bf03ef4b2cb63798ef5c4ff/image-17.jpg)
Creating an API endpoint to send JSON data. app/api_1_0/__init__. py app/api_1_0/routes. py from flask import Blueprint bp = Blueprint('api', __name__) from app. api_1_0 import routes @bp. route('/get_company/<int: id>') @login_required def get_company(id): c = Company. query. filter_by(id=id). first_or_404() message = "Welcome to the API : )" content = { "name" : c. name, "ceo_name" : c. company_ceo, "business type" : c. business_type } status_dict = { "status": 200, "success": True, "message": message, "content. Type": 'application/json', "content": content } return jsonify(status_dict), status_dict["status"] app/__init__. py def create_app(config_class=Config): app = Flask( __name__) # Rest of your config goes here: from app. api_1_0 import bp as api_bp app. register_blueprint(api_bp, url_prefix='/api_1_0') 17
![Testing the endpoint Chrome will display the JSON response Values are now Testing the endpoint: ◉ Chrome will display the JSON response ◉ Values are now](https://slidetodoc.com/presentation_image_h/33c3fc5a8bf03ef4b2cb63798ef5c4ff/image-18.jpg)
Testing the endpoint: ◉ Chrome will display the JSON response ◉ Values are now coming from our database 18
![What have we done so far Serve HTML Data 19 What have we done so far? Serve HTML / Data 19](https://slidetodoc.com/presentation_image_h/33c3fc5a8bf03ef4b2cb63798ef5c4ff/image-19.jpg)
What have we done so far? Serve HTML / Data 19
![Adding a React frontend Install Webpack Babel React make some API calls from React Adding a React frontend Install Webpack, Babel, React, make some API calls from React.](https://slidetodoc.com/presentation_image_h/33c3fc5a8bf03ef4b2cb63798ef5c4ff/image-20.jpg)
Adding a React frontend Install Webpack, Babel, React, make some API calls from React. 2 20
![Why do we need Java Script loginuser Navigation Chart 1 Login Chart 2 Why do we need Java. Script? /login_user Navigation Chart 1 | Login Chart 2](https://slidetodoc.com/presentation_image_h/33c3fc5a8bf03ef4b2cb63798ef5c4ff/image-21.jpg)
Why do we need Java. Script? /login_user Navigation Chart 1 | Login Chart 2 /get_chart_1/<id> /get_test_results/<id> /get_content/<user_id> Page content 21
![Inportant files packagelock json package json webpack config js css Inportant files │ package-lock. json │ package. json │ webpack. config. js │ ├───css](https://slidetodoc.com/presentation_image_h/33c3fc5a8bf03ef4b2cb63798ef5c4ff/image-22.jpg)
Inportant files │ package-lock. json │ package. json │ webpack. config. js │ ├───css │ style. css │ ├───dist │ bundle. js │ └───scripts index. js Finance. js Hello. World. js Webpack / Babel config Webpack / Babel output code React code 22
![Webpack 23 Webpack 23](https://slidetodoc.com/presentation_image_h/33c3fc5a8bf03ef4b2cb63798ef5c4ff/image-23.jpg)
Webpack 23
![Setting up Web Pack Initialise your project Install Web Pack CLI Setting up Web Pack ◉ Initialise your project: ◉ Install Web Pack CLI ◉](https://slidetodoc.com/presentation_image_h/33c3fc5a8bf03ef4b2cb63798ef5c4ff/image-24.jpg)
Setting up Web Pack ◉ Initialise your project: ◉ Install Web Pack CLI ◉ npm init: ◉ Creates package. json ◉ webpack. config. js: ◉ Project configuration npm init npm i webpack --save-dev npm i webpack-cli --save-dev See examples in repo 24
![Babel 25 Babel 25](https://slidetodoc.com/presentation_image_h/33c3fc5a8bf03ef4b2cb63798ef5c4ff/image-25.jpg)
Babel 25
![Setting up Babel Install Babel npm i babelcore babelloader babelpresetenv Setting up Babel ◉ Install Babel npm i @babel/core babel-loader @babel/preset-env](https://slidetodoc.com/presentation_image_h/33c3fc5a8bf03ef4b2cb63798ef5c4ff/image-26.jpg)
Setting up Babel ◉ Install Babel npm i @babel/core babel-loader @babel/preset-env @babel/preset-react --save-dev 26
![Installing React and Victory Install React React DOM npm i reactdom savedev Installing React and Victory ◉ Install React & React DOM. npm i react-dom [--save-dev]](https://slidetodoc.com/presentation_image_h/33c3fc5a8bf03ef4b2cb63798ef5c4ff/image-27.jpg)
Installing React and Victory ◉ Install React & React DOM. npm i react-dom [--save-dev] ◉ Install Victory Chart library. npm install victory --save-dev 27
![name flaskdatavisualization version 1 0 0 Setting up Webpack scripts description Example Flask { "name": "flask-data-visualization", "version": "1. 0. 0", Setting up Webpack scripts "description": "Example Flask](https://slidetodoc.com/presentation_image_h/33c3fc5a8bf03ef4b2cb63798ef5c4ff/image-28.jpg)
{ "name": "flask-data-visualization", "version": "1. 0. 0", Setting up Webpack scripts "description": "Example Flask application with React frontend. This app uses Victory Charts to display data visuali zation examples. ", "main": "index. js", "scripts": { "build": "webpack -p --progress --config webpack. config. js", "dev-build": "webpack --progress -d --config webpack. config. js", "watch": "webpack --progress -d --config webpack. config. js --watch" }, "repository": { "type": "git", "url": "git+https: //github. com/Allyn. H/flask-data-visualization. git" }, "keywords": [ "Flask", "React. JS", "Victory", "Python", "Javascript" "scripts": { ], "author": "Allyn Hunt", "build": "webpack -p --progress --config webpack. config. js", "babel": { "dev-build": "webpack --progress -d --config webpack. config. js", "presets": [ "@babel/preset-env", "watch": "webpack --progress -d --config webpack. config. js --watch" "@babel/preset-react" }, ] }, "license": "MIT", "homepage": "https: //github. com/Allyn. H/flask-data-visualization#readme", "dev. Dependencies": { "@babel/core": "^7. 6. 3", "@babel/preset-env": "^7. 6. 3", "@babel/preset-react": "^7. 6. 3", "babel-loader": "^8. 0. 6", "victory": "^33. 1. 1", "webpack": "^4. 41. 0", "webpack-cli": "^3. 3. 9" "react": "^16. 9. 0", "react-dom": "^16. 9. 0" } } 28
![const webpack requirewebpack const config entry dirname scriptsindex js output const webpack = require('webpack'); const config = { entry: __dirname + '/scripts/index. js', output:](https://slidetodoc.com/presentation_image_h/33c3fc5a8bf03ef4b2cb63798ef5c4ff/image-29.jpg)
const webpack = require('webpack'); const config = { entry: __dirname + '/scripts/index. js', output: { path: __dirname + '/dist', filename: 'bundle. js', }, resolve: { extensions: ['. js', '. jsx', '. css'] }, module: { rules: [ { test: /. (js|jsx)? /, exclude: /node_modules/, use: 'babel-loader' }, { test: /. (png|svg|jpg|gif)$/, use: 'file-loader' } ] } }; module. exports = config; ◉ Entry file: ◉ /scripts/index. js ◉ bundle. js ◉ In /dist folder ◉ For. js /. jsx files ◉ Use babel-loader 29
![webpack help webpackcli 3 3 9 Usage webpackcli options entry entry output output > webpack --help webpack-cli 3. 3. 9 Usage: webpack-cli [options] --entry <entry> --output <output>](https://slidetodoc.com/presentation_image_h/33c3fc5a8bf03ef4b2cb63798ef5c4ff/image-30.jpg)
> webpack --help webpack-cli 3. 3. 9 Usage: webpack-cli [options] --entry <entry> --output <output> webpack-cli [options] <entries. . . > --output <output> webpack-cli <command> [options] For more information, see https: //webpack. js. org/api/cli/. Config options: --config Path to the config file [string] [default: webpack. config. js or webpackfile. js] --config-register, -r Preload one or more modules before loading the webpack configuration [array] [default: module id or path] --config-name Name of the config to use [string] --env Environment passed to the config, when it is a function --mode Enable production optimizations or development hints. [choices: "development", "production", "none"] Basic options: --context The base directory (absolute path!) for resolving the `entry` option. If `output. pathinfo` is set, the included pathinfo is shortened to this directory. [string] [default: The current directory] --entry The entry point(s) of the compilation. [string] --watch, -w Enter watch mode, which rebuilds on file change. [boolean] --debug Switch loaders to debug mode [boolean] --devtool A developer tool to enhance debugging. [string] -d shortcut for --debug --devtool eval-cheap-module-source-map --output-pathinfo [boolean] -p shortcut for --optimize-minimize --define process. env. NODE_ENV="production" [boolean] --progress Print compilation progress in percentage [boolean] 30
![React Hello World appstaticscriptsHello World js import React from react class Hello World React – Hello, World! app/static/scripts/Hello. World. js import React from 'react'; class Hello. World](https://slidetodoc.com/presentation_image_h/33c3fc5a8bf03ef4b2cb63798ef5c4ff/image-31.jpg)
React – Hello, World! app/static/scripts/Hello. World. js import React from 'react'; class Hello. World extends React. Component { render() { return ( <h 1>Hello, World!</h 1> ); }} export default Hello. World; 1. Create the component 2. Attach the component to the DOM app/static/scripts/index. js import React from "react"; import React. DOM from "react-dom"; import Hello. World from ". /Hello. World"; React. DOM. render(<Hello. World />, document. get. Element. By. Id("react-root")); 31
![Adding React to your Flask app Create the reactroot div Add the Adding React to your Flask app ◉ Create the “react-root” div. ◉ Add the](https://slidetodoc.com/presentation_image_h/33c3fc5a8bf03ef4b2cb63798ef5c4ff/image-32.jpg)
Adding React to your Flask app ◉ Create the “react-root” div. ◉ Add the Java. Script. ◉ Static folder. ◉ Filename is bundle. js ◉ Script can be added: ◉ to individual templates ◉ or to base. html {% block app_content %} <div id="react-root"></div> <script src="{{ url_for('static', filename='dist/bundle. js') }}" ></script> {% endblock %} 32
![Viewing your React app Not much here yet But its working 33 Viewing your React app Not much here yet… But it’s working! 33](https://slidetodoc.com/presentation_image_h/33c3fc5a8bf03ef4b2cb63798ef5c4ff/image-33.jpg)
Viewing your React app Not much here yet… But it’s working! 33
![class Finance extends React Component constructorprops superprops this state error class Finance extends React. Component { constructor(props) { super(props); this. state = { error:](https://slidetodoc.com/presentation_image_h/33c3fc5a8bf03ef4b2cb63798ef5c4ff/image-34.jpg)
class Finance extends React. Component { constructor(props) { super(props); this. state = { error: null, is. Loaded: false, items: [] }; } component. Did. Mount() { fetch("/api_1_0/finance/1/2018") . then(res => res. json()) . then( (result) => { this. set. State({ is. Loaded: true, items: result. items }); }, (error) => { this. set. State({ is. Loaded: true, error }); } ) } render() { const { error, is. Loaded, items } = this. state ; if (error) { return <div>Error: {error. message}</div>; } else if (!is. Loaded) { return <div>Loading. . . </div>; } else { return ( ); } } } Fetching API data from your React frontend ◉ Added constructor(): ◉ Stores our state class Finance extends React. Component { render() { return ( <div>Hello, World!</div> ◉ ); } } ◉ component. Did. Mount(): ◉ Makes API call Updated render(): ◉ Handles error, loading or loaded state 34
![URL parameters let url window location href replace finance split const companyid URL parameters let url = window. location. href. replace(/. *finance/). split("/"); const company_id =](https://slidetodoc.com/presentation_image_h/33c3fc5a8bf03ef4b2cb63798ef5c4ff/image-35.jpg)
URL parameters let url = window. location. href. replace(/. *finance/). split("/"); const company_id = url[1]; const year = url[2]; const api_url = "/api_1_0/get_finances/" + company_id + "/" + year; HTML URL: http: //127. 0. 0. 1: 5000/finance/1/2018 API URL: http: //127. 0. 0. 1: 5000/api_1_0/get_finances/1/2018 35
![What have we done so far Serve HTML Data Make API call with What have we done so far? Serve HTML / Data Make API call with](https://slidetodoc.com/presentation_image_h/33c3fc5a8bf03ef4b2cb63798ef5c4ff/image-36.jpg)
What have we done so far? Serve HTML / Data Make API call with React 36
![Victory Charts Make a basic chart look at how to create some really cool Victory Charts Make a basic chart, look at how to create some really cool](https://slidetodoc.com/presentation_image_h/33c3fc5a8bf03ef4b2cb63798ef5c4ff/image-37.jpg)
Victory Charts Make a basic chart, look at how to create some really cool charts. 3 37
![VICTORY CHARTS Formidable Labs 38 VICTORY CHARTS Formidable Labs 38](https://slidetodoc.com/presentation_image_h/33c3fc5a8bf03ef4b2cb63798ef5c4ff/image-38.jpg)
VICTORY CHARTS Formidable Labs 38
![Chart 127 0 0 1 09Oct2019 22 05 07 GET api10getfinances12018 HTTP1 Chart 127. 0. 0. 1 - - [09/Oct/2019 22: 05: 07] "GET /api_1_0/get_finances/1/2018 HTTP/1.](https://slidetodoc.com/presentation_image_h/33c3fc5a8bf03ef4b2cb63798ef5c4ff/image-39.jpg)
Chart 127. 0. 0. 1 - - [09/Oct/2019 22: 05: 07] "GET /api_1_0/get_finances/1/2018 HTTP/1. 1" 200 39
![Victory Bar Victory Bar datafinancedata 40 Victory. Bar <Victory. Bar data={finance_data} /> 40](https://slidetodoc.com/presentation_image_h/33c3fc5a8bf03ef4b2cb63798ef5c4ff/image-40.jpg)
Victory. Bar <Victory. Bar data={finance_data} /> 40
![Victory Chart Victory Chart Victory Axis tick Valuesfinanceaxis Victory Axis dependent Axis Victory Chart <Victory. Chart > <Victory. Axis tick. Values={finance_axis} /> <Victory. Axis dependent. Axis](https://slidetodoc.com/presentation_image_h/33c3fc5a8bf03ef4b2cb63798ef5c4ff/image-41.jpg)
Victory Chart <Victory. Chart > <Victory. Axis tick. Values={finance_axis} /> <Victory. Axis dependent. Axis tick. Format={x => `$${x/1000000} M`} /> <Victory. Bar data={finance_data} /> </Victory. Chart> 41
![Some style Victory Chart padding left 100 right 50 bottom 100 top 30 Some style <Victory. Chart padding={{ left: 100, right: 50, bottom: 100, top: 30 }}](https://slidetodoc.com/presentation_image_h/33c3fc5a8bf03ef4b2cb63798ef5c4ff/image-42.jpg)
Some style <Victory. Chart padding={{ left: 100, right: 50, bottom: 100, top: 30 }} font. Size={8} domain. Padding={20} theme={Victory. Theme. material} > <Victory. Axis tick. Values={finance_axis} /> <Victory. Axis dependent. Axis tick. Format={x => `$${x/1000000} M`} /> <Victory. Stack color. Scale={"warm"}> <Victory. Bar data={finance_data} /> </Victory. Stack> </Victory. Chart> 42
![Victory Box Plot example class Box Plot extends React Component render return Victory. Box. Plot example class Box. Plot extends React. Component { render() { return](https://slidetodoc.com/presentation_image_h/33c3fc5a8bf03ef4b2cb63798ef5c4ff/image-43.jpg)
Victory. Box. Plot example class Box. Plot extends React. Component { render() { return ( <div> <Victory. Box. Plot min. Labels max. Labels data={[ { x: 1, y: [1, 2, 3, 5] }, { x: 2, y: [3, 2, 8, 10] }, { x: 3, y: [2, 8, 6, 5] }, { x: 4, y: [1, 3, 2, 9] } ]} style={{ min: { stroke: "tomato" }, max: { stroke: "orange" }, q 1: { fill: "tomato" }, q 3: { fill: "orange" }, median: { stroke: "white", stroke. Width: 2 }, min. Labels: { fill: "tomato" }, max. Labels: { fill: "orange" } }} /> </div> ); }} export default Box. Plot; 43
![What have we done so far Serve HTML Data Make API call with What have we done so far? Serve HTML / Data Make API call with](https://slidetodoc.com/presentation_image_h/33c3fc5a8bf03ef4b2cb63798ef5c4ff/image-44.jpg)
What have we done so far? Serve HTML / Data Make API call with React Render Victory chart 44
![Secure your API Some tips to secure your API and database 4 45 Secure your API Some tips to secure your API and database. 4 45](https://slidetodoc.com/presentation_image_h/33c3fc5a8bf03ef4b2cb63798ef5c4ff/image-45.jpg)
Secure your API Some tips to secure your API and database. 4 45
![Making secure API requests appapi10routes py bp routegetcompanyid loginrequired def getcompanyid c Company Making secure API requests app/api_1_0/routes. py @bp. route('/get_company/<id>') @login_required def get_company(id): c = Company.](https://slidetodoc.com/presentation_image_h/33c3fc5a8bf03ef4b2cb63798ef5c4ff/image-46.jpg)
Making secure API requests app/api_1_0/routes. py @bp. route('/get_company/<id>') @login_required def get_company(id): c = Company. query. filter_by(id=id). first_or_404() message = "Welcome to the API : )" content = { "name" : c. name, "ceo_name" : c. company_ceo, "business type" : c. business_type } status_dict = { "status": 200, "success": True, "message": message, "content. Type": 'application/json', "content": content } return jsonify(status_dict), status_dict["status"] @bp. route('/get_company/<int: id>') @login_required def get_company(id): c = Company. query. filter_by(id=id). first_or_404() message = "Welcome to the API : )" content = { "name" : c. name, "ceo_name" : c. company_ceo, "business type" : c. business_type } status_dict = { "status": 200, "success": True, "message": message, "content. Type": 'application/json', "content": content } return jsonify(status_dict), status_dict["status"] 46
![THANKS Any questions AllynH Allyn Hgmail com Git Hub comAllyn H 47 THANKS! Any questions? @Allyn_H_ / Allyn. H@gmail. com Git. Hub. com/Allyn. H 47](https://slidetodoc.com/presentation_image_h/33c3fc5a8bf03ef4b2cb63798ef5c4ff/image-47.jpg)
THANKS! Any questions? @Allyn_H_ / Allyn. H@gmail. com Git. Hub. com/Allyn. H 47
Flask data visualization
Florence flask vs volumetric flask
Data abstraction in data visualization
Office basics login
Intune mdm
Ocean data visualization
Visage data visualization
Google data visualization api
Data visualization rules of thumb
Bad graphs
Before and after data visualization
Data visualization meetup
Sketch data visualization
Music data visualization
Tamara munzner
Baby name wizard voyager
Data visualization lecture
Heap tree visualization
Traffic data visualization
Panoramix data visualization
Seismic data visualization
Shirley moore utep
Data structure visualization tool
Financial data visualization tools
Ben shneiderman data visualization
Advanced data visualization techniques
Adding sound to your multimedia project
Your local foundry is adding a new furnace
Intitle:adding ecommerce to your website
Jaeger flask
Volumetric glassware and routine glassware
Volumetric glassware examples
"concrete curing"
How does a vacuum flask work
Pericardium mediastinum
Types of water sample
Flask shaped gland
Florence flask lab equipment
Mass density volume questions
Used for holding and organizing test tubes on
Boyle's self flowing flask
Bartholomeus anglicus
Flask
Cope flask assembly
Swan neck flask experiment
Amebiasis
Pipette smallest division
Give us your hungry your tired your poor