@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.mjs CHANGED
@@ -42,7 +42,7 @@ import ptBR3 from 'date-fns/locale/pt-BR';
42
42
  import { useSensors, useSensor, MouseSensor, TouchSensor, PointerSensor, DndContext, DragOverlay, useDroppable, useDraggable } from '@dnd-kit/core';
43
43
  import { CSS } from '@dnd-kit/utilities';
44
44
  import { RadioGroup, RadioGroupItem } from '@radix-ui/react-radio-group';
45
- import { ResponsiveContainer, ComposedChart, XAxis, YAxis, Bar, Line, Area, CartesianGrid, ReferenceLine, Tooltip, Legend, LabelList, Rectangle, PieChart, Pie, Cell } from 'recharts';
45
+ import { ResponsiveContainer, ComposedChart, XAxis, YAxis, Bar, Line, Area, CartesianGrid, Tooltip, Legend, LabelList, Rectangle, PieChart, Pie, Cell } from 'recharts';
46
46
 
47
47
  var __create = Object.create;
48
48
  var __defProp = Object.defineProperty;
@@ -14303,42 +14303,6 @@ var computeYAxisTickWidth = (chartMarginLeft, yAxisLabel, axisLabelMargin, yTick
14303
14303
  const estimated = Math.max(48, Math.min(220, maxLen * 8 + 24));
14304
14304
  return estimated;
14305
14305
  };
14306
- var CustomYAxisTick = (props) => {
14307
- const { x = 0, y = 0, payload } = props;
14308
- const text = String(payload?.value || "");
14309
- const maxCharsPerLine = 20;
14310
- const words = text.split(" ");
14311
- const lines = [];
14312
- let currentLine = "";
14313
- words.forEach((word) => {
14314
- const testLine = currentLine ? `${currentLine} ${word}` : word;
14315
- if (testLine.length > maxCharsPerLine && currentLine) {
14316
- lines.push(currentLine);
14317
- currentLine = word;
14318
- } else {
14319
- currentLine = testLine;
14320
- }
14321
- });
14322
- if (currentLine) {
14323
- lines.push(currentLine);
14324
- }
14325
- const lineHeight = 12;
14326
- const totalHeight = lines.length * lineHeight;
14327
- const startY = y - totalHeight / 2 + lineHeight / 2;
14328
- return /* @__PURE__ */ jsx("g", { children: lines.map((line, index) => /* @__PURE__ */ jsx(
14329
- "text",
14330
- {
14331
- x,
14332
- y: startY + index * lineHeight,
14333
- textAnchor: "end",
14334
- fill: "hsl(var(--muted-foreground))",
14335
- fontSize: 11,
14336
- children: line
14337
- },
14338
- index
14339
- )) });
14340
- };
14341
- var CustomYAxisTick_default = CustomYAxisTick;
14342
14306
  var menuVariants = {
14343
14307
  hidden: { opacity: 0, y: -6, scale: 0.98 },
14344
14308
  visible: { opacity: 1, y: 0, scale: 1 },
@@ -17140,9 +17104,9 @@ var Chart = ({
17140
17104
  isLoading = false,
17141
17105
  timeSeries,
17142
17106
  timeSeriesLegend,
17143
- customLegend,
17144
- horizontal = false,
17145
- orderBy
17107
+ customLegend
17108
+ // horizontal removido
17109
+ // orderBy removido
17146
17110
  }) => {
17147
17111
  const { xAxisConfig, mapperConfig } = useMemo(() => {
17148
17112
  return fnSmartConfig({ xAxis, data, labelMap });
@@ -17178,12 +17142,6 @@ var Chart = ({
17178
17142
  defaultEndIndex: timeSeriesConfig?.end,
17179
17143
  onRangeChange: timeSeriesConfig?.onRangeChange
17180
17144
  });
17181
- const { maxPeriodLabel, minPeriodLabel } = useChartMinMax({
17182
- processedData: data,
17183
- orderBy,
17184
- xAxisDataKey: xAxisConfig.dataKey,
17185
- categoryFormatter
17186
- });
17187
17145
  const processedData = useMemo(() => {
17188
17146
  const mapped = data.map((item) => ({
17189
17147
  ...item,
@@ -17193,23 +17151,8 @@ var Chart = ({
17193
17151
  if (timeSeriesConfig) {
17194
17152
  result = mapped.slice(startIndex, endIndex + 1);
17195
17153
  }
17196
- if (orderBy && horizontal) {
17197
- result = [...result].sort((a, b) => {
17198
- const valueA = Number(a[orderBy]) || 0;
17199
- const valueB = Number(b[orderBy]) || 0;
17200
- return valueB - valueA;
17201
- });
17202
- }
17203
17154
  return result;
17204
- }, [
17205
- data,
17206
- xAxisConfig.dataKey,
17207
- timeSeriesConfig,
17208
- startIndex,
17209
- endIndex,
17210
- orderBy,
17211
- horizontal
17212
- ]);
17155
+ }, [data, xAxisConfig.dataKey, timeSeriesConfig, startIndex, endIndex]);
17213
17156
  const seriesOrder = filtersOrder(mapperConfig, series);
17214
17157
  const allKeys = seriesOrder.map((s) => s.key).filter(Boolean);
17215
17158
  const finalColors = useMemo(
@@ -17305,10 +17248,6 @@ var Chart = ({
17305
17248
  const finalChartRightMargin = chartMargin?.right ?? (rightKeys.length > 0 ? AXIS_LABEL_MARGIN : 30);
17306
17249
  const finalChartLeftMargin = chartMargin?.left ?? (yAxisLabel ? AXIS_LABEL_MARGIN : 0);
17307
17250
  const yAxisTickWidth = useMemo(() => {
17308
- if (horizontal) {
17309
- if (typeof chartMargin?.left === "number") return chartMargin.left;
17310
- return 130;
17311
- }
17312
17251
  return computeYAxisTickWidth(
17313
17252
  chartMargin?.left,
17314
17253
  yAxisLabel,
@@ -17318,7 +17257,6 @@ var Chart = ({
17318
17257
  niceMaxLeft
17319
17258
  );
17320
17259
  }, [
17321
- horizontal,
17322
17260
  chartMargin?.left,
17323
17261
  yAxisLabel,
17324
17262
  yTickFormatter,
@@ -17404,7 +17342,7 @@ var Chart = ({
17404
17342
  ] }) })
17405
17343
  ] });
17406
17344
  }
17407
- return /* @__PURE__ */ jsx(
17345
+ return /* @__PURE__ */ jsxs(
17408
17346
  "div",
17409
17347
  {
17410
17348
  ref: wrapperRef,
@@ -17412,513 +17350,400 @@ var Chart = ({
17412
17350
  "w-full overflow-hidden min-w-0 rounded-lg border-border",
17413
17351
  className
17414
17352
  ),
17415
- children: /* @__PURE__ */ jsxs("div", { className: "rounded-lg bg-card relative w-full max-w-full min-w-0 py-1", children: [
17416
- title && /* @__PURE__ */ jsx(
17417
- "div",
17418
- {
17419
- className: cn(
17420
- "w-full flex items-center mt-3 mb-2",
17421
- HORIZONTAL_PADDING_CLASS,
17422
- titlePosition === "center" && "justify-center",
17423
- titlePosition === "right" && "justify-end",
17424
- titlePosition === "left" && "justify-start"
17425
- ),
17426
- children: /* @__PURE__ */ jsx("div", { className: "text-[1.4rem] font-semibold text-foreground", children: title })
17427
- }
17428
- ),
17429
- customLegend && !!data.length && /* @__PURE__ */ jsx("div", { className: cn("px-6 mb-2", HORIZONTAL_PADDING_CLASS), children: /* @__PURE__ */ jsx(
17430
- ChartTotalLegend_default,
17431
- {
17432
- items: allKeys.map((key) => {
17433
- const values = processedData.map(
17434
- (d) => Number(d[key] || 0)
17435
- );
17436
- const total = values.reduce((a, b) => a + b, 0);
17437
- const first = values[0] || 0;
17438
- const last = values[values.length - 1] || 0;
17439
- const trendValue = first !== 0 ? Math.round((last - first) / first * 100) : 0;
17440
- const formattedTotal = finalValueFormatter ? finalValueFormatter({
17441
- value: total,
17442
- formattedValue: String(total)
17443
- }) : new Intl.NumberFormat(formatBR ? "pt-BR" : "en-US").format(
17444
- total
17445
- );
17446
- return {
17447
- label: mapperConfig[key]?.label || key,
17448
- value: formattedTotal,
17449
- color: finalColors[key],
17450
- trend: {
17451
- value: Math.abs(trendValue),
17452
- positive: trendValue >= 0,
17453
- neutral: trendValue === 0
17454
- }
17455
- };
17456
- })
17457
- }
17458
- ) }),
17459
- allKeys.length > 0 && (enableHighlights || enableShowOnly) && /* @__PURE__ */ jsxs("div", { className: cn("flex items-center gap-2", teste), children: [
17460
- enableHighlights && /* @__PURE__ */ jsx(
17461
- Highlights_default,
17462
- {
17463
- allKeys,
17464
- mapperConfig,
17465
- finalColors,
17466
- highlightedSeries,
17467
- toggleHighlight,
17468
- containerWidth: chartInnerWidth
17469
- }
17470
- ),
17471
- enableShowOnly && /* @__PURE__ */ jsx(
17472
- ShowOnly_default,
17353
+ children: [
17354
+ /* @__PURE__ */ jsxs("div", { className: "rounded-lg bg-card relative w-full max-w-full min-w-0 py-1", children: [
17355
+ title && /* @__PURE__ */ jsx(
17356
+ "div",
17473
17357
  {
17474
- showOnlyHighlighted,
17475
- setShowOnlyHighlighted,
17476
- highlightedSeriesSize: highlightedSeries.size,
17477
- clearHighlights
17358
+ className: cn(
17359
+ "w-full flex items-center mt-3 mb-2",
17360
+ HORIZONTAL_PADDING_CLASS,
17361
+ titlePosition === "center" && "justify-center",
17362
+ titlePosition === "right" && "justify-end",
17363
+ titlePosition === "left" && "justify-start"
17364
+ ),
17365
+ children: /* @__PURE__ */ jsx("div", { className: "text-[1.4rem] font-semibold text-foreground", children: title })
17478
17366
  }
17479
17367
  ),
17480
- enablePeriodsDropdown && enableDraggableTooltips && /* @__PURE__ */ jsx("div", { className: "ml-auto flex items-center", children: /* @__PURE__ */ jsx(
17481
- PeriodsDropdown_default,
17368
+ customLegend && !!data.length && /* @__PURE__ */ jsx("div", { className: cn("px-6 mb-2", HORIZONTAL_PADDING_CLASS), children: /* @__PURE__ */ jsx(
17369
+ ChartTotalLegend_default,
17482
17370
  {
17483
- processedData,
17484
- onOpenPeriod: openTooltipForPeriod,
17485
- rightOffset: finalChartRightMargin,
17486
- activePeriods
17371
+ items: allKeys.map((key) => {
17372
+ const values = processedData.map(
17373
+ (d) => Number(d[key] || 0)
17374
+ );
17375
+ const total = values.reduce((a, b) => a + b, 0);
17376
+ const first = values[0] || 0;
17377
+ const last = values[values.length - 1] || 0;
17378
+ const trendValue = first !== 0 ? Math.round((last - first) / first * 100) : 0;
17379
+ const formattedTotal = finalValueFormatter ? finalValueFormatter({
17380
+ value: total,
17381
+ formattedValue: String(total)
17382
+ }) : new Intl.NumberFormat(formatBR ? "pt-BR" : "en-US").format(
17383
+ total
17384
+ );
17385
+ return {
17386
+ label: mapperConfig[key]?.label || key,
17387
+ value: formattedTotal,
17388
+ color: finalColors[key],
17389
+ trend: {
17390
+ value: Math.abs(trendValue),
17391
+ positive: trendValue >= 0,
17392
+ neutral: trendValue === 0
17393
+ }
17394
+ };
17395
+ })
17487
17396
  }
17488
- ) })
17489
- ] }),
17490
- !(allKeys.length > 0 && (enableHighlights || enableShowOnly)) && enablePeriodsDropdown && enableDraggableTooltips && /* @__PURE__ */ jsx(
17491
- "div",
17492
- {
17493
- className: cn(
17494
- "w-full flex justify-end mb-2",
17495
- HORIZONTAL_PADDING_CLASS
17397
+ ) }),
17398
+ allKeys.length > 0 && (enableHighlights || enableShowOnly) && /* @__PURE__ */ jsxs("div", { className: cn("flex items-center gap-2", teste), children: [
17399
+ enableHighlights && /* @__PURE__ */ jsx(
17400
+ Highlights_default,
17401
+ {
17402
+ allKeys,
17403
+ mapperConfig,
17404
+ finalColors,
17405
+ highlightedSeries,
17406
+ toggleHighlight,
17407
+ containerWidth: chartInnerWidth
17408
+ }
17496
17409
  ),
17497
- style: {
17498
- paddingRight: `${finalChartRightMargin}px`,
17499
- maxWidth: `${chartInnerWidth}px`
17500
- },
17501
- children: /* @__PURE__ */ jsx(
17410
+ enableShowOnly && /* @__PURE__ */ jsx(
17411
+ ShowOnly_default,
17412
+ {
17413
+ showOnlyHighlighted,
17414
+ setShowOnlyHighlighted,
17415
+ highlightedSeriesSize: highlightedSeries.size,
17416
+ clearHighlights
17417
+ }
17418
+ ),
17419
+ enablePeriodsDropdown && enableDraggableTooltips && /* @__PURE__ */ jsx("div", { className: "ml-auto flex items-center", children: /* @__PURE__ */ jsx(
17502
17420
  PeriodsDropdown_default,
17503
17421
  {
17504
17422
  processedData,
17505
17423
  onOpenPeriod: openTooltipForPeriod,
17506
- rightOffset: finalChartRightMargin
17424
+ rightOffset: finalChartRightMargin,
17425
+ activePeriods
17507
17426
  }
17508
- )
17509
- }
17510
- ),
17511
- showLegend && horizontal && /* @__PURE__ */ jsx(
17512
- HorizontalLegend_default,
17513
- {
17514
- allKeys,
17515
- mapperConfig,
17516
- finalColors,
17517
- labelMap,
17518
- legendUppercase,
17519
- orderBy,
17520
- maxPeriodLabel,
17521
- minPeriodLabel,
17522
- className: cn(HORIZONTAL_PADDING_CLASS)
17523
- }
17524
- ),
17525
- /* @__PURE__ */ jsx(
17526
- "div",
17527
- {
17528
- className: cn(
17529
- horizontal && "overflow-y-auto overflow-x-hidden px-6",
17530
- horizontal && "scrollbar-thin scrollbar-thumb-muted scrollbar-track-transparent"
17531
- ),
17532
- style: {
17533
- maxHeight: horizontal ? height : void 0
17534
- },
17535
- children: /* @__PURE__ */ jsx(
17536
- ResponsiveContainer,
17537
- {
17538
- width: "100%",
17539
- height: horizontal ? Math.max(height, processedData.length * 50) : height,
17540
- children: /* @__PURE__ */ jsxs(
17541
- ComposedChart,
17427
+ ) })
17428
+ ] }),
17429
+ !(allKeys.length > 0 && (enableHighlights || enableShowOnly)) && enablePeriodsDropdown && enableDraggableTooltips && /* @__PURE__ */ jsx(
17430
+ "div",
17431
+ {
17432
+ className: cn(
17433
+ "w-full flex justify-end mb-2",
17434
+ HORIZONTAL_PADDING_CLASS
17435
+ ),
17436
+ style: {
17437
+ paddingRight: `${finalChartRightMargin}px`,
17438
+ maxWidth: `${chartInnerWidth}px`
17439
+ },
17440
+ children: /* @__PURE__ */ jsx(
17441
+ PeriodsDropdown_default,
17442
+ {
17443
+ processedData,
17444
+ onOpenPeriod: openTooltipForPeriod,
17445
+ rightOffset: finalChartRightMargin
17446
+ }
17447
+ )
17448
+ }
17449
+ ),
17450
+ /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height, children: /* @__PURE__ */ jsxs(
17451
+ ComposedChart,
17452
+ {
17453
+ data: processedData,
17454
+ height,
17455
+ margin: {
17456
+ top: 10,
17457
+ right: finalChartRightMargin,
17458
+ left: finalChartLeftMargin,
17459
+ bottom: 10
17460
+ },
17461
+ onClick: handleChartClick,
17462
+ children: [
17463
+ /* @__PURE__ */ jsx("defs", { children: seriesOrder.filter((s) => s.type === "area").map((s) => {
17464
+ const key = s.key;
17465
+ const color = finalColors[key];
17466
+ return /* @__PURE__ */ jsxs(
17467
+ "linearGradient",
17468
+ {
17469
+ id: `gradient-${key}`,
17470
+ x1: "0",
17471
+ y1: "0",
17472
+ x2: "0",
17473
+ y2: "0.8",
17474
+ children: [
17475
+ /* @__PURE__ */ jsx("stop", { offset: "0%", stopColor: color, stopOpacity: 0.8 }),
17476
+ /* @__PURE__ */ jsx("stop", { offset: "90%", stopColor: color, stopOpacity: 0.1 })
17477
+ ]
17478
+ },
17479
+ `gradient-${key}`
17480
+ );
17481
+ }) }),
17482
+ showGrid && /* @__PURE__ */ jsx(
17483
+ CartesianGrid,
17484
+ {
17485
+ strokeDasharray: "3 3",
17486
+ stroke: gridColor || "hsl(var(--muted-foreground))",
17487
+ opacity: 0.5
17488
+ }
17489
+ ),
17490
+ /* @__PURE__ */ jsx(
17491
+ XAxis,
17542
17492
  {
17543
- data: processedData,
17544
- height: horizontal ? Math.max(height, processedData.length * 50) : height,
17545
- layout: horizontal ? "vertical" : "horizontal",
17546
- margin: {
17547
- top: 10,
17548
- right: finalChartRightMargin,
17549
- left: finalChartLeftMargin,
17550
- bottom: 10
17493
+ dataKey: xAxisConfig.dataKey,
17494
+ stroke: "hsl(var(--muted-foreground))",
17495
+ fontSize: 12,
17496
+ tickLine: false,
17497
+ axisLine: false,
17498
+ tickFormatter: (value) => {
17499
+ if (categoryFormatter)
17500
+ return categoryFormatter(value);
17501
+ if (xAxisConfig.valueFormatter)
17502
+ return xAxisConfig.valueFormatter(value);
17503
+ return String(value ?? "");
17551
17504
  },
17552
- onClick: handleChartClick,
17553
- children: [
17554
- /* @__PURE__ */ jsx("defs", { children: seriesOrder.filter((s) => s.type === "area").map((s) => {
17555
- const key = s.key;
17556
- const color = finalColors[key];
17557
- return /* @__PURE__ */ jsxs(
17558
- "linearGradient",
17559
- {
17560
- id: `gradient-${key}`,
17561
- x1: "0",
17562
- y1: "0",
17563
- x2: "0",
17564
- y2: "0.8",
17565
- children: [
17566
- /* @__PURE__ */ jsx("stop", { offset: "0%", stopColor: color, stopOpacity: 0.8 }),
17567
- /* @__PURE__ */ jsx(
17568
- "stop",
17569
- {
17570
- offset: "90%",
17571
- stopColor: color,
17572
- stopOpacity: 0.1
17573
- }
17574
- )
17575
- ]
17576
- },
17577
- `gradient-${key}`
17578
- );
17579
- }) }),
17580
- showGrid && /* @__PURE__ */ jsx(
17581
- CartesianGrid,
17582
- {
17583
- strokeDasharray: "3 3",
17584
- stroke: gridColor || "hsl(var(--muted-foreground))",
17585
- opacity: 0.5
17505
+ label: xAxisLabel ? {
17506
+ value: xAxisLabel,
17507
+ position: "insideBottomRight",
17508
+ offset: -5,
17509
+ style: {
17510
+ fontSize: 12,
17511
+ fill: "hsl(var(--muted-foreground))",
17512
+ fontWeight: 500
17513
+ }
17514
+ } : void 0
17515
+ }
17516
+ ),
17517
+ /* @__PURE__ */ jsx(
17518
+ YAxis,
17519
+ {
17520
+ yAxisId: "left",
17521
+ width: yAxisTickWidth,
17522
+ stroke: "hsl(var(--muted-foreground))",
17523
+ fontSize: 12,
17524
+ tickLine: false,
17525
+ axisLine: false,
17526
+ tickFormatter: yTickFormatter,
17527
+ domain: [Math.min(minLeftDataValue, 0), niceMaxLeft],
17528
+ tickCount: 6,
17529
+ label: yAxisLabel ? {
17530
+ value: yAxisLabel,
17531
+ angle: -90,
17532
+ position: "left",
17533
+ dx: leftYAxisLabelDx,
17534
+ style: {
17535
+ fontSize: 12,
17536
+ fill: "hsl(var(--muted-foreground))",
17537
+ fontWeight: 500,
17538
+ textAnchor: "middle"
17539
+ }
17540
+ } : void 0
17541
+ }
17542
+ ),
17543
+ rightKeys.length > 0 && (() => {
17544
+ const { rightAxisColor, rightTickFormatter } = fnConfigRightKeys(
17545
+ biaxialConfigNormalized,
17546
+ yTickFormatter,
17547
+ finalColors
17548
+ );
17549
+ return /* @__PURE__ */ jsx(
17550
+ YAxis,
17551
+ {
17552
+ yAxisId: "right",
17553
+ width: finalChartRightMargin,
17554
+ orientation: "right",
17555
+ stroke: "hsl(var(--muted-foreground))",
17556
+ fontSize: 12,
17557
+ tickLine: false,
17558
+ axisLine: false,
17559
+ tick: { fill: rightAxisColor },
17560
+ tickFormatter: rightTickFormatter,
17561
+ domain: [Math.min(minRightDataValue, 0), niceMaxRight],
17562
+ tickCount: 6,
17563
+ label: biaxialConfigNormalized?.label ? {
17564
+ value: biaxialConfigNormalized.label,
17565
+ angle: -90,
17566
+ position: "right",
17567
+ dx: rightYAxisLabelDx,
17568
+ style: {
17569
+ fontSize: 12,
17570
+ fill: "hsl(var(--muted-foreground))",
17571
+ fontWeight: 500,
17572
+ textAnchor: "middle"
17586
17573
  }
17587
- ),
17588
- horizontal ? /* @__PURE__ */ jsxs(Fragment, { children: [
17589
- /* @__PURE__ */ jsx(
17590
- XAxis,
17574
+ } : void 0
17575
+ }
17576
+ );
17577
+ })(),
17578
+ showTooltip && /* @__PURE__ */ jsx(
17579
+ Tooltip,
17580
+ {
17581
+ content: showTooltipTotal ? /* @__PURE__ */ jsx(
17582
+ TooltipWithTotal_default,
17583
+ {
17584
+ finalColors,
17585
+ valueFormatter: finalValueFormatter,
17586
+ categoryFormatter,
17587
+ periodLabel
17588
+ }
17589
+ ) : /* @__PURE__ */ jsx(
17590
+ TooltipSimple_default,
17591
+ {
17592
+ finalColors,
17593
+ valueFormatter: finalValueFormatter,
17594
+ categoryFormatter,
17595
+ periodLabel
17596
+ }
17597
+ ),
17598
+ cursor: { fill: "hsl(var(--muted))", opacity: 0.1 }
17599
+ }
17600
+ ),
17601
+ showLegend && /* @__PURE__ */ jsx(
17602
+ Legend,
17603
+ {
17604
+ iconSize: 12,
17605
+ formatter: (value) => {
17606
+ return /* @__PURE__ */ jsx("span", { className: "tracking-[0] rounded-sm", children: fnFormatterValueLegend(
17607
+ value,
17608
+ mapperConfig,
17609
+ labelMap,
17610
+ legendUppercase
17611
+ ) });
17612
+ }
17613
+ }
17614
+ ),
17615
+ seriesOrder.map((s) => {
17616
+ if (showOnlyHighlighted && !highlightedSeries.has(s.key))
17617
+ return null;
17618
+ const { label, color, key } = fnBuildConfigData(
17619
+ s,
17620
+ mapperConfig,
17621
+ labelMap,
17622
+ finalColors,
17623
+ rightKeys,
17624
+ biaxialConfigNormalized
17625
+ );
17626
+ if (s.type === "bar") {
17627
+ return /* @__PURE__ */ jsx(
17628
+ Bar,
17629
+ {
17630
+ dataKey: key,
17631
+ yAxisId: rightKeys.includes(key) ? "right" : "left",
17632
+ name: label,
17633
+ fill: color,
17634
+ radius: [4, 4, 0, 0],
17635
+ onClick: handleBarClick,
17636
+ className: "cursor-pointer",
17637
+ style: { opacity: getSeriesOpacity(key) },
17638
+ activeBar: /* @__PURE__ */ jsx(
17639
+ Rectangle,
17591
17640
  {
17592
- type: "number",
17593
- orientation: "top",
17594
- stroke: "hsl(var(--muted-foreground))",
17595
- fontSize: 12,
17596
- tickLine: false,
17597
- axisLine: false,
17598
- tickFormatter: yTickFormatter,
17599
- domain: [Math.min(minLeftDataValue, 0), niceMaxLeft],
17600
- tickCount: 6,
17601
- label: yAxisLabel ? {
17602
- value: yAxisLabel,
17603
- position: "insideTopRight",
17604
- offset: -5,
17605
- style: {
17606
- fontSize: 12,
17607
- fill: "hsl(var(--muted-foreground))",
17608
- fontWeight: 500
17609
- }
17610
- } : void 0
17641
+ fill: color,
17642
+ stroke: color,
17643
+ strokeWidth: 2,
17644
+ opacity: 0.8
17611
17645
  }
17612
17646
  ),
17613
- /* @__PURE__ */ jsx(
17614
- YAxis,
17647
+ children: showLabels && labelsVisibility.bar !== false && highlightedSeries.size === 0 || highlightedSeries.has(key) ? /* @__PURE__ */ jsx(
17648
+ LabelList,
17615
17649
  {
17616
- type: "category",
17617
- dataKey: xAxisConfig.dataKey,
17618
- yAxisId: "left",
17619
- width: yAxisTickWidth,
17620
- stroke: "hsl(var(--muted-foreground))",
17621
- fontSize: 11,
17622
- tickLine: false,
17623
- axisLine: false,
17624
- tick: /* @__PURE__ */ jsx(CustomYAxisTick_default, { width: yAxisTickWidth - 10 }),
17625
- tickFormatter: (value) => {
17626
- if (categoryFormatter)
17627
- return categoryFormatter(value);
17628
- if (xAxisConfig.valueFormatter)
17629
- return xAxisConfig.valueFormatter(
17630
- value
17631
- );
17632
- return String(value ?? "");
17633
- },
17634
- label: xAxisLabel ? {
17635
- value: xAxisLabel,
17636
- angle: -90,
17637
- position: "insideTop",
17638
- dx: leftYAxisLabelDx,
17639
- style: {
17640
- fontSize: 12,
17641
- fill: "hsl(var(--muted-foreground))",
17642
- fontWeight: 500,
17643
- textAnchor: "middle"
17644
- }
17645
- } : void 0
17646
- }
17647
- )
17648
- ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
17649
- /* @__PURE__ */ jsx(
17650
- XAxis,
17651
- {
17652
- dataKey: xAxisConfig.dataKey,
17653
- stroke: "hsl(var(--muted-foreground))",
17654
- fontSize: 12,
17655
- tickLine: false,
17656
- axisLine: false,
17657
- tickFormatter: (value) => {
17658
- if (categoryFormatter)
17659
- return categoryFormatter(value);
17660
- if (xAxisConfig.valueFormatter)
17661
- return xAxisConfig.valueFormatter(
17662
- value
17663
- );
17664
- return String(value ?? "");
17650
+ dataKey: key,
17651
+ content: (props) => {
17652
+ if (!fnContentLabelList(props)) return null;
17653
+ const inside = renderInsideBarLabel(
17654
+ color,
17655
+ finalValueFormatter
17656
+ );
17657
+ return inside(props);
17665
17658
  },
17666
- label: xAxisLabel ? {
17667
- value: xAxisLabel,
17668
- position: "insideBottomRight",
17669
- offset: -5,
17670
- style: {
17671
- fontSize: 12,
17672
- fill: "hsl(var(--muted-foreground))",
17673
- fontWeight: 500
17674
- }
17675
- } : void 0
17659
+ offset: 0
17676
17660
  }
17677
- ),
17678
- /* @__PURE__ */ jsx(
17679
- YAxis,
17661
+ ) : null
17662
+ },
17663
+ `bar-${key}`
17664
+ );
17665
+ }
17666
+ if (s.type === "line") {
17667
+ const lineFormatter = (props) => {
17668
+ const numValue = typeof props.value === "number" ? props.value : typeof props.value === "string" ? parseFloat(props.value) : 0;
17669
+ const percentage = calcDivision(numValue, 100);
17670
+ const formattedPercentage = typeof percentage === "number" ? percentage.toFixed(1).replace(".", ",") : String(percentage).replace(".", ",");
17671
+ return `${formattedPercentage}%`;
17672
+ };
17673
+ return /* @__PURE__ */ jsx(
17674
+ Line,
17675
+ {
17676
+ dataKey: key,
17677
+ yAxisId: rightKeys.includes(key) ? "right" : "left",
17678
+ name: label,
17679
+ stroke: color,
17680
+ strokeWidth: 2,
17681
+ dot: { r: 3 },
17682
+ activeDot: { r: 6 },
17683
+ onClick: handleSeriesClick,
17684
+ className: "cursor-pointer pointer-events-auto",
17685
+ style: { opacity: getSeriesOpacity(key) },
17686
+ children: showLabels && labelsVisibility.line !== false && highlightedSeries.size === 0 || highlightedSeries.has(key) ? /* @__PURE__ */ jsx(
17687
+ LabelList,
17680
17688
  {
17681
- yAxisId: "left",
17682
- width: yAxisTickWidth,
17683
- stroke: "hsl(var(--muted-foreground))",
17684
- fontSize: 12,
17685
- tickLine: false,
17686
- axisLine: false,
17687
- tickFormatter: yTickFormatter,
17688
- domain: [Math.min(minLeftDataValue, 0), niceMaxLeft],
17689
- tickCount: 6,
17690
- label: yAxisLabel ? {
17691
- value: yAxisLabel,
17692
- angle: -90,
17693
- position: "left",
17694
- dx: leftYAxisLabelDx,
17695
- style: {
17696
- fontSize: 12,
17697
- fill: "hsl(var(--muted-foreground))",
17698
- fontWeight: 500,
17699
- textAnchor: "middle"
17700
- }
17701
- } : void 0
17689
+ dataKey: key,
17690
+ position: "top",
17691
+ content: pillLabelRenderer_default(
17692
+ color,
17693
+ "filled",
17694
+ lineFormatter
17695
+ ),
17696
+ offset: 14
17702
17697
  }
17703
- )
17704
- ] }),
17705
- minLeftDataValue < 0 && /* @__PURE__ */ jsx(
17706
- ReferenceLine,
17707
- {
17708
- y: 0,
17709
- yAxisId: "left",
17710
- stroke: "hsl(var(--muted-foreground))",
17711
- strokeWidth: 1,
17712
- strokeDasharray: "4 4"
17713
- }
17714
- ),
17715
- rightKeys.length > 0 && (() => {
17716
- const { rightAxisColor, rightTickFormatter } = fnConfigRightKeys(
17717
- biaxialConfigNormalized,
17718
- yTickFormatter,
17719
- finalColors
17720
- );
17721
- return /* @__PURE__ */ jsx(
17722
- YAxis,
17698
+ ) : null
17699
+ },
17700
+ `line-${key}`
17701
+ );
17702
+ }
17703
+ if (s.type === "area") {
17704
+ return /* @__PURE__ */ jsx(
17705
+ Area,
17706
+ {
17707
+ type: "monotone",
17708
+ dataKey: key,
17709
+ yAxisId: rightKeys.includes(key) ? "right" : "left",
17710
+ name: label,
17711
+ stroke: color,
17712
+ fill: `url(#gradient-${key})`,
17713
+ fillOpacity: 1,
17714
+ strokeWidth: 2,
17715
+ onClick: handleSeriesClick,
17716
+ className: "cursor-pointer pointer-events-auto",
17717
+ style: { opacity: getSeriesOpacity(key) },
17718
+ activeDot: {
17719
+ r: 6,
17720
+ fill: color,
17721
+ stroke: "hsl(var(--background))",
17722
+ strokeWidth: 2
17723
+ },
17724
+ children: showLabels && labelsVisibility.area !== false && highlightedSeries.size === 0 || highlightedSeries.has(key) ? /* @__PURE__ */ jsx(
17725
+ LabelList,
17723
17726
  {
17724
- yAxisId: "right",
17725
- width: finalChartRightMargin,
17726
- orientation: "right",
17727
- stroke: "hsl(var(--muted-foreground))",
17728
- fontSize: 12,
17729
- tickLine: false,
17730
- axisLine: false,
17731
- tick: { fill: rightAxisColor },
17732
- tickFormatter: rightTickFormatter,
17733
- domain: [Math.min(minRightDataValue, 0), niceMaxRight],
17734
- tickCount: 6,
17735
- label: biaxialConfigNormalized?.label ? {
17736
- value: biaxialConfigNormalized.label,
17737
- angle: -90,
17738
- position: "right",
17739
- dx: rightYAxisLabelDx,
17740
- style: {
17741
- fontSize: 12,
17742
- fill: "hsl(var(--muted-foreground))",
17743
- fontWeight: 500,
17744
- textAnchor: "middle"
17745
- }
17746
- } : void 0
17747
- }
17748
- );
17749
- })(),
17750
- showTooltip && /* @__PURE__ */ jsx(
17751
- Tooltip,
17752
- {
17753
- content: showTooltipTotal ? /* @__PURE__ */ jsx(
17754
- TooltipWithTotal_default,
17755
- {
17756
- finalColors,
17757
- valueFormatter: finalValueFormatter,
17758
- categoryFormatter,
17759
- periodLabel
17760
- }
17761
- ) : /* @__PURE__ */ jsx(
17762
- TooltipSimple_default,
17763
- {
17764
- finalColors,
17765
- valueFormatter: finalValueFormatter,
17766
- categoryFormatter,
17767
- periodLabel
17768
- }
17769
- ),
17770
- cursor: { fill: "hsl(var(--muted))", opacity: 0.1 }
17771
- }
17772
- ),
17773
- showLegend && !horizontal && /* @__PURE__ */ jsx(
17774
- Legend,
17775
- {
17776
- iconSize: 12,
17777
- formatter: (value) => {
17778
- return /* @__PURE__ */ jsx("span", { className: "tracking-[0] rounded-sm", children: fnFormatterValueLegend(
17779
- value,
17780
- mapperConfig,
17781
- labelMap,
17782
- legendUppercase
17783
- ) });
17727
+ dataKey: key,
17728
+ position: "top",
17729
+ content: pillLabelRenderer_default(
17730
+ color,
17731
+ "soft",
17732
+ finalValueFormatter
17733
+ ),
17734
+ offset: 12
17784
17735
  }
17785
- }
17786
- ),
17787
- seriesOrder.map((s) => {
17788
- if (showOnlyHighlighted && !highlightedSeries.has(s.key))
17789
- return null;
17790
- const { label, color, key } = fnBuildConfigData(
17791
- s,
17792
- mapperConfig,
17793
- labelMap,
17794
- finalColors,
17795
- rightKeys,
17796
- biaxialConfigNormalized
17797
- );
17798
- if (s.type === "bar") {
17799
- return /* @__PURE__ */ jsx(
17800
- Bar,
17801
- {
17802
- dataKey: key,
17803
- yAxisId: rightKeys.includes(key) ? "right" : "left",
17804
- name: label,
17805
- fill: color,
17806
- radius: horizontal ? [0, 4, 4, 0] : [4, 4, 0, 0],
17807
- onClick: handleBarClick,
17808
- className: "cursor-pointer",
17809
- style: { opacity: getSeriesOpacity(key) },
17810
- activeBar: /* @__PURE__ */ jsx(
17811
- Rectangle,
17812
- {
17813
- fill: color,
17814
- stroke: color,
17815
- strokeWidth: 2,
17816
- opacity: 0.8
17817
- }
17818
- ),
17819
- children: showLabels && labelsVisibility.bar !== false && highlightedSeries.size === 0 || highlightedSeries.has(key) ? /* @__PURE__ */ jsx(
17820
- LabelList,
17821
- {
17822
- dataKey: key,
17823
- content: (props) => {
17824
- if (!fnContentLabelList(props)) return null;
17825
- const inside = renderInsideBarLabel(
17826
- color,
17827
- finalValueFormatter
17828
- );
17829
- return inside(props);
17830
- },
17831
- offset: 0
17832
- }
17833
- ) : null
17834
- },
17835
- `bar-${key}`
17836
- );
17837
- }
17838
- if (s.type === "line") {
17839
- const lineFormatter = (props) => {
17840
- const numValue = typeof props.value === "number" ? props.value : typeof props.value === "string" ? parseFloat(props.value) : 0;
17841
- const percentage = calcDivision(numValue, 100);
17842
- const formattedPercentage = typeof percentage === "number" ? percentage.toFixed(1).replace(".", ",") : String(percentage).replace(".", ",");
17843
- return `${formattedPercentage}%`;
17844
- };
17845
- return /* @__PURE__ */ jsx(
17846
- Line,
17847
- {
17848
- dataKey: key,
17849
- yAxisId: rightKeys.includes(key) ? "right" : "left",
17850
- name: label,
17851
- stroke: color,
17852
- strokeWidth: 2,
17853
- dot: { r: 3 },
17854
- activeDot: { r: 6 },
17855
- onClick: handleSeriesClick,
17856
- className: "cursor-pointer pointer-events-auto",
17857
- style: { opacity: getSeriesOpacity(key) },
17858
- children: showLabels && labelsVisibility.line !== false && highlightedSeries.size === 0 || highlightedSeries.has(key) ? /* @__PURE__ */ jsx(
17859
- LabelList,
17860
- {
17861
- dataKey: key,
17862
- position: "top",
17863
- content: pillLabelRenderer_default(
17864
- color,
17865
- "filled",
17866
- lineFormatter
17867
- ),
17868
- offset: 14
17869
- }
17870
- ) : null
17871
- },
17872
- `line-${key}`
17873
- );
17874
- }
17875
- if (s.type === "area") {
17876
- return /* @__PURE__ */ jsx(
17877
- Area,
17878
- {
17879
- type: "monotone",
17880
- dataKey: key,
17881
- yAxisId: rightKeys.includes(key) ? "right" : "left",
17882
- name: label,
17883
- stroke: color,
17884
- fill: `url(#gradient-${key})`,
17885
- fillOpacity: 1,
17886
- strokeWidth: 2,
17887
- onClick: handleSeriesClick,
17888
- className: "cursor-pointer pointer-events-auto",
17889
- style: { opacity: getSeriesOpacity(key) },
17890
- activeDot: {
17891
- r: 6,
17892
- fill: color,
17893
- stroke: "hsl(var(--background))",
17894
- strokeWidth: 2
17895
- },
17896
- children: showLabels && labelsVisibility.area !== false && highlightedSeries.size === 0 || highlightedSeries.has(key) ? /* @__PURE__ */ jsx(
17897
- LabelList,
17898
- {
17899
- dataKey: key,
17900
- position: "top",
17901
- content: pillLabelRenderer_default(
17902
- color,
17903
- "soft",
17904
- finalValueFormatter
17905
- ),
17906
- offset: 12
17907
- }
17908
- ) : null
17909
- },
17910
- `area-${key}`
17911
- );
17912
- }
17913
- return null;
17914
- })
17915
- ]
17736
+ ) : null
17737
+ },
17738
+ `area-${key}`
17739
+ );
17916
17740
  }
17917
- )
17918
- }
17919
- )
17920
- }
17921
- ),
17741
+ return null;
17742
+ })
17743
+ ]
17744
+ }
17745
+ ) })
17746
+ ] }),
17922
17747
  enableDraggableTooltips && activeTooltips.map((tooltip) => /* @__PURE__ */ jsx(
17923
17748
  DraggableTooltip_default,
17924
17749
  {
@@ -17976,7 +17801,7 @@ var Chart = ({
17976
17801
  }
17977
17802
  }
17978
17803
  )
17979
- ] })
17804
+ ]
17980
17805
  }
17981
17806
  );
17982
17807
  };