pkg-stats 0.4.0 → 0.5.0

package/README.md

@@ -2,15 +2,34 @@
 
 Beautiful NPM package download stats.
 
+### Single package
+
 ```
 npx pkg-stats react
 ```
 
 <div align='center'>
-  <img src="https://raw.githubusercontent.com/mdjastrzebski/pkg-stats/main/docs/public/example-react.png" alt="pkg-stats" height="210" width="538" />
+  <img src="https://raw.githubusercontent.com/mdjastrzebski/pkg-stats/main/docs/public/example-package.png" alt="Display single package stats" style="max-width: 610px; aspect-ratio: 610x374;" />
+</div>
+
+#### Options:
+
+- `--major`, `--minor`, `--patch` - group by major, minor or patch version
+- `--top <number>` (alias `-t`) - show top N versions
+- `--color <scheme>` (alias `-c`) - specify color scheme
+  - available schemes: `atlas`, `cristal`, `fruit`, `insta`, `mind`, `morning`, `passion`, `pastel`, `rainbow`, `retro`, `summer`, `teen`, `vice`
+
+
+### Compare packages
+
+```
+npx pkg-stats moment date-fns dayjs luxon @js-joda/core
+```
+
+<div align='center'>
+  <img src="https://raw.githubusercontent.com/mdjastrzebski/pkg-stats/main/docs/public/example-compare.png" alt="Compare package stats" style="max-width: 610px; aspect-ratio: 610x374;" />
 </div>
 
-### Options:
+#### Options:
 
-- version grouping: `--group major|minor|patch` (alias `-g`, `--major`, `--minor`, `--patch`)
-- top version: `--top <number>` (alias `-t`)
+- `--color <scheme>` (alias `-c`) - specify color scheme

package/dist/__tests__/output.js

@@ -0,0 +1,8 @@
+import { expect, test } from 'vitest';
+import { formatBar } from '../output.js';
+
+test('renderChart basic tests', () => {
+    expect(formatBar(0.0, { length: 10 })).toMatchInlineSnapshot(`"▏         "`);
+    expect(formatBar(0.5, { length: 10 })).toMatchInlineSnapshot(`"█████     "`);
+    expect(formatBar(1.0, { length: 10 })).toMatchInlineSnapshot(`"██████████"`);
+});

package/dist/__tests__/output.test.js

@@ -0,0 +1,7 @@
+import { expect, test } from 'vitest';
+import { formatBar } from '../output.js';
+test('renderChart basic tests', () => {
+    expect(formatBar(0.0, { length: 10 })).toMatchInlineSnapshot(`"▏         "`);
+    expect(formatBar(0.5, { length: 10 })).toMatchInlineSnapshot(`"█████     "`);
+    expect(formatBar(1.0, { length: 10 })).toMatchInlineSnapshot(`"██████████"`);
+});

package/dist/cli-options.js

@@ -1,7 +1,7 @@
 import chalk from 'chalk';
 import meow from 'meow';
 import redent from 'redent';
-import { COLOR_SCHEMES } from './colors.js';
+import { COLOR_SCHEMES, getColorOfDay } from './colors.js';
 const colorCommand = chalk.hex('#22c1c3');
 const colorOption = chalk.hex('#fdbb2d');
 const HELP = `
@@ -14,6 +14,7 @@ Options:
   ${colorOption('--patch')}               Group by patch version
   ${colorOption('-t, --top')} <number>    Show top <number> most downloaded versions
   ${colorOption('-a, --all')}             Include all versions in output, even those with minimal downloads
+  ${colorOption('-x, --extended')}        Show extended stats
   ${colorOption('-c, --color')} <scheme>  ${wrapOption(`Choose color scheme from: ${COLOR_SCHEMES.sort().join(', ')}`, 50, 24)}
 
 Examples:
@@ -77,6 +78,10 @@ export function parseCliOptions(argv) {
                 type: 'boolean',
                 shortFlag: 'a',
             },
+            extended: {
+                type: 'boolean',
+                shortFlag: 'x',
+            },
             color: {
                 shortFlag: 'c',
                 type: 'string',
@@ -100,7 +105,14 @@ export function parseCliOptions(argv) {
                     ? 'patch'
                     : undefined,
         top: cli.flags.top,
-        all: cli.flags.all,
-        color: cli.flags.color,
+        all: cli.flags.all ?? false,
+        extended: cli.flags.extended ?? false,
+        color: coalesceColor(cli.flags.color) ?? getColorOfDay(),
     };
 }
+function coalesceColor(color) {
+    if (color && COLOR_SCHEMES.includes(color)) {
+        return color;
+    }
+    return undefined;
+}

package/dist/colors.js

@@ -27,17 +27,20 @@ const gradients = {
     summer: { colors: ['#fdbb2d', '#22c1c3'], options: {} },
     rainbow: {
         colors: ['#ff0100', '#ff0000'],
-        options: { interpolation: 'hsv', hsvSpin: 'long', padEnd: 0.1 },
+        options: { interpolation: 'hsv', hsvSpin: 'long', min: 7, extra: 1 },
     },
     pastel: {
         colors: ['#74ebd5', '#74ecd5'],
-        options: { interpolation: 'hsv', hsvSpin: 'long', padEnd: 0.1 },
+        options: { interpolation: 'hsv', hsvSpin: 'long', extra: 1 },
     },
 };
 export const COLOR_SCHEMES = Object.keys(gradients);
+export function getPrimaryColor(colorScheme) {
+    return gradients[colorScheme].colors[0];
+}
 export function getColors(count, colorScheme) {
-    const { colors, options } = gradients[colorScheme ?? getColorOfDay()];
-    const paddedCount = count + (options.padEnd ? Math.ceil(count * options.padEnd) : 0);
+    const { colors, options } = gradients[colorScheme];
+    const paddedCount = Math.max(count + (options.extra ?? 0), options.min ?? 0);
     if (paddedCount < colors.length) {
         return colors;
     }
@@ -47,7 +50,7 @@ export function getColors(count, colorScheme) {
         : gradient.rgb(paddedCount);
     return tinyColors.map((c) => c.toHexString());
 }
-function getColorOfDay() {
+export function getColorOfDay() {
     const date = new Date();
     const index = date.getDate() + date.getMonth() * 30 + date.getFullYear() * 360;
     return COLOR_SCHEMES[index % COLOR_SCHEMES.length];

package/dist/format.js

@@ -7,3 +7,6 @@ export function formatDownloads(downloads, maxDownloads) {
     }
     return downloads.toString();
 }
+export function formatPercentage(percentage) {
+    return `${(percentage * 100).toFixed(1)}%`;
+}

package/dist/mode/compare-packages.js

@@ -1,8 +1,7 @@
 import chalk from 'chalk';
-import { renderChart } from '../chart.js';
-import { getColors } from '../colors.js';
-import { formatDownloads } from '../format.js';
+import { formatPercentage } from '../format.js';
 import { fetchNpmLastWeekDownloads } from '../npm-api.js';
+import { printChart } from '../output.js';
 export async function comparePackages(packageNames, options) {
     const rawPackages = await Promise.all(packageNames.map((packageName) => fetchPackageData(packageName)));
     const packagesToDisplay = rawPackages
@@ -13,20 +12,15 @@ export async function comparePackages(packageNames, options) {
         process.exit(1);
     }
     console.log(chalk.bold(`\nNPM weekly downloads\n`));
-    const maxDownloads = Math.max(...packagesToDisplay.map((v) => v.downloads));
-    const displayData = packagesToDisplay.map((item) => {
-        return {
-            name: item.packageName,
-            chart: renderChart(item.downloads / maxDownloads),
-            downloads: formatDownloads(item.downloads, maxDownloads),
-        };
-    });
-    const maxNameLength = Math.max(...displayData.map((item) => item.name.length));
-    const maxDownloadsLength = Math.max(...displayData.map((item) => item.downloads.length));
-    const colors = getColors(packagesToDisplay.length, options.color);
-    displayData.forEach((item, i) => {
-        const color = chalk.hex(colors[i]);
-        console.log(`${item.name.padStart(2 + maxNameLength)} ${color(item.chart)} ${color(item.downloads.padStart(maxDownloadsLength))}`);
+    const maxDownloads = Math.max(...packagesToDisplay.map((item) => item.downloads));
+    const items = packagesToDisplay.map((item) => ({
+        label: item.packageName,
+        value: item.downloads,
+        extended: options.extended ? formatPercentage(item.downloads / maxDownloads) : undefined,
+    }));
+    printChart(items, {
+        colorScheme: options.color,
+        indent: 2,
     });
 }
 async function fetchPackageData(packageName) {

package/dist/mode/package-info.js

@@ -0,0 +1,64 @@
+import chalk from 'chalk';
+import { renderChart } from '../chart.js';
+import { getColors } from '../colors.js';
+import { formatDownloads } from '../format.js';
+import { fetchNpmLastWeekDownloads } from '../npm-api.js';
+import { filterStats, groupStats } from '../stats.js';
+import { parseVersion, versionCompare } from '../version.js';
+export async function fetchPackageInfo(packageName, options) {
+    const data = await fetchNpmLastWeekDownloads(packageName);
+    if (!Object.keys(data.downloads).length) {
+        throw new Error(`No data found for package "${packageName}".`);
+    }
+    const npmStats = Object.keys(data.downloads)
+        .map((versionString) => {
+        const version = parseVersion(versionString);
+        return {
+            ...version,
+            downloads: data.downloads[versionString],
+        };
+    })
+        .sort(versionCompare);
+    const { type, stats } = groupStats(npmStats, options.group);
+    const totalDownloads = Object.values(stats).reduce((sum, version) => sum + version.downloads, 0);
+    return {
+        name: packageName,
+        totalDownloads,
+        groupingType: type,
+        stats: stats.map((stat) => ({
+            version: stat.versionString,
+            downloads: stat.downloads,
+        })),
+    };
+}
+export function printPackageInfo({ name, stats, totalDownloads, groupingType }, options) {
+    const statsToDisplay = filterStats(stats, {
+        totalDownloads,
+        all: options.all,
+        top: options.top,
+    });
+    const colors = getColors(statsToDisplay.length, options.color);
+    const primaryColor = chalk.hex(colors[0]);
+    console.log(chalk.bold(`\nNPM weekly downloads for ${primaryColor(name)}\n`));
+    console.log(`Total: ${primaryColor(totalDownloads.toLocaleString())} last week\n`);
+    console.log(options.top
+        ? `Top ${options.top} ${groupingType} versions:\n`
+        : `By ${groupingType} version:\n`);
+    const maxDownloads = Math.max(...stats.map((v) => v.downloads));
+    const displayData = statsToDisplay.map((item) => {
+        const versionParts = item.version.split('.');
+        return {
+            version: versionParts.length < 3 ? `${item.version}.x` : item.version,
+            chart: renderChart(item.downloads / maxDownloads),
+            downloads: formatDownloads(item.downloads, maxDownloads),
+        };
+    });
+    const maxVersionLength = Math.max(...displayData.map((item) => item.version.length));
+    const maxDownloadsLength = Math.max(...displayData.map((item) => item.downloads.length));
+    displayData.forEach((item, i) => {
+        const color = chalk.hex(colors[i]);
+        console.log(`${item.version.padStart(2 + maxVersionLength)} ${color(item.chart)} ${color(item.downloads.padStart(maxDownloadsLength))}`);
+    });
+    console.log(chalk.bold(`\nNPM weekly downloads for ${chalk.green(name)}\n`));
+    console.log(`Total: ${chalk.green(totalDownloads.toLocaleString())} last week\n`);
+}

package/dist/mode/package-stats.js

@@ -1,8 +1,8 @@
 import chalk from 'chalk';
-import { renderChart } from '../chart.js';
-import { getColors } from '../colors.js';
-import { formatDownloads } from '../format.js';
+import { getPrimaryColor } from '../colors.js';
+import { formatPercentage } from '../format.js';
 import { fetchNpmLastWeekDownloads } from '../npm-api.js';
+import { printChart } from '../output.js';
 import { filterStats, groupStats } from '../stats.js';
 import { parseVersion, versionCompare } from '../version.js';
 export async function printPackageStats(packageName, options) {
@@ -34,24 +34,24 @@ export async function printPackageStats(packageName, options) {
         all: options.all,
         top: options.top,
     });
-    const colors = getColors(statsToDisplay.length, options.color);
-    const primaryColor = chalk.hex(colors[0]);
+    const downloadToDisplay = statsToDisplay.reduce((sum, version) => sum + version.downloads, 0);
+    if (totalDownloads - downloadToDisplay > 0) {
+        statsToDisplay.push({
+            versionString: 'rest',
+            downloads: totalDownloads - downloadToDisplay,
+        });
+    }
+    const primaryColor = chalk.hex(getPrimaryColor(options.color));
     console.log(chalk.bold(`\nNPM weekly downloads for ${primaryColor(packageName)}\n`));
     console.log(`Total: ${primaryColor(totalDownloads.toLocaleString())} last week\n`);
     console.log(options.top ? `Top ${options.top} ${type} versions:\n` : `By ${type} version:\n`);
-    const maxDownloads = Math.max(...stats.map((v) => v.downloads));
-    const displayData = statsToDisplay.map((item) => {
-        const versionParts = item.versionString.split('.');
-        return {
-            version: versionParts.length < 3 ? `${item.versionString}.x` : item.versionString,
-            chart: renderChart(item.downloads / maxDownloads),
-            downloads: formatDownloads(item.downloads, maxDownloads),
-        };
-    });
-    const maxVersionLength = Math.max(...displayData.map((item) => item.version.length));
-    const maxDownloadsLength = Math.max(...displayData.map((item) => item.downloads.length));
-    displayData.forEach((item, i) => {
-        const color = chalk.hex(colors[i]);
-        console.log(`${item.version.padStart(2 + maxVersionLength)} ${color(item.chart)} ${color(item.downloads.padStart(maxDownloadsLength))}`);
+    const items = statsToDisplay.map((item) => ({
+        label: item.versionString,
+        value: item.downloads,
+        extended: options.extended ? formatPercentage(item.downloads / totalDownloads) : undefined,
+    }));
+    printChart(items, {
+        colorScheme: options.color,
+        indent: 2,
     });
 }

package/dist/output.js

@@ -0,0 +1,28 @@
+import chalk from 'chalk';
+import { getColors } from './colors.js';
+import { formatDownloads } from './format.js';
+export function printChart(items, options) {
+    const maxLabelLength = Math.max(...items.map((item) => item.label.length));
+    const maxValue = Math.max(...items.map((item) => item.value));
+    const maxValueLength = formatDownloads(maxValue, maxValue).length;
+    const maxExtendedLength = Math.max(...items.map((item) => item.extended?.length ?? 0));
+    const colors = getColors(items.length, options.colorScheme);
+    const indent = options.indent ?? 0;
+    items.forEach((item, i) => {
+        const color = chalk.hex(colors[i]);
+        const label = ' '.repeat(indent) + item.label.padStart(maxLabelLength);
+        const bar = formatBar(item.value / maxValue);
+        const value = formatDownloads(item.value, maxValue).padStart(maxValueLength);
+        const extended = item.extended
+            ? chalk.dim(` ${item.extended}`.padStart(maxExtendedLength + 1))
+            : '';
+        console.log(`${label} ${color(bar)} ${color(value)}${extended}`);
+    });
+}
+export function formatBar(value, { length = 50 } = {}) {
+    const filledChars = Math.round(value * length);
+    if (filledChars === 0) {
+        return '▏' + ' '.repeat(length - 1);
+    }
+    return '█'.repeat(filledChars) + ' '.repeat(length - filledChars);
+}

package/dist/render.js

@@ -0,0 +1,23 @@
+import { style } from './style.js';
+export function renderChart(value) {
+    const filledValues = Math.round(value * style.chart.width * style.chart.pattern.length);
+    if (filledValues === 0) {
+        return '▏' + (style.rightLabel === 'align-right' ? ' '.repeat(style.chart.width - 1) : '');
+    }
+    const fullBlocks = Math.floor(filledValues / style.chart.pattern.length);
+    const partialBlock = filledValues % style.chart.pattern.length;
+    const hasPartialBlock = partialBlock > 0;
+    return (style.chart.pattern.at(-1).repeat(fullBlocks) +
+        (hasPartialBlock ? style.chart.pattern.at(partialBlock) : '') +
+        (style.rightLabel === 'align-right'
+            ? ' '.repeat(style.chart.width - fullBlocks - (hasPartialBlock ? 1 : 0))
+            : ''));
+}
+// export type RenderChartLineOptions = {
+//   value: number;
+//   leftLabel: string;
+//   rightLabel: string;
+// };
+// export function renderChartLine({ value, leftLabel, rightLabel }: RenderChartLineOptions) {
+//   return `${leftLabel}${renderChart(value)}${rightLabel}`;
+// }

package/dist/stats.js

@@ -22,7 +22,7 @@ export function groupStats(stats, type) {
 function groupByMajor(stats) {
     const result = {};
     for (const versionStats of stats) {
-        const key = `${versionStats.major}`;
+        const key = `${versionStats.major}.x`;
         const entry = result[key] ?? {
             version: { major: versionStats.major },
             versionString: key,
@@ -36,7 +36,7 @@ function groupByMajor(stats) {
 function groupByMinor(stats) {
     const result = {};
     for (const versionStats of stats) {
-        const key = `${versionStats.major}.${versionStats.minor}`;
+        const key = `${versionStats.major}.${versionStats.minor}.x`;
         const entry = result[key] ?? {
             version: { major: versionStats.major, minor: versionStats.minor },
             versionString: key,
@@ -73,7 +73,12 @@ export function filterStats(stats, options) {
         return pickTopStats(stats, options.top);
     }
     const downloadThreshold = 0.005 * options.totalDownloads; // 0.5%
-    return stats.filter((stat) => stat.downloads >= downloadThreshold);
+    const filtered = stats.filter((stat) => stat.downloads >= downloadThreshold);
+    // If we were to skip only a single state, we rather display it than replace it with "rest".
+    if (filtered.length + 1 >= stats.length) {
+        return stats;
+    }
+    return filtered;
 }
 function pickTopStats(stats, top) {
     const sortedStats = stats.sort((a, b) => b.downloads - a.downloads);

package/dist/style.js

@@ -0,0 +1,16 @@
+export const style = {
+    chart: {
+        width: 50,
+        //pattern: ['⏹'],
+        //pattern: ['⏺'],
+        //pattern: ['█'],
+        //pattern: [' ', '▎', '▌', '▊', '█'],
+        //pattern: [' ', '▩'],
+        //pattern: [' ', '▰'],
+        //pattern: [' ', '∎'],
+        pattern: [' ', '█'],
+        //pattern: [' ', '▓'],
+        zeroPattern: '▏',
+    },
+    rightLabel: 'align-right',
+};

package/dist/types.js

@@ -0,0 +1 @@
+export {};

package/dist/version.js

@@ -18,8 +18,5 @@ export function versionCompare(a, b) {
     if (a.patch !== undefined && b.patch !== undefined && a.patch !== b.patch) {
         return b.patch - a.patch;
     }
-    if (a.preRelease !== undefined && b.preRelease !== undefined) {
-        return a.preRelease.localeCompare(b.preRelease);
-    }
     return 0;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pkg-stats",
-  "version": "0.4.0",
+  "version": "0.5.0",
   "description": "Beautiful NPM package download stats",
   "license": "MIT",
   "repository": {

package/dist/__tests__/chart.test.js

@@ -1,7 +0,0 @@
-import { expect, test } from 'vitest';
-import { renderChart } from '../chart.js';
-test('renderChart basic tests', () => {
-    expect(renderChart(0.0, { length: 10 })).toMatchInlineSnapshot(`"▏         "`);
-    expect(renderChart(0.5, { length: 10 })).toMatchInlineSnapshot(`"█████     "`);
-    expect(renderChart(1.0, { length: 10 })).toMatchInlineSnapshot(`"██████████"`);
-});