DEV Community: Manish Kumar Sundriyal

Building your own Interactive Line Graph in ReactJS

Manish Kumar Sundriyal — Wed, 30 Oct 2024 19:21:57 +0000

Basic SVG Component

First, let's create a simple SVG component that accepts width and height as props. This will be the starting point for our graph.

import React from "react";

const LineGraph = ({ height, width }) => {
  return <svg height={height} width={width}></svg>;
};

export default LineGraph;

Adding the X-Axis

Now, let's add the X-axis, which runs horizontally across the graph. We’ll use the <line> element for this.

const drawXAxis = () => {
  const middleY = height / 2;

  return (
    <line x1={0} y1={middleY} x2={width} y2={middleY} stroke={lineColor} />
  );
};

Adding the Y-Axis

We’ll use another <line> element to draw the Y-axis, which will run vertically through the center of the graph.

const drawYAxis = () => {
  const middleX = width / 2;

  return (
    <line x1={middleX} y1={0} x2={middleX} y2={height} stroke={lineColor} />
  );
};

Plotting coordinates as a line path

The key part of a line graph is the line connecting different points. Let's plot some sample coordinates and connect them using an SVG .

const drawPath = () => {
    const pathData = coordinates
      .map((coordinate, index) =>
        index === 0
          ? `M ${coordinate.x} ${coordinate.y}`
          : `L ${coordinate.x} ${coordinate.y}`
      )
      .join(" ");

    return <path d={pathData} stroke={pathColor} fill="none" />;
  };

Option to fill area beneath the line

We can fill the area beneath the line with a color to enhance the graph. This can be done using an additional element. Consider prop isFillArea to show/hide this area.

const drawPath = () => {
  const pathData = coordinates
    .map((coordinate, index) =>
      index === 0
        ? `M ${coordinate.x} ${coordinate.y}`
        : `L ${coordinate.x} ${coordinate.y}`
    )
    .join(" ");

  const middleY = height / 2;
  const svgPath = showFillArea
    ? `${pathData} L ${width} ${middleY} L 0 ${middleY} Z`
    : pathData;
  const fillColor = showFillArea ? areaColor : "none";
  return (
    <path d={svgPath} fill={fillColor} stroke={pathColor} opacity="0.5" />
  );
};

Tracking the cursor

Let’s add a circle that follows the cursor's movement across the graph path.

We will need a reference of our SVG component to access the bounding box of the SVG element. Also a reference for our tracking-circle that will be used for tracking the cursor over the graph.

const svgRef = useRef();
const circleRef = useRef();
// ...
const drawTrackingCircle = () => {
  return (
    <circle
      ref={circleRef}
      r={6}
      fill="red"
      style={{ display: "none" }} // Initially hidden
    />
  );
};
// ...
<svg ref={svgRef} width={width} height={height}>
// ...
</svg>

Then, we need to add an event listener to our SVG element. This will listen to all our cursor movements over the graph.

useEffect(() => {
  const svgElement = svgRef.current;
  svgElement.addEventListener("mousemove", handleMouseMove);

  // clean up
  return () => svgElement.removeEventListener("mousemove", handleMouseMove);
}, []);

Next, we need a method to find the intersection coordinate between the cursor position and the path.

const getIntersectionPoint = (cursorX) => {
  // Find the segment (p1, p2) where cursorX lies between two consecutive coordinates.
  const segment = coordinates.find((p1, i) => {
    // Get the next point
    const p2 = coordinates[i + 1]; 
    // Check if cursorX falls between the two coordinates horizontally.
    return (
      p2 &&
      ((p1.x <= cursorX && p2.x >= cursorX) ||
        (p1.x >= cursorX && p2.x <= cursorX))
    );
  });

  // Return null if no valid segment is found.
  if (!segment) return null; 

  // Destructure the two coordinates in the segment.
  const [p1, p2] = [segment, coordinates[coordinates.indexOf(segment) + 1]];

  // Calculate 't' to determine the relative position between p1 and p2.
  const t = (cursorX - p1.x) / (p2.x - p1.x);

  // Interpolate the Y-coordinate using 't'.
  const y = p1.y + t * (p2.y - p1.y);

  return { x: cursorX, y };
};

Cursor movement tracker method. It uses the getIntersectionPoint method to find the current intersection coordinate.

const handleMouseMove = (event) => {
  // Get SVG position
  const svgRect = svgRef.current.getBoundingClientRect();
  // Calculate cursor's X within the SVG
  const cursorX = event.clientX - svgRect.left;

  // Find the intersection point
  const intersectionPoint = getIntersectionPoint(cursorX);
  if (intersectionPoint) {
    // Move the intersection circle to the calculated point
    circleRef.current.setAttribute("cx", intersectionPoint.x);
    circleRef.current.setAttribute("cy", intersectionPoint.y);
    circleRef.current.style.display = "block";
  }
};

Finally, this would be the structure of our graph component

return (
  <svg ref={svgRef} height={height} width={width}>
    {drawPath()}
    {drawXAxis()}
    {drawYAxis()}
    {drawTrackingCircle()}
    {drawDataPointCircles()}
  </svg>
);

This is how we can use our Graph component

<LineGraph
  width={300}
  height={400}
  coordinates={samplePoints}
  lineColor="#000"
  pathColor="#00008B"
  areaColor="#ADD8E6"
  dataPointColor="#008000"
  showFillArea
  showDataPointCircle
/>

Codesandbox link for the LineGraph demo

Blog Photo by Isaac Smith on Unsplash

Thanks for reading ❤

CAP Theorem in Real-World Scenarios

Manish Kumar Sundriyal — Sun, 13 Oct 2024 19:01:51 +0000

The CAP theorem explains the trade-offs between three important factors in distributed systems: Consistency (C), Availability (A), and Partition Tolerance (P).
It was first introduced by Eric Brewer in 2000, which is why it's also known as Brewer's Theorem.

What is a distributed system? (prerequisite)

A distributed system is a group of servers (computers) that work together to solve a problem or provide service. To the end user, it looks like a single system. These servers are also referred as nodes in a distributed system.

Consistency (C)

We want our systems to be consistent; this means every read operation should return the updated result. In other words, all the nodes in the system should reflect the same data at any given time. This ensures that all users see the same data.

Availability (A)

Our system should remain operational, even if some nodes are down or unreachable. There can be some delay or inconsistency in data, but the system should return a response for every request (read or write).

Partition Tolerance (P)

The system should continue functioning despite some nodes becoming isolated or disconnected due to network issues. However, the system must sacrifice consistency or availability in such situations.

This theorem states that when a network partition occurs in a distributed system, you can only achieve two out of the three properties at the same time: Consistency, Availability, and Partition Tolerance.

However, in 2012, Dr. Brewer clarified that the "two out of three" concept can be somewhat misleading because system designers only need to sacrifice consistency or availability as partition management and recovery techniques exist.

Consistency + Partition Tolerance (CP)

In a CP system, consistency is prioritized over availability.
How it works:

During a network partition, some nodes might not be able to communicate with each other. So, if a node cannot confirm the latest state with other nodes, it will reject or delay the request instead of serving potentially outdated data until it can synchronize again with other nodes. Here, the availability of the system is sacrificed by rejecting or blocking the requests. Real-world examples:
Financial Transactions: Banks or stock markets need to prioritize data consistency, especially when handling transactions. If the system detects a partition, it will block transaction requests so that balances remain accurate.
Inventory Systems: E-commerce platforms need to ensure no overselling occurs during inventory checks. When a partition happens, they prefer to reject the user requests rather than overselling the same product.

Availability + Partition Tolerance (AP)

In the AP system, availability is prioritized over consistency.
How it works:

During a network partition, some nodes might not be able to communicate with each other. So even if a node cannot confirm the latest state with other nodes, it will continue to serve requests. Here, the consistency of the system is sacrificed, but it is eventually resolved when the partition is fixed and nodes are synchronized again. Real-world examples:
Social Media Platforms: Systems like Facebook or Twitter may prioritize availability to ensure users can always post, comment, and message even if some data may be slightly out of sync.
Content Deliver Networks (CDNs): A CDN must always be available to serve content quickly, even if some nodes are not yet synchronized with the latest version of data.

Decision Making with CAP Theorem

Scenario: Global Media Streaming Service
Product requirement: The system needs to serve video content to millions of users worldwide. It should handle network partitions without downtime, but minor inconsistencies like short delays in updating watch history are acceptable.
Decision: An AP system could be useful for this scenario since availability is critical to avoid interruptions in video streaming.
Solution: Cassandra or DynamoDB, as it was built to prioritize high availability and partition tolerance by replicating data across multiple nodes/regions.
Scenario: Online multiplayer game
Product requirement: The game world must remain available at all times. Some temporary inconsistency is acceptable (e.g., slight lag or delayed updates).
Solution: Redis + Cassandra.
Redis ensures game state caching and fast real-time operations (e.g., chat, session management), while Cassandra provides highly available game data (e.g., player profiles and game events).
Scenario: Parking management application
Product requirement: Manage core data like parking lots, reservations, payments, and user accounts. Also, it needs to ensure that no two customers reserve the same parking slot.
Solution: Redis + PostgreSQL.
PostgreSQL maintains Consistency and Partition Tolerance, ensuring the integrity of transactions, especially for critical operations like reservations and payments. Redis enhances Availability and Partition Tolerance, allowing real-time data retrieval (e.g., current parking availability) even during network issues.

Eventual Consistency in Real Systems

Some AP systems use eventual consistency to reconcile differences after a partition.

Example: In Amazon’s shopping cart, items added during a network partition may not appear instantly but are synchronized later.
Key takeaway: Eventual consistency allows systems to be available during partitions while still achieving correctness over time.

Beyond CAP: PACELC Theorem

While CAP focuses on handling partitions, the PACELC theorem adds nuance by addressing trade-offs during normal operations. It states that:

If a partition occurs, a system must trade-off between Availability or Consistency (like CAP).
Else, under normal conditions, the system must trade-off between Latency or Consistency. Example: In streaming services, low latency is prioritized, while in financial services, strong consistency is crucial. PACELC highlights the importance of balancing both partition management and latency considerations.

Trade-offs in System Design: Practical Implications

Designing distributed systems involves balancing availability, consistency, and partition tolerance based on product requirements.

Cost: Strongly consistent systems are difficult to scale and maintain.
User Experience: Prioritizing availability can improve uptime but might frustrate users with outdated data.

The Ultimate Guide to Responsive Web Development

Manish Kumar Sundriyal — Fri, 04 Oct 2024 15:52:44 +0000

Introduction

Here’s how you can make sure your designs stay flexible and look great on any device. Let’s take a look at the key things to consider when making a web application responsive.

CSS Units

CSS offers a variety of units, enough that it can sometimes be confusing to choose the right one.

px: Pixel-based units remain the same regardless of the screen size.
%: Percentage-based units are relative to the size of its parent element.
vw and vh: Viewport width/height based units are relative to the viewport's width/height.
dvw and dvh: Dynamic viewport width and height units are similar to vw and vh, but they adjust dynamically for changes in the viewport, i.e. when the on-screen keyboard appears.
rem: Relative to the root element's font size, offering a consistent base for scaling.
em: Relative to the font size of the current element, useful for scaling within components.
calc(): A function that allows you to perform calculations with different units. For example, calc(100% - 20px) can help mix relative and absolute units.

For a complete list of CSS units (though many are rarely used), check out this MDN Web Docs page.

Responsive Images

There are a few ways to improve your image responsiveness on the web.

Using width and height: auto

By setting a maximum width limit and height to auto, we can make our images responsive without changing the image's aspect ratio.

img {
    width: 100%; /* or any fixed width */
    height: auto; 
  }

Use max-width instead of width if you want an image to scale down, but never scale up larger than its original size.

Using the img element and srcset

What if you need different versions of the same image for different viewport sizes or resolutions? The <img> tag with srcset attribute allows the browser to automatically select the most appropriate image for the device.
Please note that different versions don't mean identical files but rather images that have been adjusted (e.g., resized, compressed) to suit different devices.

<img src="small.jpg" 
     srcset="small.jpg 600w, medium.jpg 1200w, large.jpg 2000w"
     sizes="(max-width: 600px) 100vw, 
            (min-width: 601px) and (max-width: 1200px) 75vw, 
            (min-width: 1201px) 50vw" 
     alt="Example Image">

If the viewport width is 600px or less, the browser will use small.jpg with 100vw width. The browser will also use small.jpg as a fallback image.
If the viewport width is between 601px and 1200px, the browser will use medium.jpg with 75vw width.
For any viewport width above 1200px, the browser will use large.jpg with 50vw width.

Using the picture element and srcset

What if you need different images for different viewport sizes or resolutions? The <picture> element with the srcset attribute allows you to define different images for different viewport sizes or resolutions.

<picture>
  <source srcset="small.jpg" media="(max-width: 600px)">
  <source srcset="medium.jpg" media="(max-width: 1200px)">
  <img src="large.jpg" alt="Example image">
</picture>

In this example:

If the viewport width is 600px or less, the browser will use small.jpg.
If the viewport width is between 601px and 1200px, the browser will use medium.jpg.
For any viewport width above 1200px, the browser will use large.jpg.

Responsive typography

Relative units

html {
    font-size: 16px;
}
.parent {
    font-size: 2rem; /* 32px (2 * 16px) */
}
.child {
    font-size: 0.5em; /* 16px (0.5 * 32px) */
}

The em unit is relative to the parent element's font size. In the example above, the child class has a font size of 16px because it is half of the parent element's font size, which is 32px.
The rem unit is relative to the root element's font size (html). In the example above, the parent class has a font size of 32px because it is twice the root's font size, which is 16px.

Viewport-based units

h1 {
  font-size: 5vw;
}
h2 {
  font-size: 5vh;
}

The vw unit is relative to the viewport's width.
The vh unit is relative to the viewport's height.

Clamp function

What if you need to use relative or viewport-based units but within a minimum and maximum limit?
For example, I want my font-size to be relative to the viewport's width, but the minimum value should be 12px and the maximum value should be 48px. The clamp function is the ideal choice for such scenarios.

h1 {
  font-size: clamp(12px, 3vw, 48px);
}

Responsive layouts

Flexbox

What if you need to align items majorly in one-dimensional layouts? (row or column)

<div class="card-container">
  <div class="card">Card 1</div>
  <div class="card">Card 2</div>
  <div class="card">Card 3</div>
</div>

.card-container {
  display: flex; /* Enable flexbox layout */
  justify-content: space-around; /* Space evenly between and around cards */
}
.card {
  background-color: black;
  border: 1px solid white;
  color: white;
  text-align: center;
  padding: 20px;
}

Grid

What if you need to align items majorly in two-dimensional layouts? (row and column)

<div class="card-container">
  <div class="card">Card 1</div>
  <div class="card">Card 2</div>
  <div class="card">Card 3</div>
  <div class="card">Card 4</div>
</div>

.card-container {
  display: grid; /* Enable grid layout */
  grid-template-columns: 1fr 1fr; /* Two equal columns */
  grid-template-rows: 1fr 1fr; /* Two equal rows */
  gap: 10px; /* Space between grid items */
  width: 100%; /* Full width of the container */
}
.card {
  background-color: black;
  border: 1px solid white;
  color: white;
  text-align: center;
  padding: 20px;
}

Media Queries

What if you want to apply specific styles when a device meets certain conditions? Most commonly, these conditions relate to the device's width.

<div class="card-container">
  <div class="card">Card 1</div>
  <div class="card">Card 2</div>
  <div class="card">Card 3</div>
</div>

.card-container {
  display: flex;
  flex-direction: column; /* Default: single-column layout */
}

/* Media query for tablet devices (min-width: 768px) */
@media (min-width: 768px) {
  .card-container {
    flex-direction: row; /* Change to two-column layout */
  }
  .card {
    flex: 1; /* Equal width for all cards */
  }
}

/* Media query for desktop devices (min-width: 1024px) */
@media (min-width: 1024px) {
  .card {
    flex: 25%; /* Each card takes 25% of the width */
  }
}

Media queries can also be used with other characteristics, such as height, orientation, aspect-ratio, resolution, pointer, prefers-color-scheme, and display-mode.

Viewport Meta Tag

<meta name="viewport" content="width=device-width, initial-scale=1.0">

This tag is responsible for giving instructions to the browser on how to control the page's dimensions and scaling. The width=device-width part sets the width of the page to follow the screen width and initial-scale=1.0, which controls the zoom level when the page is first loaded.

Responsive frameworks and component libraries

If you don't want to reinvent the wheel, there are many responsive frameworks available to save time and effort.

Bootstrap: A widely used framework with pre-designed components for quick responsive site development.
Tailwind CSS: A utility-first framework that enables fast custom design with utility classes.
MUI: A React library based on Material Design, offering responsive pre-styled components.
ShadCN: Focuses on modern, accessible, and customizable responsive components.
Ant Design: A comprehensive design system by Alibaba for enterprise applications, featuring responsive components.

Designing with a Mobile-First Approach

A mobile-first approach means starting with the design for smaller screens, like smartphones, and then gradually adding more features for larger screens, like tablets and desktops. This way, we ensure that the basic experience works great on mobile, and then you build on that for bigger devices.

.card-container { /* default code is for mobile view */
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: center;
  padding: 20px;
  gap: 12px;
}

@media (min-width: 768px) { /* queries/cases are for larger views */
  .card-container {
    flex-direction: row;
    gap: 18px;
  }
}