@mlw-packages/react-components 1.9.4 → 1.9.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/dist/index.d.mts +61 -65
  2. package/dist/index.d.ts +61 -65
  3. package/dist/index.js +866 -553
  4. package/dist/index.mjs +867 -555
  5. package/package.json +1 -1
package/dist/index.js CHANGED
@@ -14346,42 +14346,6 @@ var computeYAxisTickWidth = (chartMarginLeft, yAxisLabel, axisLabelMargin, yTick
14346
14346
  const estimated = Math.max(48, Math.min(220, maxLen * 8 + 24));
14347
14347
  return estimated;
14348
14348
  };
14349
- var CustomYAxisTick = (props) => {
14350
- const { x = 0, y = 0, payload } = props;
14351
- const text = String(payload?.value || "");
14352
- const maxCharsPerLine = 20;
14353
- const words = text.split(" ");
14354
- const lines = [];
14355
- let currentLine = "";
14356
- words.forEach((word) => {
14357
- const testLine = currentLine ? `${currentLine} ${word}` : word;
14358
- if (testLine.length > maxCharsPerLine && currentLine) {
14359
- lines.push(currentLine);
14360
- currentLine = word;
14361
- } else {
14362
- currentLine = testLine;
14363
- }
14364
- });
14365
- if (currentLine) {
14366
- lines.push(currentLine);
14367
- }
14368
- const lineHeight = 12;
14369
- const totalHeight = lines.length * lineHeight;
14370
- const startY = y - totalHeight / 2 + lineHeight / 2;
14371
- return /* @__PURE__ */ jsxRuntime.jsx("g", { children: lines.map((line, index) => /* @__PURE__ */ jsxRuntime.jsx(
14372
- "text",
14373
- {
14374
- x,
14375
- y: startY + index * lineHeight,
14376
- textAnchor: "end",
14377
- fill: "hsl(var(--muted-foreground))",
14378
- fontSize: 11,
14379
- children: line
14380
- },
14381
- index
14382
- )) });
14383
- };
14384
- var CustomYAxisTick_default = CustomYAxisTick;
14385
14349
  var menuVariants = {
14386
14350
  hidden: { opacity: 0, y: -6, scale: 0.98 },
14387
14351
  visible: { opacity: 1, y: 0, scale: 1 },
@@ -16206,7 +16170,7 @@ var HorizontalLegend = ({
16206
16170
  const label = mapperConfig[key]?.label ?? labelMap?.[key] ?? formatFieldName2(key);
16207
16171
  return legendUppercase ? label.toUpperCase() : label;
16208
16172
  };
16209
- return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn(className), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-center gap-2 sm:gap-3 md:gap-4 overflow-x-auto", children: [
16173
+ return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn(className), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-left gap-2 sm:gap-3 md:gap-4 overflow-x-auto", children: [
16210
16174
  allKeys.map((key) => {
16211
16175
  const displayLabel = formatLegendLabel(key);
16212
16176
  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1.5 sm:gap-2 flex-shrink-0", children: [
@@ -17183,9 +17147,9 @@ var Chart = ({
17183
17147
  isLoading = false,
17184
17148
  timeSeries,
17185
17149
  timeSeriesLegend,
17186
- customLegend,
17187
- horizontal = false,
17188
- orderBy
17150
+ customLegend
17151
+ // horizontal removido
17152
+ // orderBy removido
17189
17153
  }) => {
17190
17154
  const { xAxisConfig, mapperConfig } = React33.useMemo(() => {
17191
17155
  return fnSmartConfig({ xAxis, data, labelMap });
@@ -17221,12 +17185,6 @@ var Chart = ({
17221
17185
  defaultEndIndex: timeSeriesConfig?.end,
17222
17186
  onRangeChange: timeSeriesConfig?.onRangeChange
17223
17187
  });
17224
- const { maxPeriodLabel, minPeriodLabel } = useChartMinMax({
17225
- processedData: data,
17226
- orderBy,
17227
- xAxisDataKey: xAxisConfig.dataKey,
17228
- categoryFormatter
17229
- });
17230
17188
  const processedData = React33.useMemo(() => {
17231
17189
  const mapped = data.map((item) => ({
17232
17190
  ...item,
@@ -17236,23 +17194,8 @@ var Chart = ({
17236
17194
  if (timeSeriesConfig) {
17237
17195
  result = mapped.slice(startIndex, endIndex + 1);
17238
17196
  }
17239
- if (orderBy && horizontal) {
17240
- result = [...result].sort((a, b) => {
17241
- const valueA = Number(a[orderBy]) || 0;
17242
- const valueB = Number(b[orderBy]) || 0;
17243
- return valueB - valueA;
17244
- });
17245
- }
17246
17197
  return result;
17247
- }, [
17248
- data,
17249
- xAxisConfig.dataKey,
17250
- timeSeriesConfig,
17251
- startIndex,
17252
- endIndex,
17253
- orderBy,
17254
- horizontal
17255
- ]);
17198
+ }, [data, xAxisConfig.dataKey, timeSeriesConfig, startIndex, endIndex]);
17256
17199
  const seriesOrder = filtersOrder(mapperConfig, series);
17257
17200
  const allKeys = seriesOrder.map((s) => s.key).filter(Boolean);
17258
17201
  const finalColors = React33.useMemo(
@@ -17348,10 +17291,6 @@ var Chart = ({
17348
17291
  const finalChartRightMargin = chartMargin?.right ?? (rightKeys.length > 0 ? AXIS_LABEL_MARGIN : 30);
17349
17292
  const finalChartLeftMargin = chartMargin?.left ?? (yAxisLabel ? AXIS_LABEL_MARGIN : 0);
17350
17293
  const yAxisTickWidth = React33.useMemo(() => {
17351
- if (horizontal) {
17352
- if (typeof chartMargin?.left === "number") return chartMargin.left;
17353
- return 130;
17354
- }
17355
17294
  return computeYAxisTickWidth(
17356
17295
  chartMargin?.left,
17357
17296
  yAxisLabel,
@@ -17361,7 +17300,6 @@ var Chart = ({
17361
17300
  niceMaxLeft
17362
17301
  );
17363
17302
  }, [
17364
- horizontal,
17365
17303
  chartMargin?.left,
17366
17304
  yAxisLabel,
17367
17305
  yTickFormatter,
@@ -17447,7 +17385,7 @@ var Chart = ({
17447
17385
  ] }) })
17448
17386
  ] });
17449
17387
  }
17450
- return /* @__PURE__ */ jsxRuntime.jsx(
17388
+ return /* @__PURE__ */ jsxRuntime.jsxs(
17451
17389
  "div",
17452
17390
  {
17453
17391
  ref: wrapperRef,
@@ -17455,513 +17393,400 @@ var Chart = ({
17455
17393
  "w-full overflow-hidden min-w-0 rounded-lg border-border",
17456
17394
  className
17457
17395
  ),
17458
- children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "rounded-lg bg-card relative w-full max-w-full min-w-0 py-1", children: [
17459
- title && /* @__PURE__ */ jsxRuntime.jsx(
17460
- "div",
17461
- {
17462
- className: cn(
17463
- "w-full flex items-center mt-3 mb-2",
17464
- HORIZONTAL_PADDING_CLASS,
17465
- titlePosition === "center" && "justify-center",
17466
- titlePosition === "right" && "justify-end",
17467
- titlePosition === "left" && "justify-start"
17468
- ),
17469
- children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-[1.4rem] font-semibold text-foreground", children: title })
17470
- }
17471
- ),
17472
- customLegend && !!data.length && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("px-6 mb-2", HORIZONTAL_PADDING_CLASS), children: /* @__PURE__ */ jsxRuntime.jsx(
17473
- ChartTotalLegend_default,
17474
- {
17475
- items: allKeys.map((key) => {
17476
- const values = processedData.map(
17477
- (d) => Number(d[key] || 0)
17478
- );
17479
- const total = values.reduce((a, b) => a + b, 0);
17480
- const first = values[0] || 0;
17481
- const last = values[values.length - 1] || 0;
17482
- const trendValue = first !== 0 ? Math.round((last - first) / first * 100) : 0;
17483
- const formattedTotal = finalValueFormatter ? finalValueFormatter({
17484
- value: total,
17485
- formattedValue: String(total)
17486
- }) : new Intl.NumberFormat(formatBR ? "pt-BR" : "en-US").format(
17487
- total
17488
- );
17489
- return {
17490
- label: mapperConfig[key]?.label || key,
17491
- value: formattedTotal,
17492
- color: finalColors[key],
17493
- trend: {
17494
- value: Math.abs(trendValue),
17495
- positive: trendValue >= 0,
17496
- neutral: trendValue === 0
17497
- }
17498
- };
17499
- })
17500
- }
17501
- ) }),
17502
- allKeys.length > 0 && (enableHighlights || enableShowOnly) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex items-center gap-2", teste), children: [
17503
- enableHighlights && /* @__PURE__ */ jsxRuntime.jsx(
17504
- Highlights_default,
17505
- {
17506
- allKeys,
17507
- mapperConfig,
17508
- finalColors,
17509
- highlightedSeries,
17510
- toggleHighlight,
17511
- containerWidth: chartInnerWidth
17512
- }
17513
- ),
17514
- enableShowOnly && /* @__PURE__ */ jsxRuntime.jsx(
17515
- ShowOnly_default,
17396
+ children: [
17397
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "rounded-lg bg-card relative w-full max-w-full min-w-0 py-1", children: [
17398
+ title && /* @__PURE__ */ jsxRuntime.jsx(
17399
+ "div",
17516
17400
  {
17517
- showOnlyHighlighted,
17518
- setShowOnlyHighlighted,
17519
- highlightedSeriesSize: highlightedSeries.size,
17520
- clearHighlights
17401
+ className: cn(
17402
+ "w-full flex items-center mt-3 mb-2",
17403
+ HORIZONTAL_PADDING_CLASS,
17404
+ titlePosition === "center" && "justify-center",
17405
+ titlePosition === "right" && "justify-end",
17406
+ titlePosition === "left" && "justify-start"
17407
+ ),
17408
+ children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-[1.4rem] font-semibold text-foreground", children: title })
17521
17409
  }
17522
17410
  ),
17523
- enablePeriodsDropdown && enableDraggableTooltips && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ml-auto flex items-center", children: /* @__PURE__ */ jsxRuntime.jsx(
17524
- PeriodsDropdown_default,
17411
+ customLegend && !!data.length && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("px-6 mb-2", HORIZONTAL_PADDING_CLASS), children: /* @__PURE__ */ jsxRuntime.jsx(
17412
+ ChartTotalLegend_default,
17525
17413
  {
17526
- processedData,
17527
- onOpenPeriod: openTooltipForPeriod,
17528
- rightOffset: finalChartRightMargin,
17529
- activePeriods
17414
+ items: allKeys.map((key) => {
17415
+ const values = processedData.map(
17416
+ (d) => Number(d[key] || 0)
17417
+ );
17418
+ const total = values.reduce((a, b) => a + b, 0);
17419
+ const first = values[0] || 0;
17420
+ const last = values[values.length - 1] || 0;
17421
+ const trendValue = first !== 0 ? Math.round((last - first) / first * 100) : 0;
17422
+ const formattedTotal = finalValueFormatter ? finalValueFormatter({
17423
+ value: total,
17424
+ formattedValue: String(total)
17425
+ }) : new Intl.NumberFormat(formatBR ? "pt-BR" : "en-US").format(
17426
+ total
17427
+ );
17428
+ return {
17429
+ label: mapperConfig[key]?.label || key,
17430
+ value: formattedTotal,
17431
+ color: finalColors[key],
17432
+ trend: {
17433
+ value: Math.abs(trendValue),
17434
+ positive: trendValue >= 0,
17435
+ neutral: trendValue === 0
17436
+ }
17437
+ };
17438
+ })
17530
17439
  }
17531
- ) })
17532
- ] }),
17533
- !(allKeys.length > 0 && (enableHighlights || enableShowOnly)) && enablePeriodsDropdown && enableDraggableTooltips && /* @__PURE__ */ jsxRuntime.jsx(
17534
- "div",
17535
- {
17536
- className: cn(
17537
- "w-full flex justify-end mb-2",
17538
- HORIZONTAL_PADDING_CLASS
17440
+ ) }),
17441
+ allKeys.length > 0 && (enableHighlights || enableShowOnly) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex items-center gap-2", teste), children: [
17442
+ enableHighlights && /* @__PURE__ */ jsxRuntime.jsx(
17443
+ Highlights_default,
17444
+ {
17445
+ allKeys,
17446
+ mapperConfig,
17447
+ finalColors,
17448
+ highlightedSeries,
17449
+ toggleHighlight,
17450
+ containerWidth: chartInnerWidth
17451
+ }
17539
17452
  ),
17540
- style: {
17541
- paddingRight: `${finalChartRightMargin}px`,
17542
- maxWidth: `${chartInnerWidth}px`
17543
- },
17544
- children: /* @__PURE__ */ jsxRuntime.jsx(
17453
+ enableShowOnly && /* @__PURE__ */ jsxRuntime.jsx(
17454
+ ShowOnly_default,
17455
+ {
17456
+ showOnlyHighlighted,
17457
+ setShowOnlyHighlighted,
17458
+ highlightedSeriesSize: highlightedSeries.size,
17459
+ clearHighlights
17460
+ }
17461
+ ),
17462
+ enablePeriodsDropdown && enableDraggableTooltips && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ml-auto flex items-center", children: /* @__PURE__ */ jsxRuntime.jsx(
17545
17463
  PeriodsDropdown_default,
17546
17464
  {
17547
17465
  processedData,
17548
17466
  onOpenPeriod: openTooltipForPeriod,
17549
- rightOffset: finalChartRightMargin
17467
+ rightOffset: finalChartRightMargin,
17468
+ activePeriods
17550
17469
  }
17551
- )
17552
- }
17553
- ),
17554
- showLegend && horizontal && /* @__PURE__ */ jsxRuntime.jsx(
17555
- HorizontalLegend_default,
17556
- {
17557
- allKeys,
17558
- mapperConfig,
17559
- finalColors,
17560
- labelMap,
17561
- legendUppercase,
17562
- orderBy,
17563
- maxPeriodLabel,
17564
- minPeriodLabel,
17565
- className: cn(HORIZONTAL_PADDING_CLASS)
17566
- }
17567
- ),
17568
- /* @__PURE__ */ jsxRuntime.jsx(
17569
- "div",
17570
- {
17571
- className: cn(
17572
- horizontal && "overflow-y-auto overflow-x-hidden px-6",
17573
- horizontal && "scrollbar-thin scrollbar-thumb-muted scrollbar-track-transparent"
17574
- ),
17575
- style: {
17576
- maxHeight: horizontal ? height : void 0
17577
- },
17578
- children: /* @__PURE__ */ jsxRuntime.jsx(
17579
- recharts.ResponsiveContainer,
17580
- {
17581
- width: "100%",
17582
- height: horizontal ? Math.max(height, processedData.length * 50) : height,
17583
- children: /* @__PURE__ */ jsxRuntime.jsxs(
17584
- recharts.ComposedChart,
17470
+ ) })
17471
+ ] }),
17472
+ !(allKeys.length > 0 && (enableHighlights || enableShowOnly)) && enablePeriodsDropdown && enableDraggableTooltips && /* @__PURE__ */ jsxRuntime.jsx(
17473
+ "div",
17474
+ {
17475
+ className: cn(
17476
+ "w-full flex justify-end mb-2",
17477
+ HORIZONTAL_PADDING_CLASS
17478
+ ),
17479
+ style: {
17480
+ paddingRight: `${finalChartRightMargin}px`,
17481
+ maxWidth: `${chartInnerWidth}px`
17482
+ },
17483
+ children: /* @__PURE__ */ jsxRuntime.jsx(
17484
+ PeriodsDropdown_default,
17485
+ {
17486
+ processedData,
17487
+ onOpenPeriod: openTooltipForPeriod,
17488
+ rightOffset: finalChartRightMargin
17489
+ }
17490
+ )
17491
+ }
17492
+ ),
17493
+ /* @__PURE__ */ jsxRuntime.jsx(recharts.ResponsiveContainer, { width: "100%", height, children: /* @__PURE__ */ jsxRuntime.jsxs(
17494
+ recharts.ComposedChart,
17495
+ {
17496
+ data: processedData,
17497
+ height,
17498
+ margin: {
17499
+ top: 10,
17500
+ right: finalChartRightMargin,
17501
+ left: finalChartLeftMargin,
17502
+ bottom: 10
17503
+ },
17504
+ onClick: handleChartClick,
17505
+ children: [
17506
+ /* @__PURE__ */ jsxRuntime.jsx("defs", { children: seriesOrder.filter((s) => s.type === "area").map((s) => {
17507
+ const key = s.key;
17508
+ const color = finalColors[key];
17509
+ return /* @__PURE__ */ jsxRuntime.jsxs(
17510
+ "linearGradient",
17511
+ {
17512
+ id: `gradient-${key}`,
17513
+ x1: "0",
17514
+ y1: "0",
17515
+ x2: "0",
17516
+ y2: "0.8",
17517
+ children: [
17518
+ /* @__PURE__ */ jsxRuntime.jsx("stop", { offset: "0%", stopColor: color, stopOpacity: 0.8 }),
17519
+ /* @__PURE__ */ jsxRuntime.jsx("stop", { offset: "90%", stopColor: color, stopOpacity: 0.1 })
17520
+ ]
17521
+ },
17522
+ `gradient-${key}`
17523
+ );
17524
+ }) }),
17525
+ showGrid && /* @__PURE__ */ jsxRuntime.jsx(
17526
+ recharts.CartesianGrid,
17527
+ {
17528
+ strokeDasharray: "3 3",
17529
+ stroke: gridColor || "hsl(var(--muted-foreground))",
17530
+ opacity: 0.5
17531
+ }
17532
+ ),
17533
+ /* @__PURE__ */ jsxRuntime.jsx(
17534
+ recharts.XAxis,
17585
17535
  {
17586
- data: processedData,
17587
- height: horizontal ? Math.max(height, processedData.length * 50) : height,
17588
- layout: horizontal ? "vertical" : "horizontal",
17589
- margin: {
17590
- top: 10,
17591
- right: finalChartRightMargin,
17592
- left: finalChartLeftMargin,
17593
- bottom: 10
17536
+ dataKey: xAxisConfig.dataKey,
17537
+ stroke: "hsl(var(--muted-foreground))",
17538
+ fontSize: 12,
17539
+ tickLine: false,
17540
+ axisLine: false,
17541
+ tickFormatter: (value) => {
17542
+ if (categoryFormatter)
17543
+ return categoryFormatter(value);
17544
+ if (xAxisConfig.valueFormatter)
17545
+ return xAxisConfig.valueFormatter(value);
17546
+ return String(value ?? "");
17594
17547
  },
17595
- onClick: handleChartClick,
17596
- children: [
17597
- /* @__PURE__ */ jsxRuntime.jsx("defs", { children: seriesOrder.filter((s) => s.type === "area").map((s) => {
17598
- const key = s.key;
17599
- const color = finalColors[key];
17600
- return /* @__PURE__ */ jsxRuntime.jsxs(
17601
- "linearGradient",
17602
- {
17603
- id: `gradient-${key}`,
17604
- x1: "0",
17605
- y1: "0",
17606
- x2: "0",
17607
- y2: "0.8",
17608
- children: [
17609
- /* @__PURE__ */ jsxRuntime.jsx("stop", { offset: "0%", stopColor: color, stopOpacity: 0.8 }),
17610
- /* @__PURE__ */ jsxRuntime.jsx(
17611
- "stop",
17612
- {
17613
- offset: "90%",
17614
- stopColor: color,
17615
- stopOpacity: 0.1
17616
- }
17617
- )
17618
- ]
17619
- },
17620
- `gradient-${key}`
17621
- );
17622
- }) }),
17623
- showGrid && /* @__PURE__ */ jsxRuntime.jsx(
17624
- recharts.CartesianGrid,
17625
- {
17626
- strokeDasharray: "3 3",
17627
- stroke: gridColor || "hsl(var(--muted-foreground))",
17628
- opacity: 0.5
17548
+ label: xAxisLabel ? {
17549
+ value: xAxisLabel,
17550
+ position: "insideBottomRight",
17551
+ offset: -5,
17552
+ style: {
17553
+ fontSize: 12,
17554
+ fill: "hsl(var(--muted-foreground))",
17555
+ fontWeight: 500
17556
+ }
17557
+ } : void 0
17558
+ }
17559
+ ),
17560
+ /* @__PURE__ */ jsxRuntime.jsx(
17561
+ recharts.YAxis,
17562
+ {
17563
+ yAxisId: "left",
17564
+ width: yAxisTickWidth,
17565
+ stroke: "hsl(var(--muted-foreground))",
17566
+ fontSize: 12,
17567
+ tickLine: false,
17568
+ axisLine: false,
17569
+ tickFormatter: yTickFormatter,
17570
+ domain: [Math.min(minLeftDataValue, 0), niceMaxLeft],
17571
+ tickCount: 6,
17572
+ label: yAxisLabel ? {
17573
+ value: yAxisLabel,
17574
+ angle: -90,
17575
+ position: "left",
17576
+ dx: leftYAxisLabelDx,
17577
+ style: {
17578
+ fontSize: 12,
17579
+ fill: "hsl(var(--muted-foreground))",
17580
+ fontWeight: 500,
17581
+ textAnchor: "middle"
17582
+ }
17583
+ } : void 0
17584
+ }
17585
+ ),
17586
+ rightKeys.length > 0 && (() => {
17587
+ const { rightAxisColor, rightTickFormatter } = fnConfigRightKeys(
17588
+ biaxialConfigNormalized,
17589
+ yTickFormatter,
17590
+ finalColors
17591
+ );
17592
+ return /* @__PURE__ */ jsxRuntime.jsx(
17593
+ recharts.YAxis,
17594
+ {
17595
+ yAxisId: "right",
17596
+ width: finalChartRightMargin,
17597
+ orientation: "right",
17598
+ stroke: "hsl(var(--muted-foreground))",
17599
+ fontSize: 12,
17600
+ tickLine: false,
17601
+ axisLine: false,
17602
+ tick: { fill: rightAxisColor },
17603
+ tickFormatter: rightTickFormatter,
17604
+ domain: [Math.min(minRightDataValue, 0), niceMaxRight],
17605
+ tickCount: 6,
17606
+ label: biaxialConfigNormalized?.label ? {
17607
+ value: biaxialConfigNormalized.label,
17608
+ angle: -90,
17609
+ position: "right",
17610
+ dx: rightYAxisLabelDx,
17611
+ style: {
17612
+ fontSize: 12,
17613
+ fill: "hsl(var(--muted-foreground))",
17614
+ fontWeight: 500,
17615
+ textAnchor: "middle"
17629
17616
  }
17630
- ),
17631
- horizontal ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
17632
- /* @__PURE__ */ jsxRuntime.jsx(
17633
- recharts.XAxis,
17617
+ } : void 0
17618
+ }
17619
+ );
17620
+ })(),
17621
+ showTooltip && /* @__PURE__ */ jsxRuntime.jsx(
17622
+ recharts.Tooltip,
17623
+ {
17624
+ content: showTooltipTotal ? /* @__PURE__ */ jsxRuntime.jsx(
17625
+ TooltipWithTotal_default,
17626
+ {
17627
+ finalColors,
17628
+ valueFormatter: finalValueFormatter,
17629
+ categoryFormatter,
17630
+ periodLabel
17631
+ }
17632
+ ) : /* @__PURE__ */ jsxRuntime.jsx(
17633
+ TooltipSimple_default,
17634
+ {
17635
+ finalColors,
17636
+ valueFormatter: finalValueFormatter,
17637
+ categoryFormatter,
17638
+ periodLabel
17639
+ }
17640
+ ),
17641
+ cursor: { fill: "hsl(var(--muted))", opacity: 0.1 }
17642
+ }
17643
+ ),
17644
+ showLegend && /* @__PURE__ */ jsxRuntime.jsx(
17645
+ recharts.Legend,
17646
+ {
17647
+ iconSize: 12,
17648
+ formatter: (value) => {
17649
+ return /* @__PURE__ */ jsxRuntime.jsx("span", { className: "tracking-[0] rounded-sm", children: fnFormatterValueLegend(
17650
+ value,
17651
+ mapperConfig,
17652
+ labelMap,
17653
+ legendUppercase
17654
+ ) });
17655
+ }
17656
+ }
17657
+ ),
17658
+ seriesOrder.map((s) => {
17659
+ if (showOnlyHighlighted && !highlightedSeries.has(s.key))
17660
+ return null;
17661
+ const { label, color, key } = fnBuildConfigData(
17662
+ s,
17663
+ mapperConfig,
17664
+ labelMap,
17665
+ finalColors,
17666
+ rightKeys,
17667
+ biaxialConfigNormalized
17668
+ );
17669
+ if (s.type === "bar") {
17670
+ return /* @__PURE__ */ jsxRuntime.jsx(
17671
+ recharts.Bar,
17672
+ {
17673
+ dataKey: key,
17674
+ yAxisId: rightKeys.includes(key) ? "right" : "left",
17675
+ name: label,
17676
+ fill: color,
17677
+ radius: [4, 4, 0, 0],
17678
+ onClick: handleBarClick,
17679
+ className: "cursor-pointer",
17680
+ style: { opacity: getSeriesOpacity(key) },
17681
+ activeBar: /* @__PURE__ */ jsxRuntime.jsx(
17682
+ recharts.Rectangle,
17634
17683
  {
17635
- type: "number",
17636
- orientation: "top",
17637
- stroke: "hsl(var(--muted-foreground))",
17638
- fontSize: 12,
17639
- tickLine: false,
17640
- axisLine: false,
17641
- tickFormatter: yTickFormatter,
17642
- domain: [Math.min(minLeftDataValue, 0), niceMaxLeft],
17643
- tickCount: 6,
17644
- label: yAxisLabel ? {
17645
- value: yAxisLabel,
17646
- position: "insideTopRight",
17647
- offset: -5,
17648
- style: {
17649
- fontSize: 12,
17650
- fill: "hsl(var(--muted-foreground))",
17651
- fontWeight: 500
17652
- }
17653
- } : void 0
17684
+ fill: color,
17685
+ stroke: color,
17686
+ strokeWidth: 2,
17687
+ opacity: 0.8
17654
17688
  }
17655
17689
  ),
17656
- /* @__PURE__ */ jsxRuntime.jsx(
17657
- recharts.YAxis,
17690
+ children: showLabels && labelsVisibility.bar !== false && highlightedSeries.size === 0 || highlightedSeries.has(key) ? /* @__PURE__ */ jsxRuntime.jsx(
17691
+ recharts.LabelList,
17658
17692
  {
17659
- type: "category",
17660
- dataKey: xAxisConfig.dataKey,
17661
- yAxisId: "left",
17662
- width: yAxisTickWidth,
17663
- stroke: "hsl(var(--muted-foreground))",
17664
- fontSize: 11,
17665
- tickLine: false,
17666
- axisLine: false,
17667
- tick: /* @__PURE__ */ jsxRuntime.jsx(CustomYAxisTick_default, { width: yAxisTickWidth - 10 }),
17668
- tickFormatter: (value) => {
17669
- if (categoryFormatter)
17670
- return categoryFormatter(value);
17671
- if (xAxisConfig.valueFormatter)
17672
- return xAxisConfig.valueFormatter(
17673
- value
17674
- );
17675
- return String(value ?? "");
17693
+ dataKey: key,
17694
+ content: (props) => {
17695
+ if (!fnContentLabelList(props)) return null;
17696
+ const inside = renderInsideBarLabel(
17697
+ color,
17698
+ finalValueFormatter
17699
+ );
17700
+ return inside(props);
17676
17701
  },
17677
- label: xAxisLabel ? {
17678
- value: xAxisLabel,
17679
- angle: -90,
17680
- position: "insideTop",
17681
- dx: leftYAxisLabelDx,
17682
- style: {
17683
- fontSize: 12,
17684
- fill: "hsl(var(--muted-foreground))",
17685
- fontWeight: 500,
17686
- textAnchor: "middle"
17687
- }
17688
- } : void 0
17702
+ offset: 0
17689
17703
  }
17690
- )
17691
- ] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
17692
- /* @__PURE__ */ jsxRuntime.jsx(
17693
- recharts.XAxis,
17704
+ ) : null
17705
+ },
17706
+ `bar-${key}`
17707
+ );
17708
+ }
17709
+ if (s.type === "line") {
17710
+ const lineFormatter = (props) => {
17711
+ const numValue = typeof props.value === "number" ? props.value : typeof props.value === "string" ? parseFloat(props.value) : 0;
17712
+ const percentage = calcDivision(numValue, 100);
17713
+ const formattedPercentage = typeof percentage === "number" ? percentage.toFixed(1).replace(".", ",") : String(percentage).replace(".", ",");
17714
+ return `${formattedPercentage}%`;
17715
+ };
17716
+ return /* @__PURE__ */ jsxRuntime.jsx(
17717
+ recharts.Line,
17718
+ {
17719
+ dataKey: key,
17720
+ yAxisId: rightKeys.includes(key) ? "right" : "left",
17721
+ name: label,
17722
+ stroke: color,
17723
+ strokeWidth: 2,
17724
+ dot: { r: 3 },
17725
+ activeDot: { r: 6 },
17726
+ onClick: handleSeriesClick,
17727
+ className: "cursor-pointer pointer-events-auto",
17728
+ style: { opacity: getSeriesOpacity(key) },
17729
+ children: showLabels && labelsVisibility.line !== false && highlightedSeries.size === 0 || highlightedSeries.has(key) ? /* @__PURE__ */ jsxRuntime.jsx(
17730
+ recharts.LabelList,
17694
17731
  {
17695
- dataKey: xAxisConfig.dataKey,
17696
- stroke: "hsl(var(--muted-foreground))",
17697
- fontSize: 12,
17698
- tickLine: false,
17699
- axisLine: false,
17700
- tickFormatter: (value) => {
17701
- if (categoryFormatter)
17702
- return categoryFormatter(value);
17703
- if (xAxisConfig.valueFormatter)
17704
- return xAxisConfig.valueFormatter(
17705
- value
17706
- );
17707
- return String(value ?? "");
17708
- },
17709
- label: xAxisLabel ? {
17710
- value: xAxisLabel,
17711
- position: "insideBottomRight",
17712
- offset: -5,
17713
- style: {
17714
- fontSize: 12,
17715
- fill: "hsl(var(--muted-foreground))",
17716
- fontWeight: 500
17717
- }
17718
- } : void 0
17732
+ dataKey: key,
17733
+ position: "top",
17734
+ content: pillLabelRenderer_default(
17735
+ color,
17736
+ "filled",
17737
+ lineFormatter
17738
+ ),
17739
+ offset: 14
17719
17740
  }
17720
- ),
17721
- /* @__PURE__ */ jsxRuntime.jsx(
17722
- recharts.YAxis,
17741
+ ) : null
17742
+ },
17743
+ `line-${key}`
17744
+ );
17745
+ }
17746
+ if (s.type === "area") {
17747
+ return /* @__PURE__ */ jsxRuntime.jsx(
17748
+ recharts.Area,
17749
+ {
17750
+ type: "monotone",
17751
+ dataKey: key,
17752
+ yAxisId: rightKeys.includes(key) ? "right" : "left",
17753
+ name: label,
17754
+ stroke: color,
17755
+ fill: `url(#gradient-${key})`,
17756
+ fillOpacity: 1,
17757
+ strokeWidth: 2,
17758
+ onClick: handleSeriesClick,
17759
+ className: "cursor-pointer pointer-events-auto",
17760
+ style: { opacity: getSeriesOpacity(key) },
17761
+ activeDot: {
17762
+ r: 6,
17763
+ fill: color,
17764
+ stroke: "hsl(var(--background))",
17765
+ strokeWidth: 2
17766
+ },
17767
+ children: showLabels && labelsVisibility.area !== false && highlightedSeries.size === 0 || highlightedSeries.has(key) ? /* @__PURE__ */ jsxRuntime.jsx(
17768
+ recharts.LabelList,
17723
17769
  {
17724
- yAxisId: "left",
17725
- width: yAxisTickWidth,
17726
- stroke: "hsl(var(--muted-foreground))",
17727
- fontSize: 12,
17728
- tickLine: false,
17729
- axisLine: false,
17730
- tickFormatter: yTickFormatter,
17731
- domain: [Math.min(minLeftDataValue, 0), niceMaxLeft],
17732
- tickCount: 6,
17733
- label: yAxisLabel ? {
17734
- value: yAxisLabel,
17735
- angle: -90,
17736
- position: "left",
17737
- dx: leftYAxisLabelDx,
17738
- style: {
17739
- fontSize: 12,
17740
- fill: "hsl(var(--muted-foreground))",
17741
- fontWeight: 500,
17742
- textAnchor: "middle"
17743
- }
17744
- } : void 0
17770
+ dataKey: key,
17771
+ position: "top",
17772
+ content: pillLabelRenderer_default(
17773
+ color,
17774
+ "soft",
17775
+ finalValueFormatter
17776
+ ),
17777
+ offset: 12
17745
17778
  }
17746
- )
17747
- ] }),
17748
- minLeftDataValue < 0 && /* @__PURE__ */ jsxRuntime.jsx(
17749
- recharts.ReferenceLine,
17750
- {
17751
- y: 0,
17752
- yAxisId: "left",
17753
- stroke: "hsl(var(--muted-foreground))",
17754
- strokeWidth: 1,
17755
- strokeDasharray: "4 4"
17756
- }
17757
- ),
17758
- rightKeys.length > 0 && (() => {
17759
- const { rightAxisColor, rightTickFormatter } = fnConfigRightKeys(
17760
- biaxialConfigNormalized,
17761
- yTickFormatter,
17762
- finalColors
17763
- );
17764
- return /* @__PURE__ */ jsxRuntime.jsx(
17765
- recharts.YAxis,
17766
- {
17767
- yAxisId: "right",
17768
- width: finalChartRightMargin,
17769
- orientation: "right",
17770
- stroke: "hsl(var(--muted-foreground))",
17771
- fontSize: 12,
17772
- tickLine: false,
17773
- axisLine: false,
17774
- tick: { fill: rightAxisColor },
17775
- tickFormatter: rightTickFormatter,
17776
- domain: [Math.min(minRightDataValue, 0), niceMaxRight],
17777
- tickCount: 6,
17778
- label: biaxialConfigNormalized?.label ? {
17779
- value: biaxialConfigNormalized.label,
17780
- angle: -90,
17781
- position: "right",
17782
- dx: rightYAxisLabelDx,
17783
- style: {
17784
- fontSize: 12,
17785
- fill: "hsl(var(--muted-foreground))",
17786
- fontWeight: 500,
17787
- textAnchor: "middle"
17788
- }
17789
- } : void 0
17790
- }
17791
- );
17792
- })(),
17793
- showTooltip && /* @__PURE__ */ jsxRuntime.jsx(
17794
- recharts.Tooltip,
17795
- {
17796
- content: showTooltipTotal ? /* @__PURE__ */ jsxRuntime.jsx(
17797
- TooltipWithTotal_default,
17798
- {
17799
- finalColors,
17800
- valueFormatter: finalValueFormatter,
17801
- categoryFormatter,
17802
- periodLabel
17803
- }
17804
- ) : /* @__PURE__ */ jsxRuntime.jsx(
17805
- TooltipSimple_default,
17806
- {
17807
- finalColors,
17808
- valueFormatter: finalValueFormatter,
17809
- categoryFormatter,
17810
- periodLabel
17811
- }
17812
- ),
17813
- cursor: { fill: "hsl(var(--muted))", opacity: 0.1 }
17814
- }
17815
- ),
17816
- showLegend && !horizontal && /* @__PURE__ */ jsxRuntime.jsx(
17817
- recharts.Legend,
17818
- {
17819
- iconSize: 12,
17820
- formatter: (value) => {
17821
- return /* @__PURE__ */ jsxRuntime.jsx("span", { className: "tracking-[0] rounded-sm", children: fnFormatterValueLegend(
17822
- value,
17823
- mapperConfig,
17824
- labelMap,
17825
- legendUppercase
17826
- ) });
17827
- }
17828
- }
17829
- ),
17830
- seriesOrder.map((s) => {
17831
- if (showOnlyHighlighted && !highlightedSeries.has(s.key))
17832
- return null;
17833
- const { label, color, key } = fnBuildConfigData(
17834
- s,
17835
- mapperConfig,
17836
- labelMap,
17837
- finalColors,
17838
- rightKeys,
17839
- biaxialConfigNormalized
17840
- );
17841
- if (s.type === "bar") {
17842
- return /* @__PURE__ */ jsxRuntime.jsx(
17843
- recharts.Bar,
17844
- {
17845
- dataKey: key,
17846
- yAxisId: rightKeys.includes(key) ? "right" : "left",
17847
- name: label,
17848
- fill: color,
17849
- radius: horizontal ? [0, 4, 4, 0] : [4, 4, 0, 0],
17850
- onClick: handleBarClick,
17851
- className: "cursor-pointer",
17852
- style: { opacity: getSeriesOpacity(key) },
17853
- activeBar: /* @__PURE__ */ jsxRuntime.jsx(
17854
- recharts.Rectangle,
17855
- {
17856
- fill: color,
17857
- stroke: color,
17858
- strokeWidth: 2,
17859
- opacity: 0.8
17860
- }
17861
- ),
17862
- children: showLabels && labelsVisibility.bar !== false && highlightedSeries.size === 0 || highlightedSeries.has(key) ? /* @__PURE__ */ jsxRuntime.jsx(
17863
- recharts.LabelList,
17864
- {
17865
- dataKey: key,
17866
- content: (props) => {
17867
- if (!fnContentLabelList(props)) return null;
17868
- const inside = renderInsideBarLabel(
17869
- color,
17870
- finalValueFormatter
17871
- );
17872
- return inside(props);
17873
- },
17874
- offset: 0
17875
- }
17876
- ) : null
17877
- },
17878
- `bar-${key}`
17879
- );
17880
- }
17881
- if (s.type === "line") {
17882
- const lineFormatter = (props) => {
17883
- const numValue = typeof props.value === "number" ? props.value : typeof props.value === "string" ? parseFloat(props.value) : 0;
17884
- const percentage = calcDivision(numValue, 100);
17885
- const formattedPercentage = typeof percentage === "number" ? percentage.toFixed(1).replace(".", ",") : String(percentage).replace(".", ",");
17886
- return `${formattedPercentage}%`;
17887
- };
17888
- return /* @__PURE__ */ jsxRuntime.jsx(
17889
- recharts.Line,
17890
- {
17891
- dataKey: key,
17892
- yAxisId: rightKeys.includes(key) ? "right" : "left",
17893
- name: label,
17894
- stroke: color,
17895
- strokeWidth: 2,
17896
- dot: { r: 3 },
17897
- activeDot: { r: 6 },
17898
- onClick: handleSeriesClick,
17899
- className: "cursor-pointer pointer-events-auto",
17900
- style: { opacity: getSeriesOpacity(key) },
17901
- children: showLabels && labelsVisibility.line !== false && highlightedSeries.size === 0 || highlightedSeries.has(key) ? /* @__PURE__ */ jsxRuntime.jsx(
17902
- recharts.LabelList,
17903
- {
17904
- dataKey: key,
17905
- position: "top",
17906
- content: pillLabelRenderer_default(
17907
- color,
17908
- "filled",
17909
- lineFormatter
17910
- ),
17911
- offset: 14
17912
- }
17913
- ) : null
17914
- },
17915
- `line-${key}`
17916
- );
17917
- }
17918
- if (s.type === "area") {
17919
- return /* @__PURE__ */ jsxRuntime.jsx(
17920
- recharts.Area,
17921
- {
17922
- type: "monotone",
17923
- dataKey: key,
17924
- yAxisId: rightKeys.includes(key) ? "right" : "left",
17925
- name: label,
17926
- stroke: color,
17927
- fill: `url(#gradient-${key})`,
17928
- fillOpacity: 1,
17929
- strokeWidth: 2,
17930
- onClick: handleSeriesClick,
17931
- className: "cursor-pointer pointer-events-auto",
17932
- style: { opacity: getSeriesOpacity(key) },
17933
- activeDot: {
17934
- r: 6,
17935
- fill: color,
17936
- stroke: "hsl(var(--background))",
17937
- strokeWidth: 2
17938
- },
17939
- children: showLabels && labelsVisibility.area !== false && highlightedSeries.size === 0 || highlightedSeries.has(key) ? /* @__PURE__ */ jsxRuntime.jsx(
17940
- recharts.LabelList,
17941
- {
17942
- dataKey: key,
17943
- position: "top",
17944
- content: pillLabelRenderer_default(
17945
- color,
17946
- "soft",
17947
- finalValueFormatter
17948
- ),
17949
- offset: 12
17950
- }
17951
- ) : null
17952
- },
17953
- `area-${key}`
17954
- );
17955
- }
17956
- return null;
17957
- })
17958
- ]
17779
+ ) : null
17780
+ },
17781
+ `area-${key}`
17782
+ );
17959
17783
  }
17960
- )
17961
- }
17962
- )
17963
- }
17964
- ),
17784
+ return null;
17785
+ })
17786
+ ]
17787
+ }
17788
+ ) })
17789
+ ] }),
17965
17790
  enableDraggableTooltips && activeTooltips.map((tooltip) => /* @__PURE__ */ jsxRuntime.jsx(
17966
17791
  DraggableTooltip_default,
17967
17792
  {
@@ -18019,11 +17844,498 @@ var Chart = ({
18019
17844
  }
18020
17845
  }
18021
17846
  )
18022
- ] })
17847
+ ]
18023
17848
  }
18024
17849
  );
18025
17850
  };
18026
17851
  var Chart_default = Chart;
17852
+ var DEFAULT_COLORS3 = ["#0d1136", "#666655", "#1a1a1a"];
17853
+ var HorizontalChart = ({
17854
+ data,
17855
+ series,
17856
+ className,
17857
+ height = 500,
17858
+ width = "100%",
17859
+ colors: colors2 = DEFAULT_COLORS3,
17860
+ gridColor,
17861
+ showGrid = true,
17862
+ showTooltip = true,
17863
+ showLegend = true,
17864
+ title,
17865
+ titlePosition = "left",
17866
+ showLabels = false,
17867
+ labelsVisibility = { bar: true },
17868
+ xAxis,
17869
+ xAxisLabel,
17870
+ yAxisLabel,
17871
+ labelMap,
17872
+ valueFormatter,
17873
+ categoryFormatter,
17874
+ enableHighlights = false,
17875
+ enableShowOnly = false,
17876
+ enablePeriodsDropdown = false,
17877
+ enableDraggableTooltips = false,
17878
+ showTooltipTotal = false,
17879
+ periodLabel = "Per\xEDodo",
17880
+ maxTooltips = 5,
17881
+ formatBR = false,
17882
+ legendUppercase = false,
17883
+ chartMargin,
17884
+ isLoading = false,
17885
+ customLegend,
17886
+ orderBy
17887
+ }) => {
17888
+ const { xAxisConfig, mapperConfig } = React33.useMemo(() => {
17889
+ return fnSmartConfig({ xAxis, data, labelMap });
17890
+ }, [data, xAxis, labelMap]);
17891
+ const {
17892
+ highlightedSeries,
17893
+ showOnlyHighlighted,
17894
+ toggleHighlight,
17895
+ setShowOnlyHighlighted,
17896
+ clearHighlights
17897
+ } = useChartHighlights();
17898
+ const { wrapperRef, measuredWidth } = useChartDimensions();
17899
+ const {
17900
+ activeTooltips,
17901
+ toggleTooltip,
17902
+ onTooltipPositionChange,
17903
+ setActiveTooltips
17904
+ } = useChartTooltips(maxTooltips);
17905
+ React33.useEffect(() => {
17906
+ if (highlightedSeries.size === 0 && showOnlyHighlighted) {
17907
+ setShowOnlyHighlighted(false);
17908
+ }
17909
+ }, [highlightedSeries, showOnlyHighlighted, setShowOnlyHighlighted]);
17910
+ const processedData = React33.useMemo(() => {
17911
+ const mapped = data.map((item) => ({
17912
+ ...item,
17913
+ name: String(item[xAxisConfig.dataKey] || "N/A")
17914
+ }));
17915
+ if (orderBy && mapped.length > 0) {
17916
+ return [...mapped].sort((a, b) => {
17917
+ const valueA = Number(a[orderBy]) || 0;
17918
+ const valueB = Number(b[orderBy]) || 0;
17919
+ return valueB - valueA;
17920
+ });
17921
+ }
17922
+ return mapped;
17923
+ }, [data, xAxisConfig.dataKey, orderBy]);
17924
+ const seriesOrder = filtersOrder(mapperConfig, series);
17925
+ const allKeys = seriesOrder.map((s) => s.key).filter(Boolean);
17926
+ const finalColors = React33.useMemo(
17927
+ () => generateColorMap(allKeys, colors2, mapperConfig),
17928
+ [allKeys, colors2, mapperConfig]
17929
+ );
17930
+ const activePeriods = React33.useMemo(
17931
+ () => activeTooltips.map((t) => adaptDataForTooltip(t.data, xAxisConfig.dataKey).name),
17932
+ [activeTooltips, xAxisConfig.dataKey]
17933
+ );
17934
+ const maxDataValue = React33.useMemo(() => {
17935
+ return getMaxDataValue(processedData, allKeys);
17936
+ }, [processedData, allKeys]);
17937
+ const minDataValue = React33.useMemo(() => {
17938
+ return getMinDataValue(processedData, allKeys);
17939
+ }, [processedData, allKeys]);
17940
+ const niceMax = React33.useMemo(() => computeNiceMax(maxDataValue), [maxDataValue]);
17941
+ const { handleChartClick, handleBarClick } = useChartClick({
17942
+ enableDraggableTooltips,
17943
+ xAxisDataKey: xAxisConfig.dataKey,
17944
+ toggleTooltip,
17945
+ setActiveTooltips
17946
+ });
17947
+ const getSeriesOpacity = React33.useCallback(
17948
+ (key) => {
17949
+ return highlightedSeries.size > 0 ? highlightedSeries.has(key) ? 1 : 0.25 : 1;
17950
+ },
17951
+ [highlightedSeries]
17952
+ );
17953
+ const finalValueFormatter = React33.useMemo(
17954
+ () => createValueFormatter(valueFormatter, formatBR),
17955
+ [valueFormatter, formatBR]
17956
+ );
17957
+ const yTickFormatter = React33.useMemo(
17958
+ () => createYTickFormatter(finalValueFormatter),
17959
+ [finalValueFormatter]
17960
+ );
17961
+ const CONTAINER_PADDING_LEFT = -6;
17962
+ const finalChartRightMargin = chartMargin?.right ?? 0;
17963
+ const finalChartLeftMargin = chartMargin?.left ?? 0;
17964
+ const HORIZONTAL_PADDING_CLASS = "px-6";
17965
+ const effectiveChartWidth = typeof width === "number" ? width : measuredWidth ? Math.max(0, measuredWidth - 32) : 800;
17966
+ const chartInnerWidth = effectiveChartWidth - finalChartLeftMargin - finalChartRightMargin;
17967
+ const openTooltipForPeriod = React33.useCallback(
17968
+ (periodName) => {
17969
+ fnOpenTooltipForPeriod(
17970
+ enableDraggableTooltips,
17971
+ processedData,
17972
+ periodName,
17973
+ activeTooltips,
17974
+ setActiveTooltips,
17975
+ maxTooltips,
17976
+ effectiveChartWidth
17977
+ );
17978
+ },
17979
+ [
17980
+ enableDraggableTooltips,
17981
+ processedData,
17982
+ activeTooltips,
17983
+ effectiveChartWidth,
17984
+ maxTooltips,
17985
+ setActiveTooltips
17986
+ ]
17987
+ );
17988
+ if (!data && !isLoading) return null;
17989
+ if (isLoading) {
17990
+ return /* @__PURE__ */ jsxRuntime.jsx(
17991
+ NoData_default,
17992
+ {
17993
+ title,
17994
+ isLoading: true,
17995
+ loadingMessage: typeof title === "string" ? `${title} \u2014 Carregando` : "Carregando",
17996
+ paddingLeft: CONTAINER_PADDING_LEFT + finalChartLeftMargin,
17997
+ height
17998
+ }
17999
+ );
18000
+ }
18001
+ if (Array.isArray(data) && data.length === 0) {
18002
+ return /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsx(
18003
+ NoData_default,
18004
+ {
18005
+ title,
18006
+ paddingLeft: CONTAINER_PADDING_LEFT + finalChartLeftMargin,
18007
+ height
18008
+ }
18009
+ ) });
18010
+ }
18011
+ return /* @__PURE__ */ jsxRuntime.jsxs(
18012
+ "div",
18013
+ {
18014
+ ref: wrapperRef,
18015
+ className: cn(
18016
+ "w-full overflow-hidden min-w-0 rounded-lg border-border",
18017
+ className
18018
+ ),
18019
+ children: [
18020
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "rounded-lg bg-card relative w-full max-w-full min-w-0 py-1", children: [
18021
+ title && /* @__PURE__ */ jsxRuntime.jsx(
18022
+ "div",
18023
+ {
18024
+ className: cn(
18025
+ "w-full flex items-center mt-3 mb-2",
18026
+ HORIZONTAL_PADDING_CLASS,
18027
+ titlePosition === "center" && "justify-center",
18028
+ titlePosition === "right" && "justify-end",
18029
+ titlePosition === "left" && "justify-start"
18030
+ ),
18031
+ children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-[1.4rem] font-semibold text-foreground", children: title })
18032
+ }
18033
+ ),
18034
+ customLegend && !!data.length && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("px-6 mb-2", HORIZONTAL_PADDING_CLASS), children: /* @__PURE__ */ jsxRuntime.jsx(
18035
+ ChartTotalLegend_default,
18036
+ {
18037
+ items: allKeys.map((key) => {
18038
+ const values = processedData.map(
18039
+ (d) => Number(d[key] || 0)
18040
+ );
18041
+ const total = values.reduce((a, b) => a + b, 0);
18042
+ const first = values[0] || 0;
18043
+ const last = values[values.length - 1] || 0;
18044
+ const trendValue = first !== 0 ? Math.round((last - first) / first * 100) : 0;
18045
+ const formattedTotal = finalValueFormatter ? finalValueFormatter({
18046
+ value: total,
18047
+ formattedValue: String(total)
18048
+ }) : new Intl.NumberFormat(formatBR ? "pt-BR" : "en-US").format(
18049
+ total
18050
+ );
18051
+ return {
18052
+ label: mapperConfig[key]?.label || key,
18053
+ value: formattedTotal,
18054
+ color: finalColors[key],
18055
+ trend: {
18056
+ value: Math.abs(trendValue),
18057
+ positive: trendValue >= 0,
18058
+ neutral: trendValue === 0
18059
+ }
18060
+ };
18061
+ })
18062
+ }
18063
+ ) }),
18064
+ allKeys.length > 0 && (enableHighlights || enableShowOnly) && /* @__PURE__ */ jsxRuntime.jsxs(
18065
+ "div",
18066
+ {
18067
+ className: cn("flex items-center gap-2", HORIZONTAL_PADDING_CLASS),
18068
+ children: [
18069
+ enableHighlights && /* @__PURE__ */ jsxRuntime.jsx(
18070
+ Highlights_default,
18071
+ {
18072
+ allKeys,
18073
+ mapperConfig,
18074
+ finalColors,
18075
+ highlightedSeries,
18076
+ toggleHighlight,
18077
+ containerWidth: chartInnerWidth
18078
+ }
18079
+ ),
18080
+ enableShowOnly && /* @__PURE__ */ jsxRuntime.jsx(
18081
+ ShowOnly_default,
18082
+ {
18083
+ showOnlyHighlighted,
18084
+ setShowOnlyHighlighted,
18085
+ highlightedSeriesSize: highlightedSeries.size,
18086
+ clearHighlights
18087
+ }
18088
+ ),
18089
+ enablePeriodsDropdown && enableDraggableTooltips && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ml-auto flex items-center", children: /* @__PURE__ */ jsxRuntime.jsx(
18090
+ PeriodsDropdown_default,
18091
+ {
18092
+ processedData,
18093
+ onOpenPeriod: openTooltipForPeriod,
18094
+ rightOffset: finalChartRightMargin,
18095
+ activePeriods
18096
+ }
18097
+ ) })
18098
+ ]
18099
+ }
18100
+ ),
18101
+ !(allKeys.length > 0 && (enableHighlights || enableShowOnly)) && enablePeriodsDropdown && enableDraggableTooltips && /* @__PURE__ */ jsxRuntime.jsx(
18102
+ "div",
18103
+ {
18104
+ className: cn(
18105
+ "w-full flex justify-end mb-2",
18106
+ HORIZONTAL_PADDING_CLASS
18107
+ ),
18108
+ children: /* @__PURE__ */ jsxRuntime.jsx(
18109
+ PeriodsDropdown_default,
18110
+ {
18111
+ processedData,
18112
+ onOpenPeriod: openTooltipForPeriod,
18113
+ rightOffset: finalChartRightMargin
18114
+ }
18115
+ )
18116
+ }
18117
+ ),
18118
+ showLegend && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mb-3", HORIZONTAL_PADDING_CLASS), children: /* @__PURE__ */ jsxRuntime.jsx(
18119
+ HorizontalLegend_default,
18120
+ {
18121
+ allKeys,
18122
+ mapperConfig,
18123
+ finalColors,
18124
+ labelMap,
18125
+ legendUppercase
18126
+ }
18127
+ ) }),
18128
+ /* @__PURE__ */ jsxRuntime.jsx(
18129
+ "div",
18130
+ {
18131
+ className: cn(
18132
+ "overflow-y-auto overflow-x-hidden px-6",
18133
+ "scrollbar-thin scrollbar-thumb-muted scrollbar-track-transparent mb-2"
18134
+ ),
18135
+ style: {
18136
+ maxHeight: height
18137
+ },
18138
+ children: /* @__PURE__ */ jsxRuntime.jsx(
18139
+ recharts.ResponsiveContainer,
18140
+ {
18141
+ width: "100%",
18142
+ height: Math.max(height, processedData.length * 50),
18143
+ children: /* @__PURE__ */ jsxRuntime.jsxs(
18144
+ recharts.ComposedChart,
18145
+ {
18146
+ layout: "vertical",
18147
+ data: processedData,
18148
+ height: Math.max(height, processedData.length * 50),
18149
+ margin: {
18150
+ top: 10,
18151
+ right: finalChartRightMargin,
18152
+ left: finalChartLeftMargin,
18153
+ bottom: 10
18154
+ },
18155
+ onClick: handleChartClick,
18156
+ children: [
18157
+ showGrid && /* @__PURE__ */ jsxRuntime.jsx(
18158
+ recharts.CartesianGrid,
18159
+ {
18160
+ strokeDasharray: "3 3",
18161
+ stroke: gridColor || "hsl(var(--muted-foreground))",
18162
+ opacity: 0.5
18163
+ }
18164
+ ),
18165
+ /* @__PURE__ */ jsxRuntime.jsx(
18166
+ recharts.XAxis,
18167
+ {
18168
+ type: "number",
18169
+ stroke: "hsl(var(--muted-foreground))",
18170
+ fontSize: 12,
18171
+ tickLine: false,
18172
+ orientation: "top",
18173
+ axisLine: false,
18174
+ tickFormatter: yTickFormatter,
18175
+ domain: [Math.min(minDataValue, 0), niceMax],
18176
+ label: yAxisLabel ? {
18177
+ value: yAxisLabel,
18178
+ position: "insideTopRight",
18179
+ offset: -1,
18180
+ style: {
18181
+ fontSize: 12,
18182
+ fill: "hsl(var(--muted-foreground))",
18183
+ fontWeight: 500
18184
+ }
18185
+ } : void 0
18186
+ }
18187
+ ),
18188
+ /* @__PURE__ */ jsxRuntime.jsx(
18189
+ recharts.YAxis,
18190
+ {
18191
+ type: "category",
18192
+ dataKey: xAxisConfig.dataKey,
18193
+ stroke: "hsl(var(--muted-foreground))",
18194
+ fontSize: 12,
18195
+ tickLine: false,
18196
+ axisLine: false,
18197
+ width: 125,
18198
+ tickFormatter: (value) => {
18199
+ if (categoryFormatter)
18200
+ return categoryFormatter(value);
18201
+ if (xAxisConfig.valueFormatter)
18202
+ return xAxisConfig.valueFormatter(value);
18203
+ return String(value ?? "");
18204
+ },
18205
+ label: xAxisLabel ? {
18206
+ value: xAxisLabel,
18207
+ angle: -90,
18208
+ position: "insideTopLeft",
18209
+ style: {
18210
+ fontSize: 12,
18211
+ fill: "hsl(var(--muted-foreground))",
18212
+ fontWeight: 500,
18213
+ textAnchor: "middle"
18214
+ }
18215
+ } : void 0
18216
+ }
18217
+ ),
18218
+ showTooltip && /* @__PURE__ */ jsxRuntime.jsx(
18219
+ recharts.Tooltip,
18220
+ {
18221
+ content: showTooltipTotal ? /* @__PURE__ */ jsxRuntime.jsx(
18222
+ TooltipWithTotal_default,
18223
+ {
18224
+ finalColors,
18225
+ valueFormatter: finalValueFormatter,
18226
+ categoryFormatter,
18227
+ periodLabel
18228
+ }
18229
+ ) : /* @__PURE__ */ jsxRuntime.jsx(
18230
+ TooltipSimple_default,
18231
+ {
18232
+ finalColors,
18233
+ valueFormatter: finalValueFormatter,
18234
+ categoryFormatter,
18235
+ periodLabel
18236
+ }
18237
+ ),
18238
+ cursor: { fill: "hsl(var(--muted))", opacity: 0.1 }
18239
+ }
18240
+ ),
18241
+ seriesOrder.map((s) => {
18242
+ if (showOnlyHighlighted && !highlightedSeries.has(s.key))
18243
+ return null;
18244
+ const { label, color, key } = fnBuildConfigData(
18245
+ s,
18246
+ mapperConfig,
18247
+ labelMap,
18248
+ finalColors,
18249
+ [],
18250
+ null
18251
+ );
18252
+ if (s.type === "bar") {
18253
+ return /* @__PURE__ */ jsxRuntime.jsx(
18254
+ recharts.Bar,
18255
+ {
18256
+ dataKey: key,
18257
+ name: label,
18258
+ fill: color,
18259
+ radius: [0, 4, 4, 0],
18260
+ onClick: handleBarClick,
18261
+ className: "cursor-pointer",
18262
+ style: { opacity: getSeriesOpacity(key) },
18263
+ activeBar: /* @__PURE__ */ jsxRuntime.jsx(
18264
+ recharts.Rectangle,
18265
+ {
18266
+ fill: color,
18267
+ stroke: color,
18268
+ strokeWidth: 2,
18269
+ opacity: 0.8
18270
+ }
18271
+ ),
18272
+ children: showLabels && labelsVisibility.bar !== false && highlightedSeries.size === 0 || highlightedSeries.has(key) ? /* @__PURE__ */ jsxRuntime.jsx(
18273
+ recharts.LabelList,
18274
+ {
18275
+ dataKey: key,
18276
+ content: (props) => {
18277
+ const inside = renderInsideBarLabel(
18278
+ color,
18279
+ finalValueFormatter
18280
+ );
18281
+ return inside(props);
18282
+ },
18283
+ offset: 0
18284
+ }
18285
+ ) : null
18286
+ },
18287
+ `bar-${key}`
18288
+ );
18289
+ }
18290
+ return null;
18291
+ })
18292
+ ]
18293
+ }
18294
+ )
18295
+ }
18296
+ )
18297
+ }
18298
+ )
18299
+ ] }),
18300
+ enableDraggableTooltips && activeTooltips.map((tooltip) => /* @__PURE__ */ jsxRuntime.jsx(
18301
+ DraggableTooltip_default,
18302
+ {
18303
+ id: tooltip.id,
18304
+ data: adaptDataForTooltip(tooltip.data, xAxisConfig.dataKey),
18305
+ position: tooltip.position,
18306
+ title,
18307
+ dataKeys: allKeys,
18308
+ finalColors,
18309
+ highlightedSeries,
18310
+ toggleHighlight,
18311
+ showOnlyHighlighted,
18312
+ onClose: (id) => setActiveTooltips((prev) => prev.filter((t) => t.id !== id)),
18313
+ onPositionChange: onTooltipPositionChange,
18314
+ periodLabel,
18315
+ dataLabel: "Dados do Per\xEDodo",
18316
+ valueFormatter: finalValueFormatter,
18317
+ categoryFormatter,
18318
+ globalTooltipCount: activeTooltips.length,
18319
+ onCloseAll: () => window.dispatchEvent(new Event("closeAllTooltips")),
18320
+ closeAllButtonPosition: "top-center",
18321
+ closeAllButtonVariant: "floating"
18322
+ },
18323
+ tooltip.id
18324
+ )),
18325
+ enableDraggableTooltips && activeTooltips.length > 1 && /* @__PURE__ */ jsxRuntime.jsx(
18326
+ CloseAllButton_default,
18327
+ {
18328
+ count: activeTooltips.length,
18329
+ onCloseAll: () => window.dispatchEvent(new Event("closeAllTooltips")),
18330
+ position: "top-center",
18331
+ variant: "floating"
18332
+ }
18333
+ )
18334
+ ]
18335
+ }
18336
+ );
18337
+ };
18338
+ var HorizontalChart_default = HorizontalChart;
18027
18339
  var defaultData = [
18028
18340
  { name: "Vendas", value: 4e3 },
18029
18341
  { name: "Marketing", value: 3e3 },
@@ -18031,7 +18343,7 @@ var defaultData = [
18031
18343
  { name: "Suporte", value: 1e3 },
18032
18344
  { name: "Outros", value: 800 }
18033
18345
  ];
18034
- var DEFAULT_COLORS3 = [
18346
+ var DEFAULT_COLORS4 = [
18035
18347
  "#55af7d",
18036
18348
  // verde do projeto
18037
18349
  "#8e68ff",
@@ -18089,7 +18401,7 @@ var CustomPieChart = ({
18089
18401
  centerX = "50%",
18090
18402
  centerY = "50%"
18091
18403
  }) => {
18092
- const finalColors = colors2 || DEFAULT_COLORS3;
18404
+ const finalColors = colors2 || DEFAULT_COLORS4;
18093
18405
  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("w-full rounded-lg bg-card p-4", className), children: /* @__PURE__ */ jsxRuntime.jsx(recharts.ResponsiveContainer, { width, height, children: /* @__PURE__ */ jsxRuntime.jsxs(recharts.PieChart, { children: [
18094
18406
  /* @__PURE__ */ jsxRuntime.jsx(
18095
18407
  recharts.Pie,
@@ -18539,6 +18851,7 @@ exports.FileUploader = FileUploader;
18539
18851
  exports.FilterButton = FilterButton;
18540
18852
  exports.HideButton = HideButton;
18541
18853
  exports.Highlights = Highlights_default;
18854
+ exports.HorizontalChart = HorizontalChart_default;
18542
18855
  exports.HorizontalLegend = HorizontalLegend_default;
18543
18856
  exports.HoverCardBase = HoverCardBase;
18544
18857
  exports.HoverCardContentBase = HoverCardContentBase;