npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@flourish/pocket-knife

v2.0.0

Published

Flourish module with handy tools

Downloads

2,013

Readme

Flourish pocket knife 🇨🇭

A module with handy tools that you can use in Flourish templates.

import { isUrl, isImage } from "@flourish/pocket-knife"

Functions

createScreenshotSVG(target, id)

Create a temporary SVG element that can be used in the SVG export. Takes a target element, which it uses to set the boundaries and position of the main svg container; and an id which is used to set a unique id of the SVG element.

This function returns an .addTextElements(els), .addCircleElements(els), .addGradient(el, colorFunction, domain), and .remove() method. .remove() will remove the SVG. addTextElements takes a node list (els) and will convert them to an SVG <text> elements, incorporating the element's font styles and line height. Similarly, addCircleElements takes elements (e.g. divs with a background color) and converts them to SVG <circle> elements. addGradient takes an element, a color function, and a domain; the domain should be an object with a min and max representing the starting and ending values the gradient represents, and the color function should take a number within the domain and return the color which represents that number.

This function can be used in the template's screenshot() function to temporarily create an SVG that will be included in the SVG export.

getTextDimensions(string, font)

Gets dimensions of text. First argument contains the text you want to calculate the width for. The second argument is optional and lets you set font settings for the text in the standard css font property, eg. bold 16px arial. If font is empty, it uses 10px sans-serif. Returns an object with properties width and height.

getTextDirection()

Gets computed text direction on document.body. Returns a "ltr" or "rtl".

getTextHeight(string, font)

Gets height of text. Uses same arguments as getTextDimensions. Returns a number.

getTextWidth(string, font)

Gets width of text. Uses same arguments as getTextDimensions. Returns a number.

getUniqueValuesFromBinding(data, binding, index)

Gets all the unique values in a column associated to a data binding. If it is a multi column binding you can pass in index that is used to work out which of the bound columns it should look at. If you pass it no index and it is a multi column binding it will default to zero.

hexToColor(hex_string, opacity)

Converts hex to d3 color object as described here

hexToColor("#00ff00", 0.5); // {r: 0, g: 255, b: 0, a: 0.5}

hexToRgba(hex_string, opacity)

Converts hex to rgba string

hexToRgba("#00ff00", 0.5); // rgba(0, 255, 0, 0.5)

isImage(string)

Checks if string looks like valid image URL. Returns true or false

isPale(color_value)

Returns if color is pale or not

isUrl(string)

Checks if string looks like valid URL. Returns true or false

remToPx(rem)

Converts value specified in rems to px

wrapStringToLines(label, label_styles, text_max_lines, max_width)

Takes a string, and returns an array of strings where each string is one lines worth of text.

  • Label is a string, that you want to be broken up into lines
  • label_styles is a string that can include font weight, font size and font family in the structure: 'bold 48px serif'. it is what is given to the canvas context font method, and is used to measure the text.
  • text_max_lines is a number that says the maximum amount of lines you want (if you dont have a maximum you can give it null)
  • max_width is a number that states in px the maximum width for the label.