DEV Community: David Akim

Deploying Taipy app in Render

David Akim — Sun, 05 Jan 2025 18:03:45 +0000

In this lesson we will go the steps of deploying a Taipy app in Render. Taipy is an open-source Python library that supports both front-end and back-end development, streamlining the process from creating prototypes to deploying production-ready applications. Render is a service that allows you to build, deploy, and scale your apps.

Prerequisite

Must be familiar with Python and Github
Have a Github account. Create one here
Have a Render account. Create one here
Have a Taipy app

Procedure

Create a new Github repository.
Create a requirements.txt file for your Taipy app.
```
pip freeze > requirements.txt
```
Set your Taipy app host to 0.0.0.0 and port to 10000.
Push your Taipy app to your Github repository.
Login to your Render account and select Web Service.
Select your Github repository that contains the Taipy app.
Give your web service a name, select Python 3 for Language and select the Github branch that you want to deploy.
Enter the root directory (if any) and the Start Command (the command you use to run the app locally).
Select your instance. (There is a free tier)
Enter any Environment Variables and then click Deploy Web Service
The URL for your app is generated. The status of your app is shown. In this case, it is Live.
Go to the URL to see your app.

If your app fails, you can fix your app, push it to Github and Render will automatically re-deploy it. If it doesn't, you can click Manual Deploy. This concludes our lesson.

Sophisticated Speech-to-Text Application

David Akim — Mon, 25 Nov 2024 00:54:01 +0000

This is a submission for the AssemblyAI Challenge : Sophisticated Speech-to-Text.

What I Built

I developed a Speech-to-Text application in Taipy using AssemblyAI's Universal-2 Speech-to-Text model. The application's features are:

Transcribe spoken words into written text.
Detect multiple speakers in an audio file and what each speaker said.
Summarize your audio data with key takeaways
Download transcriptions to a text file.

Demo

Link to Github repository

Screenshots

Journey

The application was developed using Taipy, a Python-based framework, which made integrating with AssemblyAI’s Speech-to-Text Model seamless, as both use Python. AssemblyAI's comprehensive documentation simplified the implementation of the transcription and diarization features. Taipy was utilized for the user interface, while AssemblyAI handled all the Speech-to-Text processing.
This submission also meets the criteria for the No More Monkey Business Challenge Prompt. The summarization feature was implemented using LeMUR, where a custom prompt was sent to the LLM to generate a concise summary of the transcript.
This is a solo submission, with all the work on Taipy and AssemblyAI completed by myself. It was an enjoyable learning experience. AssemblyAI has made building Speech-to-Text applications incredibly easy, and I will certainly use it again in the future.

2024 Hacktoberfest Writing challenge: Contributor Experience

David Akim — Fri, 01 Nov 2024 00:48:15 +0000

This is a submission for the 2024 Hacktoberfest Writing challenge: Contributor Experience

Introduction

I’ve been programming for a few years, but my experience has been limited to solo projects. I hadn’t contributed to a team project until I discovered Hacktoberfest, thanks to the amazing members at Virtual Coffee who introduced me to the event.

How I started contributing?

I felt a bit intimidated at first because I wasn’t sure where to begin. I also worried that if I took on an issue, I might not be able to solve it and that I should let someone else handle it. Fortunately, the members at Virtual Coffee offered tutorials and resources that were incredibly helpful, including beginner-friendly repositories.

How was my experience?

I learned the steps for making a contribution, and it turned out to be easier and less intimidating than I expected, though resolving merge conflicts was a bit frustrating. I successfully completed four pull requests and even received a badge just for registering!

Frontend Challenge: Space Edition (Rocket Emoji CSS)

David Akim — Mon, 09 Sep 2024 00:17:51 +0000

This is a submission for Frontend Challenge v24.09.04, CSS Art: Space.

Inspiration

This submission was inspired by celebrating people's success on a chat. One space related emoji used to acknowledge their wins is the rocket emoji.

Demo

Journey

This challenge provided an excellent learning experience. The task was to create a rocket emoji using CSS and HTML, which involved crafting shapes that are not typically seen on websites.
I started by breaking the image into 8 parts:

Body
Nose Cone
Window
Left Fin
Middle Fin
Right Fin
Nozzle
Flame

The Body is a div element that is rotated 45 degrees with a border radius added to each corner to give it a rounded appearance. This element contains the Nose Cone and the Window. The Nose Cone is a div element with a border radius of 50% which makes it a circle. It is positioned at the top of the Body. The Window is similar to the The Nose Cone but it has a border to give it a window frame and it is positioned near the center of the Body. The Left Fin is a div element with a clip-path attribute. Using this attribute I can define a polygon, which allows me to draw the fin. The Middle Fin is a div element with rounded corners. The Right Fin similar to the Left Fin but it is inverted. The Nozzle is a rectangular div element with rounded corners. The Flame is a square div element with varying border radius for each corner. A border with a deeper color was added to Flame to give it more of a flame appearance. Animation was added to Flame which simply changes the size and opacity every 2 seconds indefinitely. The background is a series of radial-gradient attributes used to create random white circles of varying sizes at different locations.

I learned some new CSS techniques, including how to create animations and polygons. In the future, I hope to add even more animations to the rocket.

One Byte Explainer: Recursion

David Akim — Wed, 19 Jun 2024 03:53:17 +0000

This is a submission for DEV Computer Science Challenge v24.06.12: One Byte Explainer.

Explainer

Recursion is a technique where a function calls itself, allowing large complicated problems to be broken down into smaller, simpler problems. Since a recursive function can run indefinitely, a base case is used to terminate it.

Frontend Challenge: Cat CSS

David Akim — Fri, 07 Jun 2024 12:04:49 +0000

This is a submission for Frontend Challenge v24.04.17, CSS Art: June.

Inspiration

This submission was inspired by Frontend Friday Folks Fighting CSSBattle.dev hosted by Virtual Coffee. It is an activity where you take on a challenge at CSS Battle. I completed the CSS Battle #175. Evil Cat challenge.

Demo

Journey

This challenge provided an excellent learning experience. The task was to create a cat using CSS and HTML, which involved crafting shapes that are not typically seen on websites.

I started by breaking the image into 8 parts:

Face
Left ear
Right ear
Left eye
Left pupil
Right eye
Right pupil
Nose

I created a container that housed all the individual parts and positioned it at the center of the screen. The face was a simple rectangle with rounded corners achieved by applying a border radius. The ears were a bit more challenging. I solved this by creating a rectangle with only three borders—left, right, and bottom. The side borders were made transparent, and I adjusted the border widths until the desired triangle shape was formed, then rotated them to align correctly. The eyes are rectangles with two rounded corners on opposite sides and rotated for correct alignment. The pupils are rectangles with rounded corners. The nose was created using the same method as the ears.

I learned some new CSS techniques, including how to center an item on the screen, create a triangle, apply rotation, and round corners. I am proud to have achieved a 100% match for this challenge. In the future, I hope to add animation to make the pupils move from side to side.

Installing Odoo from source code

David Akim — Tue, 19 Dec 2023 15:45:08 +0000

In this lesson, we will go through the steps of running Odoo (Community version) in Windows from the source code. Odoo is an open-source business management software suite that includes a range of business applications for various purposes such as accounting, inventory management, and customer relationship management (CRM). We will be using the PyCharm IDE. To run Odoo in other operating systems, please check the documentation here.

Prerequisite

Must have Python (version 3.10 or later) installed
Must have PyCharm Community Edition installed
Must have Git installed
Must have PostgreSQL (version 12.0 or later) installed

Add PostgreSQL’s bin directory to the Environment variables

Launch Control Panel
Click System and Security
Click System
Click Advance System Settings
Click Environment Variables...
If you want to make this path available to you alone, click New... under User variables. If you want to make this path available to everyone, click New... under System variables
Variable name is Path and Variable value is the PostgreSQL’s bin directory (by default: C:\Program Files\PostgreSQL<version>\bin) (Note: If this variable already exists, click Edit... instead of New...)

Create a new PostgreSQL user
Open the pg admin gui (pgAdmin 4). Enter master password or click Reset Master Password if you forgot the password.

Enter password for postgres user. This is usually password.

Navigate to Login/Group Roles. Right click and select Create->Login/Group Role.

In the General tab, give the role a Name. In this example Name is odoo_user. (Remember this)

In the Definition tab, fill out the Password field. (Remember this)

In the Privileges tab, enable Can login? and Create databases?. Click Save.

Setting up project folder

Create a folder called Odoo Project (you can give this folder any name)

Inside this folder create a folder called config and another folder called custom_addons.

Inside the config folder, create a file called odoo.conf.

Open a command terminal and navigate to Odoo Project folder.

In the Odoo Project directory, clone the Odoo source code Git repository with the following command.

git clone https://github.com/odoo/odoo.git

At this point, your folder structure should look like this.

Odoo Project/
├─ config/
│  ├─ odoo.conf
├─ custom_addons/
├─ odoo/

Copy the requirements.txt in odoo folder and paste in the Odoo Project folder.

Setting up Pycharm
Open PyCharm and click New Project.

Select the location of your project. Check the option New environment using Virtualenv. You can leave the location of the environment as it is. Select the location of python.exe for the Base interpreter. Click Create.

We need to give Odoo our database information: user, password, host and port. The db_user and db_password created earlier (Create a new PostgreSQL user section). We also need to give Odoo the location of our custom_addons folder (addons_path).
On the Project Panel, open the odoo.conf file and copy the contents below.

[options]
addons_path = G:\Projects\Odoo\Odoo Project\custom_addons
db_user = odoo_user
db_password = odoo_user
db_host = localhost
db_port = 5432

Click File->Run->Edit Configurations.

Click Add new run configuration...

Click Python

Set the Name to Odoo. Set Script Path to the odoo-bin file. This is located inside the odoo folder which is inside the Odoo Project folder. Set Parameters to -c config/odoo.conf. Set Working Directory to the Odoo Project folder. Click Apply and OK.

Click Terminal at the bottom left.

Install the dependencies using the following commands.

pip install setuptools wheel
pip install -r requirements.txt

Click the Run Odoo button at the top.

In a browser go to http://localhost:8069. Enter Database Name, Email and Password.

You will now be logged in. Here you can activate your required applications.

This concludes our lesson. For more information, check the documentation here.

Create an Agebot in Slack using Python

David Akim — Thu, 30 Nov 2023 01:41:06 +0000

In this lesson, we will go through the steps of creating a bot in the Slack messaging app which automatically determines the user's age based on the user's input. We will be implementing this app in Python and deploying it locally.

Prerequisites

Must be familiar with Python

Creating a Slack Workspace for AgeBot Project

Go to Slack and Sign in or Sign up with Email if you don't have an account.
After signing in, click Create Another Workspace or Create a Workspace. Fill out the required information. You can invite team members or create channels for specific topics.

Setting up the Slack Workspace for AgeBot Project

Create an app by going to Slack API apps. Click Create an App. If you have create apps before in Slack, this page will look different. In that case, there will be a Create New App button.

Click create From scratch

Give your app a name and choose a workspace to develop your app in. In this example, we will be using a workspace we have already created called Cyber Coder. Please use one of the workspaces you created. Click Create App.

Scroll down to Display Section. Give your app a Short description and Long description. Then click Save Changes.

Scroll up and click Bots.

Click Review Scopes to Add.

Scroll down to the Scopes Section. Under Bot Token Scopes, click Add an OAuth Scope.

Search for the following and add them. app_mentions:read views messages that directly mention @AgeBot in conversations that the app is in. chat:write sends messages as @AgeBot. im:history views messages and other content in direct messages that AgeBot has been added to.

app_mentions:read
chat:write
im:history

Scroll up to the OAuth Tokens for Your Workspace Section. Click Install to Workspace.

Click Allow.

Click Socket Mode under Settings and turn on Enable Socket Mode. Turning on Socket Mode will route your app’s interactions and events over a WebSockets connection instead sending these payloads to Request URLs. Since we will be running this app locally, we need to enable this feature.

Click Basic Information under Settings.

Scroll down to the App-Level Tokens Section. Click Generate Token and Scopes.

Give your App level token a name. Then click Add Scope. Select connections:write and click Generate. This setting will route your app's interactions and event payloads over WebSockets.

Copy this token in a notepad. Store this token in a variable call SLACK_APP_TOKEN. Click Done.

Scroll back up to the Building Apps for Slack Section. Click Add features and functionality Section. Then click Event Subscriptions. Turn on Enable Events.

Under the Subscribe to bot events Section, click Add Bot User Event. Select the following events. app_mention subscribes to only the message events that mention your app or bot. message.im checks if a message was posted in a direct message channel.

app_mention
message.im

Click OAuth & Permissions under Features. Under OAuth Tokens for Your Workspace copy the Bot User OAuth Token into a notepad. Store this token in a variable call SLACK_BOT_TOKEN.

Writing the Python code

This app will automatically calculate the user's age based on the user's input. To trigger this function, go on Slack and in the chat type @AgeBot [day-month-year]. For example, @AgeBot 25-12-2012. Given that the date of writing this blog is 30-11-2023 the response from AgeBot is 10.

Create a folder called agebot. Navigate into this folder by typing the following in the command terminal.

cd agebot

Create a virtual environment by entering the following in the command terminal.

virtualenv venv

Activate the virtual environment using the following command.

venv\Scripts\activate

Install the required libraries: slack-bolt and python-dotenv

pip install slack-bolt
pip install python-dotenv

Create a .env file and copy and paste your tokens here.

SLACK_APP_TOKEN = "YOUR APP TOKEN"
SLACK_BOT_TOKEN = "YOUR BOT TOKEN"

Import the required libraries.

import os
from slack_bolt import App
from slack_bolt.adapter.socket_mode import SocketModeHandler
from slack_sdk import WebClient
from datetime import datetime, date
import re

from dotenv import load_dotenv
load_dotenv()
import os
SLACK_APP_TOKEN = os.environ.get("SLACK_APP_TOKEN")
SLACK_BOT_TOKEN = os.environ.get("SLACK_BOT_TOKEN")

app = App(token=SLACK_APP_TOKEN)
client = WebClient(token=SLACK_BOT_TOKEN)

Create a function to calculate the user's age. First we need to extract the date from the user input. Then we define the date format. The date string is converted to a datetime object. We call the function date.today() to get today's date. The difference between today's date and the user's input date is calculated. This result is then divided by 365 to get the number of years. Finally, return the result as a chat message.

def handle_age_request(channel, text):
    # Example string containing a date
    date_string = re.sub('<.*?>', '', text)
    date_string = re.sub(r"\s+", "", date_string)

    # Define the date format
    date_format = "%d-%m-%Y"

    # Convert the string to a datetime object
    date_object = datetime.strptime(date_string, date_format)
    dob = date_object.date()

    today = date.today()

    # Calculate the difference between the two dates
    delta = today - dob

    # Calculate the number of years
    years = delta.days // 365


    client.chat_postMessage(channel=channel, text=str(years))

Create a function to handle app_mention. This function is called whenever a message mentions the app or bot.

@app.event("app_mention")
def handle_mention(event, say):
    channel = event.get('channel')
    text = event.get('text')
    handle_age_request(channel, text)

Start the Socket.

print("Start your bot")
handler = SocketModeHandler(app, app_token=SLACK_APP_TOKEN)
handler.start()

The entire script should look like this.

import os
from slack_bolt import App
from slack_bolt.adapter.socket_mode import SocketModeHandler
from slack_sdk import WebClient
from datetime import datetime, date
import re

from dotenv import load_dotenv
load_dotenv()
import os
SLACK_APP_TOKEN = os.environ.get("SLACK_APP_TOKEN")
SLACK_BOT_TOKEN = os.environ.get("SLACK_BOT_TOKEN")

app = App(token=SLACK_APP_TOKEN)
client = WebClient(token=SLACK_BOT_TOKEN)

def handle_age_request(channel, text):
    # Example string containing a date
    date_string = re.sub('<.*?>', '', text)
    date_string = re.sub(r"\s+", "", date_string)

    # Define the date format
    date_format = "%d-%m-%Y"

    # Convert the string to a datetime object
    date_object = datetime.strptime(date_string, date_format)
    dob = date_object.date()

    today = date.today()

    # Calculate the difference between the two dates
    delta = today - dob

    # Calculate the number of years
    years = delta.days // 365


    client.chat_postMessage(channel=channel, text=str(years))


@app.event("app_mention")
def handle_mention(event, say):
    channel = event.get('channel')
    text = event.get('text')
    handle_age_request(channel, text)


print("Start your bot")
handler = SocketModeHandler(app, app_token=SLACK_APP_TOKEN)
handler.start()

Now go to your workspace in Slack. In any of your channels, start a conversation with @AgeBot. You may get this message "You mentioned @AgeBot, but they’re not in this channel". Click Invite Them. You can now message @AgeBot. Type @AgeBot 25-12-2000. Given that the date of writing this blog is 30-11-2023 AgeBot will respond with 22. This concludes our lesson.

Creating a movie finder app with Streamlit and OMDb API

David Akim — Mon, 27 Nov 2023 17:13:09 +0000

In this lesson, we will go through the steps of creating a movie finder app using Streamlit and the OMDb API. Streamlit is an open-source Python library that makes it easy to create custom web apps. You can easily integrate popular data visualization libraries into your Streamlit app. The OMDb API is a RESTful web service for retrieving movie information. Our movie finder app will have a feature to filter the movie results by type either movie or series, by year of release and by IMDB rating. It will also have a feature to plot the ratings and votes.

Prerequisite

Must be familiar with Python
Must have Python (at least version 3.8) installed
Sign up for Streamlit account
Sign up for OMDb API Key

Procedure

Create a folder called streamlit-movie-info.
Navigate into this folder by typing the following in the command terminal.

cd streamlit-movie-info

Create a virtual environment by entering the following in the command terminal.

virtualenv venv

Activate the virtual environment using the following command.

venv\Scripts\activate

Install streamlit using the following command.

pip install streamlit

We will also be plotting the ratings and votes, so we need to install plotly-express with the following command.

pip install plotly-express

Create a folder called .streamlit. Make sure it is called .streamlit and not streamlit.

Inside the .streamlit folder, create a file called secrets.toml. Put your OMDb API here.

omdb_api = "YOUR OMDb API"

Create a custom poster image for movies that don't have a poster. You can create this image using any software. Call this image film-solid.png.

Create a python script called streamlit_app.py. Now we are going to write code. First we need to import the required libraries.

import streamlit as st
import requests
import pandas as pd
import plotly.express as px
from datetime import datetime

Create the title for the app. This code will display the text in title formatting.

# Streamlit app title
st.title("Movie Finder App")

Create an input element for user to enter movie title. This code will display a single-line text input widget. This is the movie search field.

# User input for movie title
movie_title = st.text_input("Enter Movie Title", "")

The year filter will have a range from 1900 to the current year. The current year is obtained using the following code snippet.

# Current Year
current_year = datetime.now().year

We need a variable to store the movie search results.

# Dataframe for storing all movie data
movies_df = pd.DataFrame()

Set the filter options.

# Filter options
type_filter = st.selectbox("Filter by Type", ["movie", "series"])
year_filter = st.slider("Filter by Release Year", min_value=1900, max_value=current_year, step=1, value=(1900, current_year))
rating_filter = st.slider("Filter by IMDb Rating", min_value=0.0, max_value=10.0, step=0.1, value=(0.0, 10.0))

There are 2 slider widgets and 1 select widget. The type filter is the select widget with 2 options: movie and series. The year of release filter is the slider widget which has a range from 1900 to the current year. The IMDB rating filter is also a slider widget which has a range from 0.0 to 10.0 with increments of 0.1.
Get the results of query using the following code snippet.

# Search for the movie using the OMDB API
if movie_title:
  omdb_api_url = "http://www.omdbapi.com/"    
  api_key = st.secrets["omdb_api"] # OMDb API key (you need to sign up for a free API key)

  params = {
    "apikey": api_key,
    "s": movie_title,
    "type": type_filter,
    "y": f"{year_filter[0]}-{year_filter[1]}",    
    "r": "json"
  }

  with st.spinner('Processing...'):    

    response = requests.get(omdb_api_url, params=params)
    data = response.json()

    # Filter and display movie details
    if "Search" in data:      
      for movie in data["Search"]:
        # Additional request to get detailed information for each movie
        detailed_params = {"apikey": api_key, "i": movie["imdbID"], "plot":"full", "r": "json"}
        detailed_response = requests.get(omdb_api_url, params=detailed_params)
        detailed_data = detailed_response.json()


        detailed_data["Year"] = detailed_data["Year"].rstrip("–")  
        # Apply additional filters
        if (
            (
              type_filter == 'movie' and            
              year_filter[0] <= int(detailed_data["Year"]) <= year_filter[1] and    
              detailed_data["imdbRating"] != "N/A" and
              rating_filter[0] <= float(detailed_data["imdbRating"]) <= rating_filter[1]
            ) or  
            (
              type_filter == 'series' and                        
              detailed_data["imdbRating"] != "N/A" and
              rating_filter[0] <= float(detailed_data["imdbRating"]) <= rating_filter[1]
            )    
        ):     

          # Temporarily store movie detail in this dataframe.                                         
          new_row_df = pd.DataFrame({'Poster':[detailed_data['Poster']],
                                    'Title':[f"{detailed_data['Title']} ({detailed_data['Year']})"],
                                    'Year':[detailed_data['Year']],
                                    'Rated':[detailed_data['Rated']],
                                    'Runtime':[detailed_data['Runtime']],
                                    'Released':[detailed_data['Released']],
                                    'Genre':[detailed_data['Genre']],
                                    'Director':[detailed_data['Director']],
                                    'Writer':[detailed_data['Writer']],
                                    'Actors':[detailed_data['Actors']],
                                    'Language':[detailed_data['Language']],
                                    'Country':[detailed_data['Country']],
                                    'Awards':[detailed_data['Awards']],
                                    'Plot': [detailed_data['Plot']],
                                    'IMDB Rating': [detailed_data['imdbRating']],
                                    'IMDB Votes': [detailed_data['imdbVotes']],                                    
                                    })

          # Add movie detail dataframe to the main dataframe containing all movies
          movies_df = pd.concat([movies_df, new_row_df], ignore_index=True)                                             
    else:
      st.warning("No movies found for the specified criteria.")
else:
  st.warning("Please enter a movie title.")

Code Breakdown
First we check if the movie search is not empty. If it is, we throw a warning using st.warning. Then we set the OMDb API url and API key. The API key is stored in the secrets.toml file and is called omdb_api. We can access this key using st.secrets.

omdb_api_url = "http://www.omdbapi.com/"    
api_key = st.secrets["omdb_api"]

Set the other parameters. The "s" field sets the movie title to search for. The "type" field sets the type of result to return. In this case, it is either movie or series. The "y" field sets the year of release. In this case, it is between 1900 and the current year. The "r" field sets the data type to return.

params = {
    "apikey": api_key,
    "s": movie_title,
    "type": type_filter,
    "y": f"{year_filter[0]}-{year_filter[1]}",    
    "r": "json"
  }

We will be using a spinner to indicate that searching is in progress. This widget temporarily shows a message while a code block is being executed.

with st.spinner('Processing...')

Get the response from the query and load JSON data into a Python object.

response = requests.get(omdb_api_url, params=params)
data = response.json()

Check if there are any results. If there are no results throw a warning using st.warning. If there are results, iterate through each item in the search results.

for movie in data["Search"]:
  # Additional request to get detailed information for each movie
  detailed_params = {"apikey": api_key, "i": movie["imdbID"], "plot":"full", "r": "json"}
  detailed_response = requests.get(omdb_api_url, params=detailed_params)
  detailed_data = detailed_response.json()

Like before, set the parameters. The "i" field sets the IMDb ID. The "plot" field determines if to use the short or full plot.

Sometimes the "year" parameter in the search results may contain an invalid number. Remove the additional character.

detailed_data["Year"] = detailed_data["Year"].rstrip("–")

Apply the filters. Note: For there is no year of release for type: series. Therefore, the year filter does not affect this type.

if (
  (
    type_filter == 'movie' and            
    year_filter[0] <= int(detailed_data["Year"]) <= year_filter[1] and    
    detailed_data["imdbRating"] != "N/A" and
    rating_filter[0] <= float(detailed_data["imdbRating"]) <= rating_filter[1]
  ) or  
  (
    type_filter == 'series' and                        
    detailed_data["imdbRating"] != "N/A" and
    rating_filter[0] <= float(detailed_data["imdbRating"]) <= rating_filter[1]
  )    
):

Temporarily store the result in a variable called new_row_df. This variable will be concatenated with the main variable containing all results.

# Temporarily store movie detail in this dataframe.                                         
new_row_df = pd.DataFrame({'Poster':[detailed_data['Poster']],
                          'Title':[f"{detailed_data['Title']} ({detailed_data['Year']})"],
                          'Year':[detailed_data['Year']],
                          'Rated':[detailed_data['Rated']],
                          'Runtime':[detailed_data['Runtime']],
                          'Released':[detailed_data['Released']],
                          'Genre':[detailed_data['Genre']],
                          'Director':[detailed_data['Director']],
                          'Writer':[detailed_data['Writer']],
                          'Actors':[detailed_data['Actors']],
                          'Language':[detailed_data['Language']],
                          'Country':[detailed_data['Country']],
                          'Awards':[detailed_data['Awards']],
                          'Plot': [detailed_data['Plot']],
                          'IMDB Rating': [detailed_data['imdbRating']],
                          'IMDB Votes': [detailed_data['imdbVotes']],                                    
                          })

Concatenate the temporary variable with the main variable called movies_df.

# Add movie detail dataframe to the main dataframe containing all movies
movies_df = pd.concat([movies_df, new_row_df], ignore_index=True)

Now we have to create the visualize the data. Create two tabs. The first tab contains the search results with the movie details. The second tab contains the plots of the Ratings and Reviews.

# Setup tabs
tab1, tab2 = st.tabs(["Search Results", "Ratings and Votes"])

In the first tab print out all the movie details such as poster, title, rating, rated, runtime, released, genre, director, writer, actors, plot, language, country and awards.

with tab1:
  if(len(movies_df)>0):
    st.header("Search Results")          
    for i in range(len(movies_df)):
      col1, col2 = st.columns([1,2])
      with col1:
        # Display movie poster              
        if(movies_df['Poster'][i]!="N/A"):
          st.image(movies_df['Poster'][i], caption=movies_df['Title'][i], use_column_width=True)
        else:
        # If there is no movie poster, use custom movie poster  
          st.image("film-solid.png")               

      with col2:  
        # Display movie details
        st.subheader(movies_df['Title'][i])              

        col1, col2, col3 = st.columns(3)          
        col1.write(f"IMDb Rating: {movies_df['IMDB Rating'][i]}")    
        col2.write(f"Rated: {movies_df['Rated'][i]}")          
        col3.write(f"Runtime: {movies_df['Runtime'][i]}")

        st.write(f"Released: {movies_df['Released'][i]}")          
        st.write(f"Genre: {movies_df['Genre'][i]}")
        st.write(f"Director: {movies_df['Director'][i]}")
        st.write(f"Writer: {movies_df['Writer'][i]}")
        st.write(f"Actors: {movies_df['Actors'][i]}")
        st.write(f"Plot: {movies_df['Plot'][i]}")        
        st.write(f"Language: {movies_df['Language'][i]}")
        st.write(f"Country: {movies_df['Country'][i]}")
        st.write(f"Awards: {movies_df['Awards'][i]}")

      st.divider()

All text content is printed using st.write. Images are displayed using st.image. st.header and st.subheader display the text in header and sub-header formats. st.columns creates columns. In this case, there are 3 columns: IMDb Rating, Rated and Runtime. st.divider displays a horizontal rule.

In the second tab plot the ratings and votes for the movies.

# Plots of Ratings and Votes
with tab2:
  if(len(movies_df)>0):
    fig = px.bar(movies_df, x='Title', y='IMDB Rating')  
    st.header("IMDB Ratings")
    st.plotly_chart(fig, theme="streamlit", use_container_width=True) 

    fig = px.bar(movies_df, x='Title', y='IMDB Votes')  
    st.header("IMDB Votes")
    st.plotly_chart(fig, theme="streamlit", use_container_width=True)

The plot type is a bar chart. The x axis contains the title of the movies and y axis contains IMDB Ratings or Votes. st.plotly_chart plots the chart. The theme is set to streamlit. The width of the chart is set to container width. To find out more information about st.plotly_chart click here.

The entire script should look like this.

import streamlit as st
import requests
import pandas as pd
import plotly.express as px
from datetime import datetime 

# Streamlit app title
st.title("Movie Finder App")

# User input for movie title
movie_title = st.text_input("Enter Movie Title", "")

# Current Year
current_year = datetime.now().year

# Dataframe for storing all movie data
movies_df = pd.DataFrame()

# Filter options
type_filter = st.selectbox("Filter by Type", ["movie", "series"])
year_filter = st.slider("Filter by Release Year", min_value=1900, max_value=current_year, step=1, value=(1900, current_year))
rating_filter = st.slider("Filter by IMDb Rating", min_value=0.0, max_value=10.0, step=0.1, value=(0.0, 10.0))

# Search for the movie using the OMDB API
if movie_title:
  omdb_api_url = "http://www.omdbapi.com/"    
  api_key = st.secrets["omdb_api"] # OMDb API key (you need to sign up for a free API key)

  params = {
    "apikey": api_key,
    "s": movie_title,
    "type": type_filter,
    "y": f"{year_filter[0]}-{year_filter[1]}",    
    "r": "json"
  }

  with st.spinner('Processing...'):    

    response = requests.get(omdb_api_url, params=params)
    data = response.json()

    # Filter and display movie details
    if "Search" in data:      
      for movie in data["Search"]:
        # Additional request to get detailed information for each movie
        detailed_params = {"apikey": api_key, "i": movie["imdbID"], "plot":"full", "r": "json"}
        detailed_response = requests.get(omdb_api_url, params=detailed_params)
        detailed_data = detailed_response.json()


        detailed_data["Year"] = detailed_data["Year"].rstrip("–")  
        # Apply additional filters
        if (
            (
              type_filter == 'movie' and            
              year_filter[0] <= int(detailed_data["Year"]) <= year_filter[1] and    
              detailed_data["imdbRating"] != "N/A" and
              rating_filter[0] <= float(detailed_data["imdbRating"]) <= rating_filter[1]
            ) or  
            (
              type_filter == 'series' and                        
              detailed_data["imdbRating"] != "N/A" and
              rating_filter[0] <= float(detailed_data["imdbRating"]) <= rating_filter[1]
            )    
        ):     

          # Temporarily store movie detail in this dataframe.                                         
          new_row_df = pd.DataFrame({'Poster':[detailed_data['Poster']],
                                    'Title':[f"{detailed_data['Title']} ({detailed_data['Year']})"],
                                    'Year':[detailed_data['Year']],
                                    'Rated':[detailed_data['Rated']],
                                    'Runtime':[detailed_data['Runtime']],
                                    'Released':[detailed_data['Released']],
                                    'Genre':[detailed_data['Genre']],
                                    'Director':[detailed_data['Director']],
                                    'Writer':[detailed_data['Writer']],
                                    'Actors':[detailed_data['Actors']],
                                    'Language':[detailed_data['Language']],
                                    'Country':[detailed_data['Country']],
                                    'Awards':[detailed_data['Awards']],
                                    'Plot': [detailed_data['Plot']],
                                    'IMDB Rating': [detailed_data['imdbRating']],
                                    'IMDB Votes': [detailed_data['imdbVotes']],                                    
                                    })

          # Add movie detail dataframe to the main dataframe containing all movies
          movies_df = pd.concat([movies_df, new_row_df], ignore_index=True)                                             
    else:
      st.warning("No movies found for the specified criteria.")
else:
  st.warning("Please enter a movie title.")

# Setup tabs
tab1, tab2 = st.tabs(["Search Results", "Ratings and Votes"])

# Search Results: List of movie details
with tab1:
  if(len(movies_df)>0):
    st.header("Search Results")          
    for i in range(len(movies_df)):
      col1, col2 = st.columns([1,2])
      with col1:
        # Display movie poster              
        if(movies_df['Poster'][i]!="N/A"):
          st.image(movies_df['Poster'][i], caption=movies_df['Title'][i], use_column_width=True)
        else:
        # If there is no movie poster, use custom movie poster  
          st.image("film-solid.png")               

      with col2:  
        # Display movie details
        st.subheader(movies_df['Title'][i])              

        col1, col2, col3 = st.columns(3)          
        col1.write(f"IMDb Rating: {movies_df['IMDB Rating'][i]}")    
        col2.write(f"Rated: {movies_df['Rated'][i]}")          
        col3.write(f"Runtime: {movies_df['Runtime'][i]}")

        st.write(f"Released: {movies_df['Released'][i]}")          
        st.write(f"Genre: {movies_df['Genre'][i]}")
        st.write(f"Director: {movies_df['Director'][i]}")
        st.write(f"Writer: {movies_df['Writer'][i]}")
        st.write(f"Actors: {movies_df['Actors'][i]}")
        st.write(f"Plot: {movies_df['Plot'][i]}")        
        st.write(f"Language: {movies_df['Language'][i]}")
        st.write(f"Country: {movies_df['Country'][i]}")
        st.write(f"Awards: {movies_df['Awards'][i]}")

      st.divider()     

# Plots of Ratings and Votes
with tab2:
  if(len(movies_df)>0):
    fig = px.bar(movies_df, x='Title', y='IMDB Rating')  
    st.header("IMDB Ratings")
    st.plotly_chart(fig, theme="streamlit", use_container_width=True) 

    fig = px.bar(movies_df, x='Title', y='IMDB Votes')  
    st.header("IMDB Votes")
    st.plotly_chart(fig, theme="streamlit", use_container_width=True)

Run the application by typing the following in the command terminal.

streamlit run streamlit_app.py

streamlit_app.py is the name of the file we need to run.

On the browser go to http://localhost:8501/. You will see the following screen.

In this example, search for the dark knight. There are multiple results. This is only one of them.

View the plots.

This concludes our lesson. For more information on Streamlit, check the documentation here.

Using Plotly.js with React

David Akim — Fri, 17 Nov 2023 15:17:21 +0000

In this lesson, we will go through the steps of using Plotly.js in React. Plotly.js is an Open Source Graphing Library. At the end of this lesson, you should be able to do a simple plot with Plotly.js.

Prerequisite

Must be familiar with JavaScript
Must be familiar with installing NPM packages
Must have React installed

Procedure
Create a new react project called react-plotly by typing the following in the command terminal.

npx create-react-app react-plotly

Navigate into the react-plotly project folder by typing the following in the command terminal.

cd react-plotly

Install Plotly.js for React by typing the following in the command terminal.

npm install react-plotly.js plotly.js

Consider a fictional scenario, where a doctor or nurse needs to see the growth rate of boys. In this example we will be plotting this data. The x-axis contains the age and the y-axis contains the height.

Clear the styling of the React app by opening the App.css file and deleting all the contents.

Replace the contents in the App.js file with the code below. (Note: The values are fictional).

import "./App.css";
import Plot from "react-plotly.js";

function App() {
  return (
    <div
      className="App"
      style={{
        display: "flex",
        justifyContent: "center",
        alignItems: "center",
        height: "100vh",
      }}
    >
      <Plot
        data={[
          {
            x: [1, 2, 3, 4, 6, 8, 10, 12, 14, 16, 18],
            y: [32, 37, 40.5, 43, 49, 54, 59, 63.5, 69.5, 73, 74],
            mode: "markers",
            type: "scatter",
          },
        ]}
        layout={{
          title: "Growth Rate in Boys",
          xaxis: {
            title: "Age (years)",
          },
          yaxis: {
            title: "Height (inches)",
          },
        }}
      />
    </div>
  );
}

export default App;

Run the React app typing the following in the command terminal.

npm start

On the browser go to http://localhost:3000. You will see the following graph in the middle of the screen.

The data property contains the x data, y data, the mode and the type. In this example, the x array contains the ages and the y array contains the heights. The mode is set to markers. Some other modes are lines, lines+markers, markers+text and none. The type is set to scatter. Some other types are bar, pie and sunburst. The layout property sets the title of the plot, x-axis label and y-axis label. For example, the x-label is set using the following code snippet.

xaxis: {
  title: "Age (years)",
},

There are other types of charts which can be found here.

Multiple plots can be displayed on the same graph. In this example, we will include the growth rate of girls.

In order to distinguish the two plots add the name property under type as shown below. This will be shown in the legend.

{
  x: [1, 2, 3, 4, 6, 8, 10, 12, 14, 16, 18],
  y: [32, 37, 40.5, 43, 49, 54, 59, 63.5, 69.5, 73, 74],
  mode: "markers",
  type: "scatter",
  name: "Boys",
}

Add the following snippet of code in the data property as shown below. The age and height data for the girls are added. (Note: The values are fictional). Plotly.js automatically assigns different colors for each plot. The color for the plot can be changed. In this example, the color for the girls’ data was changed to red.

{
  x: [1, 2, 3, 4, 6, 8, 10, 12, 14, 16, 18],
  y: [32, 37, 40.5, 43, 49, 54, 59, 63.5, 69.5, 73, 74],
  mode: "markers",
  type: "scatter",
  name: "Boys",
},
{
  x: [1, 2, 3, 4, 6, 8, 10, 12, 14, 16, 18],
  y: [30, 36, 39, 42, 48, 53, 58, 62, 67.5, 68, 68.5],
  mode: "lines+markers",
  type: "scatter",
  name: "Girls",
  marker: { color: "red" },
},

The size of the plot can be changed. Edit the width and height as seen below.

layout={{
  title: "Growth Rate in Boys",
  xaxis: {
    title: "Age (years)",
  },
  yaxis: {
    title: "Height (inches)",
  },
  width: 600,
  height: 500,
}}

The entire should look like this. The title was changed to Growth Rate in Children.

import "./App.css";
import Plot from "react-plotly.js";

function App() {
  return (
    <div
      className="App"
      style={{
        display: "flex",
        justifyContent: "center",
        alignItems: "center",
        height: "100vh",
      }}
    >
      <Plot
        data={[
          {
            x: [1, 2, 3, 4, 6, 8, 10, 12, 14, 16, 18],
            y: [32, 37, 40.5, 43, 49, 54, 59, 63.5, 69.5, 73, 74],
            mode: "markers",
            type: "scatter",
            name: "Boys",
          },
          {
            x: [1, 2, 3, 4, 6, 8, 10, 12, 14, 16, 18],
            y: [30, 36, 39, 42, 48, 53, 58, 62, 67.5, 68, 68.5],
            mode: "lines+markers",
            type: "scatter",
            name: "Girls",
            marker: { color: "red" },
          },
        ]}
        layout={{
          title: "Growth Rate in Children",
          xaxis: {
            title: "Age (years)",
          },
          yaxis: {
            title: "Height (inches)",
          },
          width: 600,
          height: 500,
        }}
      />
    </div>
  );
}

export default App;

On the browser go to http://localhost:3000. You will see the following graph in the middle of the screen.

If you hover over the plot, there are some controls at the top as shown below.

These allow you to download the plot as a png, zoom, pan, select, zoom in, zoom out, auto-scale and reset axes. You can also hover the points to see their values.

This concludes our lesson. For more information on Plotly.js, check the documentation here.

Using CesiumJS with Angular

David Akim — Thu, 08 Jun 2023 14:55:27 +0000

In this lesson, we will go through the steps of integrating CesiumJS with Angular. CesiumJS is an open source JavaScript library for creating 3D globes and maps. At the end of the lesson you should be able to do a simple plot with CesiumJS.

Prerequisite

Must be familiar with Angular

Create a new angular project called angular-plotly. In the command terminal type the following.

ng new angular-cesium

When prompted “Would you like to add Angular routing? (y/N)”, you can type either y or N and hit Enter on the keyboard. When prompted “Which stylesheet format would you like to use?”, you can select CSS.

Navigate into the angular-cesium directory. In the command terminal type the following.

cd angular-cesium

Create a new component called cesium-component. In the command terminal type the following.

ng generate component cesium-component

Open app.component.html ,delete all the contents and add the following line

<app-cesium-component></app-cesium-component>

Go to CesiumJS. There will be 2 options:

Install from NPM
Download CesiumJS

For this demonstration, download CesiumJS and unzip the file.

Copy the Cesium folder (from the unzipped folder) in Cesium-1.96/Build to angular-cesium/src/assets (your angular project).

Open the angular.json file and modify the styles and scripts as seen below.

"styles": [
  "src/styles.css",
  "src/assets/Cesium/Widgets/widgets.css"
],
"scripts": [
  "src/assets/Cesium/Cesium.js"
]

If you are having difficulty finding the specific lines to modify, simply search for the keyword scripts. This is the complete code.

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "angular-cesium": {
      "projectType": "application",
      "schematics": {
        "@schematics/angular:application": {
          "strict": true
        }
      },
      "root": "",
      "sourceRoot": "src",
      "prefix": "app",
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/angular-cesium",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "tsconfig.app.json",
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ],
            "styles": [
              "src/styles.css",
              "src/assets/Cesium/Widgets/widgets.css"
            ],
            "scripts": [
              "src/assets/Cesium/Cesium.js"
            ]
          },
          "configurations": {
            "production": {
              "budgets": [
                {
                  "type": "initial",
                  "maximumWarning": "500kb",
                  "maximumError": "1mb"
                },
                {
                  "type": "anyComponentStyle",
                  "maximumWarning": "2kb",
                  "maximumError": "4kb"
                }
              ],
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                }
              ],
              "outputHashing": "all"
            },
            "development": {
              "buildOptimizer": false,
              "optimization": false,
              "vendorChunk": true,
              "extractLicenses": false,
              "sourceMap": true,
              "namedChunks": true
            }
          },
          "defaultConfiguration": "production"
        },
        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "configurations": {
            "production": {
              "browserTarget": "angular-cesium:build:production"
            },
            "development": {
              "browserTarget": "angular-cesium:build:development"
            }
          },
          "defaultConfiguration": "development"
        },
        "extract-i18n": {
          "builder": "@angular-devkit/build-angular:extract-i18n",
          "options": {
            "browserTarget": "angular-cesium:build"
          }
        },
        "test": {
          "builder": "@angular-devkit/build-angular:karma",
          "options": {
            "main": "src/test.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "tsconfig.spec.json",
            "karmaConfig": "karma.conf.js",
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ],
            "styles": [
              "src/styles.css",
              "src/assets/Cesium/Widgets/widgets.css"
            ],
            "scripts": [
              "src/assets/Cesium/Cesium.js"
            ]
          }
        }
      }
    }
  },
  "defaultProject": "angular-cesium"
}

Create a new service called cesium. This service will contain the plot functions. In the command terminal type the following.

ng generate service cesium

You will need to create an account in Cesium here.

Go to Access Tokens and click Create token. Give it a name and click Create. In this demonstration the name is cesiumtest.

Select the token you just created and copy the the token.

Open cesium.service.ts and make the following changes as seen below. For Cesium.Ion.defaultAccessToken, paste your token. Here we created a function called plotPoints which takes an argument div. This is the id of the div tag used for displaying the plot. Three points will be plotted at the following coordinates

Latitude: 40.03883, Longitude: -75.59777, Color: Red
Latitude: 35.14, Longitude: -80.5, Color: Blue
Latitude: 25.46, Longitude: -80.12, Color: Yellow

All the points have a pixel size of 16. For more information the Cesium.Cartesian3.fromDegrees method on visit this link.

import { Injectable } from '@angular/core';
declare let Cesium: any;
// import * as Cesium from '../assets/js/Cesium.js';
Cesium.Ion.defaultAccessToken = "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI2MWZlOTZjMy1iYjhiLTRkYjktOWEyYS0xYjllYWM4NmQ3YjYiLCJpZCI6ODM1MzksImlhdCI6MTY2MTU0NTg0MX0.PBHIiiQPO0_kfthCfRxp4VVGlhFZp4BMKIeILBwYuqk";@Injectable({
  providedIn: 'root'
})
export class CesiumService {constructor() { }
  private viewer: any;plotPoints(div:string){
    this.viewer = new Cesium.Viewer(div);
    this.viewer.entities.add({
      position: Cesium.Cartesian3.fromDegrees(-75.59777, 40.03883),
      point: {
        color: Cesium.Color.RED,
        pixelSize: 16,
      },
    });
    this.viewer.entities.add({
      position: Cesium.Cartesian3.fromDegrees(-80.5, 35.14),
      point: {
        color: Cesium.Color.BLUE,
        pixelSize: 16,
      },
    });
    this.viewer.entities.add({
      position: Cesium.Cartesian3.fromDegrees(-80.12, 25.46),
      point: {
        color: Cesium.Color.YELLOW,
        pixelSize: 16,
      },
    });
  }
}

Open cesium-component.component.ts and make the following changes as seen below. When the page loads, 3 points will be plotted on a 3D globe. The id of the div displaying the plot is “cesium”.

import { Component, OnInit } from '@angular/core';
import { CesiumService } from '../cesium.service';@Component({
  selector: 'app-cesium-component',
  templateUrl: './cesium-component.component.html',
  styleUrls: ['./cesium-component.component.css']
})
export class CesiumComponentComponent implements OnInit {constructor(private cesium: CesiumService) { }ngOnInit(): void {
    this.cesium.plotPoints("cesium");
  }}

Open cesium-component.component.html and make the following changes. Here the div with the id cesium is created.

<div id="cesium"></div>

Open index.html from angular-cesium/src and make the following changes as seen below.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>AngularCesium</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
  <script>
    window.CESIUM_BASE_URL = 'http://localhost:4200/assets/Cesium/';
  </script>
</head>
<body>
  <app-root></app-root>
</body>
</html>

In the command terminal type the following.

ng serve

On your browser go to http://localhost:4200/. You should see the plot.

This is the end of the lesson. For more examples on CesiumJS, check the documentation here.

Using Plotly.js with Angular

David Akim — Thu, 08 Jun 2023 14:17:25 +0000

In this lesson, we will go through the steps of integrating Plotly.js with Angular. Plotly.js is an Open Source Graphing Library. At the end of the lesson you should be able to do a simple plot with Plotly.js.

Prerequisite

Must be familiar with Angular

Create a new angular project called angular-plotly. In the command terminal type the following.

ng new angular-plotly

Navigate into the angular-plotly directory. In the command terminal type the following.

cd angular-plotly

Create a new component called plotly-component. In the command terminal type the following.

ng generate component plotly-component

Open app.component.html ,delete all the contents and add the following line

<app-plotly-component></app-plotly-component>

Go to Plotly.js. There will be 3 options:

Install from NPM
Use CDN link
Download Plotly.js

For this demonstration, download Plotly.js.

Copy the downloaded file into the assets folder of your angular project, which is located at angular-plotly/src/assets.

Open the angular.json file and modify lines 35 and 104 as seen below.

"scripts": ["src/assets/plotly-2.14.0.min.js"]

If you are having difficulty finding the specific lines to modify, simply search for the keyword scripts. Please note at the time of writing this article the name of the script is plotly-2.14.0.min.js. The name of your script may vary. This is the complete code.

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "cli": {
    "analytics": false
  },
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "angular-plotly": {
      "projectType": "application",
      "schematics": {
        "@schematics/angular:application": {
          "strict": true
        }
      },
      "root": "",
      "sourceRoot": "src",
      "prefix": "app",
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/angular-plotly",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "tsconfig.app.json",
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ],
            "styles": [
              "src/styles.css"
            ],
            "scripts": [
              "src/assets/plotly-2.14.0.min.js"
            ]
          },
          "configurations": {
            "production": {
              "budgets": [
                {
                  "type": "initial",
                  "maximumWarning": "500kb",
                  "maximumError": "1mb"
                },
                {
                  "type": "anyComponentStyle",
                  "maximumWarning": "2kb",
                  "maximumError": "4kb"
                }
              ],
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                }
              ],
              "outputHashing": "all"
            },
            "development": {
              "buildOptimizer": false,
              "optimization": false,
              "vendorChunk": true,
              "extractLicenses": false,
              "sourceMap": true,
              "namedChunks": true
            }
          },
          "defaultConfiguration": "production"
        },
        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "configurations": {
            "production": {
              "browserTarget": "angular-plotly:build:production"
            },
            "development": {
              "browserTarget": "angular-plotly:build:development"
            }
          },
          "defaultConfiguration": "development"
        },
        "extract-i18n": {
          "builder": "@angular-devkit/build-angular:extract-i18n",
          "options": {
            "browserTarget": "angular-plotly:build"
          }
        },
        "test": {
          "builder": "@angular-devkit/build-angular:karma",
          "options": {
            "main": "src/test.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "tsconfig.spec.json",
            "karmaConfig": "karma.conf.js",
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ],
            "styles": [
              "src/styles.css"
            ],
            "scripts": [
              "src/assets/plotly-2.14.0.min.js"
            ]
          }
        }
      }
    }
  },
  "defaultProject": "angular-plotly"
}

Create a new service called plotly. This service will contain the plot functions. In the command terminal type the following.

ng generate service plotly

Open plotly.service.ts and make the following changes.

import { Injectable } from '@angular/core';declare let Plotly: any;

In plotly.service.ts create a new function called plotLine. This function accepts 4 arguments. The title argument is the title of the plot and plotDiv is the id of the div tag used for displaying the plot. The x and y arrays contain the plot data. This is the complete code.

import { Injectable } from '@angular/core';
declare let Plotly: any;@Injectable({
  providedIn: 'root'
})
export class PlotlyService {constructor() { }plotLine(title: string, plotDiv: string, x:number[], y:number[]){           
    let trace = {
      x: x,    
      y: y,   
      type: 'scatter'   
    };

    let layout = {
      title:title
    };

    Plotly.newPlot(plotDiv, [trace], layout);     
  }}

Open plotly-component.component.ts and make the following changes. When the page loads, a straight line will be plotted. Here the title of the plot is “Line Plot”. The id of the div displaying the plot is “plot”. The x and y values are 1,2,3,4,5.

import { Component, OnInit } from '@angular/core';
import { PlotlyService } from '../plotly.service';@Component({
  selector: 'app-plotly-component',
  templateUrl: './plotly-component.component.html',
  styleUrls: ['./plotly-component.component.css']
})
export class PlotlyComponentComponent implements OnInit {constructor(private plot:PlotlyService) { }ngOnInit(): void {
    let x:number[] = [1,2,3,4,5];
    let y:number[] = [1,2,3,4,5];
    this.plot.plotLine("Line Plot","plot",x,y);
  }}

Open plotly-component.component.html and make the following changes. Here the div with the id plot is created.

<div id="plot"></div>

In the command terminal type the following.

ng serve

On your browser go to http://localhost:4200/. You should see the plot.

This is the end of the lesson. For more information on Plotly.js, check the documentation Plotly.