drizzle-cube 0.3.13 → 0.3.16

package/dist/client/chunks/{chart-funnel-Csdn4FbN.js.map → chart-funnel-C7zGBfSw.js.map}

@@ -1 +1 @@
-{"version":3,"file":"chart-funnel-Csdn4FbN.js","sources":["../../../src/client/components/charts/FunnelChart.tsx"],"sourcesContent":["/**\n * FunnelChart Component\n *\n * Visualizes funnel data showing conversion rates between steps.\n * Uses horizontal bars with percentage widths to represent the funnel shape.\n * Works with data from useFunnelQuery hook which provides FunnelChartData.\n *\n * When displayConfig.showFunnelTimeMetrics is enabled, displays time-to-convert\n * metrics from server-side funnel execution (avg, median, P90 seconds).\n */\n\nimport React, { useMemo } from 'react'\nimport { FunnelChart as RechartsFunnelChart, Funnel, LabelList, Tooltip, Cell, ResponsiveContainer } from 'recharts'\nimport { CHART_COLORS } from '../../utils/chartConstants'\nimport type { ChartProps } from '../../types'\nimport type { FunnelChartData } from '../../types/funnel'\nimport { formatDuration } from '../../utils/funnelExecution'\n\n// Color gradient for funnel steps (darker to lighter)\nconst FUNNEL_COLORS = [\n  '#3B82F6', // blue-500\n  '#60A5FA', // blue-400\n  '#93C5FD', // blue-300\n  '#BFDBFE', // blue-200\n  '#DBEAFE', // blue-100\n]\n\n/**\n * Get color for a funnel step\n */\nfunction getStepColor(index: number, colorPalette?: string[]): string {\n  const colors = colorPalette || FUNNEL_COLORS\n  return colors[index % colors.length]\n}\n\n/**\n * Check if data is funnel data format\n */\nfunction isFunnelData(data: unknown[]): data is FunnelChartData[] {\n  if (!data || data.length === 0) return false\n  const first = data[0]\n  return (\n    typeof first === 'object' &&\n    first !== null &&\n    'name' in first &&\n    'value' in first &&\n    'percentage' in first\n  )\n}\n\n/**\n * Render time metrics based on config options - returns array of lines for vertical stacking\n */\nfunction getTimeMetricsLines(\n  step: FunnelChartData,\n  showAvg: boolean,\n  showMedian: boolean,\n  showP90: boolean\n): string[] {\n  const lines: string[] = []\n  if (showAvg && step.avgSecondsToConvert != null) {\n    lines.push(`Avg: ${formatDuration(step.avgSecondsToConvert)}`)\n  }\n  if (showMedian && step.medianSecondsToConvert != null) {\n    lines.push(`Med: ${formatDuration(step.medianSecondsToConvert)}`)\n  }\n  if (showP90 && step.p90SecondsToConvert != null) {\n    lines.push(`P90: ${formatDuration(step.p90SecondsToConvert)}`)\n  }\n  return lines\n}\n\n/**\n * FunnelChart Component\n *\n * Renders a funnel visualization from FunnelChartData array.\n * Shows each step as a horizontal bar with width proportional to count.\n * Displays conversion rates between steps.\n */\nconst FunnelChart = React.memo(function FunnelChart({\n  data,\n  height = '100%',\n  colorPalette,\n  displayConfig,\n}: ChartProps) {\n  // Get display config options\n  const customStepLabels = displayConfig?.funnelStepLabels\n  const orientation = displayConfig?.funnelOrientation || 'horizontal'\n  const isVertical = orientation === 'vertical'\n  const funnelStyle = displayConfig?.funnelStyle ?? 'bars'\n  const showConversion = displayConfig?.showFunnelConversion ?? true\n\n  // Time metrics - individual toggles with backward compat for showFunnelTimeMetrics\n  const showAvgTime = displayConfig?.showFunnelAvgTime ??\n    (displayConfig?.showFunnelTimeMetrics ?? false) // backward compat\n  const showMedianTime = displayConfig?.showFunnelMedianTime ?? false\n  const showP90Time = displayConfig?.showFunnelP90Time ?? false\n\n  // Transform data if needed\n  const funnelData = useMemo<FunnelChartData[]>(() => {\n    if (!data || data.length === 0) return []\n\n    // If already funnel data format, use directly\n    if (isFunnelData(data)) {\n      return data\n    }\n\n    // Try to convert from raw query results\n    // Look for common patterns: step/name, count/value, percentage\n    return data.map((row, index) => {\n      const record = row as Record<string, unknown>\n\n      // Find name field\n      const nameField = Object.keys(record).find(\n        (k) => k.toLowerCase().includes('step') || k.toLowerCase().includes('name') || k === '__stepName'\n      )\n      const name = nameField ? String(record[nameField]) : `Step ${index + 1}`\n\n      // Find value field\n      const valueField = Object.keys(record).find(\n        (k) => k.toLowerCase().includes('count') || k.toLowerCase().includes('value') || k === '__count'\n      )\n      const value = valueField ? Number(record[valueField]) || 0 : 0\n\n      // Find percentage field\n      const percentField = Object.keys(record).find(\n        (k) => k.toLowerCase().includes('percent') || k === '__percentage'\n      )\n      const percentage = percentField ? Number(record[percentField]) || 0 : 0\n\n      // Find conversion rate field\n      const convRateField = Object.keys(record).find(\n        (k) => k.toLowerCase().includes('conversion') || k === '__conversionRate'\n      )\n      const conversionRate = convRateField ? Number(record[convRateField]) || null : null\n\n      return {\n        name,\n        value,\n        percentage,\n        conversionRate,\n        stepIndex: index,\n      }\n    })\n  }, [data])\n\n  // Calculate first step value for percentage calculations\n  const firstStepValue = funnelData[0]?.value || 0\n\n  // Handle no data\n  if (!data || data.length === 0 || funnelData.length === 0) {\n    return (\n      <div\n        className=\"flex items-center justify-center w-full text-dc-text-muted\"\n        style={{ height }}\n      >\n        <div className=\"text-center\">\n          <div className=\"text-sm font-semibold mb-1\">No funnel data</div>\n          <div className=\"text-xs text-dc-text-secondary\">\n            Configure a funnel with at least 2 steps and a binding key\n          </div>\n        </div>\n      </div>\n    )\n  }\n\n  const paletteColors = colorPalette?.colors || CHART_COLORS\n\n  // Render Recharts Funnel style (trapezoid shape)\n  if (funnelStyle === 'funnel') {\n    // Recharts FunnelChart layout: 'horizontal' = funnel flows left-to-right, 'vertical' = top-to-bottom (default)\n    // Our config: 'horizontal' orientation = standard top-to-bottom funnel\n    //             'vertical' orientation = left-to-right funnel\n    const rechartsLayout: 'horizontal' | 'vertical' = isVertical ? 'horizontal' : 'vertical'\n\n    return (\n      <div className=\"relative w-full h-full flex flex-col\" style={{ height }}>\n        <div className=\"flex-1\">\n          <ResponsiveContainer width=\"100%\" height=\"100%\">\n            <RechartsFunnelChart layout={rechartsLayout}>\n              <Tooltip\n                formatter={(value) => typeof value === 'number' ? value.toLocaleString() : String(value)}\n                contentStyle={{\n                  backgroundColor: 'var(--dc-surface)',\n                  border: '1px solid var(--dc-border)',\n                  borderRadius: '4px',\n                }}\n              />\n              <Funnel\n                dataKey=\"value\"\n                nameKey=\"name\"\n                data={funnelData}\n                isAnimationActive\n              >\n                {funnelData.map((_, index) => (\n                  <Cell key={`cell-${index}`} fill={getStepColor(index, paletteColors)} />\n                ))}\n                <LabelList\n                  position=\"right\"\n                  dataKey=\"name\"\n                  fill=\"var(--dc-text)\"\n                  style={{ fontSize: '12px' }}\n                />\n                <LabelList\n                  position=\"center\"\n                  dataKey=\"percentage\"\n                  formatter={(v) => typeof v === 'number' ? `${v.toFixed(1)}%` : String(v)}\n                  fill=\"#fff\"\n                  style={{ fontSize: '11px', fontWeight: 500 }}\n                />\n              </Funnel>\n            </RechartsFunnelChart>\n          </ResponsiveContainer>\n        </div>\n        {/* Summary Footer */}\n        {!displayConfig?.hideSummaryFooter && (\n          <div className=\"flex-shrink-0 px-4 py-2 border-t border-dc-border bg-dc-surface-secondary\">\n            <div className=\"flex items-center justify-between text-sm\">\n              <div className=\"text-dc-text-muted\">\n                <span className=\"font-medium\">{funnelData.length}</span> steps\n              </div>\n              <div className=\"text-dc-text\">\n                <span className=\"text-dc-text-muted\">Overall:</span>{' '}\n                <span className=\"font-medium\">\n                  {firstStepValue > 0\n                    ? `${((funnelData[funnelData.length - 1]?.value || 0) / firstStepValue * 100).toFixed(1)}%`\n                    : '0%'}\n                </span>\n              </div>\n              <div className=\"text-dc-text-muted\">\n                {funnelData[funnelData.length - 1]?.value.toLocaleString() || 0} / {firstStepValue.toLocaleString()} completed\n              </div>\n            </div>\n          </div>\n        )}\n      </div>\n    )\n  }\n\n  // Render vertical orientation (bars grow from bottom to top, steps laid out horizontally)\n  if (isVertical) {\n    return (\n      <div className=\"relative w-full h-full flex flex-col\" style={{ height }}>\n        {/* Funnel Steps - Vertical Layout */}\n        <div className=\"flex-1 flex items-end justify-center gap-4 px-4 py-3 overflow-hidden\">\n          {funnelData.map((step, index) => {\n            const heightPercent = firstStepValue > 0 ? (step.value / firstStepValue) * 100 : 0\n            const prevStep = index > 0 ? funnelData[index - 1] : null\n            const stepConversionRate = prevStep && prevStep.value > 0\n              ? (step.value / prevStep.value) * 100\n              : null\n\n            // Use custom label if provided, otherwise fall back to step name\n            const displayName = customStepLabels?.[index] || step.name\n\n            const timeMetricsLines = getTimeMetricsLines(step, showAvgTime, showMedianTime, showP90Time)\n            const metricsCount = timeMetricsLines.length\n\n            return (\n              <div key={step.name} className=\"flex flex-col items-center gap-2 flex-1 max-w-32 h-full\">\n                {/* Conversion Rate from Previous (top) */}\n                <div className={`${metricsCount > 0 ? (metricsCount > 1 ? 'min-h-16' : 'min-h-10') : 'h-5'} flex-shrink-0 text-center`}>\n                  {stepConversionRate !== null ? (\n                    <div className=\"text-xs text-dc-text-secondary\">\n                      {showConversion && <span>→ {stepConversionRate.toFixed(1)}%</span>}\n                      {/* Time metrics (when enabled) */}\n                      {metricsCount > 0 && (\n                        <div className=\"text-dc-text-muted mt-0.5 space-y-0.5\">\n                          {timeMetricsLines.map((line, i) => (\n                            <div key={i}>⏱ {line}</div>\n                          ))}\n                        </div>\n                      )}\n                    </div>\n                  ) : (\n                    <div className=\"text-xs text-dc-text-muted\">—</div>\n                  )}\n                </div>\n\n                {/* Bar Container */}\n                <div className=\"flex-1 w-full relative min-h-12\">\n                  {/* Background Track */}\n                  <div className=\"absolute inset-0 bg-dc-surface-secondary rounded-sm\" />\n\n                  {/* Filled Bar (grows from bottom) */}\n                  <div\n                    className=\"absolute bottom-0 left-0 right-0 rounded-sm transition-all duration-300\"\n                    style={{\n                      height: `${Math.max(heightPercent, 5)}%`,\n                      backgroundColor: getStepColor(index, paletteColors),\n                    }}\n                  />\n\n                  {/* Percentage Label on Bar */}\n                  <div\n                    className=\"absolute bottom-0 left-0 right-0 flex items-end justify-center pb-1 pointer-events-none\"\n                    style={{ height: `${Math.max(heightPercent, 20)}%` }}\n                  >\n                    <span className=\"text-xs font-medium text-white drop-shadow-sm\">\n                      {step.percentage?.toFixed(1) ?? heightPercent.toFixed(1)}%\n                    </span>\n                  </div>\n                </div>\n\n                {/* Step Label (bottom) */}\n                <div className=\"flex-shrink-0 text-center\">\n                  <div className=\"text-sm font-medium text-dc-text truncate\" title={displayName}>\n                    {displayName}\n                  </div>\n                  <div className=\"text-xs text-dc-text-muted\">\n                    {step.value.toLocaleString()}\n                  </div>\n                </div>\n              </div>\n            )\n          })}\n        </div>\n\n        {/* Summary Footer */}\n        {!displayConfig?.hideSummaryFooter && (\n          <div className=\"flex-shrink-0 px-4 py-2 border-t border-dc-border bg-dc-surface-secondary\">\n            <div className=\"flex items-center justify-between text-sm\">\n              <div className=\"text-dc-text-muted\">\n                <span className=\"font-medium\">{funnelData.length}</span> steps\n              </div>\n              <div className=\"text-dc-text\">\n                <span className=\"text-dc-text-muted\">Overall:</span>{' '}\n                <span className=\"font-medium\">\n                  {firstStepValue > 0\n                    ? `${((funnelData[funnelData.length - 1]?.value || 0) / firstStepValue * 100).toFixed(1)}%`\n                    : '0%'}\n                </span>\n              </div>\n              <div className=\"text-dc-text-muted\">\n                {funnelData[funnelData.length - 1]?.value.toLocaleString() || 0} / {firstStepValue.toLocaleString()} completed\n              </div>\n            </div>\n          </div>\n        )}\n      </div>\n    )\n  }\n\n  // Render horizontal orientation (default - bars grow left to right, steps stacked vertically)\n  return (\n    <div className=\"relative w-full h-full flex flex-col\" style={{ height }}>\n      {/* Funnel Steps - Horizontal Layout */}\n      <div className=\"flex-1 flex flex-col justify-center gap-2 px-4 py-3 overflow-hidden\">\n        {funnelData.map((step, index) => {\n          const widthPercent = firstStepValue > 0 ? (step.value / firstStepValue) * 100 : 0\n          const prevStep = index > 0 ? funnelData[index - 1] : null\n          const stepConversionRate = prevStep && prevStep.value > 0\n            ? (step.value / prevStep.value) * 100\n            : null\n\n          // Use custom label if provided, otherwise fall back to step name\n          const displayName = customStepLabels?.[index] || step.name\n          const timeMetricsLines = getTimeMetricsLines(step, showAvgTime, showMedianTime, showP90Time)\n          const metricsCount = timeMetricsLines.length\n\n          return (\n            <div key={step.name} className=\"flex items-center gap-3\">\n              {/* Step Label */}\n              <div className=\"w-24 flex-shrink-0 text-right\">\n                <div className=\"text-sm font-medium text-dc-text truncate\" title={displayName}>\n                  {displayName}\n                </div>\n                <div className=\"text-xs text-dc-text-muted\">\n                  {step.value.toLocaleString()}\n                </div>\n              </div>\n\n              {/* Bar Container */}\n              <div className=\"flex-1 relative\">\n                {/* Background Track */}\n                <div className=\"w-full h-8 bg-dc-surface-secondary rounded-sm\" />\n\n                {/* Filled Bar */}\n                <div\n                  className=\"absolute top-0 left-0 h-8 rounded-sm transition-all duration-300\"\n                  style={{\n                    width: `${Math.max(widthPercent, 2)}%`,\n                    backgroundColor: getStepColor(index, paletteColors),\n                  }}\n                />\n\n                {/* Percentage Label on Bar */}\n                <div\n                  className=\"absolute top-0 left-0 h-8 flex items-center px-2 pointer-events-none\"\n                  style={{ width: `${Math.max(widthPercent, 20)}%` }}\n                >\n                  <span className=\"text-xs font-medium text-white drop-shadow-sm\">\n                    {step.percentage?.toFixed(1) ?? widthPercent.toFixed(1)}%\n                  </span>\n                </div>\n              </div>\n\n              {/* Conversion Rate from Previous */}\n              <div className={`${metricsCount > 0 ? (metricsCount > 1 ? 'w-36' : 'w-28') : 'w-16'} flex-shrink-0 text-left`}>\n                {stepConversionRate !== null ? (\n                  <div className=\"text-xs text-dc-text-secondary\">\n                    {showConversion && <span>↓ {stepConversionRate.toFixed(1)}%</span>}\n                    {/* Time metrics (when enabled) */}\n                    {metricsCount > 0 && (\n                      <div className=\"text-dc-text-muted mt-0.5 space-y-0.5\">\n                        {timeMetricsLines.map((line, i) => (\n                          <div key={i}>⏱ {line}</div>\n                        ))}\n                      </div>\n                    )}\n                  </div>\n                ) : (\n                  <div className=\"text-xs text-dc-text-muted\">—</div>\n                )}\n              </div>\n            </div>\n          )\n        })}\n      </div>\n\n      {/* Summary Footer */}\n      {!displayConfig?.hideSummaryFooter && (\n        <div className=\"flex-shrink-0 px-4 py-2 border-t border-dc-border bg-dc-surface-secondary\">\n          <div className=\"flex items-center justify-between text-sm\">\n            <div className=\"text-dc-text-muted\">\n              <span className=\"font-medium\">{funnelData.length}</span> steps\n            </div>\n            <div className=\"text-dc-text\">\n              <span className=\"text-dc-text-muted\">Overall:</span>{' '}\n              <span className=\"font-medium\">\n                {firstStepValue > 0\n                  ? `${((funnelData[funnelData.length - 1]?.value || 0) / firstStepValue * 100).toFixed(1)}%`\n                  : '0%'}\n              </span>\n            </div>\n            <div className=\"text-dc-text-muted\">\n              {funnelData[funnelData.length - 1]?.value.toLocaleString() || 0} / {firstStepValue.toLocaleString()} completed\n            </div>\n          </div>\n        </div>\n      )}\n    </div>\n  )\n})\n\nexport default FunnelChart\n"],"names":["FUNNEL_COLORS","getStepColor","index","colorPalette","colors","isFunnelData","data","first","getTimeMetricsLines","step","showAvg","showMedian","showP90","lines","formatDuration","FunnelChart","React","height","displayConfig","customStepLabels","isVertical","funnelStyle","showConversion","showAvgTime","showMedianTime","showP90Time","funnelData","useMemo","row","record","nameField","k","name","valueField","value","percentField","percentage","convRateField","conversionRate","firstStepValue","jsx","jsxs","paletteColors","CHART_COLORS","ResponsiveContainer","RechartsFunnelChart","Tooltip","Funnel","_","Cell","LabelList","v","heightPercent","prevStep","stepConversionRate","displayName","timeMetricsLines","metricsCount","line","i","widthPercent"],"mappings":"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"}
+{"version":3,"file":"chart-funnel-C7zGBfSw.js","sources":["../../../src/client/components/charts/FunnelChart.tsx"],"sourcesContent":["/**\n * FunnelChart Component\n *\n * Visualizes funnel data showing conversion rates between steps.\n * Uses horizontal bars with percentage widths to represent the funnel shape.\n * Works with data from useFunnelQuery hook which provides FunnelChartData.\n *\n * When displayConfig.showFunnelTimeMetrics is enabled, displays time-to-convert\n * metrics from server-side funnel execution (avg, median, P90 seconds).\n */\n\nimport React, { useMemo } from 'react'\nimport { FunnelChart as RechartsFunnelChart, Funnel, LabelList, Tooltip, Cell, ResponsiveContainer } from 'recharts'\nimport { CHART_COLORS } from '../../utils/chartConstants'\nimport type { ChartProps } from '../../types'\nimport type { FunnelChartData } from '../../types/funnel'\nimport { formatDuration } from '../../utils/funnelExecution'\n\n// Color gradient for funnel steps (darker to lighter)\nconst FUNNEL_COLORS = [\n  '#3B82F6', // blue-500\n  '#60A5FA', // blue-400\n  '#93C5FD', // blue-300\n  '#BFDBFE', // blue-200\n  '#DBEAFE', // blue-100\n]\n\n/**\n * Get color for a funnel step\n */\nfunction getStepColor(index: number, colorPalette?: string[]): string {\n  const colors = colorPalette || FUNNEL_COLORS\n  return colors[index % colors.length]\n}\n\n/**\n * Check if data is funnel data format\n */\nfunction isFunnelData(data: unknown[]): data is FunnelChartData[] {\n  if (!data || data.length === 0) return false\n  const first = data[0]\n  return (\n    typeof first === 'object' &&\n    first !== null &&\n    'name' in first &&\n    'value' in first &&\n    'percentage' in first\n  )\n}\n\n/**\n * Render time metrics based on config options - returns array of lines for vertical stacking\n */\nfunction getTimeMetricsLines(\n  step: FunnelChartData,\n  showAvg: boolean,\n  showMedian: boolean,\n  showP90: boolean\n): string[] {\n  const lines: string[] = []\n  if (showAvg && step.avgSecondsToConvert != null) {\n    lines.push(`Avg: ${formatDuration(step.avgSecondsToConvert)}`)\n  }\n  if (showMedian && step.medianSecondsToConvert != null) {\n    lines.push(`Med: ${formatDuration(step.medianSecondsToConvert)}`)\n  }\n  if (showP90 && step.p90SecondsToConvert != null) {\n    lines.push(`P90: ${formatDuration(step.p90SecondsToConvert)}`)\n  }\n  return lines\n}\n\n/**\n * FunnelChart Component\n *\n * Renders a funnel visualization from FunnelChartData array.\n * Shows each step as a horizontal bar with width proportional to count.\n * Displays conversion rates between steps.\n */\nconst FunnelChart = React.memo(function FunnelChart({\n  data,\n  height = '100%',\n  colorPalette,\n  displayConfig,\n}: ChartProps) {\n  // Get display config options\n  const customStepLabels = displayConfig?.funnelStepLabels\n  const orientation = displayConfig?.funnelOrientation || 'horizontal'\n  const isVertical = orientation === 'vertical'\n  const funnelStyle = displayConfig?.funnelStyle ?? 'bars'\n  const showConversion = displayConfig?.showFunnelConversion ?? true\n\n  // Time metrics - individual toggles with backward compat for showFunnelTimeMetrics\n  const showAvgTime = displayConfig?.showFunnelAvgTime ??\n    (displayConfig?.showFunnelTimeMetrics ?? false) // backward compat\n  const showMedianTime = displayConfig?.showFunnelMedianTime ?? false\n  const showP90Time = displayConfig?.showFunnelP90Time ?? false\n\n  // Transform data if needed\n  const funnelData = useMemo<FunnelChartData[]>(() => {\n    if (!data || data.length === 0) return []\n\n    // If already funnel data format, use directly\n    if (isFunnelData(data)) {\n      return data\n    }\n\n    // Try to convert from raw query results\n    // Look for common patterns: step/name, count/value, percentage\n    return data.map((row, index) => {\n      const record = row as Record<string, unknown>\n\n      // Find name field\n      const nameField = Object.keys(record).find(\n        (k) => k.toLowerCase().includes('step') || k.toLowerCase().includes('name') || k === '__stepName'\n      )\n      const name = nameField ? String(record[nameField]) : `Step ${index + 1}`\n\n      // Find value field\n      const valueField = Object.keys(record).find(\n        (k) => k.toLowerCase().includes('count') || k.toLowerCase().includes('value') || k === '__count'\n      )\n      const value = valueField ? Number(record[valueField]) || 0 : 0\n\n      // Find percentage field\n      const percentField = Object.keys(record).find(\n        (k) => k.toLowerCase().includes('percent') || k === '__percentage'\n      )\n      const percentage = percentField ? Number(record[percentField]) || 0 : 0\n\n      // Find conversion rate field\n      const convRateField = Object.keys(record).find(\n        (k) => k.toLowerCase().includes('conversion') || k === '__conversionRate'\n      )\n      const conversionRate = convRateField ? Number(record[convRateField]) || null : null\n\n      return {\n        name,\n        value,\n        percentage,\n        conversionRate,\n        stepIndex: index,\n      }\n    })\n  }, [data])\n\n  // Calculate first step value for percentage calculations\n  const firstStepValue = funnelData[0]?.value || 0\n\n  // Handle no data\n  if (!data || data.length === 0 || funnelData.length === 0) {\n    return (\n      <div\n        className=\"flex items-center justify-center w-full text-dc-text-muted\"\n        style={{ height }}\n      >\n        <div className=\"text-center\">\n          <div className=\"text-sm font-semibold mb-1\">No funnel data</div>\n          <div className=\"text-xs text-dc-text-secondary\">\n            Configure a funnel with at least 2 steps and a binding key\n          </div>\n        </div>\n      </div>\n    )\n  }\n\n  const paletteColors = colorPalette?.colors || CHART_COLORS\n\n  // Render Recharts Funnel style (trapezoid shape)\n  if (funnelStyle === 'funnel') {\n    // Recharts FunnelChart layout: 'horizontal' = funnel flows left-to-right, 'vertical' = top-to-bottom (default)\n    // Our config: 'horizontal' orientation = standard top-to-bottom funnel\n    //             'vertical' orientation = left-to-right funnel\n    const rechartsLayout: 'horizontal' | 'vertical' = isVertical ? 'horizontal' : 'vertical'\n\n    return (\n      <div className=\"relative w-full h-full flex flex-col\" style={{ height }}>\n        <div className=\"flex-1\">\n          <ResponsiveContainer width=\"100%\" height=\"100%\">\n            <RechartsFunnelChart layout={rechartsLayout}>\n              <Tooltip\n                formatter={(value) => typeof value === 'number' ? value.toLocaleString() : String(value)}\n                contentStyle={{\n                  backgroundColor: 'var(--dc-surface)',\n                  border: '1px solid var(--dc-border)',\n                  borderRadius: '4px',\n                }}\n              />\n              <Funnel\n                dataKey=\"value\"\n                nameKey=\"name\"\n                data={funnelData}\n                isAnimationActive\n              >\n                {funnelData.map((_, index) => (\n                  <Cell key={`cell-${index}`} fill={getStepColor(index, paletteColors)} />\n                ))}\n                <LabelList\n                  position=\"right\"\n                  dataKey=\"name\"\n                  fill=\"var(--dc-text)\"\n                  style={{ fontSize: '12px' }}\n                />\n                <LabelList\n                  position=\"center\"\n                  dataKey=\"percentage\"\n                  formatter={(v) => typeof v === 'number' ? `${v.toFixed(1)}%` : String(v)}\n                  fill=\"#fff\"\n                  style={{ fontSize: '11px', fontWeight: 500 }}\n                />\n              </Funnel>\n            </RechartsFunnelChart>\n          </ResponsiveContainer>\n        </div>\n        {/* Summary Footer */}\n        {!displayConfig?.hideSummaryFooter && (\n          <div className=\"flex-shrink-0 px-4 py-2 border-t border-dc-border bg-dc-surface-secondary\">\n            <div className=\"flex items-center justify-between text-sm\">\n              <div className=\"text-dc-text-muted\">\n                <span className=\"font-medium\">{funnelData.length}</span> steps\n              </div>\n              <div className=\"text-dc-text\">\n                <span className=\"text-dc-text-muted\">Overall:</span>{' '}\n                <span className=\"font-medium\">\n                  {firstStepValue > 0\n                    ? `${((funnelData[funnelData.length - 1]?.value || 0) / firstStepValue * 100).toFixed(1)}%`\n                    : '0%'}\n                </span>\n              </div>\n              <div className=\"text-dc-text-muted\">\n                {funnelData[funnelData.length - 1]?.value.toLocaleString() || 0} / {firstStepValue.toLocaleString()} completed\n              </div>\n            </div>\n          </div>\n        )}\n      </div>\n    )\n  }\n\n  // Render vertical orientation (bars grow from bottom to top, steps laid out horizontally)\n  if (isVertical) {\n    return (\n      <div className=\"relative w-full h-full flex flex-col\" style={{ height }}>\n        {/* Funnel Steps - Vertical Layout */}\n        <div className=\"flex-1 flex items-end justify-center gap-4 px-4 py-3 overflow-hidden\">\n          {funnelData.map((step, index) => {\n            const heightPercent = firstStepValue > 0 ? (step.value / firstStepValue) * 100 : 0\n            const prevStep = index > 0 ? funnelData[index - 1] : null\n            const stepConversionRate = prevStep && prevStep.value > 0\n              ? (step.value / prevStep.value) * 100\n              : null\n\n            // Use custom label if provided, otherwise fall back to step name\n            const displayName = customStepLabels?.[index] || step.name\n\n            const timeMetricsLines = getTimeMetricsLines(step, showAvgTime, showMedianTime, showP90Time)\n            const metricsCount = timeMetricsLines.length\n\n            return (\n              <div key={step.name} className=\"flex flex-col items-center gap-2 flex-1 max-w-32 h-full\">\n                {/* Conversion Rate from Previous (top) */}\n                <div className={`${metricsCount > 0 ? (metricsCount > 1 ? 'min-h-16' : 'min-h-10') : 'h-5'} flex-shrink-0 text-center`}>\n                  {stepConversionRate !== null ? (\n                    <div className=\"text-xs text-dc-text-secondary\">\n                      {showConversion && <span>→ {stepConversionRate.toFixed(1)}%</span>}\n                      {/* Time metrics (when enabled) */}\n                      {metricsCount > 0 && (\n                        <div className=\"text-dc-text-muted mt-0.5 space-y-0.5\">\n                          {timeMetricsLines.map((line, i) => (\n                            <div key={i}>⏱ {line}</div>\n                          ))}\n                        </div>\n                      )}\n                    </div>\n                  ) : (\n                    <div className=\"text-xs text-dc-text-muted\">—</div>\n                  )}\n                </div>\n\n                {/* Bar Container */}\n                <div className=\"flex-1 w-full relative min-h-12\">\n                  {/* Background Track */}\n                  <div className=\"absolute inset-0 bg-dc-surface-secondary rounded-sm\" />\n\n                  {/* Filled Bar (grows from bottom) */}\n                  <div\n                    className=\"absolute bottom-0 left-0 right-0 rounded-sm transition-all duration-300\"\n                    style={{\n                      height: `${Math.max(heightPercent, 5)}%`,\n                      backgroundColor: getStepColor(index, paletteColors),\n                    }}\n                  />\n\n                  {/* Percentage Label on Bar */}\n                  <div\n                    className=\"absolute bottom-0 left-0 right-0 flex items-end justify-center pb-1 pointer-events-none\"\n                    style={{ height: `${Math.max(heightPercent, 20)}%` }}\n                  >\n                    <span className=\"text-xs font-medium text-white drop-shadow-sm\">\n                      {step.percentage?.toFixed(1) ?? heightPercent.toFixed(1)}%\n                    </span>\n                  </div>\n                </div>\n\n                {/* Step Label (bottom) */}\n                <div className=\"flex-shrink-0 text-center\">\n                  <div className=\"text-sm font-medium text-dc-text truncate\" title={displayName}>\n                    {displayName}\n                  </div>\n                  <div className=\"text-xs text-dc-text-muted\">\n                    {step.value.toLocaleString()}\n                  </div>\n                </div>\n              </div>\n            )\n          })}\n        </div>\n\n        {/* Summary Footer */}\n        {!displayConfig?.hideSummaryFooter && (\n          <div className=\"flex-shrink-0 px-4 py-2 border-t border-dc-border bg-dc-surface-secondary\">\n            <div className=\"flex items-center justify-between text-sm\">\n              <div className=\"text-dc-text-muted\">\n                <span className=\"font-medium\">{funnelData.length}</span> steps\n              </div>\n              <div className=\"text-dc-text\">\n                <span className=\"text-dc-text-muted\">Overall:</span>{' '}\n                <span className=\"font-medium\">\n                  {firstStepValue > 0\n                    ? `${((funnelData[funnelData.length - 1]?.value || 0) / firstStepValue * 100).toFixed(1)}%`\n                    : '0%'}\n                </span>\n              </div>\n              <div className=\"text-dc-text-muted\">\n                {funnelData[funnelData.length - 1]?.value.toLocaleString() || 0} / {firstStepValue.toLocaleString()} completed\n              </div>\n            </div>\n          </div>\n        )}\n      </div>\n    )\n  }\n\n  // Render horizontal orientation (default - bars grow left to right, steps stacked vertically)\n  return (\n    <div className=\"relative w-full h-full flex flex-col\" style={{ height }}>\n      {/* Funnel Steps - Horizontal Layout */}\n      <div className=\"flex-1 flex flex-col justify-center gap-2 px-4 py-3 overflow-hidden\">\n        {funnelData.map((step, index) => {\n          const widthPercent = firstStepValue > 0 ? (step.value / firstStepValue) * 100 : 0\n          const prevStep = index > 0 ? funnelData[index - 1] : null\n          const stepConversionRate = prevStep && prevStep.value > 0\n            ? (step.value / prevStep.value) * 100\n            : null\n\n          // Use custom label if provided, otherwise fall back to step name\n          const displayName = customStepLabels?.[index] || step.name\n          const timeMetricsLines = getTimeMetricsLines(step, showAvgTime, showMedianTime, showP90Time)\n          const metricsCount = timeMetricsLines.length\n\n          return (\n            <div key={step.name} className=\"flex items-center gap-3\">\n              {/* Step Label */}\n              <div className=\"w-24 flex-shrink-0 text-right\">\n                <div className=\"text-sm font-medium text-dc-text truncate\" title={displayName}>\n                  {displayName}\n                </div>\n                <div className=\"text-xs text-dc-text-muted\">\n                  {step.value.toLocaleString()}\n                </div>\n              </div>\n\n              {/* Bar Container */}\n              <div className=\"flex-1 relative\">\n                {/* Background Track */}\n                <div className=\"w-full h-8 bg-dc-surface-secondary rounded-sm\" />\n\n                {/* Filled Bar */}\n                <div\n                  className=\"absolute top-0 left-0 h-8 rounded-sm transition-all duration-300\"\n                  style={{\n                    width: `${Math.max(widthPercent, 2)}%`,\n                    backgroundColor: getStepColor(index, paletteColors),\n                  }}\n                />\n\n                {/* Percentage Label on Bar */}\n                <div\n                  className=\"absolute top-0 left-0 h-8 flex items-center px-2 pointer-events-none\"\n                  style={{ width: `${Math.max(widthPercent, 20)}%` }}\n                >\n                  <span className=\"text-xs font-medium text-white drop-shadow-sm\">\n                    {step.percentage?.toFixed(1) ?? widthPercent.toFixed(1)}%\n                  </span>\n                </div>\n              </div>\n\n              {/* Conversion Rate from Previous */}\n              <div className={`${metricsCount > 0 ? (metricsCount > 1 ? 'w-36' : 'w-28') : 'w-16'} flex-shrink-0 text-left`}>\n                {stepConversionRate !== null ? (\n                  <div className=\"text-xs text-dc-text-secondary\">\n                    {showConversion && <span>↓ {stepConversionRate.toFixed(1)}%</span>}\n                    {/* Time metrics (when enabled) */}\n                    {metricsCount > 0 && (\n                      <div className=\"text-dc-text-muted mt-0.5 space-y-0.5\">\n                        {timeMetricsLines.map((line, i) => (\n                          <div key={i}>⏱ {line}</div>\n                        ))}\n                      </div>\n                    )}\n                  </div>\n                ) : (\n                  <div className=\"text-xs text-dc-text-muted\">—</div>\n                )}\n              </div>\n            </div>\n          )\n        })}\n      </div>\n\n      {/* Summary Footer */}\n      {!displayConfig?.hideSummaryFooter && (\n        <div className=\"flex-shrink-0 px-4 py-2 border-t border-dc-border bg-dc-surface-secondary\">\n          <div className=\"flex items-center justify-between text-sm\">\n            <div className=\"text-dc-text-muted\">\n              <span className=\"font-medium\">{funnelData.length}</span> steps\n            </div>\n            <div className=\"text-dc-text\">\n              <span className=\"text-dc-text-muted\">Overall:</span>{' '}\n              <span className=\"font-medium\">\n                {firstStepValue > 0\n                  ? `${((funnelData[funnelData.length - 1]?.value || 0) / firstStepValue * 100).toFixed(1)}%`\n                  : '0%'}\n              </span>\n            </div>\n            <div className=\"text-dc-text-muted\">\n              {funnelData[funnelData.length - 1]?.value.toLocaleString() || 0} / {firstStepValue.toLocaleString()} completed\n            </div>\n          </div>\n        </div>\n      )}\n    </div>\n  )\n})\n\nexport default FunnelChart\n"],"names":["FUNNEL_COLORS","getStepColor","index","colorPalette","colors","isFunnelData","data","first","getTimeMetricsLines","step","showAvg","showMedian","showP90","lines","formatDuration","FunnelChart","React","height","displayConfig","customStepLabels","isVertical","funnelStyle","showConversion","showAvgTime","showMedianTime","showP90Time","funnelData","useMemo","row","record","nameField","k","name","valueField","value","percentField","percentage","convRateField","conversionRate","firstStepValue","jsx","jsxs","paletteColors","CHART_COLORS","ResponsiveContainer","RechartsFunnelChart","Tooltip","Funnel","_","Cell","LabelList","v","heightPercent","prevStep","stepConversionRate","displayName","timeMetricsLines","metricsCount","line","i","widthPercent"],"mappings":"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"}

package/dist/client/chunks/{chart-heat-map-v1afxnjq.js → chart-heat-map-B-l8hK8b.js}

@@ -1,7 +1,7 @@
 import { jsx as x, jsxs as b } from "react/jsx-runtime";
 import q, { useMemo as C } from "react";
 import { ResponsiveHeatMap as P } from "@nivo/heatmap";
-import { g as L, c as k, f as T } from "./charts-core-CXrhEEVF.js";
+import { g as L, f as k, d as T } from "./charts-core-CjQZBxmv.js";
 function z(i) {
   if (i.startsWith("#")) {
     const s = i.slice(1);
@@ -228,4 +228,4 @@ const G = q.memo(function({
 export {
   G as default
 };
-//# sourceMappingURL=chart-heat-map-v1afxnjq.js.map
+//# sourceMappingURL=chart-heat-map-B-l8hK8b.js.map

package/dist/client/chunks/{chart-heat-map-v1afxnjq.js.map → chart-heat-map-B-l8hK8b.js.map}

@@ -1 +1 @@
-{"version":3,"file":"chart-heat-map-v1afxnjq.js","sources":["../../../src/client/components/charts/HeatMapChart.tsx"],"sourcesContent":["/**\n * HeatMapChart Component\n *\n * Visualizes intensity across two categorical dimensions using a color matrix.\n * Uses @nivo/heatmap for rendering.\n *\n * The chart displays:\n * - Rows: Y-axis dimension values\n * - Columns: X-axis dimension values\n * - Cell color: Intensity based on measure value\n */\n\nimport React, { useMemo } from 'react'\nimport { ResponsiveHeatMap } from '@nivo/heatmap'\nimport { formatTimeValue, getFieldGranularity, formatAxisValue } from '../../utils/chartUtils'\nimport type { AxisFormatConfig } from '../../types'\nimport type { ChartProps } from '../../types'\n\n/**\n * Parse color string (hex or rgb) to RGB values\n */\nfunction parseColor(color: string): { r: number; g: number; b: number } | null {\n  // Handle hex colors\n  if (color.startsWith('#')) {\n    const hex = color.slice(1)\n    return {\n      r: parseInt(hex.substring(0, 2), 16),\n      g: parseInt(hex.substring(2, 4), 16),\n      b: parseInt(hex.substring(4, 6), 16),\n    }\n  }\n\n  // Handle rgb/rgba colors\n  const rgbMatch = color.match(/rgba?\\((\\d+),\\s*(\\d+),\\s*(\\d+)/)\n  if (rgbMatch) {\n    return {\n      r: parseInt(rgbMatch[1], 10),\n      g: parseInt(rgbMatch[2], 10),\n      b: parseInt(rgbMatch[3], 10),\n    }\n  }\n\n  return null\n}\n\n/**\n * Calculate relative luminance of a color\n * Returns value between 0 (black) and 1 (white)\n */\nfunction getLuminance(color: string): number {\n  const rgb = parseColor(color)\n  if (!rgb) return 0.5 // Default to mid-gray if parsing fails\n\n  const r = rgb.r / 255\n  const g = rgb.g / 255\n  const b = rgb.b / 255\n\n  // Apply gamma correction\n  const rLinear = r <= 0.03928 ? r / 12.92 : Math.pow((r + 0.055) / 1.055, 2.4)\n  const gLinear = g <= 0.03928 ? g / 12.92 : Math.pow((g + 0.055) / 1.055, 2.4)\n  const bLinear = b <= 0.03928 ? b / 12.92 : Math.pow((b + 0.055) / 1.055, 2.4)\n\n  // Calculate luminance using WCAG formula\n  return 0.2126 * rLinear + 0.7152 * gLinear + 0.0722 * bLinear\n}\n\n/**\n * Get contrasting text color (white or dark) based on background color\n */\nfunction getContrastingTextColor(bgColor: string): string {\n  const luminance = getLuminance(bgColor)\n  // Use white text on dark backgrounds, dark text on light backgrounds\n  return luminance < 0.4 ? '#ffffff' : '#1f2937'\n}\n\n/**\n * Maximum dimensions for heatmap to prevent browser lockup\n * 50x50 = 2500 cells max\n */\nconst MAX_HEATMAP_ROWS = 50\nconst MAX_HEATMAP_COLS = 50\n\n/**\n * Nivo heatmap data format\n */\ninterface HeatMapDatum {\n  x: string\n  y: number | null\n}\n\ninterface HeatMapSerie {\n  id: string\n  data: HeatMapDatum[]\n}\n\n/**\n * Result of heatmap transformation including truncation info\n */\ninterface HeatMapTransformResult {\n  data: HeatMapSerie[]\n  truncated: boolean\n  originalRows: number\n  originalCols: number\n}\n\n/**\n * Transform drizzle-cube flat query results to nivo heatmap format\n *\n * Input (drizzle-cube):\n * [\n *   { \"Region.name\": \"East\", \"Product.category\": \"Electronics\", \"Sales.total\": 1500 },\n *   { \"Region.name\": \"East\", \"Product.category\": \"Clothing\", \"Sales.total\": 800 },\n * ]\n *\n * Output (nivo format):\n * [\n *   { id: \"East\", data: [{ x: \"Electronics\", y: 1500 }, { x: \"Clothing\", y: 800 }] }\n * ]\n *\n * Data is truncated to MAX_HEATMAP_ROWS x MAX_HEATMAP_COLS to prevent browser lockup\n */\nfunction transformToHeatMapFormat(\n  data: Record<string, unknown>[],\n  xAxisField: string | undefined,\n  yAxisField: string | undefined,\n  valueField: string | undefined,\n  xGranularity?: string,\n  yGranularity?: string\n): HeatMapTransformResult {\n  if (!xAxisField || !yAxisField || !valueField) {\n    return { data: [], truncated: false, originalRows: 0, originalCols: 0 }\n  }\n\n  // Group data by Y-axis dimension\n  const groupedByY = new Map<string, Map<string, number>>()\n  const allXValues = new Set<string>()\n  // Keep original values for sorting timestamps correctly\n  const xValueOriginals = new Map<string, unknown>()\n\n  for (const row of data) {\n    const rawYValue = row[yAxisField]\n    const rawXValue = row[xAxisField]\n\n    // Format time values based on granularity\n    const yValue = formatTimeValue(rawYValue, yGranularity) || String(rawYValue ?? '(empty)')\n    const xValue = formatTimeValue(rawXValue, xGranularity) || String(rawXValue ?? '(empty)')\n    const value = Number(row[valueField]) || 0\n\n    allXValues.add(xValue)\n    // Store original for sorting\n    if (!xValueOriginals.has(xValue)) {\n      xValueOriginals.set(xValue, rawXValue)\n    }\n\n    if (!groupedByY.has(yValue)) {\n      groupedByY.set(yValue, new Map())\n    }\n    groupedByY.get(yValue)!.set(xValue, value)\n  }\n\n  // Sort X values - try to sort by original timestamp if available\n  const xValueArray = Array.from(allXValues).sort((a, b) => {\n    const origA = xValueOriginals.get(a)\n    const origB = xValueOriginals.get(b)\n    // If both are date strings, sort chronologically\n    if (typeof origA === 'string' && typeof origB === 'string' &&\n        origA.match(/^\\d{4}-\\d{2}-\\d{2}/) && origB.match(/^\\d{4}-\\d{2}-\\d{2}/)) {\n      return origA.localeCompare(origB)\n    }\n    // Otherwise sort alphabetically by formatted value\n    return a.localeCompare(b)\n  })\n\n  // Track original dimensions for truncation warning\n  const originalRows = groupedByY.size\n  const originalCols = xValueArray.length\n  const truncated = originalRows > MAX_HEATMAP_ROWS || originalCols > MAX_HEATMAP_COLS\n\n  // Truncate X values if needed\n  const limitedXValues = xValueArray.slice(0, MAX_HEATMAP_COLS)\n\n  // Build result with truncation\n  const result: HeatMapSerie[] = []\n  let rowCount = 0\n  for (const [yValue, xMap] of groupedByY) {\n    if (rowCount >= MAX_HEATMAP_ROWS) break\n    result.push({\n      id: yValue,\n      data: limitedXValues.map((x) => ({\n        x,\n        y: xMap.get(x) ?? null,\n      })),\n    })\n    rowCount++\n  }\n\n  return { data: result, truncated, originalRows, originalCols }\n}\n\n/**\n * HeatMapChart Component\n *\n * Renders a heatmap visualization from query results.\n * Shows intensity patterns across two categorical dimensions.\n */\nconst HeatMapChart = React.memo(function HeatMapChart({\n  data,\n  height = '100%',\n  chartConfig,\n  colorPalette,\n  displayConfig,\n  queryObject,\n}: ChartProps) {\n  // Get display config options\n  const displayConfigAny = displayConfig as Record<string, unknown> | undefined\n  const showLabels = (displayConfigAny?.showLabels as boolean) ?? false\n  const cellShape = (displayConfigAny?.cellShape as 'rect' | 'circle') ?? 'rect'\n  const showLegend = (displayConfigAny?.showLegend as boolean) ?? true\n  const xAxisFormat = displayConfigAny?.xAxisFormat as AxisFormatConfig | undefined\n  const yAxisFormat = displayConfigAny?.yAxisFormat as AxisFormatConfig | undefined\n  const valueFormat = displayConfigAny?.valueFormat as AxisFormatConfig | undefined\n\n  // Extract field names from chartConfig (handle both array and string formats)\n  const xAxisField = chartConfig?.xAxis\n    ? (Array.isArray(chartConfig.xAxis) ? chartConfig.xAxis[0] : chartConfig.xAxis)\n    : undefined\n  const yAxisField = chartConfig?.yAxis\n    ? (Array.isArray(chartConfig.yAxis) ? chartConfig.yAxis[0] : chartConfig.yAxis)\n    : undefined\n  const valueField = chartConfig?.valueField\n    ? (Array.isArray(chartConfig.valueField) ? chartConfig.valueField[0] : chartConfig.valueField)\n    : undefined\n\n  // Get granularity for time dimensions (only if field is defined)\n  const xGranularity = xAxisField ? getFieldGranularity(queryObject, xAxisField) : undefined\n  const yGranularity = yAxisField ? getFieldGranularity(queryObject, yAxisField) : undefined\n\n  // Transform data to nivo format\n  const { data: heatmapData, truncated, originalRows, originalCols } = useMemo(() => {\n    if (!data || data.length === 0) {\n      return { data: [], truncated: false, originalRows: 0, originalCols: 0 }\n    }\n    return transformToHeatMapFormat(\n      data as Record<string, unknown>[],\n      xAxisField,\n      yAxisField,\n      valueField,\n      xGranularity,\n      yGranularity\n    )\n  }, [data, xAxisField, yAxisField, valueField, xGranularity, yGranularity])\n\n  // Handle no data or missing config\n  if (!data || data.length === 0) {\n    return (\n      <div\n        className=\"flex items-center justify-center w-full text-dc-text-muted\"\n        style={{ height }}\n      >\n        <div className=\"text-center\">\n          <div className=\"text-sm font-semibold mb-1\">No data available</div>\n          <div className=\"text-xs text-dc-text-secondary\">\n            Run a query to see heatmap visualization\n          </div>\n        </div>\n      </div>\n    )\n  }\n\n  if (!xAxisField || !yAxisField || !valueField) {\n    return (\n      <div\n        className=\"flex items-center justify-center w-full text-dc-text-muted\"\n        style={{ height }}\n      >\n        <div className=\"text-center\">\n          <div className=\"text-sm font-semibold mb-1\">Configuration required</div>\n          <div className=\"text-xs text-dc-text-secondary\">\n            {!xAxisField && 'X-axis dimension required. '}\n            {!yAxisField && 'Y-axis dimension required. '}\n            {!valueField && 'Value measure required.'}\n          </div>\n        </div>\n      </div>\n    )\n  }\n\n  if (heatmapData.length === 0) {\n    return (\n      <div\n        className=\"flex items-center justify-center w-full text-dc-text-muted\"\n        style={{ height }}\n      >\n        <div className=\"text-center\">\n          <div className=\"text-sm font-semibold mb-1\">No data to display</div>\n          <div className=\"text-xs text-dc-text-secondary\">\n            The query returned no results for the heatmap\n          </div>\n        </div>\n      </div>\n    )\n  }\n\n  // Use gradient colors from palette, or default sequential blue gradient\n  // Sequential single-hue gradients are ideal for heatmaps showing magnitude/intensity\n  const colors = colorPalette?.gradient || [\n    '#eff3ff', // lightest blue\n    '#c6dbef',\n    '#9ecae1',\n    '#6baed6',\n    '#3182bd',\n    '#08519c', // darkest blue\n  ]\n\n  return (\n    <div className=\"relative w-full h-full\" style={{ height }}>\n      {truncated && (\n        <div className=\"absolute top-0 left-0 right-0 z-10 px-3 py-1.5 text-xs bg-dc-warning-bg text-dc-warning border-b border-dc-border\">\n          Data truncated to {MAX_HEATMAP_ROWS}x{MAX_HEATMAP_COLS} cells (original: {originalRows}x{originalCols}). Add filters to reduce dimensions.\n        </div>\n      )}\n      <ResponsiveHeatMap\n        data={heatmapData}\n        margin={{ top: truncated ? 40 : 20, right: 20, bottom: 120, left: 120 }}\n        valueFormat={valueFormat ? (v) => formatAxisValue(v, valueFormat) : '>-.2s'}\n        axisTop={null}\n        axisRight={null}\n        axisBottom={{\n          tickSize: 5,\n          tickPadding: 5,\n          tickRotation: -45,\n          legend: xAxisFormat?.label || xAxisField?.split('.').pop() || 'X Axis',\n          legendPosition: 'middle',\n          legendOffset: 70,\n          format: xAxisFormat\n            ? (v) => {\n                const num = parseFloat(String(v))\n                return isNaN(num) ? String(v) : formatAxisValue(num, xAxisFormat)\n              }\n            : undefined,\n        }}\n        axisLeft={{\n          tickSize: 5,\n          tickPadding: 5,\n          tickRotation: 0,\n          legend: yAxisFormat?.label || yAxisField?.split('.').pop() || 'Y Axis',\n          legendPosition: 'middle',\n          legendOffset: -80,\n          format: yAxisFormat\n            ? (v) => {\n                const num = parseFloat(String(v))\n                return isNaN(num) ? String(v) : formatAxisValue(num, yAxisFormat)\n              }\n            : undefined,\n        }}\n        colors={\n          colors.length >= 2\n            // Sequential scale needs [minColor, maxColor] tuple\n            // Use first color for low values, last color for high values\n            ? { type: 'sequential', colors: [colors[0], colors[colors.length - 1]] as [string, string] }\n            : { type: 'sequential', scheme: 'greens' }  // Fallback to built-in scheme\n        }\n        emptyColor=\"var(--dc-surface-tertiary)\"\n        cellComponent={cellShape === 'circle' ? 'circle' : 'rect'}\n        enableLabels={showLabels}\n        labelTextColor={({ color }) => getContrastingTextColor(color)}\n        legends={\n          showLegend\n            ? [\n                {\n                  anchor: 'bottom',\n                  translateX: 0,\n                  translateY: 95,\n                  length: 400,\n                  thickness: 8,\n                  direction: 'row',\n                  tickPosition: 'after',\n                  tickSize: 3,\n                  tickSpacing: 4,\n                  tickOverlap: false,\n                  title: valueField?.split('.').pop() || 'Value',\n                  titleAlign: 'start',\n                  titleOffset: 4,\n                },\n              ]\n            : []\n        }\n        annotations={[]}\n        theme={{\n          text: {\n            fill: 'var(--dc-text)',\n          },\n          axis: {\n            legend: {\n              text: {\n                fill: 'var(--dc-text)',\n              },\n            },\n            ticks: {\n              text: {\n                fill: 'var(--dc-text-secondary)',\n              },\n            },\n          },\n          legends: {\n            text: {\n              fill: 'var(--dc-text-secondary)',\n            },\n            title: {\n              text: {\n                fill: 'var(--dc-text)',\n              },\n            },\n          },\n          tooltip: {\n            container: {\n              background: 'var(--dc-surface)',\n              color: 'var(--dc-text)',\n              borderRadius: '4px',\n              boxShadow: '0 1px 2px rgba(0, 0, 0, 0.25)',\n            },\n          },\n        }}\n      />\n    </div>\n  )\n})\n\nexport default HeatMapChart\n"],"names":["parseColor","color","hex","rgbMatch","getLuminance","rgb","r","g","b","rLinear","gLinear","bLinear","getContrastingTextColor","bgColor","MAX_HEATMAP_ROWS","MAX_HEATMAP_COLS","transformToHeatMapFormat","data","xAxisField","yAxisField","valueField","xGranularity","yGranularity","groupedByY","allXValues","xValueOriginals","row","rawYValue","rawXValue","yValue","formatTimeValue","xValue","value","xValueArray","origA","origB","originalRows","originalCols","truncated","limitedXValues","result","rowCount","xMap","x","HeatMapChart","React","height","chartConfig","colorPalette","displayConfig","queryObject","displayConfigAny","showLabels","cellShape","showLegend","xAxisFormat","yAxisFormat","valueFormat","getFieldGranularity","heatmapData","useMemo","jsx","jsxs","colors","ResponsiveHeatMap","v","formatAxisValue","num"],"mappings":"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"}
+{"version":3,"file":"chart-heat-map-B-l8hK8b.js","sources":["../../../src/client/components/charts/HeatMapChart.tsx"],"sourcesContent":["/**\n * HeatMapChart Component\n *\n * Visualizes intensity across two categorical dimensions using a color matrix.\n * Uses @nivo/heatmap for rendering.\n *\n * The chart displays:\n * - Rows: Y-axis dimension values\n * - Columns: X-axis dimension values\n * - Cell color: Intensity based on measure value\n */\n\nimport React, { useMemo } from 'react'\nimport { ResponsiveHeatMap } from '@nivo/heatmap'\nimport { formatTimeValue, getFieldGranularity, formatAxisValue } from '../../utils/chartUtils'\nimport type { AxisFormatConfig } from '../../types'\nimport type { ChartProps } from '../../types'\n\n/**\n * Parse color string (hex or rgb) to RGB values\n */\nfunction parseColor(color: string): { r: number; g: number; b: number } | null {\n  // Handle hex colors\n  if (color.startsWith('#')) {\n    const hex = color.slice(1)\n    return {\n      r: parseInt(hex.substring(0, 2), 16),\n      g: parseInt(hex.substring(2, 4), 16),\n      b: parseInt(hex.substring(4, 6), 16),\n    }\n  }\n\n  // Handle rgb/rgba colors\n  const rgbMatch = color.match(/rgba?\\((\\d+),\\s*(\\d+),\\s*(\\d+)/)\n  if (rgbMatch) {\n    return {\n      r: parseInt(rgbMatch[1], 10),\n      g: parseInt(rgbMatch[2], 10),\n      b: parseInt(rgbMatch[3], 10),\n    }\n  }\n\n  return null\n}\n\n/**\n * Calculate relative luminance of a color\n * Returns value between 0 (black) and 1 (white)\n */\nfunction getLuminance(color: string): number {\n  const rgb = parseColor(color)\n  if (!rgb) return 0.5 // Default to mid-gray if parsing fails\n\n  const r = rgb.r / 255\n  const g = rgb.g / 255\n  const b = rgb.b / 255\n\n  // Apply gamma correction\n  const rLinear = r <= 0.03928 ? r / 12.92 : Math.pow((r + 0.055) / 1.055, 2.4)\n  const gLinear = g <= 0.03928 ? g / 12.92 : Math.pow((g + 0.055) / 1.055, 2.4)\n  const bLinear = b <= 0.03928 ? b / 12.92 : Math.pow((b + 0.055) / 1.055, 2.4)\n\n  // Calculate luminance using WCAG formula\n  return 0.2126 * rLinear + 0.7152 * gLinear + 0.0722 * bLinear\n}\n\n/**\n * Get contrasting text color (white or dark) based on background color\n */\nfunction getContrastingTextColor(bgColor: string): string {\n  const luminance = getLuminance(bgColor)\n  // Use white text on dark backgrounds, dark text on light backgrounds\n  return luminance < 0.4 ? '#ffffff' : '#1f2937'\n}\n\n/**\n * Maximum dimensions for heatmap to prevent browser lockup\n * 50x50 = 2500 cells max\n */\nconst MAX_HEATMAP_ROWS = 50\nconst MAX_HEATMAP_COLS = 50\n\n/**\n * Nivo heatmap data format\n */\ninterface HeatMapDatum {\n  x: string\n  y: number | null\n}\n\ninterface HeatMapSerie {\n  id: string\n  data: HeatMapDatum[]\n}\n\n/**\n * Result of heatmap transformation including truncation info\n */\ninterface HeatMapTransformResult {\n  data: HeatMapSerie[]\n  truncated: boolean\n  originalRows: number\n  originalCols: number\n}\n\n/**\n * Transform drizzle-cube flat query results to nivo heatmap format\n *\n * Input (drizzle-cube):\n * [\n *   { \"Region.name\": \"East\", \"Product.category\": \"Electronics\", \"Sales.total\": 1500 },\n *   { \"Region.name\": \"East\", \"Product.category\": \"Clothing\", \"Sales.total\": 800 },\n * ]\n *\n * Output (nivo format):\n * [\n *   { id: \"East\", data: [{ x: \"Electronics\", y: 1500 }, { x: \"Clothing\", y: 800 }] }\n * ]\n *\n * Data is truncated to MAX_HEATMAP_ROWS x MAX_HEATMAP_COLS to prevent browser lockup\n */\nfunction transformToHeatMapFormat(\n  data: Record<string, unknown>[],\n  xAxisField: string | undefined,\n  yAxisField: string | undefined,\n  valueField: string | undefined,\n  xGranularity?: string,\n  yGranularity?: string\n): HeatMapTransformResult {\n  if (!xAxisField || !yAxisField || !valueField) {\n    return { data: [], truncated: false, originalRows: 0, originalCols: 0 }\n  }\n\n  // Group data by Y-axis dimension\n  const groupedByY = new Map<string, Map<string, number>>()\n  const allXValues = new Set<string>()\n  // Keep original values for sorting timestamps correctly\n  const xValueOriginals = new Map<string, unknown>()\n\n  for (const row of data) {\n    const rawYValue = row[yAxisField]\n    const rawXValue = row[xAxisField]\n\n    // Format time values based on granularity\n    const yValue = formatTimeValue(rawYValue, yGranularity) || String(rawYValue ?? '(empty)')\n    const xValue = formatTimeValue(rawXValue, xGranularity) || String(rawXValue ?? '(empty)')\n    const value = Number(row[valueField]) || 0\n\n    allXValues.add(xValue)\n    // Store original for sorting\n    if (!xValueOriginals.has(xValue)) {\n      xValueOriginals.set(xValue, rawXValue)\n    }\n\n    if (!groupedByY.has(yValue)) {\n      groupedByY.set(yValue, new Map())\n    }\n    groupedByY.get(yValue)!.set(xValue, value)\n  }\n\n  // Sort X values - try to sort by original timestamp if available\n  const xValueArray = Array.from(allXValues).sort((a, b) => {\n    const origA = xValueOriginals.get(a)\n    const origB = xValueOriginals.get(b)\n    // If both are date strings, sort chronologically\n    if (typeof origA === 'string' && typeof origB === 'string' &&\n        origA.match(/^\\d{4}-\\d{2}-\\d{2}/) && origB.match(/^\\d{4}-\\d{2}-\\d{2}/)) {\n      return origA.localeCompare(origB)\n    }\n    // Otherwise sort alphabetically by formatted value\n    return a.localeCompare(b)\n  })\n\n  // Track original dimensions for truncation warning\n  const originalRows = groupedByY.size\n  const originalCols = xValueArray.length\n  const truncated = originalRows > MAX_HEATMAP_ROWS || originalCols > MAX_HEATMAP_COLS\n\n  // Truncate X values if needed\n  const limitedXValues = xValueArray.slice(0, MAX_HEATMAP_COLS)\n\n  // Build result with truncation\n  const result: HeatMapSerie[] = []\n  let rowCount = 0\n  for (const [yValue, xMap] of groupedByY) {\n    if (rowCount >= MAX_HEATMAP_ROWS) break\n    result.push({\n      id: yValue,\n      data: limitedXValues.map((x) => ({\n        x,\n        y: xMap.get(x) ?? null,\n      })),\n    })\n    rowCount++\n  }\n\n  return { data: result, truncated, originalRows, originalCols }\n}\n\n/**\n * HeatMapChart Component\n *\n * Renders a heatmap visualization from query results.\n * Shows intensity patterns across two categorical dimensions.\n */\nconst HeatMapChart = React.memo(function HeatMapChart({\n  data,\n  height = '100%',\n  chartConfig,\n  colorPalette,\n  displayConfig,\n  queryObject,\n}: ChartProps) {\n  // Get display config options\n  const displayConfigAny = displayConfig as Record<string, unknown> | undefined\n  const showLabels = (displayConfigAny?.showLabels as boolean) ?? false\n  const cellShape = (displayConfigAny?.cellShape as 'rect' | 'circle') ?? 'rect'\n  const showLegend = (displayConfigAny?.showLegend as boolean) ?? true\n  const xAxisFormat = displayConfigAny?.xAxisFormat as AxisFormatConfig | undefined\n  const yAxisFormat = displayConfigAny?.yAxisFormat as AxisFormatConfig | undefined\n  const valueFormat = displayConfigAny?.valueFormat as AxisFormatConfig | undefined\n\n  // Extract field names from chartConfig (handle both array and string formats)\n  const xAxisField = chartConfig?.xAxis\n    ? (Array.isArray(chartConfig.xAxis) ? chartConfig.xAxis[0] : chartConfig.xAxis)\n    : undefined\n  const yAxisField = chartConfig?.yAxis\n    ? (Array.isArray(chartConfig.yAxis) ? chartConfig.yAxis[0] : chartConfig.yAxis)\n    : undefined\n  const valueField = chartConfig?.valueField\n    ? (Array.isArray(chartConfig.valueField) ? chartConfig.valueField[0] : chartConfig.valueField)\n    : undefined\n\n  // Get granularity for time dimensions (only if field is defined)\n  const xGranularity = xAxisField ? getFieldGranularity(queryObject, xAxisField) : undefined\n  const yGranularity = yAxisField ? getFieldGranularity(queryObject, yAxisField) : undefined\n\n  // Transform data to nivo format\n  const { data: heatmapData, truncated, originalRows, originalCols } = useMemo(() => {\n    if (!data || data.length === 0) {\n      return { data: [], truncated: false, originalRows: 0, originalCols: 0 }\n    }\n    return transformToHeatMapFormat(\n      data as Record<string, unknown>[],\n      xAxisField,\n      yAxisField,\n      valueField,\n      xGranularity,\n      yGranularity\n    )\n  }, [data, xAxisField, yAxisField, valueField, xGranularity, yGranularity])\n\n  // Handle no data or missing config\n  if (!data || data.length === 0) {\n    return (\n      <div\n        className=\"flex items-center justify-center w-full text-dc-text-muted\"\n        style={{ height }}\n      >\n        <div className=\"text-center\">\n          <div className=\"text-sm font-semibold mb-1\">No data available</div>\n          <div className=\"text-xs text-dc-text-secondary\">\n            Run a query to see heatmap visualization\n          </div>\n        </div>\n      </div>\n    )\n  }\n\n  if (!xAxisField || !yAxisField || !valueField) {\n    return (\n      <div\n        className=\"flex items-center justify-center w-full text-dc-text-muted\"\n        style={{ height }}\n      >\n        <div className=\"text-center\">\n          <div className=\"text-sm font-semibold mb-1\">Configuration required</div>\n          <div className=\"text-xs text-dc-text-secondary\">\n            {!xAxisField && 'X-axis dimension required. '}\n            {!yAxisField && 'Y-axis dimension required. '}\n            {!valueField && 'Value measure required.'}\n          </div>\n        </div>\n      </div>\n    )\n  }\n\n  if (heatmapData.length === 0) {\n    return (\n      <div\n        className=\"flex items-center justify-center w-full text-dc-text-muted\"\n        style={{ height }}\n      >\n        <div className=\"text-center\">\n          <div className=\"text-sm font-semibold mb-1\">No data to display</div>\n          <div className=\"text-xs text-dc-text-secondary\">\n            The query returned no results for the heatmap\n          </div>\n        </div>\n      </div>\n    )\n  }\n\n  // Use gradient colors from palette, or default sequential blue gradient\n  // Sequential single-hue gradients are ideal for heatmaps showing magnitude/intensity\n  const colors = colorPalette?.gradient || [\n    '#eff3ff', // lightest blue\n    '#c6dbef',\n    '#9ecae1',\n    '#6baed6',\n    '#3182bd',\n    '#08519c', // darkest blue\n  ]\n\n  return (\n    <div className=\"relative w-full h-full\" style={{ height }}>\n      {truncated && (\n        <div className=\"absolute top-0 left-0 right-0 z-10 px-3 py-1.5 text-xs bg-dc-warning-bg text-dc-warning border-b border-dc-border\">\n          Data truncated to {MAX_HEATMAP_ROWS}x{MAX_HEATMAP_COLS} cells (original: {originalRows}x{originalCols}). Add filters to reduce dimensions.\n        </div>\n      )}\n      <ResponsiveHeatMap\n        data={heatmapData}\n        margin={{ top: truncated ? 40 : 20, right: 20, bottom: 120, left: 120 }}\n        valueFormat={valueFormat ? (v) => formatAxisValue(v, valueFormat) : '>-.2s'}\n        axisTop={null}\n        axisRight={null}\n        axisBottom={{\n          tickSize: 5,\n          tickPadding: 5,\n          tickRotation: -45,\n          legend: xAxisFormat?.label || xAxisField?.split('.').pop() || 'X Axis',\n          legendPosition: 'middle',\n          legendOffset: 70,\n          format: xAxisFormat\n            ? (v) => {\n                const num = parseFloat(String(v))\n                return isNaN(num) ? String(v) : formatAxisValue(num, xAxisFormat)\n              }\n            : undefined,\n        }}\n        axisLeft={{\n          tickSize: 5,\n          tickPadding: 5,\n          tickRotation: 0,\n          legend: yAxisFormat?.label || yAxisField?.split('.').pop() || 'Y Axis',\n          legendPosition: 'middle',\n          legendOffset: -80,\n          format: yAxisFormat\n            ? (v) => {\n                const num = parseFloat(String(v))\n                return isNaN(num) ? String(v) : formatAxisValue(num, yAxisFormat)\n              }\n            : undefined,\n        }}\n        colors={\n          colors.length >= 2\n            // Sequential scale needs [minColor, maxColor] tuple\n            // Use first color for low values, last color for high values\n            ? { type: 'sequential', colors: [colors[0], colors[colors.length - 1]] as [string, string] }\n            : { type: 'sequential', scheme: 'greens' }  // Fallback to built-in scheme\n        }\n        emptyColor=\"var(--dc-surface-tertiary)\"\n        cellComponent={cellShape === 'circle' ? 'circle' : 'rect'}\n        enableLabels={showLabels}\n        labelTextColor={({ color }) => getContrastingTextColor(color)}\n        legends={\n          showLegend\n            ? [\n                {\n                  anchor: 'bottom',\n                  translateX: 0,\n                  translateY: 95,\n                  length: 400,\n                  thickness: 8,\n                  direction: 'row',\n                  tickPosition: 'after',\n                  tickSize: 3,\n                  tickSpacing: 4,\n                  tickOverlap: false,\n                  title: valueField?.split('.').pop() || 'Value',\n                  titleAlign: 'start',\n                  titleOffset: 4,\n                },\n              ]\n            : []\n        }\n        annotations={[]}\n        theme={{\n          text: {\n            fill: 'var(--dc-text)',\n          },\n          axis: {\n            legend: {\n              text: {\n                fill: 'var(--dc-text)',\n              },\n            },\n            ticks: {\n              text: {\n                fill: 'var(--dc-text-secondary)',\n              },\n            },\n          },\n          legends: {\n            text: {\n              fill: 'var(--dc-text-secondary)',\n            },\n            title: {\n              text: {\n                fill: 'var(--dc-text)',\n              },\n            },\n          },\n          tooltip: {\n            container: {\n              background: 'var(--dc-surface)',\n              color: 'var(--dc-text)',\n              borderRadius: '4px',\n              boxShadow: '0 1px 2px rgba(0, 0, 0, 0.25)',\n            },\n          },\n        }}\n      />\n    </div>\n  )\n})\n\nexport default HeatMapChart\n"],"names":["parseColor","color","hex","rgbMatch","getLuminance","rgb","r","g","b","rLinear","gLinear","bLinear","getContrastingTextColor","bgColor","MAX_HEATMAP_ROWS","MAX_HEATMAP_COLS","transformToHeatMapFormat","data","xAxisField","yAxisField","valueField","xGranularity","yGranularity","groupedByY","allXValues","xValueOriginals","row","rawYValue","rawXValue","yValue","formatTimeValue","xValue","value","xValueArray","origA","origB","originalRows","originalCols","truncated","limitedXValues","result","rowCount","xMap","x","HeatMapChart","React","height","chartConfig","colorPalette","displayConfig","queryObject","displayConfigAny","showLabels","cellShape","showLegend","xAxisFormat","yAxisFormat","valueFormat","getFieldGranularity","heatmapData","useMemo","jsx","jsxs","colors","ResponsiveHeatMap","v","formatAxisValue","num"],"mappings":"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"}

package/dist/client/chunks/chart-kpi-delta-sfZEvQZm.js

@@ -0,0 +1,351 @@
+import { jsx as t, jsxs as n } from "react/jsx-runtime";
+import se, { useState as O, useRef as U, useEffect as ne } from "react";
+import { I as ie, d as re } from "./icons-DRreo6m8.js";
+import { u as oe } from "./charts-core-CjQZBxmv.js";
+import { f as ce } from "./chart-kpi-number-BxGNOtzI.js";
+function ae({
+  values: w,
+  lastValue: p,
+  positiveColor: r,
+  negativeColor: i,
+  formatValue: v,
+  width: s,
+  height: o
+}) {
+  const u = Math.max(10, Math.floor(s / 10)), f = w.length > u ? w.slice(-u) : w, g = f.map((a) => a - p), N = Math.min(...g, 0), c = Math.max(...g, 0);
+  if (Math.max(Math.abs(N), Math.abs(c)) === 0 || g.length === 0)
+    return /* @__PURE__ */ t(
+      "div",
+      {
+        className: "flex items-center justify-center bg-dc-bg-secondary rounded-sm border border-dc-border",
+        style: { width: `${s}px`, height: `${o}px` },
+        children: /* @__PURE__ */ t("span", { className: "text-xs text-dc-text-muted", children: "No variance data" })
+      }
+    );
+  const F = 2, M = s - (f.length - 1) * F, z = Math.max(4, M / f.length), h = c - N, d = h > 0 ? c / h * 100 : 50;
+  return /* @__PURE__ */ n("div", { className: "flex items-center space-x-2", children: [
+    /* @__PURE__ */ n(
+      "div",
+      {
+        className: "relative",
+        style: {
+          width: `${s}px`,
+          height: `${o}px`
+        },
+        children: [
+          /* @__PURE__ */ t(
+            "div",
+            {
+              className: "absolute left-0 right-0",
+              style: {
+                height: "1px",
+                top: `${d}%`,
+                backgroundColor: "var(--dc-border)",
+                zIndex: 1
+              }
+            }
+          ),
+          g.map((a, y) => {
+            const V = Math.abs(a) / h, R = Math.max(2, V * (o - 4)), I = a >= 0, S = y === f.length - 1, A = I ? r : i, B = y * (z + F);
+            return /* @__PURE__ */ t(
+              "div",
+              {
+                className: "absolute rounded-xs",
+                style: {
+                  left: `${B}px`,
+                  width: `${z}px`,
+                  height: `${R}px`,
+                  backgroundColor: A,
+                  opacity: S ? 1 : 0.6,
+                  // Position bar relative to zero line
+                  ...I ? { bottom: `${100 - d}%` } : { top: `${d}%` },
+                  zIndex: 2
+                },
+                title: `${v(f[y])}: ${a >= 0 ? "+" : ""}${v(a)} vs current`
+              },
+              y
+            );
+          })
+        ]
+      }
+    ),
+    /* @__PURE__ */ n(
+      "div",
+      {
+        className: "flex flex-col justify-between text-xs text-dc-text-muted",
+        style: { height: `${o}px` },
+        children: [
+          /* @__PURE__ */ n("span", { children: [
+            "+",
+            v(c)
+          ] }),
+          /* @__PURE__ */ n("span", { children: [
+            (N < 0, ""),
+            v(N)
+          ] })
+        ]
+      }
+    )
+  ] });
+}
+const he = se.memo(function({
+  data: p,
+  chartConfig: r,
+  displayConfig: i = {},
+  queryObject: v,
+  height: s = "100%",
+  colorPalette: o
+}) {
+  const [u, f] = O(32), [g, N] = O(250), c = U(null), $ = U(null), F = oe();
+  if (ne(() => {
+    const e = () => {
+      if (c.current) {
+        const E = c.current.getBoundingClientRect(), j = E.width, K = E.height;
+        if (j > 0 && K > 0) {
+          const J = j / 4, Q = K / 4, X = Math.min(J, Q), Y = Math.max(28, Math.min(X, 140));
+          f(Y), setTimeout(() => {
+            if ($.current) {
+              const Z = $.current.getBoundingClientRect().width, ee = j - 100, te = Math.max(
+                Z,
+                Math.min(ee, j * 0.7)
+              );
+              N(Math.max(100, te));
+            }
+          }, 10);
+        }
+      }
+    }, x = setTimeout(e, 50), b = new ResizeObserver(() => {
+      setTimeout(e, 10);
+    });
+    return c.current && b.observe(c.current), () => {
+      clearTimeout(x), b.disconnect();
+    };
+  }, [p, r]), !p || p.length === 0)
+    return /* @__PURE__ */ t(
+      "div",
+      {
+        className: "flex items-center justify-center w-full h-full",
+        style: {
+          height: s === "100%" ? "100%" : s,
+          minHeight: s === "100%" ? "200px" : void 0
+        },
+        children: /* @__PURE__ */ n("div", { className: "text-center text-dc-text-muted", children: [
+          /* @__PURE__ */ t("div", { className: "text-sm font-semibold mb-1", children: "No data available" }),
+          /* @__PURE__ */ t("div", { className: "text-xs text-dc-text-secondary", children: "No data points to display" })
+        ] })
+      }
+    );
+  let M = [], z = [];
+  if (r?.yAxis && (M = Array.isArray(r.yAxis) ? r.yAxis : [r.yAxis]), r?.xAxis && (z = Array.isArray(r.xAxis) ? r.xAxis : [r.xAxis]), M.length === 0)
+    return /* @__PURE__ */ t(
+      "div",
+      {
+        className: "flex items-center justify-center w-full h-full",
+        style: {
+          height: s === "100%" ? "100%" : s,
+          minHeight: s === "100%" ? "200px" : void 0,
+          backgroundColor: "var(--dc-danger-bg)",
+          color: "var(--dc-danger)",
+          borderColor: "var(--dc-danger-border)"
+        },
+        children: /* @__PURE__ */ n("div", { className: "text-center", children: [
+          /* @__PURE__ */ t("div", { className: "text-sm font-semibold mb-1", children: "Configuration Error" }),
+          /* @__PURE__ */ t("div", { className: "text-xs", children: "No measure field configured" })
+        ] })
+      }
+    );
+  const h = M[0], d = z[0];
+  let a = [...p];
+  d && (a = a.sort((e, x) => {
+    const b = e[d], l = x[d];
+    return b < l ? -1 : b > l ? 1 : 0;
+  }));
+  const { useLastCompletePeriod: y = !0, skipLastPeriod: V = !1 } = i, {
+    filteredData: R,
+    excludedIncompletePeriod: I,
+    skippedLastPeriod: S,
+    granularity: A
+  } = ce(
+    a,
+    d,
+    v,
+    y,
+    V
+  ), m = R.map((e) => e[h]).filter((e) => e != null && !isNaN(Number(e))).map((e) => Number(e));
+  if (m.length < 2)
+    return /* @__PURE__ */ t(
+      "div",
+      {
+        className: "flex items-center justify-center w-full h-full",
+        style: {
+          height: s === "100%" ? "100%" : s,
+          minHeight: s === "100%" ? "200px" : void 0,
+          backgroundColor: "var(--dc-warning-bg)",
+          color: "var(--dc-warning)",
+          borderColor: "var(--dc-warning-border)"
+        },
+        children: /* @__PURE__ */ n("div", { className: "text-center", children: [
+          /* @__PURE__ */ t("div", { className: "text-sm font-semibold mb-1", children: "Insufficient Data" }),
+          /* @__PURE__ */ t("div", { className: "text-xs", children: "Delta calculation requires at least 2 data points" }),
+          /* @__PURE__ */ n("div", { className: "text-xs", children: [
+            "Current data points: ",
+            m.length
+          ] })
+        ] })
+      }
+    );
+  const L = m[m.length - 1], W = m[m.length - 2], D = L - W, _ = W !== 0 ? D / Math.abs(W) * 100 : 0, H = D >= 0, T = (e) => {
+    if (i.formatValue)
+      return i.formatValue(e);
+    if (e == null)
+      return "—";
+    const x = i.decimals ?? 0, b = i.prefix ?? "";
+    let l;
+    return Math.abs(e) >= 1e9 ? l = (e / 1e9).toFixed(x) + "B" : Math.abs(e) >= 1e6 ? l = (e / 1e6).toFixed(x) + "M" : Math.abs(e) >= 1e3 ? l = (e / 1e3).toFixed(x) + "K" : l = e.toFixed(x), b + l;
+  }, q = () => {
+    if (i.positiveColorIndex !== void 0 && o?.colors) {
+      const e = i.positiveColorIndex;
+      if (e >= 0 && e < o.colors.length)
+        return o.colors[e];
+    }
+    return "#10b981";
+  }, G = () => {
+    if (i.negativeColorIndex !== void 0 && o?.colors) {
+      const e = i.negativeColorIndex;
+      if (e >= 0 && e < o.colors.length)
+        return o.colors[e];
+    }
+    return "#ef4444";
+  }, P = q(), C = G(), k = H ? P : C;
+  return /* @__PURE__ */ n(
+    "div",
+    {
+      ref: c,
+      className: "flex flex-col items-center justify-center w-full h-full p-4",
+      style: {
+        height: s === "100%" ? "100%" : s,
+        minHeight: s === "100%" ? "200px" : void 0
+      },
+      children: [
+        /* @__PURE__ */ n(
+          "div",
+          {
+            className: "text-dc-text-secondary font-bold text-center mb-2 flex items-center justify-center gap-1",
+            style: {
+              fontSize: "14px",
+              lineHeight: "1.2"
+            },
+            children: [
+              /* @__PURE__ */ t("span", { children: (() => {
+                const e = F(h);
+                return e && e.length > 1 ? e : h;
+              })() }),
+              (I || S) && /* @__PURE__ */ t(
+                "span",
+                {
+                  title: S ? `Excludes last ${A || "period"}` : `Excludes current incomplete ${A}`,
+                  className: "cursor-help",
+                  children: /* @__PURE__ */ t(
+                    ie,
+                    {
+                      icon: re,
+                      className: "w-4 h-4 text-dc-text-muted opacity-70"
+                    }
+                  )
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ n("div", { className: "flex items-center justify-center space-x-4 mb-2", children: [
+          /* @__PURE__ */ t(
+            "div",
+            {
+              ref: $,
+              className: "font-bold leading-none",
+              style: {
+                fontSize: `${u}px`,
+                color: "var(--dc-text)"
+                // Keep main value neutral
+              },
+              children: T(L)
+            }
+          ),
+          /* @__PURE__ */ n("div", { className: "flex items-center space-x-1", children: [
+            /* @__PURE__ */ t(
+              "div",
+              {
+                className: "font-bold",
+                style: {
+                  color: k,
+                  fontSize: `${u * 0.35}px`
+                },
+                children: H ? "▲" : "▼"
+              }
+            ),
+            /* @__PURE__ */ n("div", { className: "text-left", children: [
+              /* @__PURE__ */ n(
+                "div",
+                {
+                  className: "font-bold leading-tight",
+                  style: {
+                    fontSize: `${u * 0.35}px`,
+                    color: k
+                  },
+                  children: [
+                    H ? "+" : "",
+                    T(D)
+                  ]
+                }
+              ),
+              /* @__PURE__ */ n(
+                "div",
+                {
+                  className: "font-semibold leading-tight",
+                  style: {
+                    fontSize: `${u * 0.28}px`,
+                    color: k,
+                    opacity: 0.8
+                  },
+                  children: [
+                    H ? "+" : "",
+                    _.toFixed(1),
+                    "%"
+                  ]
+                }
+              )
+            ] })
+          ] })
+        ] }),
+        i.suffix && !i.formatValue && /* @__PURE__ */ t(
+          "div",
+          {
+            className: "text-dc-text-muted text-center mb-3",
+            style: {
+              fontSize: "14px",
+              lineHeight: "1.2",
+              opacity: 0.8
+            },
+            children: i.suffix
+          }
+        ),
+        i.showHistogram !== !1 && m.length > 2 && /* @__PURE__ */ t("div", { className: "mt-2 w-full flex justify-center overflow-hidden", children: /* @__PURE__ */ t(
+          ae,
+          {
+            values: m,
+            lastValue: L,
+            positiveColor: P,
+            negativeColor: C,
+            formatValue: T,
+            width: g,
+            height: 64
+          }
+        ) })
+      ]
+    }
+  );
+});
+export {
+  he as default
+};
+//# sourceMappingURL=chart-kpi-delta-sfZEvQZm.js.map