@burdenoff/microfe-bigconsole 2026.510.54

package/dist/bigconsole/components/widgets/chart/ChartWidget.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChartWidget.js","names":[],"sources":["../../../../../src/bigconsole/components/widgets/chart/ChartWidget.tsx"],"sourcesContent":["/**\n * ChartWidget Component\n *\n * Wrapper component that renders the appropriate chart type.\n */\n\nimport { type FC, memo, useState, useMemo, useCallback } from 'react';\nimport type { Widget, ChartConfig as WidgetChartConfig } from '../../../types';\nimport { LineChart } from './charts/LineChart';\nimport { BarChart } from './charts/BarChart';\nimport { AreaChart } from './charts/AreaChart';\nimport { PieChart } from './charts/PieChart';\nimport { FunnelChart } from './charts/FunnelChart';\nimport { ChartLegend, type LegendItem } from './ChartLegend';\nimport type { ChartConfig, ChartData, ChartType, CurveType } from './charts/types';\n// Phase 2: Cross-filtering support\nimport { useWidgetCrossFilter, useCrossFilterContext } from '../../../contexts';\n\n// ============================================================================\n// Types\n// ============================================================================\n\nexport interface ChartWidgetProps {\n  /** Widget configuration */\n  widget: Widget;\n  /** Chart data */\n  data?: ChartData[];\n  /** Click handler for drilldown */\n  onClick?: (dataPoint: ChartData, index: number) => void;\n  /** Drilldown handler - receives selected data point */\n  onDrilldown?: (selectedData: Record<string, unknown>) => void;\n}\n\n// ============================================================================\n// Constants\n// ============================================================================\n\nconst DEFAULT_COLORS = [\n  'var(--color-chart-1)',\n  'var(--color-chart-2)',\n  'var(--color-chart-3)',\n  'var(--color-chart-4)',\n  'var(--color-chart-5)',\n];\n\n// ============================================================================\n// Component\n// ============================================================================\n\nexport const ChartWidget: FC<ChartWidgetProps> = memo(function ChartWidget({\n  widget,\n  data = [],\n  onClick,\n  onDrilldown,\n}) {\n  const widgetConfig = widget.config as unknown as WidgetChartConfig | undefined;\n  const [hiddenSeries, setHiddenSeries] = useState<string[]>([]);\n\n  // Phase 2: Cross-filtering support\n  const { handleDataClick: triggerCrossFilter, enabled: crossFilterEnabled } = useWidgetCrossFilter(\n    widget.id,\n    // Map chart data fields to filter IDs\n    widgetConfig?.crossFilterMappings || [\n      { sourceField: widgetConfig?.labelField || 'name', targetFilterId: 'category' },\n    ]\n  );\n  const { clearAllCrossFilters, hasCrossFilters } = useCrossFilterContext();\n\n  // Normalize widget config to chart config\n  const chartConfig: ChartConfig = useMemo(\n    () =>\n      ({\n        type: (widgetConfig?.chartType?.toLowerCase() || 'line') as ChartType,\n        xAxisKey: widgetConfig?.xAxisField || 'name',\n        xAxisLabel: widgetConfig?.xAxisLabel,\n        yAxisLabel: widgetConfig?.yAxisLabel,\n        showGrid: widgetConfig?.showGrid,\n        showLegend: widgetConfig?.showLegend,\n        legendPosition: widgetConfig?.legendPosition,\n        showDots: widgetConfig?.showDataPoints,\n        curveType: widgetConfig?.curveType as CurveType | undefined,\n        colors: widgetConfig?.colors,\n        seriesNames: widgetConfig?.seriesLabels,\n        stacked: widgetConfig?.stacked,\n        isDonut: widgetConfig?.showAsDonut,\n        innerRadius: widgetConfig?.innerRadius,\n        outerRadius: widgetConfig?.outerRadius,\n      }) as ChartConfig,\n    [widgetConfig]\n  );\n\n  // Extract legend items for cartesian charts\n  const legendItems: LegendItem[] = useMemo(() => {\n    if (!data.length) return [];\n\n    // For pie/funnel charts, legend is handled internally\n    if (chartConfig.type === 'pie' || chartConfig.type === 'funnel') {\n      return [];\n    }\n\n    // Get selected fields from widget config (if specified)\n    const selectedFields = widgetConfig?.selectedFields as string[] | undefined;\n\n    // Filter to numeric fields, and apply selectedFields filter if configured\n    const keys = Object.keys(data[0]).filter((key) => {\n      // Must not be the x-axis key and must be numeric\n      const isValidNumericField = key !== chartConfig.xAxisKey && typeof data[0][key] === 'number';\n\n      // If selectedFields is configured and not empty, only include those fields\n      if (selectedFields && selectedFields.length > 0) {\n        return isValidNumericField && selectedFields.includes(key);\n      }\n\n      // Otherwise, show all numeric fields\n      return isValidNumericField;\n    });\n\n    return keys.map((key, index) => ({\n      dataKey: key,\n      name: chartConfig.seriesNames?.[key] || key,\n      color: chartConfig.colors?.[index] || DEFAULT_COLORS[index % DEFAULT_COLORS.length],\n      hidden: hiddenSeries.includes(key),\n    }));\n  }, [data, chartConfig, hiddenSeries, widgetConfig?.selectedFields]);\n\n  // Toggle series visibility\n  const handleLegendClick = useCallback((dataKey: string) => {\n    setHiddenSeries((prev) => (prev.includes(dataKey) ? prev.filter((k) => k !== dataKey) : [...prev, dataKey]));\n  }, []);\n\n  // Handle data point click\n  // Clicking a bar/slice triggers BOTH cross-filtering AND drilldown:\n  //   1. Cross-filter: highlights the clicked item across all widgets\n  //   2. Drilldown: opens the detail modal/page for the clicked item\n  const handleDataClick = useCallback(\n    (dataPoint: ChartData, index: number) => {\n      // Trigger cross-filtering on data click when enabled\n      if (crossFilterEnabled) {\n        const label = dataPoint[widgetConfig?.labelField || 'name'] as string;\n        triggerCrossFilter(dataPoint as Record<string, unknown>, label);\n      }\n\n      // Trigger drilldown if configured\n      if (onDrilldown) {\n        onDrilldown(dataPoint as Record<string, unknown>);\n      } else if (onClick && widget.drilldowns?.length) {\n        onClick(dataPoint, index);\n      }\n    },\n    [onClick, onDrilldown, widget.drilldowns, crossFilterEnabled, triggerCrossFilter, widgetConfig?.labelField]\n  );\n\n  // Render the appropriate chart\n  const renderChart = () => {\n    switch (chartConfig.type) {\n      case 'bar':\n        return <BarChart data={data} config={chartConfig} hiddenSeries={hiddenSeries} onDataClick={handleDataClick} />;\n\n      case 'area':\n        return <AreaChart data={data} config={chartConfig} hiddenSeries={hiddenSeries} onDataClick={handleDataClick} />;\n\n      case 'pie':\n        return (\n          <PieChart\n            data={data}\n            config={chartConfig}\n            dataKey={widgetConfig?.valueField || 'value'}\n            nameKey={widgetConfig?.labelField || 'name'}\n            onDataClick={handleDataClick}\n          />\n        );\n\n      case 'funnel':\n        return (\n          <FunnelChart\n            data={data}\n            config={chartConfig}\n            dataKey={widgetConfig?.valueField || 'value'}\n            nameKey={widgetConfig?.labelField || 'name'}\n            onDataClick={handleDataClick}\n          />\n        );\n\n      case 'line':\n      default:\n        return <LineChart data={data} config={chartConfig} hiddenSeries={hiddenSeries} onDataClick={handleDataClick} />;\n    }\n  };\n\n  return (\n    <div className=\"flex flex-col h-full p-4\">\n      {/* Cross-filter active indicator with clear button */}\n      {hasCrossFilters && (\n        <div className=\"flex items-center gap-2 mb-2 -mt-1\">\n          <button\n            type=\"button\"\n            onClick={(e) => {\n              e.stopPropagation();\n              clearAllCrossFilters();\n            }}\n            className=\"\n              inline-flex items-center gap-1.5\n              px-2.5 py-1 rounded-md\n              text-xs font-medium\n              bg-action-primary-bg/10 text-action-primary-text\n              hover:bg-action-primary-bg/20\n              transition-colors\n            \"\n          >\n            <svg className=\"w-3.5 h-3.5\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n              <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M10 19l-7-7m0 0l7-7m-7 7h18\" />\n            </svg>\n            Clear Filter\n          </button>\n        </div>\n      )}\n\n      {/* Custom legend (for line/bar/area charts with external legend) */}\n      {chartConfig.legendPosition === 'top' && legendItems.length > 0 && (\n        <ChartLegend items={legendItems} position=\"top\" onItemClick={handleLegendClick} />\n      )}\n\n      {/* Chart container */}\n      <div className=\"flex-1 min-h-0\">{renderChart()}</div>\n\n      {/* Custom legend (bottom) */}\n      {chartConfig.legendPosition === 'bottom' && legendItems.length > 0 && (\n        <ChartLegend items={legendItems} position=\"bottom\" onItemClick={handleLegendClick} />\n      )}\n    </div>\n  );\n});\n\nexport default ChartWidget;\n"],"mappings":";;;;;;;;;;;AAqCA,IAAM,IAAiB;CACrB;CACA;CACA;CACA;CACA;CACD,EAMY,IAAoC,EAAK,SAAqB,EACzE,WACA,UAAO,EAAE,EACT,YACA,kBACC;CACD,IAAM,IAAe,EAAO,QACtB,CAAC,GAAc,KAAmB,EAAmB,EAAE,CAAC,EAGxD,EAAE,iBAAiB,GAAoB,SAAS,MAAuB,EAC3E,EAAO,IAEP,GAAc,uBAAuB,CACnC;EAAE,aAAa,GAAc,cAAc;EAAQ,gBAAgB;EAAY,CAChF,CACF,EACK,EAAE,yBAAsB,uBAAoB,GAAuB,EAGnE,IAA2B,SAE5B;EACC,MAAO,GAAc,WAAW,aAAa,IAAI;EACjD,UAAU,GAAc,cAAc;EACtC,YAAY,GAAc;EAC1B,YAAY,GAAc;EAC1B,UAAU,GAAc;EACxB,YAAY,GAAc;EAC1B,gBAAgB,GAAc;EAC9B,UAAU,GAAc;EACxB,WAAW,GAAc;EACzB,QAAQ,GAAc;EACtB,aAAa,GAAc;EAC3B,SAAS,GAAc;EACvB,SAAS,GAAc;EACvB,aAAa,GAAc;EAC3B,aAAa,GAAc;EAC5B,GACH,CAAC,EAAa,CACf,EAGK,IAA4B,QAAc;AAI9C,MAHI,CAAC,EAAK,UAGN,EAAY,SAAS,SAAS,EAAY,SAAS,SACrD,QAAO,EAAE;EAIX,IAAM,IAAiB,GAAc;AAgBrC,SAba,OAAO,KAAK,EAAK,GAAG,CAAC,QAAQ,MAAQ;GAEhD,IAAM,IAAsB,MAAQ,EAAY,YAAY,OAAO,EAAK,GAAG,MAAS;AAQpF,UALI,KAAkB,EAAe,SAAS,IACrC,KAAuB,EAAe,SAAS,EAAI,GAIrD;IACP,CAEU,KAAK,GAAK,OAAW;GAC/B,SAAS;GACT,MAAM,EAAY,cAAc,MAAQ;GACxC,OAAO,EAAY,SAAS,MAAU,EAAe,IAAQ,EAAe;GAC5E,QAAQ,EAAa,SAAS,EAAI;GACnC,EAAE;IACF;EAAC;EAAM;EAAa;EAAc,GAAc;EAAe,CAAC,EAG7D,IAAoB,GAAa,MAAoB;AACzD,KAAiB,MAAU,EAAK,SAAS,EAAQ,GAAG,EAAK,QAAQ,MAAM,MAAM,EAAQ,GAAG,CAAC,GAAG,GAAM,EAAQ,CAAE;IAC3G,EAAE,CAAC,EAMA,IAAkB,GACrB,GAAsB,MAAkB;AAEvC,MAAI,GAAoB;GACtB,IAAM,IAAQ,EAAU,GAAc,cAAc;AACpD,KAAmB,GAAsC,EAAM;;AAIjE,EAAI,IACF,EAAY,EAAqC,GACxC,KAAW,EAAO,YAAY,UACvC,EAAQ,GAAW,EAAM;IAG7B;EAAC;EAAS;EAAa,EAAO;EAAY;EAAoB;EAAoB,GAAc;EAAW,CAC5G;AAuCD,QACE,kBAAC,OAAD;EAAK,WAAU;YAAf;GAEG,KACC,kBAAC,OAAD;IAAK,WAAU;cACb,kBAAC,UAAD;KACE,MAAK;KACL,UAAU,MAAM;AAEd,MADA,EAAE,iBAAiB,EACnB,GAAsB;;KAExB,WAAU;eANZ,CAeE,kBAAC,OAAD;MAAK,WAAU;MAAc,MAAK;MAAO,QAAO;MAAe,SAAQ;gBACrE,kBAAC,QAAD;OAAM,eAAc;OAAQ,gBAAe;OAAQ,aAAa;OAAG,GAAE;OAAgC,CAAA;MACjG,CAAA,EAAA,eAEC;;IACL,CAAA;GAIP,EAAY,mBAAmB,SAAS,EAAY,SAAS,KAC5D,kBAAC,GAAD;IAAa,OAAO;IAAa,UAAS;IAAM,aAAa;IAAqB,CAAA;GAIpF,kBAAC,OAAD;IAAK,WAAU;qBAtEO;AACxB,aAAQ,EAAY,MAApB;MACE,KAAK,MACH,QAAO,kBAAC,GAAD;OAAgB;OAAM,QAAQ;OAA2B;OAAc,aAAa;OAAmB,CAAA;MAEhH,KAAK,OACH,QAAO,kBAAC,GAAD;OAAiB;OAAM,QAAQ;OAA2B;OAAc,aAAa;OAAmB,CAAA;MAEjH,KAAK,MACH,QACE,kBAAC,GAAD;OACQ;OACN,QAAQ;OACR,SAAS,GAAc,cAAc;OACrC,SAAS,GAAc,cAAc;OACrC,aAAa;OACb,CAAA;MAGN,KAAK,SACH,QACE,kBAAC,GAAD;OACQ;OACN,QAAQ;OACR,SAAS,GAAc,cAAc;OACrC,SAAS,GAAc,cAAc;OACrC,aAAa;OACb,CAAA;MAIN,QACE,QAAO,kBAAC,GAAD;OAAiB;OAAM,QAAQ;OAA2B;OAAc,aAAa;OAAmB,CAAA;;QAsCnE;IAAO,CAAA;GAGpD,EAAY,mBAAmB,YAAY,EAAY,SAAS,KAC/D,kBAAC,GAAD;IAAa,OAAO;IAAa,UAAS;IAAS,aAAa;IAAqB,CAAA;GAEnF;;EAER"}

package/dist/bigconsole/components/widgets/chart/charts/AreaChart.d.ts

@@ -0,0 +1,16 @@
+import { FC } from 'react';
+import { ChartConfig, ChartData } from './types';
+
+export interface AreaChartProps {
+    /** Chart data */
+    data: ChartData[];
+    /** Chart configuration */
+    config: ChartConfig;
+    /** Series to hide */
+    hiddenSeries?: string[];
+    /** Click handler for data points */
+    onDataClick?: (data: ChartData, index: number) => void;
+}
+export declare const AreaChart: FC<AreaChartProps>;
+export default AreaChart;
+//# sourceMappingURL=AreaChart.d.ts.map

package/dist/bigconsole/components/widgets/chart/charts/AreaChart.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AreaChart.d.ts","sourceRoot":"","sources":["../../../../../../src/bigconsole/components/widgets/chart/charts/AreaChart.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAE,KAAK,EAAE,EAAiB,MAAM,OAAO,CAAC;AAY/C,OAAO,KAAK,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAMtD,MAAM,WAAW,cAAc;IAC7B,iBAAiB;IACjB,IAAI,EAAE,SAAS,EAAE,CAAC;IAClB,0BAA0B;IAC1B,MAAM,EAAE,WAAW,CAAC;IACpB,qBAAqB;IACrB,YAAY,CAAC,EAAE,MAAM,EAAE,CAAC;IACxB,oCAAoC;IACpC,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,SAAS,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACxD;AAkBD,eAAO,MAAM,SAAS,EAAE,EAAE,CAAC,cAAc,CAqGvC,CAAC;AAEH,eAAe,SAAS,CAAC"}

package/dist/bigconsole/components/widgets/chart/charts/AreaChart.js

@@ -0,0 +1,104 @@
+import e from "../ChartTooltip.js";
+import { memo as t, useMemo as n } from "react";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+import { Area as a, AreaChart as o, CartesianGrid as s, Legend as c, ResponsiveContainer as l, Tooltip as u, XAxis as d, YAxis as f } from "recharts";
+//#region src/bigconsole/components/widgets/chart/charts/AreaChart.tsx
+var p = [
+	"var(--color-chart-1)",
+	"var(--color-chart-2)",
+	"var(--color-chart-3)",
+	"var(--color-chart-4)",
+	"var(--color-chart-5)"
+], m = t(function({ data: t = [], config: m, hiddenSeries: h = [], onDataClick: g }) {
+	let _ = n(() => t?.length ? Object.keys(t[0]).filter((e) => e !== m.xAxisKey && typeof t[0][e] == "number") : [], [t, m.xAxisKey]), v = (e) => typeof e == "number" ? new Intl.NumberFormat("en-US", {
+		notation: e >= 1e4 ? "compact" : "standard",
+		maximumFractionDigits: 2
+	}).format(e) : String(e), y = (e) => `gradient-${e}`;
+	return t?.length ? /* @__PURE__ */ r(l, {
+		width: "100%",
+		height: "100%",
+		children: /* @__PURE__ */ i(o, {
+			data: t,
+			margin: {
+				top: 10,
+				right: 10,
+				left: 0,
+				bottom: 0
+			},
+			onClick: (e) => {
+				e?.activePayload?.[0] && g && g(e.activePayload[0].payload, e.activeTooltipIndex || 0);
+			},
+			children: [
+				/* @__PURE__ */ r("defs", { children: _.map((e, t) => {
+					let n = m.colors?.[t] || p[t % p.length];
+					return /* @__PURE__ */ i("linearGradient", {
+						id: y(e),
+						x1: "0",
+						y1: "0",
+						x2: "0",
+						y2: "1",
+						children: [/* @__PURE__ */ r("stop", {
+							offset: "0%",
+							stopColor: n,
+							stopOpacity: .4
+						}), /* @__PURE__ */ r("stop", {
+							offset: "95%",
+							stopColor: n,
+							stopOpacity: .05
+						})]
+					}, e);
+				}) }),
+				m.showGrid !== !1 && /* @__PURE__ */ r(s, {
+					strokeDasharray: "3 3",
+					stroke: "var(--color-border-default)",
+					opacity: .5
+				}),
+				/* @__PURE__ */ r(d, {
+					dataKey: m.xAxisKey || "name",
+					tick: {
+						fill: "var(--color-text-secondary)",
+						fontSize: 12
+					},
+					tickLine: { stroke: "var(--color-border-default)" },
+					axisLine: { stroke: "var(--color-border-default)" }
+				}),
+				/* @__PURE__ */ r(f, {
+					tick: {
+						fill: "var(--color-text-secondary)",
+						fontSize: 12
+					},
+					tickLine: { stroke: "var(--color-border-default)" },
+					axisLine: { stroke: "var(--color-border-default)" },
+					tickFormatter: v
+				}),
+				/* @__PURE__ */ r(u, {
+					content: /* @__PURE__ */ r(e, { valueFormatter: v }),
+					cursor: { stroke: "var(--color-border-default)" }
+				}),
+				m.showLegend !== !1 && /* @__PURE__ */ r(c, {
+					wrapperStyle: { paddingTop: 20 },
+					formatter: (e) => /* @__PURE__ */ r("span", {
+						style: { color: "var(--color-text-primary)" },
+						children: e
+					})
+				}),
+				_.map((e, t) => /* @__PURE__ */ r(a, {
+					type: m.curveType || "monotone",
+					dataKey: e,
+					name: m.seriesNames?.[e] || e,
+					stroke: m.colors?.[t] || p[t % p.length],
+					strokeWidth: 2,
+					fill: `url(#${y(e)})`,
+					dot: m.showDots,
+					activeDot: { r: 6 },
+					hide: h.includes(e),
+					stackId: m.stacked ? "stack" : void 0
+				}, e))
+			]
+		})
+	}) : null;
+});
+//#endregion
+export { m as default };
+
+//# sourceMappingURL=AreaChart.js.map

package/dist/bigconsole/components/widgets/chart/charts/AreaChart.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AreaChart.js","names":[],"sources":["../../../../../../src/bigconsole/components/widgets/chart/charts/AreaChart.tsx"],"sourcesContent":["/**\n * AreaChart Component\n *\n * Area chart using Recharts.\n */\n\nimport { type FC, memo, useMemo } from 'react';\nimport {\n  AreaChart as RechartsAreaChart,\n  Area,\n  XAxis,\n  YAxis,\n  CartesianGrid,\n  Tooltip,\n  ResponsiveContainer,\n  Legend,\n} from 'recharts';\nimport { ChartTooltip } from '../ChartTooltip';\nimport type { ChartConfig, ChartData } from './types';\n\n// ============================================================================\n// Types\n// ============================================================================\n\nexport interface AreaChartProps {\n  /** Chart data */\n  data: ChartData[];\n  /** Chart configuration */\n  config: ChartConfig;\n  /** Series to hide */\n  hiddenSeries?: string[];\n  /** Click handler for data points */\n  onDataClick?: (data: ChartData, index: number) => void;\n}\n\n// ============================================================================\n// Constants\n// ============================================================================\n\nconst DEFAULT_COLORS = [\n  'var(--color-chart-1)',\n  'var(--color-chart-2)',\n  'var(--color-chart-3)',\n  'var(--color-chart-4)',\n  'var(--color-chart-5)',\n];\n\n// ============================================================================\n// Component\n// ============================================================================\n\nexport const AreaChart: FC<AreaChartProps> = memo(function AreaChart({\n  data = [],\n  config,\n  hiddenSeries = [],\n  onDataClick,\n}) {\n  // Extract data keys (series)\n  const dataKeys = useMemo(() => {\n    if (!data?.length) return [];\n    const keys = Object.keys(data[0]).filter((key) => key !== config.xAxisKey && typeof data[0][key] === 'number');\n    return keys;\n  }, [data, config.xAxisKey]);\n\n  // Format value\n  const formatValue = (value: number | string): string => {\n    if (typeof value !== 'number') return String(value);\n    return new Intl.NumberFormat('en-US', {\n      notation: value >= 10000 ? 'compact' : 'standard',\n      maximumFractionDigits: 2,\n    }).format(value);\n  };\n\n  // Generate gradient ID\n  const getGradientId = (key: string) => `gradient-${key}`;\n\n  if (!data?.length) {\n    return null;\n  }\n\n  return (\n    <ResponsiveContainer width=\"100%\" height=\"100%\">\n      <RechartsAreaChart\n        data={data}\n        margin={{ top: 10, right: 10, left: 0, bottom: 0 }}\n        onClick={(e) => {\n          if (e?.activePayload?.[0] && onDataClick) {\n            onDataClick(e.activePayload[0].payload, e.activeTooltipIndex || 0);\n          }\n        }}\n      >\n        {/* Gradients */}\n        <defs>\n          {dataKeys.map((key, index) => {\n            const color = config.colors?.[index] || DEFAULT_COLORS[index % DEFAULT_COLORS.length];\n            return (\n              <linearGradient key={key} id={getGradientId(key)} x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n                <stop offset=\"0%\" stopColor={color} stopOpacity={0.4} />\n                <stop offset=\"95%\" stopColor={color} stopOpacity={0.05} />\n              </linearGradient>\n            );\n          })}\n        </defs>\n\n        {config.showGrid !== false && (\n          <CartesianGrid strokeDasharray=\"3 3\" stroke=\"var(--color-border-default)\" opacity={0.5} />\n        )}\n\n        <XAxis\n          dataKey={config.xAxisKey || 'name'}\n          tick={{ fill: 'var(--color-text-secondary)', fontSize: 12 }}\n          tickLine={{ stroke: 'var(--color-border-default)' }}\n          axisLine={{ stroke: 'var(--color-border-default)' }}\n        />\n\n        <YAxis\n          tick={{ fill: 'var(--color-text-secondary)', fontSize: 12 }}\n          tickLine={{ stroke: 'var(--color-border-default)' }}\n          axisLine={{ stroke: 'var(--color-border-default)' }}\n          tickFormatter={formatValue}\n        />\n\n        <Tooltip\n          content={<ChartTooltip valueFormatter={formatValue} />}\n          cursor={{ stroke: 'var(--color-border-default)' }}\n        />\n\n        {config.showLegend !== false && (\n          <Legend\n            wrapperStyle={{ paddingTop: 20 }}\n            formatter={(value) => <span style={{ color: 'var(--color-text-primary)' }}>{value}</span>}\n          />\n        )}\n\n        {dataKeys.map((key, index) => (\n          <Area\n            key={key}\n            type={config.curveType || 'monotone'}\n            dataKey={key}\n            name={config.seriesNames?.[key] || key}\n            stroke={config.colors?.[index] || DEFAULT_COLORS[index % DEFAULT_COLORS.length]}\n            strokeWidth={2}\n            fill={`url(#${getGradientId(key)})`}\n            dot={config.showDots}\n            activeDot={{ r: 6 }}\n            hide={hiddenSeries.includes(key)}\n            stackId={config.stacked ? 'stack' : undefined}\n          />\n        ))}\n      </RechartsAreaChart>\n    </ResponsiveContainer>\n  );\n});\n\nexport default AreaChart;\n"],"mappings":";;;;;AAuCA,IAAM,IAAiB;CACrB;CACA;CACA;CACA;CACA;CACD,EAMY,IAAgC,EAAK,SAAmB,EACnE,UAAO,EAAE,EACT,WACA,kBAAe,EAAE,EACjB,kBACC;CAED,IAAM,IAAW,QACV,GAAM,SACE,OAAO,KAAK,EAAK,GAAG,CAAC,QAAQ,MAAQ,MAAQ,EAAO,YAAY,OAAO,EAAK,GAAG,MAAS,SAAS,GADpF,EAAE,EAG3B,CAAC,GAAM,EAAO,SAAS,CAAC,EAGrB,KAAe,MACf,OAAO,KAAU,WACd,IAAI,KAAK,aAAa,SAAS;EACpC,UAAU,KAAS,MAAQ,YAAY;EACvC,uBAAuB;EACxB,CAAC,CAAC,OAAO,EAAM,GAJsB,OAAO,EAAM,EAQ/C,KAAiB,MAAgB,YAAY;AAMnD,QAJK,GAAM,SAKT,kBAAC,GAAD;EAAqB,OAAM;EAAO,QAAO;YACvC,kBAAC,GAAD;GACQ;GACN,QAAQ;IAAE,KAAK;IAAI,OAAO;IAAI,MAAM;IAAG,QAAQ;IAAG;GAClD,UAAU,MAAM;AACd,IAAI,GAAG,gBAAgB,MAAM,KAC3B,EAAY,EAAE,cAAc,GAAG,SAAS,EAAE,sBAAsB,EAAE;;aALxE;IAUE,kBAAC,QAAD,EAAA,UACG,EAAS,KAAK,GAAK,MAAU;KAC5B,IAAM,IAAQ,EAAO,SAAS,MAAU,EAAe,IAAQ,EAAe;AAC9E,YACE,kBAAC,kBAAD;MAA0B,IAAI,EAAc,EAAI;MAAE,IAAG;MAAI,IAAG;MAAI,IAAG;MAAI,IAAG;gBAA1E,CACE,kBAAC,QAAD;OAAM,QAAO;OAAK,WAAW;OAAO,aAAa;OAAO,CAAA,EACxD,kBAAC,QAAD;OAAM,QAAO;OAAM,WAAW;OAAO,aAAa;OAAQ,CAAA,CAC3C;QAHI,EAGJ;MAEnB,EACG,CAAA;IAEN,EAAO,aAAa,MACnB,kBAAC,GAAD;KAAe,iBAAgB;KAAM,QAAO;KAA8B,SAAS;KAAO,CAAA;IAG5F,kBAAC,GAAD;KACE,SAAS,EAAO,YAAY;KAC5B,MAAM;MAAE,MAAM;MAA+B,UAAU;MAAI;KAC3D,UAAU,EAAE,QAAQ,+BAA+B;KACnD,UAAU,EAAE,QAAQ,+BAA+B;KACnD,CAAA;IAEF,kBAAC,GAAD;KACE,MAAM;MAAE,MAAM;MAA+B,UAAU;MAAI;KAC3D,UAAU,EAAE,QAAQ,+BAA+B;KACnD,UAAU,EAAE,QAAQ,+BAA+B;KACnD,eAAe;KACf,CAAA;IAEF,kBAAC,GAAD;KACE,SAAS,kBAAC,GAAD,EAAc,gBAAgB,GAAe,CAAA;KACtD,QAAQ,EAAE,QAAQ,+BAA+B;KACjD,CAAA;IAED,EAAO,eAAe,MACrB,kBAAC,GAAD;KACE,cAAc,EAAE,YAAY,IAAI;KAChC,YAAY,MAAU,kBAAC,QAAD;MAAM,OAAO,EAAE,OAAO,6BAA6B;gBAAG;MAAa,CAAA;KACzF,CAAA;IAGH,EAAS,KAAK,GAAK,MAClB,kBAAC,GAAD;KAEE,MAAM,EAAO,aAAa;KAC1B,SAAS;KACT,MAAM,EAAO,cAAc,MAAQ;KACnC,QAAQ,EAAO,SAAS,MAAU,EAAe,IAAQ,EAAe;KACxE,aAAa;KACb,MAAM,QAAQ,EAAc,EAAI,CAAC;KACjC,KAAK,EAAO;KACZ,WAAW,EAAE,GAAG,GAAG;KACnB,MAAM,EAAa,SAAS,EAAI;KAChC,SAAS,EAAO,UAAU,UAAU,KAAA;KACpC,EAXK,EAWL,CACF;IACgB;;EACA,CAAA,GAzEf;EA2ET"}

package/dist/bigconsole/components/widgets/chart/charts/BarChart.d.ts

@@ -0,0 +1,16 @@
+import { FC } from 'react';
+import { ChartConfig, ChartData } from './types';
+
+export interface BarChartProps {
+    /** Chart data */
+    data: ChartData[];
+    /** Chart configuration */
+    config: ChartConfig;
+    /** Series to hide */
+    hiddenSeries?: string[];
+    /** Click handler for bars */
+    onDataClick?: (data: ChartData, index: number) => void;
+}
+export declare const BarChart: FC<BarChartProps>;
+export default BarChart;
+//# sourceMappingURL=BarChart.d.ts.map

package/dist/bigconsole/components/widgets/chart/charts/BarChart.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BarChart.d.ts","sourceRoot":"","sources":["../../../../../../src/bigconsole/components/widgets/chart/charts/BarChart.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAE,KAAK,EAAE,EAAiB,MAAM,OAAO,CAAC;AAY/C,OAAO,KAAK,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAMtD,MAAM,WAAW,aAAa;IAC5B,iBAAiB;IACjB,IAAI,EAAE,SAAS,EAAE,CAAC;IAClB,0BAA0B;IAC1B,MAAM,EAAE,WAAW,CAAC;IACpB,qBAAqB;IACrB,YAAY,CAAC,EAAE,MAAM,EAAE,CAAC;IACxB,6BAA6B;IAC7B,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,SAAS,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACxD;AAkBD,eAAO,MAAM,QAAQ,EAAE,EAAE,CAAC,aAAa,CAiFrC,CAAC;AAEH,eAAe,QAAQ,CAAC"}

package/dist/bigconsole/components/widgets/chart/charts/BarChart.js

@@ -0,0 +1,90 @@
+import e from "../ChartTooltip.js";
+import { memo as t, useMemo as n } from "react";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+import { Bar as a, BarChart as o, CartesianGrid as s, Legend as c, ResponsiveContainer as l, Tooltip as u, XAxis as d, YAxis as f } from "recharts";
+//#region src/bigconsole/components/widgets/chart/charts/BarChart.tsx
+var p = [
+	"var(--color-chart-1)",
+	"var(--color-chart-2)",
+	"var(--color-chart-3)",
+	"var(--color-chart-4)",
+	"var(--color-chart-5)"
+], m = t(function({ data: t = [], config: m, hiddenSeries: h = [], onDataClick: g }) {
+	let _ = n(() => t?.length ? Object.keys(t[0]).filter((e) => e !== m.xAxisKey && typeof t[0][e] == "number") : [], [t, m.xAxisKey]), v = (e) => typeof e == "number" ? new Intl.NumberFormat("en-US", {
+		notation: e >= 1e4 ? "compact" : "standard",
+		maximumFractionDigits: 2
+	}).format(e) : String(e);
+	return t?.length ? /* @__PURE__ */ r(l, {
+		width: "100%",
+		height: "100%",
+		children: /* @__PURE__ */ i(o, {
+			data: t,
+			margin: {
+				top: 10,
+				right: 10,
+				left: 0,
+				bottom: 0
+			},
+			onClick: (e) => {
+				e?.activePayload?.[0] && g && g(e.activePayload[0].payload, e.activeTooltipIndex || 0);
+			},
+			children: [
+				m.showGrid !== !1 && /* @__PURE__ */ r(s, {
+					strokeDasharray: "3 3",
+					stroke: "var(--color-border-default)",
+					opacity: .5,
+					vertical: !1
+				}),
+				/* @__PURE__ */ r(d, {
+					dataKey: m.xAxisKey || "name",
+					tick: {
+						fill: "var(--color-text-secondary)",
+						fontSize: 12
+					},
+					tickLine: { stroke: "var(--color-border-default)" },
+					axisLine: { stroke: "var(--color-border-default)" }
+				}),
+				/* @__PURE__ */ r(f, {
+					tick: {
+						fill: "var(--color-text-secondary)",
+						fontSize: 12
+					},
+					tickLine: { stroke: "var(--color-border-default)" },
+					axisLine: { stroke: "var(--color-border-default)" },
+					tickFormatter: v
+				}),
+				/* @__PURE__ */ r(u, {
+					content: /* @__PURE__ */ r(e, { valueFormatter: v }),
+					cursor: {
+						fill: "var(--color-bg-muted)",
+						opacity: .5
+					}
+				}),
+				m.showLegend !== !1 && /* @__PURE__ */ r(c, {
+					wrapperStyle: { paddingTop: 20 },
+					formatter: (e) => /* @__PURE__ */ r("span", {
+						style: { color: "var(--color-text-primary)" },
+						children: e
+					})
+				}),
+				_.map((e, t) => /* @__PURE__ */ r(a, {
+					dataKey: e,
+					name: m.seriesNames?.[e] || e,
+					fill: m.colors?.[t] || p[t % p.length],
+					radius: [
+						4,
+						4,
+						0,
+						0
+					],
+					hide: h.includes(e),
+					stackId: m.stacked ? "stack" : void 0
+				}, e))
+			]
+		})
+	}) : null;
+});
+//#endregion
+export { m as default };
+
+//# sourceMappingURL=BarChart.js.map

package/dist/bigconsole/components/widgets/chart/charts/BarChart.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BarChart.js","names":[],"sources":["../../../../../../src/bigconsole/components/widgets/chart/charts/BarChart.tsx"],"sourcesContent":["/**\n * BarChart Component\n *\n * Bar chart using Recharts.\n */\n\nimport { type FC, memo, useMemo } from 'react';\nimport {\n  BarChart as RechartsBarChart,\n  Bar,\n  XAxis,\n  YAxis,\n  CartesianGrid,\n  Tooltip,\n  ResponsiveContainer,\n  Legend,\n} from 'recharts';\nimport { ChartTooltip } from '../ChartTooltip';\nimport type { ChartConfig, ChartData } from './types';\n\n// ============================================================================\n// Types\n// ============================================================================\n\nexport interface BarChartProps {\n  /** Chart data */\n  data: ChartData[];\n  /** Chart configuration */\n  config: ChartConfig;\n  /** Series to hide */\n  hiddenSeries?: string[];\n  /** Click handler for bars */\n  onDataClick?: (data: ChartData, index: number) => void;\n}\n\n// ============================================================================\n// Constants\n// ============================================================================\n\nconst DEFAULT_COLORS = [\n  'var(--color-chart-1)',\n  'var(--color-chart-2)',\n  'var(--color-chart-3)',\n  'var(--color-chart-4)',\n  'var(--color-chart-5)',\n];\n\n// ============================================================================\n// Component\n// ============================================================================\n\nexport const BarChart: FC<BarChartProps> = memo(function BarChart({\n  data = [],\n  config,\n  hiddenSeries = [],\n  onDataClick,\n}) {\n  // Extract data keys (series)\n  const dataKeys = useMemo(() => {\n    if (!data?.length) return [];\n    const keys = Object.keys(data[0]).filter((key) => key !== config.xAxisKey && typeof data[0][key] === 'number');\n    return keys;\n  }, [data, config.xAxisKey]);\n\n  // Format value\n  const formatValue = (value: number | string): string => {\n    if (typeof value !== 'number') return String(value);\n    return new Intl.NumberFormat('en-US', {\n      notation: value >= 10000 ? 'compact' : 'standard',\n      maximumFractionDigits: 2,\n    }).format(value);\n  };\n\n  if (!data?.length) {\n    return null;\n  }\n\n  return (\n    <ResponsiveContainer width=\"100%\" height=\"100%\">\n      <RechartsBarChart\n        data={data}\n        margin={{ top: 10, right: 10, left: 0, bottom: 0 }}\n        onClick={(e) => {\n          if (e?.activePayload?.[0] && onDataClick) {\n            onDataClick(e.activePayload[0].payload, e.activeTooltipIndex || 0);\n          }\n        }}\n      >\n        {config.showGrid !== false && (\n          <CartesianGrid strokeDasharray=\"3 3\" stroke=\"var(--color-border-default)\" opacity={0.5} vertical={false} />\n        )}\n\n        <XAxis\n          dataKey={config.xAxisKey || 'name'}\n          tick={{ fill: 'var(--color-text-secondary)', fontSize: 12 }}\n          tickLine={{ stroke: 'var(--color-border-default)' }}\n          axisLine={{ stroke: 'var(--color-border-default)' }}\n        />\n\n        <YAxis\n          tick={{ fill: 'var(--color-text-secondary)', fontSize: 12 }}\n          tickLine={{ stroke: 'var(--color-border-default)' }}\n          axisLine={{ stroke: 'var(--color-border-default)' }}\n          tickFormatter={formatValue}\n        />\n\n        <Tooltip\n          content={<ChartTooltip valueFormatter={formatValue} />}\n          cursor={{ fill: 'var(--color-bg-muted)', opacity: 0.5 }}\n        />\n\n        {config.showLegend !== false && (\n          <Legend\n            wrapperStyle={{ paddingTop: 20 }}\n            formatter={(value) => <span style={{ color: 'var(--color-text-primary)' }}>{value}</span>}\n          />\n        )}\n\n        {dataKeys.map((key, index) => (\n          <Bar\n            key={key}\n            dataKey={key}\n            name={config.seriesNames?.[key] || key}\n            fill={config.colors?.[index] || DEFAULT_COLORS[index % DEFAULT_COLORS.length]}\n            radius={[4, 4, 0, 0]}\n            hide={hiddenSeries.includes(key)}\n            stackId={config.stacked ? 'stack' : undefined}\n          />\n        ))}\n      </RechartsBarChart>\n    </ResponsiveContainer>\n  );\n});\n\nexport default BarChart;\n"],"mappings":";;;;;AAuCA,IAAM,IAAiB;CACrB;CACA;CACA;CACA;CACA;CACD,EAMY,IAA8B,EAAK,SAAkB,EAChE,UAAO,EAAE,EACT,WACA,kBAAe,EAAE,EACjB,kBACC;CAED,IAAM,IAAW,QACV,GAAM,SACE,OAAO,KAAK,EAAK,GAAG,CAAC,QAAQ,MAAQ,MAAQ,EAAO,YAAY,OAAO,EAAK,GAAG,MAAS,SAAS,GADpF,EAAE,EAG3B,CAAC,GAAM,EAAO,SAAS,CAAC,EAGrB,KAAe,MACf,OAAO,KAAU,WACd,IAAI,KAAK,aAAa,SAAS;EACpC,UAAU,KAAS,MAAQ,YAAY;EACvC,uBAAuB;EACxB,CAAC,CAAC,OAAO,EAAM,GAJsB,OAAO,EAAM;AAWrD,QAJK,GAAM,SAKT,kBAAC,GAAD;EAAqB,OAAM;EAAO,QAAO;YACvC,kBAAC,GAAD;GACQ;GACN,QAAQ;IAAE,KAAK;IAAI,OAAO;IAAI,MAAM;IAAG,QAAQ;IAAG;GAClD,UAAU,MAAM;AACd,IAAI,GAAG,gBAAgB,MAAM,KAC3B,EAAY,EAAE,cAAc,GAAG,SAAS,EAAE,sBAAsB,EAAE;;aALxE;IASG,EAAO,aAAa,MACnB,kBAAC,GAAD;KAAe,iBAAgB;KAAM,QAAO;KAA8B,SAAS;KAAK,UAAU;KAAS,CAAA;IAG7G,kBAAC,GAAD;KACE,SAAS,EAAO,YAAY;KAC5B,MAAM;MAAE,MAAM;MAA+B,UAAU;MAAI;KAC3D,UAAU,EAAE,QAAQ,+BAA+B;KACnD,UAAU,EAAE,QAAQ,+BAA+B;KACnD,CAAA;IAEF,kBAAC,GAAD;KACE,MAAM;MAAE,MAAM;MAA+B,UAAU;MAAI;KAC3D,UAAU,EAAE,QAAQ,+BAA+B;KACnD,UAAU,EAAE,QAAQ,+BAA+B;KACnD,eAAe;KACf,CAAA;IAEF,kBAAC,GAAD;KACE,SAAS,kBAAC,GAAD,EAAc,gBAAgB,GAAe,CAAA;KACtD,QAAQ;MAAE,MAAM;MAAyB,SAAS;MAAK;KACvD,CAAA;IAED,EAAO,eAAe,MACrB,kBAAC,GAAD;KACE,cAAc,EAAE,YAAY,IAAI;KAChC,YAAY,MAAU,kBAAC,QAAD;MAAM,OAAO,EAAE,OAAO,6BAA6B;gBAAG;MAAa,CAAA;KACzF,CAAA;IAGH,EAAS,KAAK,GAAK,MAClB,kBAAC,GAAD;KAEE,SAAS;KACT,MAAM,EAAO,cAAc,MAAQ;KACnC,MAAM,EAAO,SAAS,MAAU,EAAe,IAAQ,EAAe;KACtE,QAAQ;MAAC;MAAG;MAAG;MAAG;MAAE;KACpB,MAAM,EAAa,SAAS,EAAI;KAChC,SAAS,EAAO,UAAU,UAAU,KAAA;KACpC,EAPK,EAOL,CACF;IACe;;EACC,CAAA,GAxDf;EA0DT"}

package/dist/bigconsole/components/widgets/chart/charts/FunnelChart.d.ts

@@ -0,0 +1,18 @@
+import { FC } from 'react';
+import { ChartConfig, ChartData } from './types';
+
+export interface FunnelChartProps {
+    /** Chart data (should be sorted by value descending) */
+    data: ChartData[];
+    /** Chart configuration */
+    config: ChartConfig;
+    /** Data key for values */
+    dataKey?: string;
+    /** Data key for names */
+    nameKey?: string;
+    /** Click handler */
+    onDataClick?: (data: ChartData, index: number) => void;
+}
+export declare const FunnelChart: FC<FunnelChartProps>;
+export default FunnelChart;
+//# sourceMappingURL=FunnelChart.d.ts.map

package/dist/bigconsole/components/widgets/chart/charts/FunnelChart.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FunnelChart.d.ts","sourceRoot":"","sources":["../../../../../../src/bigconsole/components/widgets/chart/charts/FunnelChart.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAE,KAAK,EAAE,EAAQ,MAAM,OAAO,CAAC;AAGtC,OAAO,KAAK,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAMtD,MAAM,WAAW,gBAAgB;IAC/B,wDAAwD;IACxD,IAAI,EAAE,SAAS,EAAE,CAAC;IAClB,0BAA0B;IAC1B,MAAM,EAAE,WAAW,CAAC;IACpB,0BAA0B;IAC1B,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,yBAAyB;IACzB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,oBAAoB;IACpB,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,SAAS,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACxD;AAkBD,eAAO,MAAM,WAAW,EAAE,EAAE,CAAC,gBAAgB,CAsE3C,CAAC;AAEH,eAAe,WAAW,CAAC"}

package/dist/bigconsole/components/widgets/chart/charts/FunnelChart.js

@@ -0,0 +1,70 @@
+import e from "../ChartTooltip.js";
+import { memo as t } from "react";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
+import { Cell as i, Funnel as a, FunnelChart as o, LabelList as s, ResponsiveContainer as c, Tooltip as l } from "recharts";
+//#region src/bigconsole/components/widgets/chart/charts/FunnelChart.tsx
+var u = [
+	"var(--color-chart-1)",
+	"var(--color-chart-2)",
+	"var(--color-chart-3)",
+	"var(--color-chart-4)",
+	"var(--color-chart-5)"
+], d = t(function({ data: t = [], config: d, dataKey: f = "value", nameKey: p = "name", onDataClick: m }) {
+	let h = (e) => typeof e == "number" ? new Intl.NumberFormat("en-US", {
+		notation: e >= 1e4 ? "compact" : "standard",
+		maximumFractionDigits: 2
+	}).format(e) : String(e);
+	if (!t?.length) return null;
+	let g = t.map((e, n) => {
+		if (n === 0) return {
+			...e,
+			rate: 100
+		};
+		let r = t[n - 1][f], i = e[f], a = r > 0 ? i / r * 100 : 0;
+		return {
+			...e,
+			rate: a
+		};
+	});
+	return /* @__PURE__ */ n(c, {
+		width: "100%",
+		height: "100%",
+		children: /* @__PURE__ */ r(o, { children: [/* @__PURE__ */ n(l, { content: /* @__PURE__ */ n(e, {
+			valueFormatter: h,
+			labelFormatter: (e) => String(e)
+		}) }), /* @__PURE__ */ r(a, {
+			dataKey: f,
+			nameKey: p,
+			data: g,
+			isAnimationActive: !0,
+			onClick: ((e, t) => {
+				m && e && m(e, t);
+			}),
+			children: [
+				/* @__PURE__ */ n(s, {
+					position: "right",
+					fill: "var(--color-text-primary)",
+					stroke: "none",
+					dataKey: p,
+					fontSize: 12
+				}),
+				/* @__PURE__ */ n(s, {
+					position: "center",
+					fill: "var(--color-text-on-primary, #ffffff)",
+					stroke: "none",
+					formatter: (e) => h(e),
+					fontSize: 14,
+					fontWeight: 600
+				}),
+				g.map((e, t) => /* @__PURE__ */ n(i, {
+					fill: d.colors?.[t] || u[t % u.length],
+					style: { cursor: m ? "pointer" : "default" }
+				}, `cell-${t}`))
+			]
+		})] })
+	});
+});
+//#endregion
+export { d as default };
+
+//# sourceMappingURL=FunnelChart.js.map

package/dist/bigconsole/components/widgets/chart/charts/FunnelChart.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FunnelChart.js","names":[],"sources":["../../../../../../src/bigconsole/components/widgets/chart/charts/FunnelChart.tsx"],"sourcesContent":["/**\n * FunnelChart Component\n *\n * Funnel chart using Recharts.\n */\n\nimport { type FC, memo } from 'react';\nimport { FunnelChart as RechartsFunnelChart, Funnel, Cell, Tooltip, ResponsiveContainer, LabelList } from 'recharts';\nimport { ChartTooltip } from '../ChartTooltip';\nimport type { ChartConfig, ChartData } from './types';\n\n// ============================================================================\n// Types\n// ============================================================================\n\nexport interface FunnelChartProps {\n  /** Chart data (should be sorted by value descending) */\n  data: ChartData[];\n  /** Chart configuration */\n  config: ChartConfig;\n  /** Data key for values */\n  dataKey?: string;\n  /** Data key for names */\n  nameKey?: string;\n  /** Click handler */\n  onDataClick?: (data: ChartData, index: number) => void;\n}\n\n// ============================================================================\n// Constants\n// ============================================================================\n\nconst DEFAULT_COLORS = [\n  'var(--color-chart-1)',\n  'var(--color-chart-2)',\n  'var(--color-chart-3)',\n  'var(--color-chart-4)',\n  'var(--color-chart-5)',\n];\n\n// ============================================================================\n// Component\n// ============================================================================\n\nexport const FunnelChart: FC<FunnelChartProps> = memo(function FunnelChart({\n  data = [],\n  config,\n  dataKey = 'value',\n  nameKey = 'name',\n  onDataClick,\n}) {\n  // Format value\n  const formatValue = (value: number | string): string => {\n    if (typeof value !== 'number') return String(value);\n    return new Intl.NumberFormat('en-US', {\n      notation: value >= 10000 ? 'compact' : 'standard',\n      maximumFractionDigits: 2,\n    }).format(value);\n  };\n\n  // Early return if no data\n  if (!data?.length) {\n    return null;\n  }\n\n  // Calculate conversion rates\n  const dataWithRates = data.map((item, index) => {\n    if (index === 0) {\n      return { ...item, rate: 100 };\n    }\n    const prevValue = data[index - 1][dataKey] as number;\n    const currValue = item[dataKey] as number;\n    const rate = prevValue > 0 ? (currValue / prevValue) * 100 : 0;\n    return { ...item, rate };\n  });\n\n  return (\n    <ResponsiveContainer width=\"100%\" height=\"100%\">\n      <RechartsFunnelChart>\n        <Tooltip content={<ChartTooltip valueFormatter={formatValue} labelFormatter={(label) => String(label)} />} />\n\n        <Funnel\n          dataKey={dataKey}\n          nameKey={nameKey}\n          data={dataWithRates}\n          isAnimationActive\n          onClick={\n            ((data: any, index: number) => {\n              if (onDataClick && data) {\n                onDataClick(data as ChartData, index);\n              }\n            }) as any\n          }\n        >\n          <LabelList position=\"right\" fill=\"var(--color-text-primary)\" stroke=\"none\" dataKey={nameKey} fontSize={12} />\n          <LabelList\n            position=\"center\"\n            fill=\"var(--color-text-on-primary, #ffffff)\"\n            stroke=\"none\"\n            formatter={(value: number) => formatValue(value)}\n            fontSize={14}\n            fontWeight={600}\n          />\n          {dataWithRates.map((entry, index) => (\n            <Cell\n              key={`cell-${index}`}\n              fill={config.colors?.[index] || DEFAULT_COLORS[index % DEFAULT_COLORS.length]}\n              style={{ cursor: onDataClick ? 'pointer' : 'default' }}\n            />\n          ))}\n        </Funnel>\n      </RechartsFunnelChart>\n    </ResponsiveContainer>\n  );\n});\n\nexport default FunnelChart;\n"],"mappings":";;;;;AAgCA,IAAM,IAAiB;CACrB;CACA;CACA;CACA;CACA;CACD,EAMY,IAAoC,EAAK,SAAqB,EACzE,UAAO,EAAE,EACT,WACA,aAAU,SACV,aAAU,QACV,kBACC;CAED,IAAM,KAAe,MACf,OAAO,KAAU,WACd,IAAI,KAAK,aAAa,SAAS;EACpC,UAAU,KAAS,MAAQ,YAAY;EACvC,uBAAuB;EACxB,CAAC,CAAC,OAAO,EAAM,GAJsB,OAAO,EAAM;AAQrD,KAAI,CAAC,GAAM,OACT,QAAO;CAIT,IAAM,IAAgB,EAAK,KAAK,GAAM,MAAU;AAC9C,MAAI,MAAU,EACZ,QAAO;GAAE,GAAG;GAAM,MAAM;GAAK;EAE/B,IAAM,IAAY,EAAK,IAAQ,GAAG,IAC5B,IAAY,EAAK,IACjB,IAAO,IAAY,IAAK,IAAY,IAAa,MAAM;AAC7D,SAAO;GAAE,GAAG;GAAM;GAAM;GACxB;AAEF,QACE,kBAAC,GAAD;EAAqB,OAAM;EAAO,QAAO;YACvC,kBAAC,GAAD,EAAA,UAAA,CACE,kBAAC,GAAD,EAAS,SAAS,kBAAC,GAAD;GAAc,gBAAgB;GAAa,iBAAiB,MAAU,OAAO,EAAM;GAAI,CAAA,EAAI,CAAA,EAE7G,kBAAC,GAAD;GACW;GACA;GACT,MAAM;GACN,mBAAA;GACA,WACI,GAAW,MAAkB;AAC7B,IAAI,KAAe,KACjB,EAAY,GAAmB,EAAM;;aAR7C;IAaE,kBAAC,GAAD;KAAW,UAAS;KAAQ,MAAK;KAA4B,QAAO;KAAO,SAAS;KAAS,UAAU;KAAM,CAAA;IAC7G,kBAAC,GAAD;KACE,UAAS;KACT,MAAK;KACL,QAAO;KACP,YAAY,MAAkB,EAAY,EAAM;KAChD,UAAU;KACV,YAAY;KACZ,CAAA;IACD,EAAc,KAAK,GAAO,MACzB,kBAAC,GAAD;KAEE,MAAM,EAAO,SAAS,MAAU,EAAe,IAAQ,EAAe;KACtE,OAAO,EAAE,QAAQ,IAAc,YAAY,WAAW;KACtD,EAHK,QAAQ,IAGb,CACF;IACK;KACW,EAAA,CAAA;EACF,CAAA;EAExB"}

package/dist/bigconsole/components/widgets/chart/charts/LineChart.d.ts

@@ -0,0 +1,16 @@
+import { FC } from 'react';
+import { ChartConfig, ChartData } from './types';
+
+export interface LineChartProps {
+    /** Chart data */
+    data: ChartData[];
+    /** Chart configuration */
+    config: ChartConfig;
+    /** Series to hide */
+    hiddenSeries?: string[];
+    /** Click handler for data points */
+    onDataClick?: (data: ChartData, index: number) => void;
+}
+export declare const LineChart: FC<LineChartProps>;
+export default LineChart;
+//# sourceMappingURL=LineChart.d.ts.map

package/dist/bigconsole/components/widgets/chart/charts/LineChart.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"LineChart.d.ts","sourceRoot":"","sources":["../../../../../../src/bigconsole/components/widgets/chart/charts/LineChart.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAE,KAAK,EAAE,EAAiB,MAAM,OAAO,CAAC;AAY/C,OAAO,KAAK,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAMtD,MAAM,WAAW,cAAc;IAC7B,iBAAiB;IACjB,IAAI,EAAE,SAAS,EAAE,CAAC;IAClB,0BAA0B;IAC1B,MAAM,EAAE,WAAW,CAAC;IACpB,qBAAqB;IACrB,YAAY,CAAC,EAAE,MAAM,EAAE,CAAC;IACxB,oCAAoC;IACpC,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,SAAS,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACxD;AAkBD,eAAO,MAAM,SAAS,EAAE,EAAE,CAAC,cAAc,CAwGvC,CAAC;AAEH,eAAe,SAAS,CAAC"}

package/dist/bigconsole/components/widgets/chart/charts/LineChart.js

@@ -0,0 +1,96 @@
+import e from "../ChartTooltip.js";
+import { memo as t, useMemo as n } from "react";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+import { CartesianGrid as a, Legend as o, Line as s, LineChart as c, ResponsiveContainer as l, Tooltip as u, XAxis as d, YAxis as f } from "recharts";
+//#region src/bigconsole/components/widgets/chart/charts/LineChart.tsx
+var p = [
+	"var(--color-chart-1)",
+	"var(--color-chart-2)",
+	"var(--color-chart-3)",
+	"var(--color-chart-4)",
+	"var(--color-chart-5)"
+], m = t(function({ data: t = [], config: m, hiddenSeries: h = [], onDataClick: g }) {
+	let _ = n(() => t?.length ? Object.keys(t[0]).filter((e) => e !== m.xAxisKey && typeof t[0][e] == "number") : [], [t, m.xAxisKey]), v = (e) => typeof e == "number" ? new Intl.NumberFormat("en-US", {
+		notation: e >= 1e4 ? "compact" : "standard",
+		maximumFractionDigits: 2
+	}).format(e) : String(e);
+	return t?.length ? /* @__PURE__ */ r(l, {
+		width: "100%",
+		height: "100%",
+		children: /* @__PURE__ */ i(c, {
+			data: t,
+			margin: {
+				top: 10,
+				right: 10,
+				left: 0,
+				bottom: 0
+			},
+			onClick: (e) => {
+				e?.activePayload?.[0] && g && g(e.activePayload[0].payload, e.activeTooltipIndex || 0);
+			},
+			children: [
+				m.showGrid !== !1 && /* @__PURE__ */ r(a, {
+					strokeDasharray: "3 3",
+					stroke: "var(--color-border-default)",
+					opacity: .5
+				}),
+				/* @__PURE__ */ r(d, {
+					dataKey: m.xAxisKey || "name",
+					tick: {
+						fill: "var(--color-text-secondary)",
+						fontSize: 12
+					},
+					tickLine: { stroke: "var(--color-border-default)" },
+					axisLine: { stroke: "var(--color-border-default)" },
+					label: m.xAxisLabel ? {
+						value: m.xAxisLabel,
+						position: "insideBottom",
+						offset: -5,
+						fill: "var(--color-text-secondary)"
+					} : void 0
+				}),
+				/* @__PURE__ */ r(f, {
+					tick: {
+						fill: "var(--color-text-secondary)",
+						fontSize: 12
+					},
+					tickLine: { stroke: "var(--color-border-default)" },
+					axisLine: { stroke: "var(--color-border-default)" },
+					tickFormatter: v,
+					label: m.yAxisLabel ? {
+						value: m.yAxisLabel,
+						angle: -90,
+						position: "insideLeft",
+						fill: "var(--color-text-secondary)"
+					} : void 0
+				}),
+				/* @__PURE__ */ r(u, {
+					content: /* @__PURE__ */ r(e, { valueFormatter: v }),
+					cursor: { stroke: "var(--color-border-default)" }
+				}),
+				m.showLegend !== !1 && /* @__PURE__ */ r(o, {
+					wrapperStyle: { paddingTop: 20 },
+					formatter: (e) => /* @__PURE__ */ r("span", {
+						style: { color: "var(--color-text-primary)" },
+						children: e
+					})
+				}),
+				_.map((e, t) => /* @__PURE__ */ r(s, {
+					type: m.curveType || "monotone",
+					dataKey: e,
+					name: m.seriesNames?.[e] || e,
+					stroke: m.colors?.[t] || p[t % p.length],
+					strokeWidth: 2,
+					dot: m.showDots !== !1,
+					activeDot: { r: 6 },
+					hide: h.includes(e),
+					connectNulls: !0
+				}, e))
+			]
+		})
+	}) : null;
+});
+//#endregion
+export { m as default };
+
+//# sourceMappingURL=LineChart.js.map

package/dist/bigconsole/components/widgets/chart/charts/LineChart.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LineChart.js","names":[],"sources":["../../../../../../src/bigconsole/components/widgets/chart/charts/LineChart.tsx"],"sourcesContent":["/**\n * LineChart Component\n *\n * Line chart using Recharts.\n */\n\nimport { type FC, memo, useMemo } from 'react';\nimport {\n  LineChart as RechartsLineChart,\n  Line,\n  XAxis,\n  YAxis,\n  CartesianGrid,\n  Tooltip,\n  ResponsiveContainer,\n  Legend,\n} from 'recharts';\nimport { ChartTooltip } from '../ChartTooltip';\nimport type { ChartConfig, ChartData } from './types';\n\n// ============================================================================\n// Types\n// ============================================================================\n\nexport interface LineChartProps {\n  /** Chart data */\n  data: ChartData[];\n  /** Chart configuration */\n  config: ChartConfig;\n  /** Series to hide */\n  hiddenSeries?: string[];\n  /** Click handler for data points */\n  onDataClick?: (data: ChartData, index: number) => void;\n}\n\n// ============================================================================\n// Constants\n// ============================================================================\n\nconst DEFAULT_COLORS = [\n  'var(--color-chart-1)',\n  'var(--color-chart-2)',\n  'var(--color-chart-3)',\n  'var(--color-chart-4)',\n  'var(--color-chart-5)',\n];\n\n// ============================================================================\n// Component\n// ============================================================================\n\nexport const LineChart: FC<LineChartProps> = memo(function LineChart({\n  data = [],\n  config,\n  hiddenSeries = [],\n  onDataClick,\n}) {\n  // Extract data keys (series)\n  const dataKeys = useMemo(() => {\n    if (!data?.length) return [];\n    const keys = Object.keys(data[0]).filter((key) => key !== config.xAxisKey && typeof data[0][key] === 'number');\n    return keys;\n  }, [data, config.xAxisKey]);\n\n  // Format value\n  const formatValue = (value: number | string): string => {\n    if (typeof value !== 'number') return String(value);\n    return new Intl.NumberFormat('en-US', {\n      notation: value >= 10000 ? 'compact' : 'standard',\n      maximumFractionDigits: 2,\n    }).format(value);\n  };\n\n  if (!data?.length) {\n    return null;\n  }\n\n  return (\n    <ResponsiveContainer width=\"100%\" height=\"100%\">\n      <RechartsLineChart\n        data={data}\n        margin={{ top: 10, right: 10, left: 0, bottom: 0 }}\n        onClick={(e) => {\n          if (e?.activePayload?.[0] && onDataClick) {\n            onDataClick(e.activePayload[0].payload, e.activeTooltipIndex || 0);\n          }\n        }}\n      >\n        {config.showGrid !== false && (\n          <CartesianGrid strokeDasharray=\"3 3\" stroke=\"var(--color-border-default)\" opacity={0.5} />\n        )}\n\n        <XAxis\n          dataKey={config.xAxisKey || 'name'}\n          tick={{ fill: 'var(--color-text-secondary)', fontSize: 12 }}\n          tickLine={{ stroke: 'var(--color-border-default)' }}\n          axisLine={{ stroke: 'var(--color-border-default)' }}\n          label={\n            config.xAxisLabel\n              ? {\n                  value: config.xAxisLabel,\n                  position: 'insideBottom',\n                  offset: -5,\n                  fill: 'var(--color-text-secondary)',\n                }\n              : undefined\n          }\n        />\n\n        <YAxis\n          tick={{ fill: 'var(--color-text-secondary)', fontSize: 12 }}\n          tickLine={{ stroke: 'var(--color-border-default)' }}\n          axisLine={{ stroke: 'var(--color-border-default)' }}\n          tickFormatter={formatValue}\n          label={\n            config.yAxisLabel\n              ? {\n                  value: config.yAxisLabel,\n                  angle: -90,\n                  position: 'insideLeft',\n                  fill: 'var(--color-text-secondary)',\n                }\n              : undefined\n          }\n        />\n\n        <Tooltip\n          content={<ChartTooltip valueFormatter={formatValue} />}\n          cursor={{ stroke: 'var(--color-border-default)' }}\n        />\n\n        {config.showLegend !== false && (\n          <Legend\n            wrapperStyle={{ paddingTop: 20 }}\n            formatter={(value) => <span style={{ color: 'var(--color-text-primary)' }}>{value}</span>}\n          />\n        )}\n\n        {dataKeys.map((key, index) => (\n          <Line\n            key={key}\n            type={config.curveType || 'monotone'}\n            dataKey={key}\n            name={config.seriesNames?.[key] || key}\n            stroke={config.colors?.[index] || DEFAULT_COLORS[index % DEFAULT_COLORS.length]}\n            strokeWidth={2}\n            dot={config.showDots !== false}\n            activeDot={{ r: 6 }}\n            hide={hiddenSeries.includes(key)}\n            connectNulls\n          />\n        ))}\n      </RechartsLineChart>\n    </ResponsiveContainer>\n  );\n});\n\nexport default LineChart;\n"],"mappings":";;;;;AAuCA,IAAM,IAAiB;CACrB;CACA;CACA;CACA;CACA;CACD,EAMY,IAAgC,EAAK,SAAmB,EACnE,UAAO,EAAE,EACT,WACA,kBAAe,EAAE,EACjB,kBACC;CAED,IAAM,IAAW,QACV,GAAM,SACE,OAAO,KAAK,EAAK,GAAG,CAAC,QAAQ,MAAQ,MAAQ,EAAO,YAAY,OAAO,EAAK,GAAG,MAAS,SAAS,GADpF,EAAE,EAG3B,CAAC,GAAM,EAAO,SAAS,CAAC,EAGrB,KAAe,MACf,OAAO,KAAU,WACd,IAAI,KAAK,aAAa,SAAS;EACpC,UAAU,KAAS,MAAQ,YAAY;EACvC,uBAAuB;EACxB,CAAC,CAAC,OAAO,EAAM,GAJsB,OAAO,EAAM;AAWrD,QAJK,GAAM,SAKT,kBAAC,GAAD;EAAqB,OAAM;EAAO,QAAO;YACvC,kBAAC,GAAD;GACQ;GACN,QAAQ;IAAE,KAAK;IAAI,OAAO;IAAI,MAAM;IAAG,QAAQ;IAAG;GAClD,UAAU,MAAM;AACd,IAAI,GAAG,gBAAgB,MAAM,KAC3B,EAAY,EAAE,cAAc,GAAG,SAAS,EAAE,sBAAsB,EAAE;;aALxE;IASG,EAAO,aAAa,MACnB,kBAAC,GAAD;KAAe,iBAAgB;KAAM,QAAO;KAA8B,SAAS;KAAO,CAAA;IAG5F,kBAAC,GAAD;KACE,SAAS,EAAO,YAAY;KAC5B,MAAM;MAAE,MAAM;MAA+B,UAAU;MAAI;KAC3D,UAAU,EAAE,QAAQ,+BAA+B;KACnD,UAAU,EAAE,QAAQ,+BAA+B;KACnD,OACE,EAAO,aACH;MACE,OAAO,EAAO;MACd,UAAU;MACV,QAAQ;MACR,MAAM;MACP,GACD,KAAA;KAEN,CAAA;IAEF,kBAAC,GAAD;KACE,MAAM;MAAE,MAAM;MAA+B,UAAU;MAAI;KAC3D,UAAU,EAAE,QAAQ,+BAA+B;KACnD,UAAU,EAAE,QAAQ,+BAA+B;KACnD,eAAe;KACf,OACE,EAAO,aACH;MACE,OAAO,EAAO;MACd,OAAO;MACP,UAAU;MACV,MAAM;MACP,GACD,KAAA;KAEN,CAAA;IAEF,kBAAC,GAAD;KACE,SAAS,kBAAC,GAAD,EAAc,gBAAgB,GAAe,CAAA;KACtD,QAAQ,EAAE,QAAQ,+BAA+B;KACjD,CAAA;IAED,EAAO,eAAe,MACrB,kBAAC,GAAD;KACE,cAAc,EAAE,YAAY,IAAI;KAChC,YAAY,MAAU,kBAAC,QAAD;MAAM,OAAO,EAAE,OAAO,6BAA6B;gBAAG;MAAa,CAAA;KACzF,CAAA;IAGH,EAAS,KAAK,GAAK,MAClB,kBAAC,GAAD;KAEE,MAAM,EAAO,aAAa;KAC1B,SAAS;KACT,MAAM,EAAO,cAAc,MAAQ;KACnC,QAAQ,EAAO,SAAS,MAAU,EAAe,IAAQ,EAAe;KACxE,aAAa;KACb,KAAK,EAAO,aAAa;KACzB,WAAW,EAAE,GAAG,GAAG;KACnB,MAAM,EAAa,SAAS,EAAI;KAChC,cAAA;KACA,EAVK,EAUL,CACF;IACgB;;EACA,CAAA,GA/Ef;EAiFT"}

package/dist/bigconsole/components/widgets/chart/charts/PieChart.d.ts

@@ -0,0 +1,18 @@
+import { FC } from 'react';
+import { ChartConfig, ChartData } from './types';
+
+export interface PieChartProps {
+    /** Chart data */
+    data: ChartData[];
+    /** Chart configuration */
+    config: ChartConfig;
+    /** Data key for values */
+    dataKey?: string;
+    /** Data key for names */
+    nameKey?: string;
+    /** Click handler */
+    onDataClick?: (data: ChartData, index: number) => void;
+}
+export declare const PieChart: FC<PieChartProps>;
+export default PieChart;
+//# sourceMappingURL=PieChart.d.ts.map

package/dist/bigconsole/components/widgets/chart/charts/PieChart.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PieChart.d.ts","sourceRoot":"","sources":["../../../../../../src/bigconsole/components/widgets/chart/charts/PieChart.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAE,KAAK,EAAE,EAA+B,MAAM,OAAO,CAAC;AAG7D,OAAO,KAAK,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAMtD,MAAM,WAAW,aAAa;IAC5B,iBAAiB;IACjB,IAAI,EAAE,SAAS,EAAE,CAAC;IAClB,0BAA0B;IAC1B,MAAM,EAAE,WAAW,CAAC;IACpB,0BAA0B;IAC1B,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,yBAAyB;IACzB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,oBAAoB;IACpB,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,SAAS,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACxD;AAqED,eAAO,MAAM,QAAQ,EAAE,EAAE,CAAC,aAAa,CA6FrC,CAAC;AAEH,eAAe,QAAQ,CAAC"}