MAD2-Viva4

 How are you rendering the charts in your app? 

To generate statistical visualizations and metrics for an admin using Matplotlib and Flask. It combines Flask routes and SQLAlchemy queries to retrieve data from the database, processes it, and uses Matplotlib to create charts. The charts are converted into Base64 strings to be sent to the frontend for rendering.

Base64:

• Encodes the binary PNG images into strings that can be sent over HTTP to the frontend.

Matplotlib:

• A Python plotting library used for creating the charts (bar charts in this case).

BytesIO:

• An in-memory buffer that holds binary data for saving plots as PNG images.

Matplotlib Features:

• plt.bar: Creates the bar chart.
• plt.text: Adds labels above each bar.

How to Create Bar Chart: Request Distribution by Services

This chart shows the number of requests for each service.

Code Section:

plt.figure(figsize=(5, 5))

plt.bar(service_counts.keys(), service_counts.values(), color='green')

plt.xlabel('Service')

plt.ylabel('Number of Requests')

plt.title('Request Distribution by Services')

plt.xticks(rotation=90)

# Convert  plot to base64

buffer1 = BytesIO()

plt.tight_layout()

plt.savefig(buffer1, format='png')

buffer1.seek(0)

plot_data_service = base64.b64encode(buffer1.getvalue()).decode()

plt.close()

1. plt.bar: Creates the bar chart with service names as keys and request counts as values.
2. buffer1 = BytesIO(): Creates an in-memory buffer to store the chart as an image.
3. plt.savefig(buffer1, format='png'): Saves the chart in PNG format to the buffer.
4. base64.b64encode(buffer1.getvalue()).decode(): Encodes the chart as a Base64 string for frontend use.

Base64 Encoding

• After generating charts using Matplotlib, the code converts them to PNG format and encodes them into Base64 strings using:

  buffer = BytesIO()
  plt.savefig(buffer, format='png', bbox_inches='tight')
  buffer.seek(0)
  base64.b64encode(buffer.getvalue()).decode()
  

• These strings can then be sent as JSON and rendered in the frontend.

what are state , mutation and actions?

In Vue.js (Vuex for state management), state, mutations, and actions are key concepts used to manage and update shared data across components. 

State:

1.State is the central storage for your application's data. where you store variables that multiple components need to use.

2.state contains the current data

3.Can be accessed directly by components using this.$store.state.

Mutations:

Synchronous Functions:

Synchronous functions are functions in programming that execute tasks sequentially, meaning one task must complete before the next task begins. These functions block the program's execution until their operation is finished.

1.Mutations are synchronous functions used to change (mutate) the state.

2.Mutations are the only way to directly modify the state.

3.Called using commit.

4.Mutations are always synchronous 

Ex:this.$store.commit('setUser', { name: 'John Doe' });

Actions:(fetch)

Actions are asynchronous functions used to perform operations (like API calls) and then commit mutations to change the state.

Can include asynchronous code (e.g., fetching data from an API).

Called using dispatch.

Do not modify the state directly — they rely on mutations.

const actions = {

  async fetchUser({ commit }) {

    const user = await fetch('/api/user').then((res) => res.json());

    commit('setUser', user);

  },

};
this.$store.dispatch('fetchUser');

How They Work Together

1. State holds the data.
2. Components dispatch actions when something happens (e.g., button click).
3. Actions do the work (e.g., fetch data) and then commit mutations.
4. Mutations update the state.
5. Components react to the updated state and re-render.
   
   

You want to show a user profile:

• State: Holds the user info.
• Action: Fetches the user data from an API.
• Mutation: Updates the user in the state.
• Component: Displays the user data from the state.

What are synchronous and Asynchronous tasks?

Synchronous Functions:

Synchronous functions are functions in programming that execute tasks sequentially, meaning one task must complete before the next task begins. These functions block the program's execution until their operation is finished.

Asynchronous Functions:

Asynchronous functions are functions that allow a program to handle multiple tasks at once, without waiting for one task to finish before starting another

Synchronous vs Asynchronous:

• Synchronous: One task at a time.
• Asynchronous: Multiple tasks can be in progress simultaneously, using mechanisms like callbacks, promises, or async/await.

What are the uses of actions?

Actions in Vue.js state management (such as Vuex) serve several important purposes. They're used primarily for handling asynchronous operations, complex logic, and dispatching multiple mutations.

What do you know about the vuex store?

The Vuex Store is a state management library for Vue.js applications. It acts as a centralized repository where the state of your app is stored and shared across all components.

How Vuex Works

1. State: Components read shared data from the store.
2. Mutations: Components commit mutations to modify the state.
3. Actions: Components dispatch actions to handle async tasks and trigger mutations.
4. Getters: Components retrieve derived data from the state using getters.
5. Module:Vuex allows you to split the store into smaller, more manageable modules

Advantages of Vuex

• Centralized management of the state.
• Predictable flow of state updates (via mutations).
• Easy to debug with Vue DevTools.
• Simplifies the sharing of data across components.

Where redis store it's cache?

Redis stores its cache in-memory, meaning it keeps all data in the server's RAM (Random Access Memory). This approach enables Redis to be extremely fast because accessing data in memory is much quicker than reading from a disk.

This allows for ultra-fast read and write operations, which is why Redis is often used for caching, session storage, and real-time analytics.

 Redis can also persist data to disk for durability and recovery

How many types of storages are there in browser?

Browsers provide several types of storage mechanisms to store data on the client side. These storages are primarily used for managing state, caching, or storing user data to improve application functionality and performance

Use Cookies for lightweight session tracking and authentication.

Use Local Storage for persistent, simple key-value data.

Use Session Storage for temporary data scoped to a tab.

what will happen if backend sends http 400 status code ,how your frontend will catch that status code show demo?

When the backend sends an HTTP 400 status code (indicating a "Bad Request"), the frontend can catch this status code in the response object of the HTTP request. In frontend (Vue.js),  this is done using JavaScript's fetch API

EX:

backend route

@app.route('/api/data', methods=['POST'])

def process_data():

    data = request.json

    if not data or 'name' not in data:

        return jsonify({"error": "Name is required"}), 400

    return jsonify({"message": "Success!"}), 200

frontend using fetch

<template>

  <div>

    <form @submit.prevent="submitData">

      <input v-model="name" placeholder="Enter name" />

      <button type="submit">Submit</button>

    </form>

    <p v-if="errorMessage" style="color: red;">{{ errorMessage }}</p>

  </div>

</template>

<script>

export default {

  data() {

    return {

      name: "",

      errorMessage: null,

    };

  },

  methods: {

    async submitData() {

  fetch("/api/data", {

    method: "POST",

    headers: {

      "Content-Type": "application/json",

    },

    body: JSON.stringify({ name: this.name }),

  })

    .then((response) => {

      if (!response.ok) {

        throw response; // Throws the response object for error handling

      }

      return response.json();

    })

    .then((data) => {

      console.log("Success:", data.message);

    })

    .catch((error) => {

      error.json().then((err) => {

        if (error.status === 400) {

          this.errorMessage = err.error;

        } else {

          this.errorMessage = "An unexpected error occurred.";

        }

      });

    });

}

The user enters data into the form and submits it.

If the name field is missing, the backend returns a 400 Bad Request status with a message like {"error": "Name is required"}.

If there's a 400 error occured:

• The error message is displayed dynamically on the frontend.
• Example: "Name is required".

For successful responses:

• The success message is logged or handled appropriately.

What is axios?

Axios is a popular JavaScript library used for making HTTP requests from the browser or Node.js. It provides a simple and efficient way to communicate with servers using APIs like REST. Axios  allows for easy handling of asynchronous operations.

 Features of Axios

1. Supports All HTTP Methods:

   • Axios can handle common HTTP methods like GET, POST, PUT, DELETE, PATCH, etc.

2. Promise-Based:

   • Axios uses promises, making it easy to handle responses and errors with .then() and .catch().

3. Automatic JSON Parsing:

• Converts response data into JSON automatically if the Content-Type is JSON.

4. Easy File Uploads:

   • Axios can handle multipart/form-data for file uploads.

5. Error Handling:

   • Axios provides detailed error objects that include the HTTP status code, headers, and response body.

---

What is v-if and v-show?

In Vue.js, both v-if and v-show are directives used to conditionally display elements

v-if: Conditional Rendering

• How it works:

  • Completely removes or adds the element to the DOM based on the condition.
  • If the condition is false, the element is not rendered in the DOM at all

• <p v-if="isVisible">This is conditionally rendered</p>

v-show: Conditional Display

• How it works:

  • Toggles the CSS display property of the element to hide or show it.
  • If the condition is false, the element remains in the DOM but is hidden with display: none.

• <p v-show="isVisible">This is conditionally displayed</p>

Vue Directives?

In Vue.js, directives are special tokens in the markup that tell Vue to perform specific actions on the DOM. They are prefixed with v- to indicate that they are special Vue instructions

Types of Directives

1. Core Directives: These are the most commonly used directives provided by Vue.

   Directive	Description
   v-if	Conditionally render elements based on a truthy or falsy value.
   v-show	Conditionally display elements by toggling the display: none style.
   v-for	Render a list of items using a loop.
   v-bind	Dynamically bind attributes or props to an expression.
   v-model	Create two-way data bindings for form inputs.
   v-on	Attach event listeners to elements (e.g., click, input).
   v-slot	Define slots in components for content distribution.
   v-html	Render raw HTML in an element (be cautious of XSS).
   v-text	Insert plain text into an element.
   v-cloak	Prevent display of uncompiled template until Vue has fully rendered it.
   v-pre	Skip compilation for this element and its children.
   v-once	Render the element and its children only once (no reactivity).

What is cache?

A cache is a temporary storage layer that stores frequently accessed data or computations to speed up subsequent requests for that data. It is designed to reduce the time it takes to access data and improve performance in applications by minimizing the need to repeatedly fetch or compute the same information.

How Cache Works

1. When data is requested for the first time:

   • The application fetches it from the primary source (like a database or API).
   • The data is stored in the cache for future use.

2. For subsequent requests:

• The application first checks the cache.
• If the data is available (a cache hit), it retrieves it from the cache, avoiding the primary source.
• If the data is not available (a cache miss), it fetches the data from the primary source, then stores it in the cache.

Types of Caches

1. Browser Cache:

   • Stores web resources (like HTML, CSS, JavaScript, images) locally in the user's browser to speed up page load times.

2. Application Cache:

   • Used in applications to store computed or frequently accessed data.

3. Database Cache:

   • Speeds up database queries by storing results of frequently run queries in memory.

4. Content Delivery Network (CDN) Cache:

   • Stores static files (like images and videos) on servers geographically close to users to reduce latency.

5. Memory Cache:

• Uses in-memory storage (e.g., Redis, Memcached) for ultra-fast data retrieval.

what did you use for styling in the app ?

The styling approach used in my app is a combination of CSS(cascaded style sheet) of classes and Bootstrap styling

What are CSS selectors?

CSS selectors are patterns or rules used to "select" and style specific HTML elements in a webpage. They tell the browser which elements to target and apply the defined styles.

1.Universal Selector (*)-targets all elements in the document

ex: * {

  margin: 0;

  padding: 0;

}

2.Element Selector-targets specific HTML elements by their tag name.(paragraph, list..)

ex: p {

  font-size: 16px;

}

3.Class Selector (.classname)-targets elements with a specific class attribute.

ex: .button {

  background-color: blue;

  color: white;

}

4.ID Selector (#id)-Targets a single element with a specific ID attribute.

ex: #header {

  font-size: 24px;

}

5.Group Selector (,)-Combines multiple selectors to apply the same styles to different elements.

ex: h1, h2, p {

  margin: 0;

}

6.Descendant Selector (Space)-Selects elements nested within another element.

there is space between div tag and p tag

ex: div p {

  color: red;

}

7.Child Selector (>) -Selects direct child elements of a parent.

ex: div > p {

  font-weight: bold;

}

8.Adjacent Sibling Selector (+)-Selects the first sibling that comes immediately after another element.

ex: h1 + p {

  font-style: italic;

}