@apipass/design-system 5.0.0 → 5.2.0

package/dist/lib/ui/components/charts/BarChart/bar-chart-option.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"bar-chart-option.js","sources":["../../../../../../src/ui/components/charts/BarChart/bar-chart-option.ts"],"sourcesContent":["import type { ChartTheme } from \"../chart-theme\";\n\nexport interface BarChartPoint {\n  category: string;\n  value: number | null;\n}\n\nexport interface BarChartSeriesData {\n  id: string;\n  name: string;\n  points: BarChartPoint[];\n  // Nome de token, nunca hex: é o que mantém a cor válida nos dois temas. Sem ele a série\n  // recebe a próxima cor da paleta.\n  colorToken?: string;\n}\n\nexport type BarChartOrientation = \"vertical\" | \"horizontal\";\n\nexport type BarChartStacking = \"off\" | \"stacked\" | \"percent\";\n\nexport type BarChartValueLabel = \"auto\" | \"always\" | \"never\";\n\nexport type BarChartLegendMode = \"inline\" | \"none\";\n\nexport type BarChartAxisScale = \"linear\" | \"log\";\n\nexport interface BarChartValueAxisOptions {\n  scale?: BarChartAxisScale;\n  min?: number;\n  max?: number;\n  includeZero?: boolean;\n}\n\nexport interface BarChartOptionInput {\n  categories: string[];\n  series: BarChartSeriesData[];\n  orientation: BarChartOrientation;\n  stacking: BarChartStacking;\n  valueLabel: BarChartValueLabel;\n  legend: BarChartLegendMode;\n  valueAxis: BarChartValueAxisOptions;\n  theme: ChartTheme;\n  seriesColorOverrides: Record<string, string>;\n  valueFormatter?: (value: number) => string;\n}\n\nconst LEGEND_HEIGHT_PX: number = 32;\n\nconst GRID_WITHOUT_LEGEND = { top: 16, right: 16, bottom: 16, left: 16 } as const;\n\n// Na horizontal o rótulo da categoria disputa largura com a própria barra; na vertical ele fica\n// sob a barra e uma faixa mais estreita já dá conta.\nconst CATEGORY_LABEL_MAX_WIDTH_PX: Record<BarChartOrientation, number> = {\n  vertical: 140,\n  horizontal: 200,\n};\n\nconst BAR_MAX_WIDTH_PX: number = 48;\n\nconst STACK_ID: string = \"total\";\n\nconst PERCENT_SCALE: number = 100;\n\n// O rótulo dentro da barra é lido contra a cor da série, não contra o fundo da página: a paleta\n// de séries é a mesma nos dois temas, então quem decide entre texto claro e escuro é o\n// preenchimento. O branco que o ECharts usa por padrão reprova no contraste em toda a paleta —\n// 2,24:1 sobre a `yellow-500`.\nconst LABEL_ON_DARK_FILL: string = \"#ffffff\";\n\nconst LABEL_ON_LIGHT_FILL: string = \"#1e1e1e\";\n\nconst LABEL_ON_LIGHT_FILL_LUMINANCE: number = 0.0144;\n\nconst WHITE_LUMINANCE: number = 1;\n\nfunction channelLuminance(channel: number): number {\n  const normalized: number = channel / 255;\n  return normalized <= 0.03928\n    ? normalized / 12.92\n    : Math.pow((normalized + 0.055) / 1.055, 2.4);\n}\n\nfunction parseColorChannels(color: string): [number, number, number] | undefined {\n  const hexMatch: RegExpMatchArray | null = color\n    .trim()\n    .match(/^#([0-9a-f]{3}|[0-9a-f]{6})$/i);\n  if (hexMatch) {\n    const digits: string = hexMatch[1];\n    const expanded: string =\n      digits.length === 3\n        ? digits\n            .split(\"\")\n            .map((digit: string) => digit + digit)\n            .join(\"\")\n        : digits;\n    return [0, 2, 4].map((start: number) => parseInt(expanded.slice(start, start + 2), 16)) as [\n      number,\n      number,\n      number,\n    ];\n  }\n\n  const rgbMatch: RegExpMatchArray | null = color\n    .trim()\n    .match(/^rgba?\\(\\s*(\\d+)[\\s,]+(\\d+)[\\s,]+(\\d+)/i);\n  if (rgbMatch) {\n    return [Number(rgbMatch[1]), Number(rgbMatch[2]), Number(rgbMatch[3])];\n  }\n\n  return undefined;\n}\n\nfunction relativeLuminance(color: string): number | undefined {\n  const channels: [number, number, number] | undefined = parseColorChannels(color);\n  if (!channels) return undefined;\n  const [red, green, blue] = channels.map(channelLuminance);\n  return 0.2126 * red + 0.7152 * green + 0.0722 * blue;\n}\n\nfunction contrastRatio(lighter: number, darker: number): number {\n  return (lighter + 0.05) / (darker + 0.05);\n}\n\nfunction labelColorOnFill(fillColor: string): string {\n  const luminance: number | undefined = relativeLuminance(fillColor);\n  if (luminance === undefined) return LABEL_ON_DARK_FILL;\n  const againstLightText: number = contrastRatio(WHITE_LUMINANCE, luminance);\n  const againstDarkText: number = contrastRatio(luminance, LABEL_ON_LIGHT_FILL_LUMINANCE);\n  return againstDarkText >= againstLightText ? LABEL_ON_LIGHT_FILL : LABEL_ON_DARK_FILL;\n}\n\nconst PERCENT_LABEL: Intl.NumberFormat = new Intl.NumberFormat(undefined, {\n  style: \"percent\",\n  maximumFractionDigits: 1,\n});\n\nfunction formatPercent(value: number): string {\n  return PERCENT_LABEL.format(value / PERCENT_SCALE);\n}\n\n// Em `percent` o valor desenhado é a participação na categoria, e não mais o dado do consumidor:\n// aplicar ali o formatador dele escreveria \"31 ms\" numa barra que vale 31%.\nfunction resolveValueFormatter(input: BarChartOptionInput): ((value: number) => string) | undefined {\n  return input.stacking === \"percent\" ? formatPercent : input.valueFormatter;\n}\n\n// Categoria sem valor chega ao formatter como `null` — o ECharts formata o vazio junto com o\n// resto. O tipo público promete `number` ao consumidor, e é esta guarda que mantém a promessa.\nfunction nullSafeValueFormatter(\n  input: BarChartOptionInput,\n): ((value: number | null) => string) | undefined {\n  const formatValue: ((value: number) => string) | undefined = resolveValueFormatter(input);\n  if (!formatValue) return undefined;\n  return (value: number | null) => (value === null ? \"\" : formatValue(value));\n}\n\nfunction alignValuesToCategories(\n  data: BarChartSeriesData,\n  categories: string[],\n): Array<number | null> {\n  const valueByCategory: Map<string, number | null> = new Map(\n    data.points.map((point: BarChartPoint) => [point.category, point.value]),\n  );\n  return categories.map((category: string) => valueByCategory.get(category) ?? null);\n}\n\nfunction toShareOfCategoryTotal(\n  valuesBySeries: Array<Array<number | null>>,\n  categoryCount: number,\n): Array<Array<number | null>> {\n  const categoryTotals: number[] = Array.from(\n    { length: categoryCount },\n    (_unused, categoryIndex: number) =>\n      valuesBySeries.reduce(\n        (total: number, values: Array<number | null>) => total + (values[categoryIndex] ?? 0),\n        0,\n      ),\n  );\n  return valuesBySeries.map((values: Array<number | null>) =>\n    values.map((value: number | null, categoryIndex: number) => {\n      const categoryTotal: number = categoryTotals[categoryIndex];\n      if (value === null || categoryTotal === 0) return null;\n      return (value / categoryTotal) * PERCENT_SCALE;\n    }),\n  );\n}\n\nfunction labelPosition(input: BarChartOptionInput): string {\n  if (input.stacking !== \"off\") return \"inside\";\n  return input.orientation === \"horizontal\" ? \"right\" : \"top\";\n}\n\ninterface LabelLayoutParams {\n  rect: { width: number; height: number };\n  labelRect: { width: number; height: number };\n}\n\ninterface LabelLayout {\n  hideOverlap: boolean;\n  fontSize?: number;\n}\n\ntype SeriesLabelLayout = LabelLayout | ((params: LabelLayoutParams) => LabelLayout);\n\nfunction fitsInsideBar(params: LabelLayoutParams): boolean {\n  return (\n    params.labelRect.width <= params.rect.width && params.labelRect.height <= params.rect.height\n  );\n}\n\n// `hideOverlap` resolve rótulo que encosta em rótulo, mas não rótulo maior que a própria fatia:\n// numa barra empilhada o ECharts desenha o número por cima das fatias vizinhas. `fontSize: 0` é\n// o que o `labelLayout` oferece para sumir com um rótulo caso a caso.\nfunction seriesLabelLayout(input: BarChartOptionInput): SeriesLabelLayout {\n  const hideOverlap: boolean = input.valueLabel === \"auto\";\n  if (!hideOverlap || labelPosition(input) !== \"inside\") return { hideOverlap };\n  return (params: LabelLayoutParams) => ({\n    hideOverlap,\n    fontSize: fitsInsideBar(params) ? undefined : 0,\n  });\n}\n\nfunction seriesLabel(input: BarChartOptionInput, fillColor: string): Record<string, unknown> {\n  const position: string = labelPosition(input);\n  const formatValue: ((value: number | null) => string) | undefined = nullSafeValueFormatter(input);\n  return {\n    show: input.valueLabel !== \"never\",\n    position,\n    color: position === \"inside\" ? labelColorOnFill(fillColor) : input.theme.labelColor,\n    formatter: formatValue\n      ? (params: { value: number | null }) => formatValue(params.value)\n      : undefined,\n  };\n}\n\nfunction categoryAxis(input: BarChartOptionInput): Record<string, unknown> {\n  const { categories, theme, orientation } = input;\n  return {\n    type: \"category\",\n    data: categories,\n    // Na horizontal o ECharts empilha a categoria de baixo para cima, invertendo a ordem que o\n    // app escolheu ao ordenar as barras.\n    inverse: orientation === \"horizontal\",\n    axisLine: { lineStyle: { color: theme.axisLineColor } },\n    axisTick: { show: false },\n    axisLabel: {\n      color: theme.labelColor,\n      hideOverlap: true,\n      width: CATEGORY_LABEL_MAX_WIDTH_PX[orientation],\n      overflow: \"truncate\",\n    },\n    splitLine: { show: false },\n  };\n}\n\nfunction valueAxis(input: BarChartOptionInput): Record<string, unknown> {\n  const { valueAxis: options, stacking, theme } = input;\n  const isPercent: boolean = stacking === \"percent\";\n  const formatValue: ((value: number | null) => string) | undefined = nullSafeValueFormatter(input);\n  return {\n    type: options.scale === \"log\" ? \"log\" : \"value\",\n    // Barra mede por comprimento: eixo cortado mente sobre a proporção entre as barras, então\n    // aqui o zero entra por padrão — ao contrário da série temporal, que só mostra variação.\n    scale: !isPercent && options.includeZero === false,\n    min: isPercent ? 0 : options.min,\n    max: isPercent ? PERCENT_SCALE : options.max,\n    axisLine: { show: false },\n    axisLabel: { color: theme.labelColor, formatter: formatValue },\n    splitLine: { lineStyle: { color: theme.splitLineColor } },\n  };\n}\n\n// O retorno é `Record<string, unknown>` de propósito, e não `EChartsOption`: é o que impede\n// um tipo da biblioteca de vazar para o resto do design system.\nexport function buildBarChartOption(input: BarChartOptionInput): Record<string, unknown> {\n  const { categories, series, orientation, stacking, legend, theme } = input;\n  const isLegendVisible: boolean = legend !== \"none\" && series.length > 0;\n  const isHorizontal: boolean = orientation === \"horizontal\";\n  const formatValue: ((value: number | null) => string) | undefined = nullSafeValueFormatter(input);\n\n  const alignedValues: Array<Array<number | null>> = series.map((data: BarChartSeriesData) =>\n    alignValuesToCategories(data, categories),\n  );\n  // O ECharts não tem empilhamento 100%: a participação precisa chegar calculada no dado.\n  const plottedValues: Array<Array<number | null>> =\n    stacking === \"percent\"\n      ? toShareOfCategoryTotal(alignedValues, categories.length)\n      : alignedValues;\n\n  const labelLayout: SeriesLabelLayout = seriesLabelLayout(input);\n  const categoryAxisOption: Record<string, unknown> = categoryAxis(input);\n  const valueAxisOption: Record<string, unknown> = valueAxis(input);\n\n  return {\n    animation: false,\n    color: theme.seriesColors,\n    textStyle: { fontFamily: theme.fontFamily, color: theme.labelColor },\n    grid: {\n      ...GRID_WITHOUT_LEGEND,\n      top: isLegendVisible ? GRID_WITHOUT_LEGEND.top + LEGEND_HEIGHT_PX : GRID_WITHOUT_LEGEND.top,\n      containLabel: true,\n    },\n    legend: isLegendVisible\n      ? {\n          type: \"scroll\",\n          top: 0,\n          left: 0,\n          icon: \"roundRect\",\n          itemHeight: 8,\n          itemWidth: 12,\n          textStyle: { color: theme.labelColor },\n        }\n      : { show: false },\n    tooltip: {\n      trigger: \"axis\",\n      axisPointer: { type: \"shadow\" },\n      backgroundColor: theme.tooltipBackgroundColor,\n      borderColor: theme.tooltipBorderColor,\n      textStyle: { color: theme.labelColor },\n      valueFormatter: formatValue,\n    },\n    xAxis: isHorizontal ? valueAxisOption : categoryAxisOption,\n    yAxis: isHorizontal ? categoryAxisOption : valueAxisOption,\n    series: series.map((data: BarChartSeriesData, index: number) => {\n      const fillColor: string =\n        input.seriesColorOverrides[data.id] ??\n        theme.seriesColors[index % theme.seriesColors.length];\n      return {\n        id: data.id,\n        name: data.name,\n        type: \"bar\",\n        stack: stacking === \"off\" ? undefined : STACK_ID,\n        barMaxWidth: BAR_MAX_WIDTH_PX,\n        data: plottedValues[index],\n        itemStyle: { color: fillColor },\n        label: seriesLabel(input, fillColor),\n        labelLayout,\n      };\n    }),\n  };\n}\n"],"names":["GRID_WITHOUT_LEGEND","CATEGORY_LABEL_MAX_WIDTH_PX","BAR_MAX_WIDTH_PX","STACK_ID","PERCENT_SCALE","LABEL_ON_DARK_FILL","LABEL_ON_LIGHT_FILL","LABEL_ON_LIGHT_FILL_LUMINANCE","WHITE_LUMINANCE","channelLuminance","channel","normalized","parseColorChannels","color","hexMatch","digits","expanded","digit","start","rgbMatch","relativeLuminance","channels","red","green","blue","contrastRatio","lighter","darker","labelColorOnFill","fillColor","luminance","againstLightText","PERCENT_LABEL","formatPercent","value","resolveValueFormatter","input","nullSafeValueFormatter","formatValue","alignValuesToCategories","data","categories","valueByCategory","point","category","toShareOfCategoryTotal","valuesBySeries","categoryCount","categoryTotals","_unused","categoryIndex","total","values","categoryTotal","labelPosition","fitsInsideBar","params","seriesLabelLayout","hideOverlap","seriesLabel","position","categoryAxis","theme","orientation","valueAxis","options","stacking","isPercent","buildBarChartOption","series","legend","isLegendVisible","isHorizontal","alignedValues","plottedValues","labelLayout","categoryAxisOption","valueAxisOption","index"],"mappings":"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"}

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

@@ -1,2 +1,3 @@
+export * from "./ui/components/charts/BarChart/BarChart";
 export * from "./ui/components/charts/chart-palette";
 export * from "./ui/components/charts/TimeSeriesChart/TimeSeriesChart";

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

@@ -0,0 +1,15 @@
+import { type ComponentPropsWithoutRef } from "react";
+import { type BarChartLegendMode, type BarChartOrientation, type BarChartSeriesData, type BarChartStacking, type BarChartValueAxisOptions, type BarChartValueLabel } from "./bar-chart-option";
+import "./bar-chart.css";
+export type { BarChartAxisScale, BarChartLegendMode, BarChartOrientation, BarChartPoint, BarChartSeriesData, BarChartStacking, BarChartValueAxisOptions, BarChartValueLabel, } from "./bar-chart-option";
+export type BarChartProps = Omit<ComponentPropsWithoutRef<"div">, "children"> & {
+    categories: string[];
+    series: BarChartSeriesData[];
+    orientation?: BarChartOrientation;
+    stacking?: BarChartStacking;
+    valueLabel?: BarChartValueLabel;
+    legend?: BarChartLegendMode;
+    valueAxis?: BarChartValueAxisOptions;
+    valueFormatter?: (value: number) => string;
+};
+export declare function BarChart({ categories, series, orientation, stacking, valueLabel, legend, valueAxis, valueFormatter, className, ...props }: BarChartProps): import("react/jsx-runtime").JSX.Element;

package/dist/types/ui/components/charts/BarChart/bar-chart-option.d.ts

@@ -0,0 +1,35 @@
+import type { ChartTheme } from "../chart-theme";
+export interface BarChartPoint {
+    category: string;
+    value: number | null;
+}
+export interface BarChartSeriesData {
+    id: string;
+    name: string;
+    points: BarChartPoint[];
+    colorToken?: string;
+}
+export type BarChartOrientation = "vertical" | "horizontal";
+export type BarChartStacking = "off" | "stacked" | "percent";
+export type BarChartValueLabel = "auto" | "always" | "never";
+export type BarChartLegendMode = "inline" | "none";
+export type BarChartAxisScale = "linear" | "log";
+export interface BarChartValueAxisOptions {
+    scale?: BarChartAxisScale;
+    min?: number;
+    max?: number;
+    includeZero?: boolean;
+}
+export interface BarChartOptionInput {
+    categories: string[];
+    series: BarChartSeriesData[];
+    orientation: BarChartOrientation;
+    stacking: BarChartStacking;
+    valueLabel: BarChartValueLabel;
+    legend: BarChartLegendMode;
+    valueAxis: BarChartValueAxisOptions;
+    theme: ChartTheme;
+    seriesColorOverrides: Record<string, string>;
+    valueFormatter?: (value: number) => string;
+}
+export declare function buildBarChartOption(input: BarChartOptionInput): Record<string, unknown>;

package/package.json

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