@lobehub/charts 1.1.0 → 1.3.0

package/es/utils/calendar.js

@@ -0,0 +1,194 @@
+import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
+import { differenceInCalendarDays, eachDayOfInterval, endOfYear, formatISO, getDay, getMonth, nextDay, parseISO, startOfYear, subWeeks } from 'date-fns';
+import { isOnSeverSide } from "./index";
+export var DEFAULT_MONTH_LABELS = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
+export var DEFAULT_LABELS = {
+  legend: {
+    less: 'Less',
+    more: 'More'
+  },
+  months: DEFAULT_MONTH_LABELS,
+  tooltip: '{{count}} activities on {{date}}',
+  totalCount: '{{count}} activities in {{year}}',
+  weekdays: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']
+};
+var fillHoles = function fillHoles(activities) {
+  if (activities.length === 0) {
+    return [];
+  }
+  var calendar = new Map(activities.map(function (a) {
+    return [a.date, a];
+  }));
+  var firstActivity = activities[0];
+  var lastActivity = activities.at(-1);
+  return eachDayOfInterval({
+    end: parseISO(lastActivity.date),
+    start: parseISO(firstActivity.date)
+  }).map(function (day) {
+    var date = formatISO(day, {
+      representation: 'date'
+    });
+    if (calendar.has(date)) {
+      return calendar.get(date);
+    }
+    return {
+      count: 0,
+      date: date,
+      level: 0
+    };
+  });
+};
+var calcTextDimensions = function calcTextDimensions(text, fontSize) {
+  if (isOnSeverSide) return;
+  if (fontSize < 1) {
+    throw new RangeError('fontSize must be positive');
+  }
+  if (text.length === 0) {
+    return {
+      height: 0,
+      width: 0
+    };
+  }
+  var namespace = 'http://www.w3.org/2000/svg';
+  var svg = document.createElementNS(namespace, 'svg');
+  svg.style.position = 'absolute';
+  svg.style.visibility = 'hidden';
+  svg.style.fontFamily = window.getComputedStyle(document.body).fontFamily;
+  svg.style.fontSize = "".concat(fontSize, "px");
+  var textNode = document.createElementNS(namespace, 'text');
+  textNode.textContent = text;
+  svg.append(textNode);
+  document.body.append(svg);
+  var boundingBox = textNode.getBBox();
+  svg.remove();
+  return {
+    height: boundingBox.height,
+    width: boundingBox.width
+  };
+};
+export var groupByWeeks = function groupByWeeks(activities) {
+  var weekStart = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
+  if (activities.length === 0) {
+    return [];
+  }
+  var normalizedActivities = fillHoles(activities);
+
+  // Determine the first date of the calendar. If the first date is not the
+  // set start weekday, the selected weekday one week earlier is used.
+  var firstActivity = normalizedActivities[0];
+  var firstDate = parseISO(firstActivity.date);
+  var firstCalendarDate = getDay(firstDate) === weekStart ? firstDate : subWeeks(nextDay(firstDate, weekStart), 1);
+
+  // To correctly group activities by week, it is necessary to left-pad the list
+  // because the first date might not be set start weekday.
+  var paddedActivities = [].concat(_toConsumableArray(Array.from({
+    length: differenceInCalendarDays(firstDate, firstCalendarDate)
+  }).fill(null)), _toConsumableArray(normalizedActivities));
+  var numberOfWeeks = Math.ceil(paddedActivities.length / 7);
+
+  // Finally, group activities by week
+  return Array.from({
+    length: numberOfWeeks
+  }).fill(null).map(function (_, weekIndex) {
+    return paddedActivities.slice(weekIndex * 7, weekIndex * 7 + 7);
+  });
+};
+export var getMonthLabels = function getMonthLabels(weeks) {
+  var monthNames = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : DEFAULT_MONTH_LABELS;
+  return weeks.reduce(function (labels, week, weekIndex) {
+    var firstActivity = week.filter(Boolean).find(function (activity) {
+      return activity !== undefined;
+    });
+    if (!firstActivity) {
+      throw new Error("Unexpected error: Week ".concat(weekIndex + 1, " is empty: [").concat(week, "]."));
+    }
+    var month = monthNames[getMonth(parseISO(firstActivity.date))];
+    if (!month) {
+      var monthName = new Date(firstActivity.date).toLocaleString('en-US', {
+        month: 'short'
+      });
+      throw new Error("Unexpected error: undefined month label for ".concat(monthName, "."));
+    }
+    var prevLabel = labels.at(-1);
+    if (weekIndex === 0 || !prevLabel || prevLabel.label !== month) {
+      return [].concat(_toConsumableArray(labels), [{
+        label: month,
+        weekIndex: weekIndex
+      }]);
+    }
+    return labels;
+  }, []).filter(function (_ref, index, labels) {
+    var weekIndex = _ref.weekIndex;
+    // Labels should only be shown if there is "enough" space (data).
+    // This is a naive implementation that does not take the block size,
+    // font size, etc. into account.
+    var minWeeks = 3;
+
+    // Skip the first month label if there is not enough space to the next one.
+    if (index === 0) {
+      return labels[1] && labels[1].weekIndex - weekIndex >= minWeeks;
+    }
+
+    // Skip the last month label if there is not enough data in that month
+    // to avoid overflowing the calendar on the right.
+    if (index === labels.length - 1) {
+      return weeks.slice(weekIndex).length >= minWeeks;
+    }
+    return true;
+  });
+};
+export var generateEmptyData = function generateEmptyData() {
+  var year = new Date().getFullYear();
+  var days = eachDayOfInterval({
+    end: new Date(year, 11, 31),
+    start: new Date(year, 0, 1)
+  });
+  return days.map(function (date) {
+    return {
+      count: 0,
+      date: formatISO(date, {
+        representation: 'date'
+      }),
+      level: 0
+    };
+  });
+};
+export var generateTestData = function generateTestData(args) {
+  var _args$interval;
+  var maxCount = 20;
+  var maxLevel = args.maxLevel ? Math.max(1, args.maxLevel) : 4;
+  var now = new Date();
+  var days = eachDayOfInterval((_args$interval = args.interval) !== null && _args$interval !== void 0 ? _args$interval : {
+    end: endOfYear(now),
+    start: startOfYear(now)
+  });
+  return days.map(function (date) {
+    // The random activity count is shifted by up to 80% towards zero.
+    var c = Math.round(Math.random() * maxCount - Math.random() * (0.8 * maxCount));
+    var count = Math.max(0, c);
+    var level = Math.ceil(count / maxCount * maxLevel);
+    return {
+      count: count,
+      date: formatISO(date, {
+        representation: 'date'
+      }),
+      level: level
+    };
+  });
+};
+export var maxWeekdayLabelLength = function maxWeekdayLabelLength(firstWeek, weekStart, labels, fontSize) {
+  if (isOnSeverSide) return 0;
+  if (labels.length !== 7) {
+    throw new Error('Exactly 7 labels, one for each weekday must be passed.');
+  }
+  return firstWeek.reduce(function (maxLength, _, index) {
+    if (index % 2 !== 0) {
+      var dayIndex = (index + weekStart) % 7;
+      var label = labels[dayIndex];
+      // @ts-ignore
+      var curLength = Math.ceil(calcTextDimensions(label, fontSize).width);
+      return Math.max(maxLength, curLength);
+    }
+    return maxLength;
+  }, 0);
+};

package/es/utils/index.d.ts

@@ -1,3 +1,5 @@
 import { ValueFormatter } from "../types";
 export declare const defaultValueFormatter: ValueFormatter;
 export declare const sumNumericArray: (arr: number[]) => number;
+export declare const isOnSeverSide: boolean;
+export declare const mapInputsToDeltaType: (deltaType: string, isIncreasePositive: boolean) => string;

package/es/utils/index.js

@@ -1,3 +1,4 @@
+import { DeltaTypes } from "../types";
 export var defaultValueFormatter = function defaultValueFormatter(value) {
   return value.toString();
 };
@@ -5,4 +6,29 @@ export var sumNumericArray = function sumNumericArray(arr) {
   return arr.reduce(function (prefixSum, num) {
     return prefixSum + num;
   }, 0);
+};
+export var isOnSeverSide = typeof document === 'undefined' || typeof window === 'undefined';
+export var mapInputsToDeltaType = function mapInputsToDeltaType(deltaType, isIncreasePositive) {
+  if (isIncreasePositive || deltaType === DeltaTypes.Unchanged) {
+    return deltaType;
+  }
+  switch (deltaType) {
+    case DeltaTypes.Increase:
+      {
+        return DeltaTypes.Decrease;
+      }
+    case DeltaTypes.ModerateIncrease:
+      {
+        return DeltaTypes.ModerateDecrease;
+      }
+    case DeltaTypes.Decrease:
+      {
+        return DeltaTypes.Increase;
+      }
+    case DeltaTypes.ModerateDecrease:
+      {
+        return DeltaTypes.ModerateIncrease;
+      }
+  }
+  return '';
 };

package/es/utils/theme.d.ts

@@ -0,0 +1,2 @@
+export declare function createTheme(input?: string[], size?: number): string[];
+export declare const convertAlphaToSolid: (foreground: string, background: string) => string;

package/es/utils/theme.js

@@ -0,0 +1,49 @@
+import _typeof from "@babel/runtime/helpers/esm/typeof";
+import chroma from 'chroma-js';
+var isstringScale = function isstringScale(colors, size) {
+  var invalidstring = colors.find(function (color) {
+    return !chroma.valid(color);
+  });
+  if (invalidstring) {
+    throw new Error("Invalid color \"".concat(String(invalidstring), "\" passed. All CSS color formats are accepted."));
+  }
+  return colors.length === size;
+};
+var createstringScale = function createstringScale(colors, size) {
+  return chroma.scale(colors).mode('lch').colors(size);
+};
+var validateTheme = function validateTheme(input, size) {
+  if (_typeof(input) !== 'object' || input === undefined) {
+    throw new Error("The theme object must contain at least 2 or ".concat(size, " colors respectively."));
+  }
+  if (input) {
+    var length = input.length;
+    if (length !== 2 && length !== size) {
+      throw new Error("theme must contain exactly 2 or ".concat(size, " colors, ").concat(length, " passed."));
+    }
+  }
+};
+var createDefaultTheme = function createDefaultTheme(size) {
+  return createstringScale(['hsl(0, 0%, 20%)', 'hsl(0, 0%, 92%)'], size);
+};
+export function createTheme(input) {
+  var size = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 5;
+  var defaultTheme = createDefaultTheme(size);
+  if (input) {
+    validateTheme(input, size);
+    var theme = input !== null && input !== void 0 ? input : defaultTheme;
+
+    // @ts-ignore
+    return isstringScale(theme, size) ? theme : createstringScale(theme, size);
+  }
+  return defaultTheme;
+}
+export var convertAlphaToSolid = function convertAlphaToSolid(foreground, background) {
+  var fgColor = chroma(foreground);
+  var bgColor = chroma(background);
+  var alpha = fgColor.alpha();
+  var alphaComplement = 1 - alpha;
+  var mixedColor = [fgColor.get('rgb.r') * alpha + bgColor.get('rgb.r') * alphaComplement, fgColor.get('rgb.g') * alpha + bgColor.get('rgb.g') * alphaComplement, fgColor.get('rgb.b') * alpha + bgColor.get('rgb.b') * alphaComplement];
+  var resultColor = chroma(mixedColor);
+  return resultColor.hex();
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lobehub/charts",
-  "version": "1.1.0",
+  "version": "1.3.0",
   "description": "React modern charts components built on recharts",
   "keywords": [
     "lobehub",
@@ -68,8 +68,8 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.24.8",
+    "date-fns": "^3.6.0",
     "polished": "^4.3.1",
-    "react-layout-kit": "^1.9.0",
     "recharts": "^2.12.7"
   },
   "devDependencies": {
@@ -78,6 +78,7 @@
     "@lobehub/lint": "^1.24.3",
     "@lobehub/ui": "^1.146.8",
     "@testing-library/react": "^14.3.1",
+    "@types/chroma-js": "^2.4.4",
     "@types/pangu": "^4.0.2",
     "@types/query-string": "^6.3.0",
     "@types/react": "18.2.40",
@@ -91,7 +92,7 @@
     "dumi-theme-lobehub": "^1.8.1",
     "eslint": "^8.57.0",
     "father": "4.3.1",
-    "husky": "^9.0.11",
+    "husky": "9.0.11",
     "jsdom": "^23.2.0",
     "lint-staged": "^15.2.7",
     "prettier": "^3.3.3",
@@ -109,9 +110,11 @@
     "ahooks": ">=3",
     "antd": ">=5.13.0",
     "antd-style": ">=3",
+    "chroma-js": ">=2",
     "lucide-react": ">=0.396.0",
     "react": ">=18",
-    "react-dom": ">=18"
+    "react-dom": ">=18",
+    "react-layout-kit": ">=1"
   },
   "publishConfig": {
     "access": "public",