DEV Community: Johnny Turco

How to the Use React Minimal Pie Chart Library

Johnny Turco — Thu, 16 Feb 2023 22:12:16 +0000

react-minimal-pie-chart is a tiny, lightweight pie charting React library. After reviewing the landscape, react-minimal-pie-chart is the smallest and simplest way to create pie (or donut) charts for your React app. The following is a quick introduction to get you up and running.

First, install the library:

npm install react-minimal-pie-chart

And import it into your component:

import { PieChart } from 'react-minimal-pie-chart';

Now you can use the <PieChart /> component.

There are quite a few options you can use to customize your pie charts. The most basic and important property is the data property, which takes an array of objects. A basic chart will have the following keys: title, value, and color. For example, your data attribute might look like this:

data={[
    {
      title: "Test 1",
      value: 50,
      color: "#000000"
    },
    {
      title: "Test 2",
      value: 50,
      color: "#ffffff"
    }
]}

To get your labels to show up, you'll need to add the following property: label={({ dataEntry }) => dataEntry.title}.

And to style your labels, you set the labelStyle property to an object of SVG CSS properties and values. For example:

labelStyle={{
    fill: "white",
    fontSize: "5px",
    fontFamily: "Helvetica Neue,sans-serif",
    textShadow: "1px 1px 5px #000"
    }}

You can also position your labels with labelPosition, which takes a number 0-100 (for a percent from center).

Here is a complete example of a basic pie chart component:

<PieChart
    label={({ dataEntry }) => dataEntry.title}
    labelStyle={
        {
            fill: "white",
            fontSize: "5px",
            fontFamily: "Helvetica Neue,sans-serif",
            textShadow: "1px 1px 5px #000"
        }
    }
    labelPosition={75}
    data={
        [
            {
              title: "Test 1",
              value: 50,
              color: "#000000"
            },
            {
              title: "Test 2",
              value: 50,
              color: "#ffffff"
            }
        ]
    }
/>

Which will give you a pie chart that looks like this:

If you want to add more, you can animate your pie chart on component render and even add mouse interactions. Check out the documentation here.

Using Python to Move the Contents of a Folder to a new Folder

Johnny Turco — Thu, 16 Feb 2023 18:48:25 +0000

Our law firm recently switched to a new client management system and, as part of the migration from our old system, we had to move the contents of clients' files from the old folder to a new folder where the new system would point to. In our case, the old client folders and new folders were placed in the same directory by the migration team, but the contents still needed to be moved. Additionally, while the old folders were named after a client's account number, the new folders had the account number and the client's name. Here's a fake, but representative, example of the parent directory:

I have been wanting to explore Python recently and thought this would be a great opportunity to learn.

To start, I needed to import some modules:

import shutil
import os
import re
from pathlib import Path

Next, I needed the path to the parent directory of the client folders; in my case, "Test Directory":

source = 'Users/johnnyturco/Downloads/Test Directory'

Note: This is a string of a macOS path; if you're on Windows, you will need to use the appropriate path with back slashes (\). Also, \ is a special character in Python, so you need to "escape" it with another \. To make this platform-independent, you could use os.path.join. Because only I will be running this script and it will be on a Mac, I decided to keep my code a little more readable and use a string for my source path.

I also needed a list of the directories inside of the parent source:

directories = os.listdir(source)

Because the source directory contained both the old (e.g., "2020-0123") and new folders (e.g., "2020-0123 - Smith, John"), I needed a way to target just one of a client's folders. I figured if I targeted the new folder naming convention with a regular expression, I could easily derive the corresponding old folder's name with a regular expression group:

folder_name_regex = re.compile(r'(^\d{4}-\d{4}) - .*')

For a quick primer on what regular expressions are, check out my blog post.

Putting all that together with the for-loop:

for directory in directories:
    if folder_name_regex.search(directory):
        account_number = folder_name_regex.search(directory).group(1)
        dir_source = source + account_number
        dir_target = source + directory
        files = os.listdir(dir_source)
        for file in files:
            shutil.move(os.path.join(dir_source, file),
                        os.path.join(dir_target, file))

Let me explain what's going on here. For each directory inside the parent source, check if the directory matches a regular expression that would return something like "2020-0123 - Smith, John" (as opposed to its counterpart, "2020-0123"). From the regular expression, get the account number and assign it to a variable. Use that variable to make the path to the old source folder (2020-0123); assign it to dir_source. Create a path to the new destination, dir_target (2020-0123 - Smith, John). Finally, get a list of all the files and folders in the source folder (2020-0123), loop over each file/folder, and move it from the source to the target.

Here's all of the code together:

import shutil
import os
import re

from pathlib import Path

source = '/Users/johnnyturco/Downloads/Test Directory/'

directories = os.listdir(source)

folder_name_regex = re.compile(r'(^\d{4}-\d{4}) - .*')

for directory in directories:
    if folder_name_regex.search(directory):
        account_number = folder_name_regex.search(directory).group(1)
        dir_source = source + account_number
        dir_target = source + directory
        files = os.listdir(dir_source)
        for file in files:
            shutil.move(os.path.join(dir_source, file),
                        os.path.join(dir_target, file))

Intro to React Context

Johnny Turco — Mon, 09 Jan 2023 20:05:04 +0000

React Context is a React hook that allows you to manage state globally. Per W3Schools, "[React Context] can be used together with the useState Hook to share state between deeply nested components more easily than with useState alone." Instead of "prop drilling" (passing state via props through your component hierarchy), you can use Context to pass state through children components.

Getting Started: Creating Context

To get started, import createContext (and useState):

import { createContext, useState } from "react"

Then initialize createContext:

const FoodContext = createContext()

Finally, wrap the components you want to have access to the context in the Context Provider with the value of your state:

function App() {
    const [food, setFood] = useState({
        name: "Pho",
        cuisine: "Vietnamese",
        portion: 1
    })

    return (
        <FoodContext.Provider value={food}>
            <ChildComponent />
        </FoodContext.Provider>
    )
}

Using Context

Now that you've created your Context, you'll need to use the useContext hook in your child component(s) to access it. Start by importing useContext:

import { useContext } from "react"

Finally, you can use useContext throughout your child component(s)!

function ChildComponent() {
    const food = useContext(FoodContext)

    return (
        <h1>{My Favorite is: ${food.name}}</h1>
    )
}

Updating State in Child Components

In addition to passing state as the value in your Context Provider, you can also include the setter function to update state from child components. For example:

<FoodContext.Provider value={{ food, setFood }}>
    <ChildComponent />
</FoodContext.Provider>

Now, in your child component, you have access to the state and the setter function:

function ChildComponent() {
    const { food, setFood } = useContext(FoodContext)

    if (food.name === "Pho") {
        setFood((previousFood) => {
            return {
                ...previousFood,
                name: "Bánh mì"
            }
        })
    }

    return (
        <h1>{My Favorite is: ${food.name}}</h1>
    )
}

Conclusion

React Context allows your child components to easily access data from a parent. Depending on how deep your component hierarchy is, Context can be a simpler way to pass data through your component tree than passing data as props.

What Are Regular Expressions? A Simple JavaScript Regex to Format Phone Numbers

Johnny Turco — Fri, 09 Dec 2022 16:36:49 +0000

You're probably already familiar with using Command + F (or Control + F on PC) to search for text on a web page or PDF. This command will only find exact matches, however. Regular expressions, on the other hand, allow you to specify patterns to search for. For example, if you know a string of text contains an email address, but you don't know what the address is, you could find it by specifying a pattern based on how email addresses are structured. At a basic level, all email addresses have:

Some combination of letters and numbers (and possibly a few special characters, like periods, underscores, etc.—but let's keep it simple for now);
An @ sign;
Another combination of letters and numbers for the domain;
A period preceding the top-level domain; and
A top-level domain.

What if we could search based on these criteria instead of 1-for-1 matches? That's exactly what regular expressions allow you to do.

The term regular expression (often shortened to regex or regexp) is generic; there are several variations, but the syntax remains relatively consistent across the many implementations. Many of the resources you will find online will be applicable to the majority of implementations. This article is a simple introduction to what regular expressions are and what they can do, and I'll illustrate it with a real-world application I used.

Example: Formatting Phone Numbers

I was recently working with an API that returned (U.S.) phone numbers as a 10-digit string (e.g., 5557071234), and I needed a way to convert these numbers into a more readable format, like (555) 707-1234. Here's how I did it in JavaScript:

let phoneNumber = "5557071234"
console.log(phoneNumber.replace(/(\d{3})(\d{3})(\d{4})/,'($1) $2-$3'))
// output: (555) 707-1234

Let's break-down what's happening here. Note: the replace method syntax is replace(pattern, replacement).

/(\d{3})(\d{3})(\d{4})/ is the pattern parameter in our example. Note that in JavaScript, regular expressions are surrounded by slashes. The regular expression itself is (\d{3})(\d{3})(\d{4}). Ignore the parentheses for now; focus on \d{3}\d{3}\d{4}

The \d matches any digit (0-9)
The curly brackets that follow the \d are a type of regular expression quantifier; in this case {3} specifies exactly three digits.

In plain English, this expressions says, "3 digits, followed by 3 digits, followed by 4 digits," which is really the same as saying, "10 digits," or \d{10}. Both would match "5557071234". Let's add the parenthesis back in to our expression: (\d{3})(\d{3})(\d{4}).

Parentheses in regular expressions create groups. A group can be referred to with something called a backreference. Think of it as assigning everything in parentheses to a variable. You can then arrange those variables into the format you want.

That brings us to the second parameter, the replacement; '($1) $2-$3' in our case. This says:

Surround the first group, \d{3} (i.e., the first 3 digits) in parentheses;
Add a space;
Then the second group, \d{3} (i.e., the next set of 3 digits);
Add a hyphen;
Then the third group \d{4} (i.e., the next set of 4 digits)

The result from our example: (555) 707-1234, where "555" is group 1, "707" is group 2, and "1234" is group 3.

Limitations

This regular expression works well because I know my data source contains only 10-digit strings. That removes a lot of variables that I'd otherwise need to account for. For example, if the data source included country codes, the replacement would be off (e.g., "15557071234" would be replaced with (155) 570-7123).

Additionally, this regular expression assumes no special characters were in the data source. If there were, you could start by writing a regular expression to find and remove all special characters before using our formatting regular expression.

For our purposes, though, this regex is a simple demonstration to explain how regular expressions work.

Resources

We only looked at a couple regex commands, but there are a lot more. I would recommend keeping a cheatsheet on hand. Here's the one I use, based on a blog post by Quang Do:

.       - Any Character Except New Line
\d      - Digit (0-9)
\D      - Not a Digit (0-9)
\w      - Word Character (a-z, A-Z, 0-9, _)
\W      - Not a Word Character
\s      - Whitespace (space, tab, newline)
\S      - Not Whitespace (space, tab, newline)

\b      - Word Boundary
\B      - Not a Word Boundary
^       - Beginning of a String
$       - End of a String

[]      - Matches Characters in brackets
[^ ]    - Matches Characters NOT in brackets
|       - Either Or
( )     - Group

Quantifiers:
*       - 0 or More
+       - 1 or More
?       - 0 or One
{3}     - Exact Number
{3,4}   - Range of Numbers (Minimum, Maximum)

MDN also has a pretty comprehensive cheatsheet.

To practice, I recommend RegExr. It does an excellent job of breaking down groups. Regex101 is also a great resource.

Focus a Field Using JavaScript KeyboardEvents

Johnny Turco — Fri, 18 Nov 2022 19:13:31 +0000

If you don't already know, you can press the forward slash key / on Gmail, YouTube, and Google search result pages to focus your cursor back to the search field. I'll show you how you can implement this on your website with JavaScript, and a few things to look out for.

First, you'll need reference to the search field you want to focus, in my case:

const searchField = document.querySelector('#search-input');

We'll come back to this later.

Second, you'll need to add an EventListener. I would suggest adding the EventListener to the window EventTarget so the keyboard shortcut works anywhere on your webpage:

window.addEventListener()

Next, you will need to choose a listener to listen for your keyboard shortcut. You have a few main choices:

keydown
keypress
keyup

You should avoid using keypress because it has been deprecated, per MDN.

As their names suggest, keydown fires when the key is pressed and keyup fires when the key is released. Note that keydown will continue to fire for as long as the key is held down (keypress does, too). If you want to avoid the possibility of a bunch of unwanted characters in your focused input area, you may want to use keyup instead. Interestingly, Google will let you input as many forward slashes as you want if you hold down the key.

Another behavior to consider is the order the that the listeners fire. Because keydown fires on, well, key down, it fires before keyup. That difference may be obvious, but it can cause a noticeable delay if your users hold the shortcut key down for longer than a quick press. That said, the difference will probably be imperceptible to most. In my example, though, I'll use keyup:

window.addEventListener('keyup', (event) => {
    // code
})

KeyboardEvent objects have a number of important properties. You can use .code or .key to specify which key to act on. MDN makes an important note about .code: this property ignores keyboard layout; it returns the code for the physical key location. So, if you have users that may be using Dvorak or other non-QWERTY keyboard layouts, you may need to consider how that affects their experience.

To determine which .code value corresponds to which character, check out this MDN doc. A list of .key values is provided at this doc.

Combining .code and all of the above with an if statement gets us a basic implementation:

const searchField = document.querySelector('#search-input');
window.addEventListener('keyup', (event) => {
  if(event.code === 'Slash'){
    searchField.focus();
  }
})

The .focus() method focuses on the query selector we made in the first step.

There are a couple of other things we can add, though—some of which will be a matter of preference or depend on your implementation.

First, if your website has another text input besides your search field, you may want to disable the / shortcut (or whatever you set your shortcut key to) when entering text in the other input field. To do that, we first need to know what element the user is currently focused on, which can accomplished with the .activeElement property on the document.

We also need to know the name of the tag of the active element, which we can find with the aptly named .tagName property. Note that .tagName will return the element's tag name in all caps (e.g., an <input> tag will be returned as INPUT). Combined with .activeElement, the code looks like this:

document.activeElement.tagName

Combined with our existing if statement, your code should look like this:

const searchField = document.querySelector('#search-input');
window.addEventListener('keyup', (e) => {
  if((e.code === 'Slash') && (document.activeElement.tagName !== 'INPUT')){
    searchField.focus();
  }
})

If you're checking if your user is already in a text input field, you'll probably also want to check if the user is in a textarea field. You can accomplish this in the same way as above:

document.activeElement.tagName !== 'TEXTAREA'

In total, the final product looks like this:

const searchField = document.querySelector('#search-input');
window.addEventListener('keyup', (e) => {
  if((e.code === 'Slash') && (document.activeElement.tagName !== 'INPUT') && (document.activeElement.tagName !== 'TEXTAREA')){
    searchField.focus();
  }
})

Bonus: You may also want to check if your user is in an element that has the contenteditable HTML attribute enabled. The process to check is a little different, but also more straightforward with the .isContentEditable property. The property returns true if the contents are editable and false if not. contenteditable is of course less common than text inputs and text areas, but it's worth noting.