@apipass/design-system 6.1.0 → 6.2.0

package/dist/lib/ui/components/charts/TopList/top-list-option.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"top-list-option.js","sources":["../../../../../../src/ui/components/charts/TopList/top-list-option.ts"],"sourcesContent":["import { formatShare } from \"../chart-share\";\nimport { echarts } from \"../echarts-modules\";\nimport type { ChartTheme } from \"../chart-theme\";\n\nexport interface TopListItem {\n  id: string;\n  name: string;\n  value: number | null;\n  colorToken?: string;\n}\n\nexport type TopListSort = \"desc\" | \"asc\";\n\nexport type TopListValueDisplay = \"value\" | \"percent\";\n\nexport interface TopListOptionInput {\n  items: TopListItem[];\n  sort: TopListSort;\n  total?: number;\n  valueDisplay: TopListValueDisplay[];\n  theme: ChartTheme;\n  colorsByItemId: Record<string, string>;\n  animate: boolean;\n  labeledRowStep: number;\n  valueFormatter?: (value: number) => string;\n}\n\nconst EMPTY_VALUE_TEXT: string = \"–\";\n\nconst NAME_MAX_WIDTH_PX: number = 160;\n\nconst NAME_TO_BAR_GAP_PX: number = 12;\n\nconst VALUE_COLUMN_WIDTH_PX: number = 88;\n\nconst PERCENT_COLUMN_WIDTH_PX: number = 56;\n\nconst GRID_PADDING_PX: number = 16;\n\nconst BAR_MAX_WIDTH_PX: number = 20;\n\nconst BAR_RADIUS_PX: number = 4;\n\nconst BAR_END_LABEL_DISTANCE_PX: number = 8;\n\nconst UPDATE_ANIMATION_MS: number = 800;\n\nconst LABEL_FONT_SIZE_PX: number = 12;\n\nconst MIN_LABELED_ROW_HEIGHT_PX: number = 14;\n\nconst TIE_BREAK_RELATIVE_STEP: number = 1e-9;\n\nconst RICH_TEXT_RESERVED: RegExp = /[{}|]/g;\n\nconst VALUE_SERIES_ID: string = \"top-list-values\";\n\n\nfunction valueOf(item: TopListItem): number {\n  return item.value ?? 0;\n}\n\nfunction maxValueOf(items: TopListItem[]): number {\n  const maxValue: number = Math.max(...items.map(valueOf));\n  return maxValue > 0 ? maxValue : 1;\n}\n\nfunction smallestGapBetweenDistinctValues(items: TopListItem[]): number {\n  const distinctValues: number[] = [...new Set(items.map(valueOf))].sort(\n    (first: number, second: number) => first - second,\n  );\n  const gaps: number[] = distinctValues\n    .slice(1)\n    .map((value: number, index: number) => value - distinctValues[index]);\n  return gaps.length > 0 ? Math.min(...gaps) : Infinity;\n}\n\nfunction tieBreakStepOf(items: TopListItem[]): number {\n  const relativeStep: number = maxValueOf(items) * TIE_BREAK_RELATIVE_STEP;\n  const stepThatKeepsDistinctValuesApart: number =\n    smallestGapBetweenDistinctValues(items) / (items.length + 1);\n  return Math.min(relativeStep, stepThatKeepsDistinctValuesApart);\n}\n\nfunction plottedValuesById(items: TopListItem[]): Map<string, number> {\n  const tieBreakStep: number = tieBreakStepOf(items);\n  return new Map(\n    items.map((item: TopListItem, position: number) => [\n      item.id,\n      valueOf(item) + tieBreakStep * (items.length - position),\n    ]),\n  );\n}\n\nexport function rankById(items: TopListItem[], sort: TopListSort): Map<string, number> {\n  const plottedValues: Map<string, number> = plottedValuesById(items);\n  const direction: number = sort === \"desc\" ? -1 : 1;\n  const ranked: TopListItem[] = [...items].sort(\n    (first: TopListItem, second: TopListItem) =>\n      direction * ((plottedValues.get(first.id) as number) - (plottedValues.get(second.id) as number)),\n  );\n  return new Map(ranked.map((item: TopListItem, index: number) => [item.id, index + 1]));\n}\n\nexport function resolveTotal(items: TopListItem[], total?: number): number {\n  return total ?? items.reduce((sum: number, item: TopListItem) => sum + valueOf(item), 0);\n}\n\nfunction shareOf(item: TopListItem, total: number): number {\n  return total === 0 ? 0 : valueOf(item) / total;\n}\n\nfunction escapeHtml(text: string): string {\n  return text.replace(/&/g, \"&amp;\").replace(/</g, \"&lt;\").replace(/>/g, \"&gt;\");\n}\n\nfunction plainRichText(text: string): string {\n  return text.replace(RICH_TEXT_RESERVED, \" \");\n}\n\nfunction truncatedName(name: string, theme: ChartTheme): string {\n  const font: string = `${LABEL_FONT_SIZE_PX}px ${theme.fontFamily}`;\n  return plainRichText(echarts.format.truncateText(name, NAME_MAX_WIDTH_PX, font, \"…\"));\n}\n\nfunction formatValueText(input: TopListOptionInput, value: number | null): string {\n  if (value === null) return EMPTY_VALUE_TEXT;\n  return input.valueFormatter ? input.valueFormatter(value) : String(value);\n}\n\nfunction formatShareText(item: TopListItem, total: number): string {\n  return item.value === null ? EMPTY_VALUE_TEXT : formatShare(shareOf(item, total));\n}\n\nfunction barEndLabelWidthPx(valueDisplay: TopListValueDisplay[]): number {\n  const widths: number[] = [];\n  if (valueDisplay.includes(\"value\")) widths.push(VALUE_COLUMN_WIDTH_PX);\n  if (valueDisplay.includes(\"percent\")) widths.push(PERCENT_COLUMN_WIDTH_PX);\n  if (widths.length === 0) return 0;\n  return widths.reduce((sum: number, width: number) => sum + width, 0) + BAR_END_LABEL_DISTANCE_PX;\n}\n\nfunction barEndLabelText(input: TopListOptionInput, item: TopListItem, total: number): string {\n  const parts: string[] = [];\n  if (input.valueDisplay.includes(\"value\")) {\n    parts.push(`{value|${plainRichText(formatValueText(input, item.value))}}`);\n  }\n  if (input.valueDisplay.includes(\"percent\")) {\n    parts.push(`{percent|${formatShareText(item, total)}}`);\n  }\n  return parts.join(\"\");\n}\n\nexport function labeledRowStepFor(canvasHeightPx: number, itemCount: number): number {\n  const rowHeightPx: number = (canvasHeightPx - 2 * GRID_PADDING_PX) / itemCount;\n  return Math.max(1, Math.ceil(MIN_LABELED_ROW_HEIGHT_PX / rowHeightPx));\n}\n\nfunction isRowLabeled(rank: number | undefined, step: number): boolean {\n  return rank === undefined || (rank - 1) % step === 0;\n}\n\nfunction categoryAxis(\n  input: TopListOptionInput,\n  itemsById: Map<string, TopListItem>,\n): Record<string, unknown> {\n  const { items, sort, theme } = input;\n  const ranks: Map<string, number> = rankById(items, sort);\n  const step: number = input.labeledRowStep;\n  return {\n    type: \"category\",\n    data: items.map((item: TopListItem) => item.id),\n    inverse: sort === \"desc\",\n    animationDuration: 0,\n    animationDurationUpdate: input.animate ? UPDATE_ANIMATION_MS : 0,\n    axisLine: { show: false },\n    axisTick: { show: false },\n    axisLabel: {\n      color: theme.labelColor,\n      fontSize: LABEL_FONT_SIZE_PX,\n      interval: 0,\n      align: \"right\",\n      margin: NAME_TO_BAR_GAP_PX,\n      formatter: (id: string) => {\n        if (!isRowLabeled(ranks.get(id), step)) return \"\";\n        const item: TopListItem | undefined = itemsById.get(id);\n        return item ? truncatedName(item.name, theme) : \"\";\n      },\n    },\n  };\n}\n\nfunction tooltipFormatter(\n  input: TopListOptionInput,\n  itemsById: Map<string, TopListItem>,\n  total: number,\n): (params: { name: string }) => string {\n  return (params: { name: string }) => {\n    const item: TopListItem | undefined = itemsById.get(params.name);\n    if (!item) return \"\";\n    const share: string = item.value === null ? \"\" : ` · ${formatShare(shareOf(item, total))}`;\n    const value: string = escapeHtml(formatValueText(input, item.value));\n    return `<div>${escapeHtml(item.name)}</div><div><b>${value}</b>${share}</div>`;\n  };\n}\n\nfunction barEndLabel(\n  input: TopListOptionInput,\n  itemsById: Map<string, TopListItem>,\n  total: number,\n): Record<string, unknown> {\n  const { theme } = input;\n  const ranks: Map<string, number> = rankById(input.items, input.sort);\n  const step: number = input.labeledRowStep;\n  return {\n    show: input.valueDisplay.length > 0,\n    position: \"right\",\n    distance: BAR_END_LABEL_DISTANCE_PX,\n    fontSize: LABEL_FONT_SIZE_PX,\n    formatter: (params: { name: string }) => {\n      if (!isRowLabeled(ranks.get(params.name), step)) return \"\";\n      const item: TopListItem | undefined = itemsById.get(params.name);\n      return item ? barEndLabelText(input, item, total) : \"\";\n    },\n    rich: {\n      value: { color: theme.labelColor, fontWeight: 600, padding: [0, 8, 0, 0] },\n      percent: { color: theme.labelColor },\n    },\n  };\n}\n\nexport function buildTopListOption(input: TopListOptionInput): Record<string, unknown> {\n  const { items, theme, colorsByItemId } = input;\n  const itemsById: Map<string, TopListItem> = new Map(\n    items.map((item: TopListItem) => [item.id, item]),\n  );\n  const total: number = resolveTotal(items, input.total);\n  const maxValue: number = maxValueOf(items);\n  const plottedValues: Map<string, number> = plottedValuesById(items);\n  const reservedRightPx: number = barEndLabelWidthPx(input.valueDisplay);\n  const fallbackColor: string = theme.seriesColors[0];\n  \n  return {\n    animation: true,\n    animationDuration: 0,\n    animationDurationUpdate: input.animate ? UPDATE_ANIMATION_MS : 0,\n    animationEasing: \"linear\",\n    animationEasingUpdate: \"linear\",\n    textStyle: { fontFamily: theme.fontFamily, color: theme.labelColor },\n    grid: {\n      top: GRID_PADDING_PX,\n      bottom: GRID_PADDING_PX,\n      left: GRID_PADDING_PX + NAME_MAX_WIDTH_PX + NAME_TO_BAR_GAP_PX,\n      right: GRID_PADDING_PX + reservedRightPx,\n      containLabel: false,\n    },\n    tooltip: {\n      trigger: \"item\",\n      backgroundColor: theme.tooltipBackgroundColor,\n      borderColor: theme.tooltipBorderColor,\n      textStyle: { color: theme.labelColor },\n      formatter: tooltipFormatter(input, itemsById, total),\n    },\n    xAxis: { type: \"value\", min: 0, max: maxValue, show: false },\n    yAxis: categoryAxis(input, itemsById),\n    series: [\n      {\n        id: VALUE_SERIES_ID,\n        type: \"bar\",\n        realtimeSort: true,\n        barMaxWidth: BAR_MAX_WIDTH_PX,\n        itemStyle: { borderRadius: [0, BAR_RADIUS_PX, BAR_RADIUS_PX, 0] },\n        data: items.map((item: TopListItem) => ({\n          id: item.id,\n          name: item.id,\n          value: [plottedValues.get(item.id) as number, item.id],\n          itemStyle: { color: colorsByItemId[item.id] ?? fallbackColor },\n        })),\n        encode: { x: 0, y: 1 },\n        label: barEndLabel(input, itemsById, total),\n      },\n    ],\n  };\n}\n"],"names":["EMPTY_VALUE_TEXT","NAME_MAX_WIDTH_PX","NAME_TO_BAR_GAP_PX","VALUE_COLUMN_WIDTH_PX","PERCENT_COLUMN_WIDTH_PX","GRID_PADDING_PX","BAR_MAX_WIDTH_PX","BAR_RADIUS_PX","BAR_END_LABEL_DISTANCE_PX","UPDATE_ANIMATION_MS","LABEL_FONT_SIZE_PX","MIN_LABELED_ROW_HEIGHT_PX","TIE_BREAK_RELATIVE_STEP","RICH_TEXT_RESERVED","VALUE_SERIES_ID","valueOf","item","maxValueOf","items","maxValue","smallestGapBetweenDistinctValues","distinctValues","first","second","gaps","value","index","tieBreakStepOf","relativeStep","stepThatKeepsDistinctValuesApart","plottedValuesById","tieBreakStep","position","rankById","sort","plottedValues","direction","ranked","resolveTotal","total","sum","shareOf","escapeHtml","text","plainRichText","truncatedName","name","theme","font","echarts","formatValueText","input","formatShareText","formatShare","barEndLabelWidthPx","valueDisplay","widths","width","barEndLabelText","parts","labeledRowStepFor","canvasHeightPx","itemCount","rowHeightPx","isRowLabeled","rank","step","categoryAxis","itemsById","ranks","id","tooltipFormatter","params","share","barEndLabel","buildTopListOption","colorsByItemId","reservedRightPx","fallbackColor"],"mappings":"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"}

package/dist/lib/ui/components/charts/chart-share.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=new Intl.NumberFormat(void 0,{style:"percent",maximumFractionDigits:1});function r(t){return e.format(t)}exports.formatShare=r;
+//# sourceMappingURL=chart-share.cjs.map

package/dist/lib/ui/components/charts/chart-share.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"chart-share.cjs","sources":["../../../../../src/ui/components/charts/chart-share.ts"],"sourcesContent":["const SHARE_FORMAT: Intl.NumberFormat = new Intl.NumberFormat(undefined, {\n  style: \"percent\",\n  maximumFractionDigits: 1,\n});\n\nexport function formatShare(share: number): string {\n  return SHARE_FORMAT.format(share);\n}\n"],"names":["SHARE_FORMAT","formatShare","share"],"mappings":"gFAAA,MAAMA,EAAkC,IAAI,KAAK,aAAa,OAAW,CACvE,MAAO,UACP,sBAAuB,CACzB,CAAC,EAEM,SAASC,EAAYC,EAAuB,CACjD,OAAOF,EAAa,OAAOE,CAAK,CAClC"}

package/dist/lib/ui/components/charts/chart-share.js

@@ -0,0 +1,11 @@
+const r = new Intl.NumberFormat(void 0, {
+  style: "percent",
+  maximumFractionDigits: 1
+});
+function e(t) {
+  return r.format(t);
+}
+export {
+  e as formatShare
+};
+//# sourceMappingURL=chart-share.js.map

package/dist/lib/ui/components/charts/chart-share.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"chart-share.js","sources":["../../../../../src/ui/components/charts/chart-share.ts"],"sourcesContent":["const SHARE_FORMAT: Intl.NumberFormat = new Intl.NumberFormat(undefined, {\n  style: \"percent\",\n  maximumFractionDigits: 1,\n});\n\nexport function formatShare(share: number): string {\n  return SHARE_FORMAT.format(share);\n}\n"],"names":["SHARE_FORMAT","formatShare","share"],"mappings":"AAAA,MAAMA,IAAkC,IAAI,KAAK,aAAa,QAAW;AAAA,EACvE,OAAO;AAAA,EACP,uBAAuB;AACzB,CAAC;AAEM,SAASC,EAAYC,GAAuB;AACjD,SAAOF,EAAa,OAAOE,CAAK;AAClC;"}

package/dist/types/charts.index.d.ts

@@ -4,3 +4,4 @@ export * from "./ui/components/charts/ChartColorPicker/ChartColorPicker";
 export * from "./ui/components/charts/ChartLegend/ChartLegend";
 export * from "./ui/components/charts/PieChart/PieChart";
 export * from "./ui/components/charts/TimeSeriesChart/TimeSeriesChart";
+export * from "./ui/components/charts/TopList/TopList";

package/dist/types/ui/components/charts/PieChart/pie-chart-option.d.ts

@@ -9,5 +9,4 @@ export interface PieChartOptionInput {
     theme: ChartTheme;
     valueFormatter?: (value: number) => string;
 }
-export declare function formatShare(share: number): string;
 export declare function buildPieChartOption(input: PieChartOptionInput): Record<string, unknown>;

package/dist/types/ui/components/charts/TopList/TopList.d.ts

@@ -0,0 +1,13 @@
+import { type ComponentPropsWithoutRef } from "react";
+import { type TopListItem, type TopListSort, type TopListValueDisplay } from "./top-list-option";
+import "./top-list.css";
+export type { TopListItem, TopListSort, TopListValueDisplay } from "./top-list-option";
+export type TopListProps = Omit<ComponentPropsWithoutRef<"div">, "children"> & {
+    items: TopListItem[];
+    sort?: TopListSort;
+    total?: number;
+    valueDisplay?: TopListValueDisplay[];
+    valueFormatter?: (value: number) => string;
+    colorToken?: string;
+};
+export declare function TopList({ items, sort, total, valueDisplay, valueFormatter, colorToken, className, ...props }: TopListProps): import("react/jsx-runtime").JSX.Element;

package/dist/types/ui/components/charts/TopList/top-list-option.d.ts

@@ -0,0 +1,24 @@
+import type { ChartTheme } from "../chart-theme";
+export interface TopListItem {
+    id: string;
+    name: string;
+    value: number | null;
+    colorToken?: string;
+}
+export type TopListSort = "desc" | "asc";
+export type TopListValueDisplay = "value" | "percent";
+export interface TopListOptionInput {
+    items: TopListItem[];
+    sort: TopListSort;
+    total?: number;
+    valueDisplay: TopListValueDisplay[];
+    theme: ChartTheme;
+    colorsByItemId: Record<string, string>;
+    animate: boolean;
+    labeledRowStep: number;
+    valueFormatter?: (value: number) => string;
+}
+export declare function rankById(items: TopListItem[], sort: TopListSort): Map<string, number>;
+export declare function resolveTotal(items: TopListItem[], total?: number): number;
+export declare function labeledRowStepFor(canvasHeightPx: number, itemCount: number): number;
+export declare function buildTopListOption(input: TopListOptionInput): Record<string, unknown>;

package/dist/types/ui/components/charts/chart-share.d.ts

@@ -0,0 +1 @@
+export declare function formatShare(share: number): string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@apipass/design-system",
-  "version": "6.1.0",
+  "version": "6.2.0",
   "type": "module",
   "description": "APIPass React Design System",
   "sideEffects": [