@codecademy/gamut 67.6.2 → 67.6.3-alpha.45eda4.0

package/dist/BarChart/utils/index.d.ts

@@ -0,0 +1,83 @@
+import { BarChartProps, BarProps } from '../types';
+export declare const numDigits: ({ num }: {
+    num: number;
+}) => number;
+export declare const columnBaseSize: ({ experience }: {
+    experience?: number | undefined;
+}) => {
+    sm: number;
+    md: number;
+    lg: number;
+    xl: number;
+};
+export declare const calculatePercent: ({ value, total, }: {
+    value: number;
+    total: number;
+}) => number;
+export declare const calculateBarWidth: ({ value, minRange, maxRange, }: {
+    value: number;
+    minRange: number;
+    maxRange: number;
+}) => number;
+export declare const calculateTicksAndRange: ({ maxTicks, minPoint, maxPoint, }: {
+    maxTicks: number;
+    minPoint: number;
+    maxPoint: number;
+}) => [number, number, number];
+/**
+ * Returns a "nice" number approximately equal to range
+ * Rounds the number if round = true
+ * Takes the ceiling if round = false.
+ * A nice number is a simple decimal number, for example if a number is 1234, a nice number would be 1000 or 2000.
+ */
+export declare const niceNum: ({ range, roundDown, }: {
+    range: number;
+    roundDown: boolean;
+}) => number;
+export declare const getPercentDiff: ({ v1, v2 }: {
+    v1: number;
+    v2: number;
+}) => number;
+export declare const formatNumberUS: ({ num }: {
+    num: number;
+}) => string;
+export declare const formatNumberUSCompact: ({ num }: {
+    num: number;
+}) => string;
+/**
+ * Sort bars based on sortBy and order configuration
+ */
+export declare const sortBars: ({ bars, sortBy, order, }: {
+    bars: BarProps[];
+    sortBy: BarChartProps['sortBy'];
+    order: BarChartProps['order'];
+}) => BarProps[];
+/**
+ * Generates an accessible summary of the bar values
+ */
+export declare const getValuesSummary: ({ yLabel, seriesOneValue, seriesTwoValue, unit, }: {
+    yLabel: string;
+    seriesOneValue: number;
+    seriesTwoValue?: number | undefined;
+    unit: string;
+}) => string;
+/**
+ * Calculates the value for a given label position
+ */
+export declare const getLabel: ({ labelCount, labelIndex, min, max, }: {
+    labelCount: number;
+    labelIndex: number;
+    min: number;
+    max: number;
+}) => number;
+/**
+ * Calculates the percentage position for a given value within a range
+ * Returns a value between 0 and 100 representing the position percentage
+ */
+export declare const calculatePositionPercent: ({ value, min, max, }: {
+    value: number;
+    min: number;
+    max: number;
+}) => number;
+export { useBarChart, useBarChartContext, useLabelPositions } from './hooks';
+export type { LabelPosition, UseBarChartOptions } from './hooks';

package/dist/BarChart/utils/index.js

@@ -0,0 +1,162 @@
+export const numDigits = ({
+  num
+}) => {
+  return Math.max(Math.floor(Math.log10(Math.abs(num))), 0) + 1;
+};
+export const columnBaseSize = ({
+  experience = 3
+}) => {
+  const digits = numDigits({
+    num: experience
+  });
+  return {
+    sm: digits > 4 ? 5 : 4,
+    md: digits > 4 ? 5 : 4,
+    lg: digits > 4 ? 4 : 5,
+    xl: digits > 4 ? 5 : 4
+  };
+};
+export const calculatePercent = ({
+  value,
+  total
+}) => {
+  return value / total * 100;
+};
+export const calculateBarWidth = ({
+  value,
+  minRange,
+  maxRange
+}) => {
+  const range = maxRange - minRange;
+  const adjustedValue = value - minRange;
+  return Math.floor(calculatePercent({
+    value: adjustedValue,
+    total: range
+  }));
+};
+
+// Calculate tick spacing and nice minimum and maximum data points on the axis.
+
+export const calculateTicksAndRange = ({
+  maxTicks,
+  minPoint,
+  maxPoint
+}) => {
+  const range = niceNum({
+    range: maxPoint - minPoint,
+    roundDown: false
+  });
+  const tickSpacing = niceNum({
+    range: range / (maxTicks - 1),
+    roundDown: true
+  });
+  const niceMin = Math.floor(minPoint / tickSpacing) * tickSpacing;
+  const niceMax = Math.ceil(maxPoint / tickSpacing) * tickSpacing;
+  const tickCount = range / tickSpacing;
+  return [tickCount, niceMin, niceMax];
+};
+
+/**
+ * Returns a "nice" number approximately equal to range
+ * Rounds the number if round = true
+ * Takes the ceiling if round = false.
+ * A nice number is a simple decimal number, for example if a number is 1234, a nice number would be 1000 or 2000.
+ */
+export const niceNum = ({
+  range,
+  roundDown
+}) => {
+  const exponent = Math.floor(Math.log10(range));
+  const fraction = range / 10 ** exponent;
+  let niceFraction;
+  if (roundDown) {
+    if (fraction < 1.5) niceFraction = 1;else if (fraction < 3) niceFraction = 2;else if (fraction < 7) niceFraction = 5;else niceFraction = 10;
+  } else if (fraction <= 1) niceFraction = 1;else if (fraction <= 2) niceFraction = 2;else if (fraction <= 5) niceFraction = 5;else niceFraction = 10;
+  return niceFraction * 10 ** exponent;
+};
+export const getPercentDiff = ({
+  v1,
+  v2
+}) => {
+  return Math.abs(v1 - v2) / ((v1 + v2) / 2) * 100;
+};
+export const formatNumberUS = ({
+  num
+}) => Intl.NumberFormat('en').format(num);
+export const formatNumberUSCompact = ({
+  num
+}) => Intl.NumberFormat('en', {
+  notation: 'compact',
+  compactDisplay: 'short'
+}).format(num);
+
+/**
+ * Sort bars based on sortBy and order configuration
+ */
+export const sortBars = ({
+  bars,
+  sortBy,
+  order
+}) => {
+  if (sortBy === 'none' || !sortBy) {
+    return bars;
+  }
+  const sorted = [...bars].sort((a, b) => {
+    if (sortBy === 'label') {
+      return a.yLabel.localeCompare(b.yLabel);
+    }
+    // sortBy === 'value' - use seriesTwoValue if available, otherwise seriesOneValue
+    const aValue = a.seriesTwoValue ?? a.seriesOneValue;
+    const bValue = b.seriesTwoValue ?? b.seriesOneValue;
+    return aValue - bValue;
+  });
+  return order === 'descending' ? sorted.reverse() : sorted;
+};
+
+/**
+ * Generates an accessible summary of the bar values
+ */
+export const getValuesSummary = ({
+  yLabel,
+  seriesOneValue,
+  seriesTwoValue,
+  unit
+}) => {
+  if (seriesTwoValue !== undefined) {
+    const gained = seriesOneValue;
+    return `${gained} ${unit} gained - now at ${seriesTwoValue} ${unit} in ${yLabel} category`;
+  }
+  return `${seriesOneValue} ${unit} in ${yLabel} category`;
+};
+
+/**
+ * Calculates the value for a given label position
+ */
+export const getLabel = ({
+  labelCount,
+  labelIndex,
+  min,
+  max
+}) => {
+  if (labelCount <= 1) return max;
+  const incrementalDecimal = labelIndex / (labelCount - 1);
+  return Math.floor(min + incrementalDecimal * (max - min));
+};
+
+/**
+ * Calculates the percentage position for a given value within a range
+ * Returns a value between 0 and 100 representing the position percentage
+ */
+export const calculatePositionPercent = ({
+  value,
+  min,
+  max
+}) => {
+  if (max === min) return 0;
+  const range = max - min;
+  const adjustedValue = value - min;
+  return adjustedValue / range * 100;
+};
+
+// Re-export hooks
+export { useBarChart, useBarChartContext, useLabelPositions } from './hooks';

package/dist/index.d.ts

@@ -6,6 +6,7 @@ export * from './Anchor';
 export * from './Animation';
 export * from './AppWrapper';
 export * from './Badge';
+export * from './BarChart';
 export * from './BodyPortal';
 export * from './Box';
 export * from './Breadcrumbs';

package/dist/index.js

@@ -6,6 +6,7 @@ export * from './Anchor';
 export * from './Animation';
 export * from './AppWrapper';
 export * from './Badge';
+export * from './BarChart';
 export * from './BodyPortal';
 export * from './Box';
 export * from './Breadcrumbs';

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@codecademy/gamut",
   "description": "Styleguide & Component library for Codecademy",
-  "version": "67.6.2",
+  "version": "67.6.3-alpha.45eda4.0",
   "author": "Codecademy Engineering <dev@codecademy.com>",
   "dependencies": {
     "@codecademy/gamut-icons": "9.54.0",
@@ -56,5 +56,5 @@
     "dist/**/[A-Z]**/[A-Z]*.js",
     "dist/**/[A-Z]**/index.js"
   ],
-  "gitHead": "598e43114b75437e1b5db66ad6a416e532780abe"
+  "gitHead": "a36d41279895ba26cf87ad6a6d759d593a9b74ad"
 }