@mlw-packages/react-components 1.9.4 → 1.9.5

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 +58 -65
  2. package/dist/index.d.ts +58 -65
  3. package/dist/index.js +375 -550
  4. package/dist/index.mjs +376 -551
  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 },
@@ -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 ?? "");
17676
- },
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
17689
- }
17690
- )
17691
- ] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
17692
- /* @__PURE__ */ jsxRuntime.jsx(
17693
- recharts.XAxis,
17694
- {
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 ?? "");
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);
17708
17701
  },
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
17702
+ offset: 0
17719
17703
  }
17720
- ),
17721
- /* @__PURE__ */ jsxRuntime.jsx(
17722
- recharts.YAxis,
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,
17723
17731
  {
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
17732
+ dataKey: key,
17733
+ position: "top",
17734
+ content: pillLabelRenderer_default(
17735
+ color,
17736
+ "filled",
17737
+ lineFormatter
17738
+ ),
17739
+ offset: 14
17745
17740
  }
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,
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,
17766
17769
  {
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
- ) });
17770
+ dataKey: key,
17771
+ position: "top",
17772
+ content: pillLabelRenderer_default(
17773
+ color,
17774
+ "soft",
17775
+ finalValueFormatter
17776
+ ),
17777
+ offset: 12
17827
17778
  }
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,7 +17844,7 @@ var Chart = ({
18019
17844
  }
18020
17845
  }
18021
17846
  )
18022
- ] })
17847
+ ]
18023
17848
  }
18024
17849
  );
18025
17850
  };