npm - drizzle-cube - Versions diffs - 0.4.40 → 0.4.42 - Mend

drizzle-cube 0.4.40 → 0.4.42

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (166) hide show

package/dist/client/chunks/{chart-radar-Dz9F5k-B.js.map → chart-radar-BKZXylBB.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"chart-radar-Dz9F5k-B.js","names":[],"sources":["../../../src/client/components/charts/RadarChart.tsx"],"sourcesContent":["import React, { useState } from 'react'\nimport { RadarChart as RechartsRadarChart, PolarGrid, PolarAngleAxis, PolarRadiusAxis, Radar, Legend } from 'recharts'\nimport ChartContainer from './ChartContainer'\nimport ChartTooltip from './ChartTooltip'\nimport { CHART_COLORS } from '../../utils/chartConstants'\nimport { transformChartDataWithSeries, formatTimeValue, getFieldGranularity, formatAxisValue } from '../../utils/chartUtils'\nimport type { ChartProps } from '../../types'\n\nconst RadarChart = React.memo(function RadarChart({ \n data, \n chartConfig,\n displayConfig = {},\n queryObject,\n height = \"100%\",\n colorPalette\n}: ChartProps) {\n const [hoveredLegend, setHoveredLegend] = useState<string \| null>(null)\n \n try {\n const safeDisplayConfig = {\n showLegend: displayConfig?.showLegend ?? true,\n showTooltip: displayConfig?.showTooltip ?? true,\n showGrid: displayConfig?.showGrid ?? true,\n leftYAxisFormat: displayConfig?.leftYAxisFormat\n }\n\n if (!data \|\| data.length === 0) {\n return (\n <div className=\"dc:flex dc:items-center dc:justify-center dc:w-full text-dc-text-muted\" style={{ height }}>\n <div className=\"dc:text-center\">\n <div className=\"dc:text-sm dc:font-semibold dc:mb-1\">No data available</div>\n <div className=\"dc:text-xs text-dc-text-secondary\">No data points to display in radar chart</div>\n </div>\n </div>\n )\n }\n\n let radarData: any[]\n let seriesKeys: string[] = []\n\n if (chartConfig?.xAxis && chartConfig?.yAxis) {\n // New format - use chart config\n const xAxisField = Array.isArray(chartConfig.xAxis) ? chartConfig.xAxis[0] : chartConfig.xAxis // Subject/category field\n const yAxisFields = Array.isArray(chartConfig.yAxis) ? chartConfig.yAxis : [chartConfig.yAxis] // Value fields\n const seriesFields = chartConfig.series \|\| []\n\n // Use shared function to transform data and handle series\n const { data: chartData, seriesKeys: transformedSeriesKeys } = transformChartDataWithSeries(\n data, \n xAxisField, \n yAxisFields, \n queryObject,\n seriesFields\n )\n \n radarData = chartData\n seriesKeys = transformedSeriesKeys\n } else {\n // Legacy format or auto-detection - try to find suitable fields\n const firstRow = data[0]\n const keys = Object.keys(firstRow)\n \n // Try to find subject/category field\n const subjectField = keys.find(key => \n typeof firstRow[key] === 'string' \|\|\n key.toLowerCase().includes('subject') \|\|\n key.toLowerCase().includes('name') \|\|\n key.toLowerCase().includes('category')\n ) \|\| keys[0]\n\n // Find numeric fields for values\n const valueFields = keys.filter(key => \n typeof firstRow[key] === 'number' && key !== subjectField\n )\n\n if (valueFields.length === 0) {\n return (\n <div className=\"dc:flex dc:items-center dc:justify-center dc:w-full text-dc-warning\" style={{ height }}>\n <div className=\"dc:text-center\">\n <div className=\"dc:text-sm dc:font-semibold dc:mb-1\">Configuration Error</div>\n <div className=\"dc:text-xs\">No numeric fields found for radar chart values</div>\n </div>\n </div>\n )\n }\n\n // Transform data for radar chart\n if (subjectField) {\n // Use subject field for radar categories\n const granularity = getFieldGranularity(queryObject, subjectField)\n radarData = data.map(item => {\n const transformedItem: any = {\n name: formatTimeValue(item[subjectField], granularity) \|\| String(item[subjectField]) \|\| 'Unknown'\n }\n \n valueFields.forEach(field => {\n const displayName = field.split('.').pop() \|\| field\n transformedItem[displayName] = typeof item[field] === 'string' \n ? parseFloat(item[field]) \n : (item[field] \|\| 0)\n })\n \n return transformedItem\n })\n \n seriesKeys = valueFields.map(field => field.split('.').pop() \|\| field)\n } else {\n // Fallback - use first value field only\n radarData = data.map(item => ({\n name: String(item[keys[0]] \|\| 'Unknown'),\n value: typeof item[valueFields[0]] === 'string' \n ? parseFloat(item[valueFields[0]]) \n : (item[valueFields[0]] \|\| 0)\n }))\n seriesKeys = ['value']\n }\n }\n \n // Validate transformed data\n if (!radarData \|\| radarData.length === 0) {\n return (\n <div className=\"dc:flex dc:items-center dc:justify-center dc:w-full text-dc-text-muted\" style={{ height }}>\n <div className=\"dc:text-center\">\n <div className=\"dc:text-sm dc:font-semibold dc:mb-1\">No valid data</div>\n <div className=\"dc:text-xs text-dc-text-secondary\">No valid data points for radar chart after transformation</div>\n </div>\n </div>\n )\n }\n\n return (\n <ChartContainer height={height}>\n <RechartsRadarChart data={radarData} margin={{ top: 20, right: 80, bottom: 20, left: 80 }} accessibilityLayer={false}>\n {safeDisplayConfig.showGrid && (\n <PolarGrid />\n )}\n <PolarAngleAxis\n dataKey=\"name\"\n tick={{ fontSize: 12 }}\n className=\"text-dc-text-muted\"\n />\n <PolarRadiusAxis\n tick={{ fontSize: 10 }}\n className=\"text-dc-text-muted\"\n tickFormatter={safeDisplayConfig.leftYAxisFormat\n ? (value: any) => formatAxisValue(value, safeDisplayConfig.leftYAxisFormat)\n : undefined\n }\n />\n {safeDisplayConfig.showTooltip && (\n <ChartTooltip\n formatter={safeDisplayConfig.leftYAxisFormat\n ? (value: any, name: string) => [formatAxisValue(value, safeDisplayConfig.leftYAxisFormat), name]\n : undefined\n }\n />\n )}\n {(safeDisplayConfig.showLegend && seriesKeys.length > 1) && (\n <Legend \n wrapperStyle={{ fontSize: '12px', paddingTop: '10px' }}\n iconType=\"rect\"\n iconSize={8}\n layout=\"horizontal\"\n align=\"center\"\n verticalAlign=\"bottom\"\n onMouseEnter={(o) => setHoveredLegend(String(o.dataKey \|\| ''))}\n onMouseLeave={() => setHoveredLegend(null)}\n />\n )}\n {seriesKeys.map((seriesKey, index) => (\n <Radar\n key={seriesKey}\n name={seriesKey}\n dataKey={seriesKey}\n stroke={(colorPalette?.colors && colorPalette.colors[index % colorPalette.colors.length]) \|\| CHART_COLORS[index % CHART_COLORS.length]}\n fill={(colorPalette?.colors && colorPalette.colors[index % colorPalette.colors.length]) \|\| CHART_COLORS[index % CHART_COLORS.length]}\n fillOpacity={hoveredLegend ? (hoveredLegend === seriesKey ? 0.6 : 0.1) : 0.3}\n strokeOpacity={hoveredLegend ? (hoveredLegend === seriesKey ? 1 : 0.3) : 1}\n strokeWidth={2}\n />\n ))}\n </RechartsRadarChart>\n </ChartContainer>\n )\n } catch (error) {\n // 'RadarChart rendering error\n return (\n <div className=\"dc:flex dc:flex-col dc:items-center dc:justify-center dc:w-full text-dc-error dc:p-4\" style={{ height }}>\n <div className=\"dc:text-center\">\n <div className=\"dc:text-sm dc:font-semibold dc:mb-1\">Radar Chart Error</div>\n <div className=\"dc:text-xs dc:mb-2\">{error instanceof Error ? error.message : 'Unknown rendering error'}</div>\n <div className=\"dc:text-xs text-dc-text-muted\">Check the data and configuration</div>\n </div>\n </div>\n )\n }\n})\n\nexport default RadarChart"],"mappings":"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"}
1	+ {"version":3,"file":"chart-radar-BKZXylBB.js","names":[],"sources":["../../../src/client/components/charts/RadarChart.tsx"],"sourcesContent":["import React, { useState } from 'react'\nimport { RadarChart as RechartsRadarChart, PolarGrid, PolarAngleAxis, PolarRadiusAxis, Radar, Legend } from 'recharts'\nimport ChartContainer from './ChartContainer'\nimport ChartTooltip from './ChartTooltip'\nimport { CHART_COLORS } from '../../utils/chartConstants'\nimport { transformChartDataWithSeries, formatTimeValue, getFieldGranularity, formatAxisValue } from '../../utils/chartUtils'\nimport type { ChartProps } from '../../types'\n\nconst RadarChart = React.memo(function RadarChart({ \n data, \n chartConfig,\n displayConfig = {},\n queryObject,\n height = \"100%\",\n colorPalette\n}: ChartProps) {\n const [hoveredLegend, setHoveredLegend] = useState<string \| null>(null)\n \n try {\n const safeDisplayConfig = {\n showLegend: displayConfig?.showLegend ?? true,\n showTooltip: displayConfig?.showTooltip ?? true,\n showGrid: displayConfig?.showGrid ?? true,\n leftYAxisFormat: displayConfig?.leftYAxisFormat\n }\n\n if (!data \|\| data.length === 0) {\n return (\n <div className=\"dc:flex dc:items-center dc:justify-center dc:w-full text-dc-text-muted\" style={{ height }}>\n <div className=\"dc:text-center\">\n <div className=\"dc:text-sm dc:font-semibold dc:mb-1\">No data available</div>\n <div className=\"dc:text-xs text-dc-text-secondary\">No data points to display in radar chart</div>\n </div>\n </div>\n )\n }\n\n let radarData: any[]\n let seriesKeys: string[] = []\n\n if (chartConfig?.xAxis && chartConfig?.yAxis) {\n // New format - use chart config\n const xAxisField = Array.isArray(chartConfig.xAxis) ? chartConfig.xAxis[0] : chartConfig.xAxis // Subject/category field\n const yAxisFields = Array.isArray(chartConfig.yAxis) ? chartConfig.yAxis : [chartConfig.yAxis] // Value fields\n const seriesFields = chartConfig.series \|\| []\n\n // Use shared function to transform data and handle series\n const { data: chartData, seriesKeys: transformedSeriesKeys } = transformChartDataWithSeries(\n data, \n xAxisField, \n yAxisFields, \n queryObject,\n seriesFields\n )\n \n radarData = chartData\n seriesKeys = transformedSeriesKeys\n } else {\n // Legacy format or auto-detection - try to find suitable fields\n const firstRow = data[0]\n const keys = Object.keys(firstRow)\n \n // Try to find subject/category field\n const subjectField = keys.find(key => \n typeof firstRow[key] === 'string' \|\|\n key.toLowerCase().includes('subject') \|\|\n key.toLowerCase().includes('name') \|\|\n key.toLowerCase().includes('category')\n ) \|\| keys[0]\n\n // Find numeric fields for values\n const valueFields = keys.filter(key => \n typeof firstRow[key] === 'number' && key !== subjectField\n )\n\n if (valueFields.length === 0) {\n return (\n <div className=\"dc:flex dc:items-center dc:justify-center dc:w-full text-dc-warning\" style={{ height }}>\n <div className=\"dc:text-center\">\n <div className=\"dc:text-sm dc:font-semibold dc:mb-1\">Configuration Error</div>\n <div className=\"dc:text-xs\">No numeric fields found for radar chart values</div>\n </div>\n </div>\n )\n }\n\n // Transform data for radar chart\n if (subjectField) {\n // Use subject field for radar categories\n const granularity = getFieldGranularity(queryObject, subjectField)\n radarData = data.map(item => {\n const transformedItem: any = {\n name: formatTimeValue(item[subjectField], granularity) \|\| String(item[subjectField]) \|\| 'Unknown'\n }\n \n valueFields.forEach(field => {\n const displayName = field.split('.').pop() \|\| field\n transformedItem[displayName] = typeof item[field] === 'string' \n ? parseFloat(item[field]) \n : (item[field] \|\| 0)\n })\n \n return transformedItem\n })\n \n seriesKeys = valueFields.map(field => field.split('.').pop() \|\| field)\n } else {\n // Fallback - use first value field only\n radarData = data.map(item => ({\n name: String(item[keys[0]] \|\| 'Unknown'),\n value: typeof item[valueFields[0]] === 'string' \n ? parseFloat(item[valueFields[0]]) \n : (item[valueFields[0]] \|\| 0)\n }))\n seriesKeys = ['value']\n }\n }\n \n // Validate transformed data\n if (!radarData \|\| radarData.length === 0) {\n return (\n <div className=\"dc:flex dc:items-center dc:justify-center dc:w-full text-dc-text-muted\" style={{ height }}>\n <div className=\"dc:text-center\">\n <div className=\"dc:text-sm dc:font-semibold dc:mb-1\">No valid data</div>\n <div className=\"dc:text-xs text-dc-text-secondary\">No valid data points for radar chart after transformation</div>\n </div>\n </div>\n )\n }\n\n return (\n <ChartContainer height={height}>\n <RechartsRadarChart data={radarData} margin={{ top: 20, right: 80, bottom: 20, left: 80 }} accessibilityLayer={false}>\n {safeDisplayConfig.showGrid && (\n <PolarGrid />\n )}\n <PolarAngleAxis\n dataKey=\"name\"\n tick={{ fontSize: 12 }}\n className=\"text-dc-text-muted\"\n />\n <PolarRadiusAxis\n tick={{ fontSize: 10 }}\n className=\"text-dc-text-muted\"\n tickFormatter={safeDisplayConfig.leftYAxisFormat\n ? (value: any) => formatAxisValue(value, safeDisplayConfig.leftYAxisFormat)\n : undefined\n }\n />\n {safeDisplayConfig.showTooltip && (\n <ChartTooltip\n formatter={safeDisplayConfig.leftYAxisFormat\n ? (value: any, name: string) => [formatAxisValue(value, safeDisplayConfig.leftYAxisFormat), name]\n : undefined\n }\n />\n )}\n {(safeDisplayConfig.showLegend && seriesKeys.length > 1) && (\n <Legend \n wrapperStyle={{ fontSize: '12px', paddingTop: '10px' }}\n iconType=\"rect\"\n iconSize={8}\n layout=\"horizontal\"\n align=\"center\"\n verticalAlign=\"bottom\"\n onMouseEnter={(o) => setHoveredLegend(String(o.dataKey \|\| ''))}\n onMouseLeave={() => setHoveredLegend(null)}\n />\n )}\n {seriesKeys.map((seriesKey, index) => (\n <Radar\n key={seriesKey}\n name={seriesKey}\n dataKey={seriesKey}\n stroke={(colorPalette?.colors && colorPalette.colors[index % colorPalette.colors.length]) \|\| CHART_COLORS[index % CHART_COLORS.length]}\n fill={(colorPalette?.colors && colorPalette.colors[index % colorPalette.colors.length]) \|\| CHART_COLORS[index % CHART_COLORS.length]}\n fillOpacity={hoveredLegend ? (hoveredLegend === seriesKey ? 0.6 : 0.1) : 0.3}\n strokeOpacity={hoveredLegend ? (hoveredLegend === seriesKey ? 1 : 0.3) : 1}\n strokeWidth={2}\n />\n ))}\n </RechartsRadarChart>\n </ChartContainer>\n )\n } catch (error) {\n // 'RadarChart rendering error\n return (\n <div className=\"dc:flex dc:flex-col dc:items-center dc:justify-center dc:w-full text-dc-error dc:p-4\" style={{ height }}>\n <div className=\"dc:text-center\">\n <div className=\"dc:text-sm dc:font-semibold dc:mb-1\">Radar Chart Error</div>\n <div className=\"dc:text-xs dc:mb-2\">{error instanceof Error ? error.message : 'Unknown rendering error'}</div>\n <div className=\"dc:text-xs text-dc-text-muted\">Check the data and configuration</div>\n </div>\n </div>\n )\n }\n})\n\nexport default RadarChart"],"mappings":"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"}

package/dist/client/chunks/{chart-radial-bar-N3MNUL7o.js → chart-radial-bar-CMfC7SPd.js} RENAMED Viewed

@@ -145,4 +145,4 @@ var h = /* @__PURE__ */ e({ default: () => g }), g = s.memo(function({ data: e,
 //#endregion
 export { h as n, g as t };
-//# sourceMappingURL=chart-radial-bar-N3MNUL7o.js.map
+//# sourceMappingURL=chart-radial-bar-CMfC7SPd.js.map

package/dist/client/chunks/{chart-radial-bar-N3MNUL7o.js.map → chart-radial-bar-CMfC7SPd.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"chart-radial-bar-N3MNUL7o.js","names":[],"sources":["../../../src/client/components/charts/RadialBarChart.tsx"],"sourcesContent":["import React, { useState } from 'react'\nimport { RadialBarChart as RechartsRadialBarChart, RadialBar, Legend, Cell } from 'recharts'\nimport ChartContainer from './ChartContainer'\nimport ChartTooltip from './ChartTooltip'\nimport { CHART_COLORS } from '../../utils/chartConstants'\nimport { formatTimeValue, getFieldGranularity, formatAxisValue } from '../../utils/chartUtils'\nimport type { ChartProps } from '../../types'\n\nconst RadialBarChart = React.memo(function RadialBarChart({ \n data, \n chartConfig,\n displayConfig = {},\n queryObject,\n height = \"100%\",\n colorPalette\n}: ChartProps) {\n const [hoveredLegend, setHoveredLegend] = useState<string \| null>(null)\n \n try {\n const safeDisplayConfig = {\n showLegend: displayConfig?.showLegend ?? true,\n showTooltip: displayConfig?.showTooltip ?? true,\n leftYAxisFormat: displayConfig?.leftYAxisFormat\n }\n\n if (!data \|\| data.length === 0) {\n return (\n <div className=\"dc:flex dc:items-center dc:justify-center dc:w-full text-dc-text-muted\" style={{ height }}>\n <div className=\"dc:text-center\">\n <div className=\"dc:text-sm dc:font-semibold dc:mb-1\">No data available</div>\n <div className=\"dc:text-xs text-dc-text-secondary\">No data points to display in radial bar chart</div>\n </div>\n </div>\n )\n }\n\n let radialData: Array<{name: string, value: number, fill?: string}>\n\n if (chartConfig?.xAxis && chartConfig?.yAxis) {\n // New format - use chart config\n const xAxisField = Array.isArray(chartConfig.xAxis) ? chartConfig.xAxis[0] : chartConfig.xAxis // Name/category field\n const yAxisField = Array.isArray(chartConfig.yAxis) ? chartConfig.yAxis[0] : chartConfig.yAxis // Value field\n\n const granularity = getFieldGranularity(queryObject, xAxisField)\n radialData = data.map((item, index) => ({\n name: formatTimeValue(item[xAxisField], granularity) \|\| String(item[xAxisField]) \|\| 'Unknown',\n value: typeof item[yAxisField] === 'string' \n ? parseFloat(item[yAxisField]) \n : (item[yAxisField] \|\| 0),\n fill: (colorPalette?.colors && colorPalette.colors[index % colorPalette.colors.length]) \|\| CHART_COLORS[index % CHART_COLORS.length]\n }))\n } else {\n // Legacy format or auto-detection\n const firstRow = data[0]\n const keys = Object.keys(firstRow)\n \n // Try to find name/label field\n const nameField = keys.find(key => \n typeof firstRow[key] === 'string' \|\|\n key.toLowerCase().includes('name') \|\|\n key.toLowerCase().includes('label') \|\|\n key.toLowerCase().includes('category')\n ) \|\| keys[0]\n\n // Find a numeric field for values\n const valueField = keys.find(key => \n typeof firstRow[key] === 'number' && key !== nameField\n ) \|\| keys[1]\n\n if (!valueField) {\n return (\n <div className=\"dc:flex dc:items-center dc:justify-center dc:w-full text-dc-warning\" style={{ height }}>\n <div className=\"dc:text-center\">\n <div className=\"dc:text-sm dc:font-semibold dc:mb-1\">Configuration Error</div>\n <div className=\"dc:text-xs\">No numeric field found for radial bar chart values</div>\n </div>\n </div>\n )\n }\n\n // Transform data for radial bar chart\n radialData = data.map((item, index) => {\n let name = item[nameField]\n // Handle boolean values with better labels\n if (typeof name === 'boolean') {\n name = name ? 'Active' : 'Inactive'\n } else if (name === 'true' \|\| name === 'false') {\n name = name === 'true' ? 'Active' : 'Inactive'\n } else {\n name = String(name)\n }\n return {\n name,\n value: typeof item[valueField] === 'string' \n ? parseFloat(item[valueField]) \n : (item[valueField] \|\| 0),\n fill: (colorPalette?.colors && colorPalette.colors[index % colorPalette.colors.length]) \|\| CHART_COLORS[index % CHART_COLORS.length]\n }\n })\n }\n\n // Filter out zero/null values\n radialData = radialData.filter(item => item.value != null && item.value !== 0)\n \n if (radialData.length === 0) {\n return (\n <div className=\"dc:flex dc:items-center dc:justify-center dc:w-full text-dc-text-muted\" style={{ height }}>\n <div className=\"dc:text-center\">\n <div className=\"dc:text-sm dc:font-semibold dc:mb-1\">No valid data</div>\n <div className=\"dc:text-xs text-dc-text-secondary\">No valid data points for radial bar chart after transformation</div>\n </div>\n </div>\n )\n }\n\n return (\n <ChartContainer height={height}>\n <RechartsRadialBarChart\n data={radialData}\n innerRadius=\"10%\"\n outerRadius=\"80%\"\n margin={{ top: 20, right: 30, bottom: 20, left: 30 }}\n accessibilityLayer={false}\n >\n {safeDisplayConfig.showTooltip && (\n <ChartTooltip\n formatter={safeDisplayConfig.leftYAxisFormat\n ? (value: any, name: string) => [formatAxisValue(value, safeDisplayConfig.leftYAxisFormat), name]\n : undefined\n }\n />\n )}\n {safeDisplayConfig.showLegend && (\n <Legend \n wrapperStyle={{ fontSize: '12px', paddingTop: '10px' }}\n iconType=\"circle\"\n iconSize={8}\n layout=\"horizontal\"\n align=\"center\"\n verticalAlign=\"bottom\"\n onMouseEnter={(o) => setHoveredLegend(String(o.value \|\| ''))}\n onMouseLeave={() => setHoveredLegend(null)}\n />\n )}\n <RadialBar\n dataKey=\"value\"\n cornerRadius={4}\n label={{\n position: 'insideStart',\n fill: '#fff',\n fontSize: 12,\n formatter: safeDisplayConfig.leftYAxisFormat\n ? (value: any) => formatAxisValue(value, safeDisplayConfig.leftYAxisFormat)\n : undefined\n }}\n >\n {radialData.map((entry, index) => (\n <Cell \n key={`cell-${index}`} \n fill={entry.fill}\n fillOpacity={hoveredLegend ? (hoveredLegend === entry.name ? 1 : 0.3) : 1}\n />\n ))}\n </RadialBar>\n </RechartsRadialBarChart>\n </ChartContainer>\n )\n } catch (error) {\n // 'RadialBarChart rendering error\n return (\n <div className=\"dc:flex dc:flex-col dc:items-center dc:justify-center dc:w-full text-dc-error dc:p-4\" style={{ height }}>\n <div className=\"dc:text-center\">\n <div className=\"dc:text-sm dc:font-semibold dc:mb-1\">Radial Bar Chart Error</div>\n <div className=\"dc:text-xs dc:mb-2\">{error instanceof Error ? error.message : 'Unknown rendering error'}</div>\n <div className=\"dc:text-xs text-dc-text-muted\">Check the data and configuration</div>\n </div>\n </div>\n )\n }\n})\n\nexport default RadialBarChart"],"mappings":"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"}
1	+ {"version":3,"file":"chart-radial-bar-CMfC7SPd.js","names":[],"sources":["../../../src/client/components/charts/RadialBarChart.tsx"],"sourcesContent":["import React, { useState } from 'react'\nimport { RadialBarChart as RechartsRadialBarChart, RadialBar, Legend, Cell } from 'recharts'\nimport ChartContainer from './ChartContainer'\nimport ChartTooltip from './ChartTooltip'\nimport { CHART_COLORS } from '../../utils/chartConstants'\nimport { formatTimeValue, getFieldGranularity, formatAxisValue } from '../../utils/chartUtils'\nimport type { ChartProps } from '../../types'\n\nconst RadialBarChart = React.memo(function RadialBarChart({ \n data, \n chartConfig,\n displayConfig = {},\n queryObject,\n height = \"100%\",\n colorPalette\n}: ChartProps) {\n const [hoveredLegend, setHoveredLegend] = useState<string \| null>(null)\n \n try {\n const safeDisplayConfig = {\n showLegend: displayConfig?.showLegend ?? true,\n showTooltip: displayConfig?.showTooltip ?? true,\n leftYAxisFormat: displayConfig?.leftYAxisFormat\n }\n\n if (!data \|\| data.length === 0) {\n return (\n <div className=\"dc:flex dc:items-center dc:justify-center dc:w-full text-dc-text-muted\" style={{ height }}>\n <div className=\"dc:text-center\">\n <div className=\"dc:text-sm dc:font-semibold dc:mb-1\">No data available</div>\n <div className=\"dc:text-xs text-dc-text-secondary\">No data points to display in radial bar chart</div>\n </div>\n </div>\n )\n }\n\n let radialData: Array<{name: string, value: number, fill?: string}>\n\n if (chartConfig?.xAxis && chartConfig?.yAxis) {\n // New format - use chart config\n const xAxisField = Array.isArray(chartConfig.xAxis) ? chartConfig.xAxis[0] : chartConfig.xAxis // Name/category field\n const yAxisField = Array.isArray(chartConfig.yAxis) ? chartConfig.yAxis[0] : chartConfig.yAxis // Value field\n\n const granularity = getFieldGranularity(queryObject, xAxisField)\n radialData = data.map((item, index) => ({\n name: formatTimeValue(item[xAxisField], granularity) \|\| String(item[xAxisField]) \|\| 'Unknown',\n value: typeof item[yAxisField] === 'string' \n ? parseFloat(item[yAxisField]) \n : (item[yAxisField] \|\| 0),\n fill: (colorPalette?.colors && colorPalette.colors[index % colorPalette.colors.length]) \|\| CHART_COLORS[index % CHART_COLORS.length]\n }))\n } else {\n // Legacy format or auto-detection\n const firstRow = data[0]\n const keys = Object.keys(firstRow)\n \n // Try to find name/label field\n const nameField = keys.find(key => \n typeof firstRow[key] === 'string' \|\|\n key.toLowerCase().includes('name') \|\|\n key.toLowerCase().includes('label') \|\|\n key.toLowerCase().includes('category')\n ) \|\| keys[0]\n\n // Find a numeric field for values\n const valueField = keys.find(key => \n typeof firstRow[key] === 'number' && key !== nameField\n ) \|\| keys[1]\n\n if (!valueField) {\n return (\n <div className=\"dc:flex dc:items-center dc:justify-center dc:w-full text-dc-warning\" style={{ height }}>\n <div className=\"dc:text-center\">\n <div className=\"dc:text-sm dc:font-semibold dc:mb-1\">Configuration Error</div>\n <div className=\"dc:text-xs\">No numeric field found for radial bar chart values</div>\n </div>\n </div>\n )\n }\n\n // Transform data for radial bar chart\n radialData = data.map((item, index) => {\n let name = item[nameField]\n // Handle boolean values with better labels\n if (typeof name === 'boolean') {\n name = name ? 'Active' : 'Inactive'\n } else if (name === 'true' \|\| name === 'false') {\n name = name === 'true' ? 'Active' : 'Inactive'\n } else {\n name = String(name)\n }\n return {\n name,\n value: typeof item[valueField] === 'string' \n ? parseFloat(item[valueField]) \n : (item[valueField] \|\| 0),\n fill: (colorPalette?.colors && colorPalette.colors[index % colorPalette.colors.length]) \|\| CHART_COLORS[index % CHART_COLORS.length]\n }\n })\n }\n\n // Filter out zero/null values\n radialData = radialData.filter(item => item.value != null && item.value !== 0)\n \n if (radialData.length === 0) {\n return (\n <div className=\"dc:flex dc:items-center dc:justify-center dc:w-full text-dc-text-muted\" style={{ height }}>\n <div className=\"dc:text-center\">\n <div className=\"dc:text-sm dc:font-semibold dc:mb-1\">No valid data</div>\n <div className=\"dc:text-xs text-dc-text-secondary\">No valid data points for radial bar chart after transformation</div>\n </div>\n </div>\n )\n }\n\n return (\n <ChartContainer height={height}>\n <RechartsRadialBarChart\n data={radialData}\n innerRadius=\"10%\"\n outerRadius=\"80%\"\n margin={{ top: 20, right: 30, bottom: 20, left: 30 }}\n accessibilityLayer={false}\n >\n {safeDisplayConfig.showTooltip && (\n <ChartTooltip\n formatter={safeDisplayConfig.leftYAxisFormat\n ? (value: any, name: string) => [formatAxisValue(value, safeDisplayConfig.leftYAxisFormat), name]\n : undefined\n }\n />\n )}\n {safeDisplayConfig.showLegend && (\n <Legend \n wrapperStyle={{ fontSize: '12px', paddingTop: '10px' }}\n iconType=\"circle\"\n iconSize={8}\n layout=\"horizontal\"\n align=\"center\"\n verticalAlign=\"bottom\"\n onMouseEnter={(o) => setHoveredLegend(String(o.value \|\| ''))}\n onMouseLeave={() => setHoveredLegend(null)}\n />\n )}\n <RadialBar\n dataKey=\"value\"\n cornerRadius={4}\n label={{\n position: 'insideStart',\n fill: '#fff',\n fontSize: 12,\n formatter: safeDisplayConfig.leftYAxisFormat\n ? (value: any) => formatAxisValue(value, safeDisplayConfig.leftYAxisFormat)\n : undefined\n }}\n >\n {radialData.map((entry, index) => (\n <Cell \n key={`cell-${index}`} \n fill={entry.fill}\n fillOpacity={hoveredLegend ? (hoveredLegend === entry.name ? 1 : 0.3) : 1}\n />\n ))}\n </RadialBar>\n </RechartsRadialBarChart>\n </ChartContainer>\n )\n } catch (error) {\n // 'RadialBarChart rendering error\n return (\n <div className=\"dc:flex dc:flex-col dc:items-center dc:justify-center dc:w-full text-dc-error dc:p-4\" style={{ height }}>\n <div className=\"dc:text-center\">\n <div className=\"dc:text-sm dc:font-semibold dc:mb-1\">Radial Bar Chart Error</div>\n <div className=\"dc:text-xs dc:mb-2\">{error instanceof Error ? error.message : 'Unknown rendering error'}</div>\n <div className=\"dc:text-xs text-dc-text-muted\">Check the data and configuration</div>\n </div>\n </div>\n )\n }\n})\n\nexport default RadialBarChart"],"mappings":"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"}

package/dist/client/chunks/{chart-scatter-J2JNi88S.js → chart-scatter-xQMa3dUt.js} RENAMED Viewed

@@ -252,4 +252,4 @@ var x = /* @__PURE__ */ e({ default: () => S }), S = u.memo(function({ data: e,
 //#endregion
 export { x as n, S as t };
-//# sourceMappingURL=chart-scatter-J2JNi88S.js.map
+//# sourceMappingURL=chart-scatter-xQMa3dUt.js.map

package/dist/client/chunks/{chart-scatter-J2JNi88S.js.map → chart-scatter-xQMa3dUt.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"chart-scatter-J2JNi88S.js","names":[],"sources":["../../../src/client/components/charts/ScatterChart.tsx"],"sourcesContent":["import React, { useState } from 'react'\nimport { ScatterChart as RechartsScatterChart, Scatter, XAxis, YAxis, CartesianGrid, Legend, Tooltip } from 'recharts'\nimport ChartContainer from './ChartContainer'\nimport { CHART_COLORS, CHART_MARGINS } from '../../utils/chartConstants'\nimport { formatTimeValue, getFieldGranularity, parseNumericValue, isValidNumericValue, formatAxisValue } from '../../utils/chartUtils'\nimport { useCubeFieldLabel } from '../../hooks/useCubeFieldLabel'\nimport type { ChartProps } from '../../types'\n\nconst ScatterChart = React.memo(function ScatterChart({ \n data, \n chartConfig, \n displayConfig = {},\n queryObject,\n height = \"100%\",\n colorPalette\n}: ChartProps) {\n const [hoveredLegend, setHoveredLegend] = useState<string \| null>(null)\n // Use specialized hook to avoid re-renders from unrelated context changes\n const getFieldLabel = useCubeFieldLabel()\n \n try {\n const safeDisplayConfig = {\n showLegend: displayConfig?.showLegend ?? true,\n showGrid: displayConfig?.showGrid ?? true,\n showTooltip: displayConfig?.showTooltip ?? true\n }\n\n // Extract axis format configs\n // For scatter charts, xAxis uses xAxisFormat, yAxis uses leftYAxisFormat\n const xAxisFormat = displayConfig?.xAxisFormat\n const yAxisFormat = displayConfig?.leftYAxisFormat\n\n if (!data \|\| data.length === 0) {\n return (\n <div className=\"dc:flex dc:items-center dc:justify-center dc:w-full text-dc-text-muted\" style={{ height }}>\n <div className=\"dc:text-center\">\n <div className=\"dc:text-sm dc:font-semibold dc:mb-1\">No data available</div>\n <div className=\"dc:text-xs text-dc-text-secondary\">No data points to display in scatter chart</div>\n </div>\n </div>\n )\n }\n\n // Validate chartConfig - support both legacy and new formats\n let xAxisField: string\n let yAxisField: string\n let seriesFields: string[] = []\n \n if (chartConfig?.xAxis && chartConfig?.yAxis) {\n // New format - handle both string and array values\n xAxisField = Array.isArray(chartConfig.xAxis) ? chartConfig.xAxis[0] : chartConfig.xAxis\n yAxisField = Array.isArray(chartConfig.yAxis) ? chartConfig.yAxis[0] : chartConfig.yAxis\n // Normalize series to array\n const seriesConfig = chartConfig.series\n seriesFields = seriesConfig ? (Array.isArray(seriesConfig) ? seriesConfig : [seriesConfig]) : []\n } else if (chartConfig?.x && chartConfig?.y) {\n // Legacy format (adapt for scatter chart)\n xAxisField = chartConfig.x\n yAxisField = Array.isArray(chartConfig.y) ? chartConfig.y[0] : chartConfig.y\n } else {\n return (\n <div className=\"dc:flex dc:items-center dc:justify-center dc:w-full text-dc-warning\" style={{ height }}>\n <div className=\"dc:text-center\">\n <div className=\"dc:text-sm dc:font-semibold dc:mb-1\">Configuration Error</div>\n <div className=\"dc:text-xs\">Invalid or missing chart axis configuration</div>\n </div>\n </div>\n )\n }\n\n if (!xAxisField \|\| !yAxisField) {\n return (\n <div className=\"dc:flex dc:items-center dc:justify-center dc:w-full text-dc-warning\" style={{ height }}>\n <div className=\"dc:text-center\">\n <div className=\"dc:text-sm dc:font-semibold dc:mb-1\">Configuration Error</div>\n <div className=\"dc:text-xs\">Missing required X-axis or Y-axis fields</div>\n </div>\n </div>\n )\n }\n\n // Extract time dimensions from query for tooltip display\n const timeDimensions = queryObject?.timeDimensions \|\| []\n const timeDimensionFields = timeDimensions.map((td: any) => td.dimension)\n\n // Transform data for scatter plot\n // Null handling: Filter out data points where x or y coordinates are null\n let scatterData: any[]\n let seriesGroups: { [key: string]: any[] } = {}\n\n if (seriesFields.length > 0) {\n // Group data by series field\n const seriesField = seriesFields[0]\n data.forEach(item => {\n const seriesValue = String(item[seriesField] \|\| 'Default')\n if (!seriesGroups[seriesValue]) {\n seriesGroups[seriesValue] = []\n }\n\n const xGranularity = getFieldGranularity(queryObject, xAxisField)\n const xValue = formatTimeValue(item[xAxisField], xGranularity) \|\| item[xAxisField]\n const yValue = parseNumericValue(item[yAxisField])\n\n // Only add point if both x and y are valid numbers\n const xNum = typeof xValue === 'string' ? parseFloat(xValue) : xValue\n if (isValidNumericValue(xNum) && yValue !== null) {\n // Extract time dimension values for tooltip\n const timeValues: { [key: string]: string } = {}\n timeDimensionFields.forEach((field: string) => {\n if (item[field]) {\n const granularity = getFieldGranularity(queryObject, field)\n timeValues[field] = formatTimeValue(item[field], granularity)\n }\n })\n\n seriesGroups[seriesValue].push({\n x: xNum,\n y: yValue,\n name: seriesValue,\n timeValues,\n originalItem: item\n })\n }\n })\n\n // Collect all valid points from all series for validation\n // (The actual rendering uses seriesGroups with series separated)\n const seriesKeys = Object.keys(seriesGroups)\n scatterData = seriesKeys.flatMap(key => seriesGroups[key])\n } else {\n // Single series scatter plot\n const xGranularity = getFieldGranularity(queryObject, xAxisField)\n scatterData = data\n .map(item => {\n const xValue = formatTimeValue(item[xAxisField], xGranularity) \|\| item[xAxisField]\n const yValue = parseNumericValue(item[yAxisField])\n const xNum = typeof xValue === 'string' ? parseFloat(xValue) : xValue\n\n // Extract time dimension values for tooltip\n const timeValues: { [key: string]: string } = {}\n timeDimensionFields.forEach((field: string) => {\n if (item[field]) {\n const granularity = getFieldGranularity(queryObject, field)\n timeValues[field] = formatTimeValue(item[field], granularity)\n }\n })\n\n return {\n x: xNum,\n y: yValue,\n name: `Point`,\n timeValues,\n originalItem: item,\n isValid: isValidNumericValue(xNum) && yValue !== null\n }\n })\n .filter(point => point.isValid)\n }\n \n // Validate transformed data\n if (!scatterData \|\| scatterData.length === 0) {\n return (\n <div className=\"dc:flex dc:items-center dc:justify-center dc:w-full text-dc-text-muted\" style={{ height }}>\n <div className=\"dc:text-center\">\n <div className=\"dc:text-sm dc:font-semibold dc:mb-1\">No valid data</div>\n <div className=\"dc:text-xs text-dc-text-secondary\">No valid data points for scatter chart after transformation</div>\n </div>\n </div>\n )\n }\n\n const seriesKeys = Object.keys(seriesGroups)\n // Limit series to prevent performance issues with high-cardinality fields (e.g., dates)\n // If more than 20 unique series, fall back to single-series mode\n const MAX_SERIES = 20\n const hasSeries = seriesKeys.length > 1 && seriesKeys.length <= MAX_SERIES\n \n // Determine if legend will be shown\n const showLegend = safeDisplayConfig.showLegend && hasSeries\n \n // Use custom chart margins with extra left space for Y-axis label\n const chartMargins = {\n ...CHART_MARGINS,\n left: 40 // Increased from 20 to 40 for Y-axis label space\n }\n\n return (\n <ChartContainer height={height}>\n <RechartsScatterChart margin={chartMargins} accessibilityLayer={false}>\n {safeDisplayConfig.showGrid && (\n <CartesianGrid strokeDasharray=\"3 3\" />\n )}\n <XAxis\n type=\"number\"\n dataKey=\"x\"\n name={xAxisFormat?.label \|\| getFieldLabel(xAxisField)}\n tick={{ fontSize: 12 }}\n tickFormatter={xAxisFormat ? (value) => formatAxisValue(value, xAxisFormat) : undefined}\n />\n <YAxis\n type=\"number\"\n dataKey=\"y\"\n name={yAxisFormat?.label \|\| getFieldLabel(yAxisField)}\n tick={{ fontSize: 12 }}\n tickFormatter={yAxisFormat ? (value) => formatAxisValue(value, yAxisFormat) : undefined}\n label={{ value: yAxisFormat?.label \|\| getFieldLabel(yAxisField), angle: -90, position: 'left', style: { textAnchor: 'middle', fontSize: '12px' } }}\n />\n {safeDisplayConfig.showTooltip && (\n <Tooltip\n cursor={{ strokeDasharray: '3 3' }}\n content={({ active, payload }) => {\n if (!active \|\| !payload \|\| payload.length === 0) return null\n // Only show the first (active) point\n const point = payload[0]?.payload\n if (!point) return null\n\n return (\n <div style={{\n backgroundColor: 'white',\n border: '1px solid #e5e7eb',\n borderRadius: '0.5rem',\n fontSize: '0.875rem',\n color: '#1f2937',\n boxShadow: '0 4px 6px -1px rgba(0, 0, 0, 0.1)',\n padding: '8px 12px'\n }}>\n <div style={{ fontWeight: 600, marginBottom: '4px' }}>{point.name}</div>\n {/* Show time dimension values if present */}\n {point.timeValues && Object.keys(point.timeValues).length > 0 && (\n <div style={{ marginBottom: '4px', color: '#6b7280' }}>\n {Object.entries(point.timeValues).map(([field, value]) => (\n <div key={field}>{getFieldLabel(field)}: {value as string}</div>\n ))}\n </div>\n )}\n <div>{xAxisFormat?.label \|\| getFieldLabel(xAxisField)}: {formatAxisValue(point.x, xAxisFormat)}</div>\n <div>{yAxisFormat?.label \|\| getFieldLabel(yAxisField)}: {formatAxisValue(point.y, yAxisFormat)}</div>\n </div>\n )\n }}\n />\n )}\n {showLegend && (\n <Legend \n wrapperStyle={{ fontSize: '12px', paddingTop: '10px' }}\n iconType=\"circle\"\n iconSize={8}\n layout=\"horizontal\"\n align=\"center\"\n verticalAlign=\"bottom\"\n onMouseEnter={(o) => setHoveredLegend(String(o.dataKey \|\| ''))}\n onMouseLeave={() => setHoveredLegend(null)}\n />\n )}\n {hasSeries ? (\n // Multiple series\n seriesKeys.map((seriesKey, index) => (\n <Scatter\n key={seriesKey}\n name={seriesKey}\n data={seriesGroups[seriesKey]}\n fill={(colorPalette?.colors && colorPalette.colors[index % colorPalette.colors.length]) \|\| CHART_COLORS[index % CHART_COLORS.length]}\n fillOpacity={hoveredLegend ? (hoveredLegend === seriesKey ? 1 : 0.3) : 1}\n />\n ))\n ) : (\n // Single series\n <Scatter\n name=\"Data\"\n data={scatterData}\n fill={(colorPalette?.colors && colorPalette.colors[0]) \|\| CHART_COLORS[0]}\n />\n )}\n </RechartsScatterChart>\n </ChartContainer>\n )\n } catch (error) {\n // 'ScatterChart rendering error\n return (\n <div className=\"dc:flex dc:flex-col dc:items-center dc:justify-center dc:w-full text-dc-error dc:p-4\" style={{ height }}>\n <div className=\"dc:text-center\">\n <div className=\"dc:text-sm dc:font-semibold dc:mb-1\">Scatter Chart Error</div>\n <div className=\"dc:text-xs dc:mb-2\">{error instanceof Error ? error.message : 'Unknown rendering error'}</div>\n <div className=\"dc:text-xs text-dc-text-muted\">Check the data and configuration</div>\n </div>\n </div>\n )\n }\n})\n\nexport default ScatterChart"],"mappings":"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"}
1	+ {"version":3,"file":"chart-scatter-xQMa3dUt.js","names":[],"sources":["../../../src/client/components/charts/ScatterChart.tsx"],"sourcesContent":["import React, { useState } from 'react'\nimport { ScatterChart as RechartsScatterChart, Scatter, XAxis, YAxis, CartesianGrid, Legend, Tooltip } from 'recharts'\nimport ChartContainer from './ChartContainer'\nimport { CHART_COLORS, CHART_MARGINS } from '../../utils/chartConstants'\nimport { formatTimeValue, getFieldGranularity, parseNumericValue, isValidNumericValue, formatAxisValue } from '../../utils/chartUtils'\nimport { useCubeFieldLabel } from '../../hooks/useCubeFieldLabel'\nimport type { ChartProps } from '../../types'\n\nconst ScatterChart = React.memo(function ScatterChart({ \n data, \n chartConfig, \n displayConfig = {},\n queryObject,\n height = \"100%\",\n colorPalette\n}: ChartProps) {\n const [hoveredLegend, setHoveredLegend] = useState<string \| null>(null)\n // Use specialized hook to avoid re-renders from unrelated context changes\n const getFieldLabel = useCubeFieldLabel()\n \n try {\n const safeDisplayConfig = {\n showLegend: displayConfig?.showLegend ?? true,\n showGrid: displayConfig?.showGrid ?? true,\n showTooltip: displayConfig?.showTooltip ?? true\n }\n\n // Extract axis format configs\n // For scatter charts, xAxis uses xAxisFormat, yAxis uses leftYAxisFormat\n const xAxisFormat = displayConfig?.xAxisFormat\n const yAxisFormat = displayConfig?.leftYAxisFormat\n\n if (!data \|\| data.length === 0) {\n return (\n <div className=\"dc:flex dc:items-center dc:justify-center dc:w-full text-dc-text-muted\" style={{ height }}>\n <div className=\"dc:text-center\">\n <div className=\"dc:text-sm dc:font-semibold dc:mb-1\">No data available</div>\n <div className=\"dc:text-xs text-dc-text-secondary\">No data points to display in scatter chart</div>\n </div>\n </div>\n )\n }\n\n // Validate chartConfig - support both legacy and new formats\n let xAxisField: string\n let yAxisField: string\n let seriesFields: string[] = []\n \n if (chartConfig?.xAxis && chartConfig?.yAxis) {\n // New format - handle both string and array values\n xAxisField = Array.isArray(chartConfig.xAxis) ? chartConfig.xAxis[0] : chartConfig.xAxis\n yAxisField = Array.isArray(chartConfig.yAxis) ? chartConfig.yAxis[0] : chartConfig.yAxis\n // Normalize series to array\n const seriesConfig = chartConfig.series\n seriesFields = seriesConfig ? (Array.isArray(seriesConfig) ? seriesConfig : [seriesConfig]) : []\n } else if (chartConfig?.x && chartConfig?.y) {\n // Legacy format (adapt for scatter chart)\n xAxisField = chartConfig.x\n yAxisField = Array.isArray(chartConfig.y) ? chartConfig.y[0] : chartConfig.y\n } else {\n return (\n <div className=\"dc:flex dc:items-center dc:justify-center dc:w-full text-dc-warning\" style={{ height }}>\n <div className=\"dc:text-center\">\n <div className=\"dc:text-sm dc:font-semibold dc:mb-1\">Configuration Error</div>\n <div className=\"dc:text-xs\">Invalid or missing chart axis configuration</div>\n </div>\n </div>\n )\n }\n\n if (!xAxisField \|\| !yAxisField) {\n return (\n <div className=\"dc:flex dc:items-center dc:justify-center dc:w-full text-dc-warning\" style={{ height }}>\n <div className=\"dc:text-center\">\n <div className=\"dc:text-sm dc:font-semibold dc:mb-1\">Configuration Error</div>\n <div className=\"dc:text-xs\">Missing required X-axis or Y-axis fields</div>\n </div>\n </div>\n )\n }\n\n // Extract time dimensions from query for tooltip display\n const timeDimensions = queryObject?.timeDimensions \|\| []\n const timeDimensionFields = timeDimensions.map((td: any) => td.dimension)\n\n // Transform data for scatter plot\n // Null handling: Filter out data points where x or y coordinates are null\n let scatterData: any[]\n let seriesGroups: { [key: string]: any[] } = {}\n\n if (seriesFields.length > 0) {\n // Group data by series field\n const seriesField = seriesFields[0]\n data.forEach(item => {\n const seriesValue = String(item[seriesField] \|\| 'Default')\n if (!seriesGroups[seriesValue]) {\n seriesGroups[seriesValue] = []\n }\n\n const xGranularity = getFieldGranularity(queryObject, xAxisField)\n const xValue = formatTimeValue(item[xAxisField], xGranularity) \|\| item[xAxisField]\n const yValue = parseNumericValue(item[yAxisField])\n\n // Only add point if both x and y are valid numbers\n const xNum = typeof xValue === 'string' ? parseFloat(xValue) : xValue\n if (isValidNumericValue(xNum) && yValue !== null) {\n // Extract time dimension values for tooltip\n const timeValues: { [key: string]: string } = {}\n timeDimensionFields.forEach((field: string) => {\n if (item[field]) {\n const granularity = getFieldGranularity(queryObject, field)\n timeValues[field] = formatTimeValue(item[field], granularity)\n }\n })\n\n seriesGroups[seriesValue].push({\n x: xNum,\n y: yValue,\n name: seriesValue,\n timeValues,\n originalItem: item\n })\n }\n })\n\n // Collect all valid points from all series for validation\n // (The actual rendering uses seriesGroups with series separated)\n const seriesKeys = Object.keys(seriesGroups)\n scatterData = seriesKeys.flatMap(key => seriesGroups[key])\n } else {\n // Single series scatter plot\n const xGranularity = getFieldGranularity(queryObject, xAxisField)\n scatterData = data\n .map(item => {\n const xValue = formatTimeValue(item[xAxisField], xGranularity) \|\| item[xAxisField]\n const yValue = parseNumericValue(item[yAxisField])\n const xNum = typeof xValue === 'string' ? parseFloat(xValue) : xValue\n\n // Extract time dimension values for tooltip\n const timeValues: { [key: string]: string } = {}\n timeDimensionFields.forEach((field: string) => {\n if (item[field]) {\n const granularity = getFieldGranularity(queryObject, field)\n timeValues[field] = formatTimeValue(item[field], granularity)\n }\n })\n\n return {\n x: xNum,\n y: yValue,\n name: `Point`,\n timeValues,\n originalItem: item,\n isValid: isValidNumericValue(xNum) && yValue !== null\n }\n })\n .filter(point => point.isValid)\n }\n \n // Validate transformed data\n if (!scatterData \|\| scatterData.length === 0) {\n return (\n <div className=\"dc:flex dc:items-center dc:justify-center dc:w-full text-dc-text-muted\" style={{ height }}>\n <div className=\"dc:text-center\">\n <div className=\"dc:text-sm dc:font-semibold dc:mb-1\">No valid data</div>\n <div className=\"dc:text-xs text-dc-text-secondary\">No valid data points for scatter chart after transformation</div>\n </div>\n </div>\n )\n }\n\n const seriesKeys = Object.keys(seriesGroups)\n // Limit series to prevent performance issues with high-cardinality fields (e.g., dates)\n // If more than 20 unique series, fall back to single-series mode\n const MAX_SERIES = 20\n const hasSeries = seriesKeys.length > 1 && seriesKeys.length <= MAX_SERIES\n \n // Determine if legend will be shown\n const showLegend = safeDisplayConfig.showLegend && hasSeries\n \n // Use custom chart margins with extra left space for Y-axis label\n const chartMargins = {\n ...CHART_MARGINS,\n left: 40 // Increased from 20 to 40 for Y-axis label space\n }\n\n return (\n <ChartContainer height={height}>\n <RechartsScatterChart margin={chartMargins} accessibilityLayer={false}>\n {safeDisplayConfig.showGrid && (\n <CartesianGrid strokeDasharray=\"3 3\" />\n )}\n <XAxis\n type=\"number\"\n dataKey=\"x\"\n name={xAxisFormat?.label \|\| getFieldLabel(xAxisField)}\n tick={{ fontSize: 12 }}\n tickFormatter={xAxisFormat ? (value) => formatAxisValue(value, xAxisFormat) : undefined}\n />\n <YAxis\n type=\"number\"\n dataKey=\"y\"\n name={yAxisFormat?.label \|\| getFieldLabel(yAxisField)}\n tick={{ fontSize: 12 }}\n tickFormatter={yAxisFormat ? (value) => formatAxisValue(value, yAxisFormat) : undefined}\n label={{ value: yAxisFormat?.label \|\| getFieldLabel(yAxisField), angle: -90, position: 'left', style: { textAnchor: 'middle', fontSize: '12px' } }}\n />\n {safeDisplayConfig.showTooltip && (\n <Tooltip\n cursor={{ strokeDasharray: '3 3' }}\n content={({ active, payload }) => {\n if (!active \|\| !payload \|\| payload.length === 0) return null\n // Only show the first (active) point\n const point = payload[0]?.payload\n if (!point) return null\n\n return (\n <div style={{\n backgroundColor: 'white',\n border: '1px solid #e5e7eb',\n borderRadius: '0.5rem',\n fontSize: '0.875rem',\n color: '#1f2937',\n boxShadow: '0 4px 6px -1px rgba(0, 0, 0, 0.1)',\n padding: '8px 12px'\n }}>\n <div style={{ fontWeight: 600, marginBottom: '4px' }}>{point.name}</div>\n {/* Show time dimension values if present */}\n {point.timeValues && Object.keys(point.timeValues).length > 0 && (\n <div style={{ marginBottom: '4px', color: '#6b7280' }}>\n {Object.entries(point.timeValues).map(([field, value]) => (\n <div key={field}>{getFieldLabel(field)}: {value as string}</div>\n ))}\n </div>\n )}\n <div>{xAxisFormat?.label \|\| getFieldLabel(xAxisField)}: {formatAxisValue(point.x, xAxisFormat)}</div>\n <div>{yAxisFormat?.label \|\| getFieldLabel(yAxisField)}: {formatAxisValue(point.y, yAxisFormat)}</div>\n </div>\n )\n }}\n />\n )}\n {showLegend && (\n <Legend \n wrapperStyle={{ fontSize: '12px', paddingTop: '10px' }}\n iconType=\"circle\"\n iconSize={8}\n layout=\"horizontal\"\n align=\"center\"\n verticalAlign=\"bottom\"\n onMouseEnter={(o) => setHoveredLegend(String(o.dataKey \|\| ''))}\n onMouseLeave={() => setHoveredLegend(null)}\n />\n )}\n {hasSeries ? (\n // Multiple series\n seriesKeys.map((seriesKey, index) => (\n <Scatter\n key={seriesKey}\n name={seriesKey}\n data={seriesGroups[seriesKey]}\n fill={(colorPalette?.colors && colorPalette.colors[index % colorPalette.colors.length]) \|\| CHART_COLORS[index % CHART_COLORS.length]}\n fillOpacity={hoveredLegend ? (hoveredLegend === seriesKey ? 1 : 0.3) : 1}\n />\n ))\n ) : (\n // Single series\n <Scatter\n name=\"Data\"\n data={scatterData}\n fill={(colorPalette?.colors && colorPalette.colors[0]) \|\| CHART_COLORS[0]}\n />\n )}\n </RechartsScatterChart>\n </ChartContainer>\n )\n } catch (error) {\n // 'ScatterChart rendering error\n return (\n <div className=\"dc:flex dc:flex-col dc:items-center dc:justify-center dc:w-full text-dc-error dc:p-4\" style={{ height }}>\n <div className=\"dc:text-center\">\n <div className=\"dc:text-sm dc:font-semibold dc:mb-1\">Scatter Chart Error</div>\n <div className=\"dc:text-xs dc:mb-2\">{error instanceof Error ? error.message : 'Unknown rendering error'}</div>\n <div className=\"dc:text-xs text-dc-text-muted\">Check the data and configuration</div>\n </div>\n </div>\n )\n }\n})\n\nexport default ScatterChart"],"mappings":"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"}

package/dist/client/chunks/{chart-sunburst-D1NFQjqk.js → chart-sunburst-BGhJ4fui.js} RENAMED Viewed

@@ -218,4 +218,4 @@ var _ = r.memo(function({ data: e, height: t = "100%", colorPalette: r, displayC
 //#endregion
 export { p as t };
-//# sourceMappingURL=chart-sunburst-D1NFQjqk.js.map
+//# sourceMappingURL=chart-sunburst-BGhJ4fui.js.map

package/dist/client/chunks/{chart-sunburst-D1NFQjqk.js.map → chart-sunburst-BGhJ4fui.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"chart-sunburst-D1NFQjqk.js","names":[],"sources":["../../../src/client/components/charts/SunburstChart.tsx"],"sourcesContent":["/*\n SunburstChart Component\n \n Visualizes flow data using a radial sunburst diagram showing paths from a starting step.\n * Works with the same data as SankeyChart but displays it as hierarchical rings.\n \n The chart displays:\n * - Center: Starting step (layer 0)\n * - Outward rings: Steps after the starting step (layers 1, 2, 3...)\n * - Values indicating count of entities following each path\n \n Note: Unlike Sankey, Sunburst only shows \"after\" steps for cleaner visualization.\n /\n\nimport React, { useMemo, useRef, useState, useEffect } from 'react'\nimport { SunburstChart as RechartsSunburst, ResponsiveContainer, Tooltip } from 'recharts'\nimport { CHART_COLORS } from '../../utils/chartConstants'\nimport type { ChartProps } from '../../types'\nimport type { FlowChartData, SankeyNode, SankeyLink } from '../../types/flow'\nimport { isSankeyData } from '../../types/flow'\n\n/\n Hierarchical data structure for Recharts Sunburst\n /\ninterface SunburstNode {\n name: string\n value?: number\n fill?: string\n children?: SunburstNode[]\n /* Original event name (before path prefix was added) /\n originalName?: string\n}\n\n\n/\n Extract FlowChartData from various data formats\n /\nfunction extractFlowData(data: unknown[]): FlowChartData \| null {\n if (!data \|\| data.length === 0) return null\n\n // If first element is already FlowChartData (server returns as single-row array)\n if (isSankeyData(data[0])) {\n return data[0] as FlowChartData\n }\n\n // If data itself is FlowChartData shape\n if (isSankeyData(data)) {\n return data as unknown as FlowChartData\n }\n\n // Check if data is an array with nodes and links at top level\n const asAny = data as unknown as Record<string, unknown>\n if (asAny.nodes && asAny.links) {\n return asAny as unknown as FlowChartData\n }\n\n return null\n}\n\n/\n Transform FlowChartData (nodes + links) into hierarchical Sunburst format\n * Only includes layer 0 (starting) and positive layers (after steps)\n \n The transformation builds a tree where:\n * - Root = starting event(s) at layer 0\n * - Children = events linked from parent, following the flow\n * - Each path in the tree represents a unique user journey\n /\nfunction transformToSunburstFormat(\n data: FlowChartData,\n colorPalette?: string[]\n): SunburstNode \| null {\n const { nodes, links } = data\n\n if (!nodes \|\| nodes.length === 0) return null\n\n // Filter to only include layer 0 and positive layers (after steps)\n const afterNodes = nodes.filter((n) => n.layer >= 0)\n if (afterNodes.length === 0) return null\n\n // Use theme colors - either from palette or default CHART_COLORS\n const colors = colorPalette \|\| CHART_COLORS\n\n // Get unique event names and create a color map\n // This ensures each event type gets a consistent, distinct color\n const uniqueNames = [...new Set(afterNodes.map((n) => n.name))]\n const colorMap = new Map<string, string>()\n uniqueNames.forEach((name, index) => {\n colorMap.set(name, colors[index % colors.length])\n })\n\n // Create a map of node IDs for quick lookup\n const nodeMap = new Map<string, SankeyNode>()\n afterNodes.forEach((node) => nodeMap.set(node.id, node))\n\n // Create a map of links from source to targets\n // Key: source node ID, Value: array of links from that source\n const linksBySource = new Map<string, SankeyLink[]>()\n links.forEach((link) => {\n // Only include links where source is in our afterNodes set\n if (!nodeMap.has(link.source)) return\n const sourceLinks = linksBySource.get(link.source) \|\| []\n sourceLinks.push(link)\n linksBySource.set(link.source, sourceLinks)\n })\n\n // Find max layer for determining depth\n const maxLayer = Math.max(...afterNodes.map((n) => n.layer))\n\n // Counter for generating unique IDs\n let nodeCounter = 0\n\n /\n Recursively build children for a node by following outgoing links\n * Each link becomes a child node in the tree\n \n @param nodeId - The source node ID to build children from\n * @param currentLayer - Current layer depth\n * @param pathPrefix - Path from root to this node (for unique naming)\n /\n function buildChildren(nodeId: string, currentLayer: number, pathPrefix: string): SunburstNode[] {\n if (currentLayer >= maxLayer) return []\n\n const outgoingLinks = linksBySource.get(nodeId) \|\| []\n if (outgoingLinks.length === 0) return []\n\n // Filter and map links to children\n const children: SunburstNode[] = []\n\n for (const link of outgoingLinks) {\n const targetNode = nodeMap.get(link.target)\n\n // Only include links to nodes in the next layer\n if (!targetNode \|\| targetNode.layer !== currentLayer + 1) continue\n\n // Generate a unique name by including counter to avoid React key collisions\n nodeCounter++\n const uniqueName = `${targetNode.name}_${nodeCounter}`\n\n // Recursively build grandchildren with updated path\n const newPath = pathPrefix ? `${pathPrefix}→${targetNode.name}` : targetNode.name\n const grandchildren = buildChildren(link.target, currentLayer + 1, newPath)\n\n const child: SunburstNode = {\n name: uniqueName,\n originalName: targetNode.name,\n value: link.value,\n fill: colorMap.get(targetNode.name) \|\| colors[0],\n }\n\n if (grandchildren.length > 0) {\n child.children = grandchildren\n }\n\n children.push(child)\n }\n\n return children\n }\n\n // Get starting nodes (layer 0)\n const startingNodes = afterNodes.filter((n) => n.layer === 0)\n if (startingNodes.length === 0) return null\n\n // Build the tree starting from layer 0 nodes\n if (startingNodes.length === 1) {\n // Single starting node - use it as root\n const startNode = startingNodes[0]\n const children = buildChildren(startNode.id, 0, startNode.name)\n\n const result: SunburstNode = {\n name: startNode.name,\n originalName: startNode.name,\n value: startNode.value \|\| children.reduce((sum, c) => sum + (c.value \|\| 0), 0),\n fill: colorMap.get(startNode.name) \|\| colors[0],\n }\n\n if (children.length > 0) {\n result.children = children\n }\n\n return result\n }\n\n // Multiple starting nodes - create a virtual root\n const rootChildren = startingNodes.map((startNode, index) => {\n nodeCounter++\n const children = buildChildren(startNode.id, 0, startNode.name)\n\n const child: SunburstNode = {\n name: `${startNode.name}_root_${index}`,\n originalName: startNode.name,\n value: startNode.value \|\| children.reduce((sum, c) => sum + (c.value \|\| 0), 0),\n fill: colorMap.get(startNode.name) \|\| colors[0],\n }\n\n if (children.length > 0) {\n child.children = children\n }\n\n return child\n })\n\n return {\n name: 'Start',\n originalName: 'Start',\n children: rootChildren,\n }\n}\n\n/\n Custom tooltip for Sunburst chart\n * Shows the original event name (not the unique key used internally)\n /\nfunction SunburstTooltip({\n active,\n payload,\n}: {\n active?: boolean\n payload?: Array<{ payload: SunburstNode }>\n}) {\n if (!active \|\| !payload \|\| payload.length === 0) return null\n\n const data = payload[0].payload\n // Use originalName if available, otherwise fall back to name\n const displayName = data.originalName \|\| data.name\n\n return (\n <div className=\"bg-dc-surface dc:border border-dc-border dc:rounded-md dc:px-3 dc:py-2 dc:shadow-lg dc:text-sm\">\n <div className=\"dc:font-medium text-dc-text\">{displayName}</div>\n {data.value !== undefined && (\n <div className=\"text-dc-text-secondary dc:mt-1\">\n <span className=\"dc:font-medium\">{data.value.toLocaleString()}</span> entities\n </div>\n )}\n </div>\n )\n}\n\n/\n SunburstChart Component\n \n Renders a sunburst diagram visualization from FlowChartData.\n * Shows hierarchical flow paths radiating from a central starting step.\n /\nconst SunburstChart = React.memo(function SunburstChart({\n data,\n height = '100%',\n colorPalette,\n displayConfig,\n}: ChartProps) {\n // Track chart area dimensions (not the full container which includes footer)\n const chartAreaRef = useRef<HTMLDivElement>(null)\n const [chartSize, setChartSize] = useState({ width: 400, height: 400 })\n\n useEffect(() => {\n const updateSize = () => {\n if (chartAreaRef.current) {\n setChartSize({\n width: chartAreaRef.current.offsetWidth,\n height: chartAreaRef.current.offsetHeight,\n })\n }\n }\n updateSize()\n window.addEventListener('resize', updateSize)\n\n // Use ResizeObserver for more accurate size tracking\n const resizeObserver = new ResizeObserver(updateSize)\n if (chartAreaRef.current) {\n resizeObserver.observe(chartAreaRef.current)\n }\n\n return () => {\n window.removeEventListener('resize', updateSize)\n resizeObserver.disconnect()\n }\n }, [])\n\n // Get display config options\n const displayConfigAny = displayConfig as Record<string, unknown> \| undefined\n const innerRadius = (displayConfigAny?.innerRadius as number) ?? 40\n\n // Extract and transform data\n const sunburstData = useMemo(() => {\n const extracted = extractFlowData(data \|\| [])\n if (!extracted) return null\n\n return transformToSunburstFormat(extracted, colorPalette?.colors \|\| CHART_COLORS)\n }, [data, colorPalette])\n\n // Calculate summary stats from original flow data\n const summaryStats = useMemo(() => {\n const extracted = extractFlowData(data \|\| [])\n if (!extracted) return null\n\n // Only count after nodes (layer >= 0)\n const afterNodes = extracted.nodes.filter((n) => n.layer >= 0)\n const afterLinks = extracted.links.filter((link) => {\n const sourceNode = extracted.nodes.find((n) => n.id === link.source)\n return sourceNode && sourceNode.layer >= 0\n })\n\n const totalEntities = extracted.nodes\n .filter((n) => n.layer === 0)\n .reduce((sum, n) => sum + (n.value \|\| 0), 0)\n\n return {\n nodeCount: afterNodes.length,\n linkCount: afterLinks.length,\n totalEntities,\n }\n }, [data])\n\n // Handle no data\n if (!data \|\| data.length === 0 \|\| !sunburstData) {\n return (\n <div\n className=\"dc:flex dc:items-center dc:justify-center dc:w-full text-dc-text-muted\"\n style={{ height }}\n >\n <div className=\"dc:text-center\">\n <div className=\"dc:text-sm dc:font-semibold dc:mb-1\">No flow data</div>\n <div className=\"dc:text-xs text-dc-text-secondary\">\n Configure a flow analysis with a starting step and event dimension\n </div>\n </div>\n </div>\n )\n }\n\n // Calculate outer radius based on chart area size\n const minDimension = Math.min(chartSize.width, chartSize.height)\n const outerRadius = Math.max(minDimension / 2 - 40, 100)\n\n // Get root node info for center label\n const rootName = sunburstData.originalName \|\| sunburstData.name\n const rootValue = sunburstData.value\n\n return (\n <div className=\"dc:relative dc:w-full dc:h-full dc:flex dc:flex-col\" style={{ height }}>\n {/ Sunburst Diagram /}\n <div ref={chartAreaRef} className=\"dc:flex-1 dc:min-h-0 dc:relative\">\n <ResponsiveContainer width=\"100%\" height=\"100%\">\n <RechartsSunburst\n data={sunburstData}\n dataKey=\"value\"\n innerRadius={innerRadius}\n outerRadius={outerRadius}\n stroke=\"var(--dc-bg)\"\n >\n <Tooltip content={<SunburstTooltip />} />\n </RechartsSunburst>\n </ResponsiveContainer>\n\n {/ Center label showing the root node (starting event) /}\n {innerRadius > 0 && (\n <div\n className=\"dc:absolute dc:inset-0 dc:flex dc:items-center dc:justify-center dc:pointer-events-none\"\n style={{ zIndex: 10 }}\n >\n <div className=\"dc:text-center\">\n <div className=\"dc:text-sm dc:font-semibold text-dc-text\">{rootName}</div>\n {rootValue !== undefined && (\n <div className=\"dc:text-xs text-dc-text-secondary\">\n {rootValue.toLocaleString()}\n </div>\n )}\n </div>\n </div>\n )}\n </div>\n\n {/ Summary Footer */}\n {!displayConfigAny?.hideSummaryFooter && summaryStats && (\n <div className=\"dc:flex-shrink-0 dc:px-4 dc:py-2 dc:border-t border-dc-border bg-dc-surface-secondary\">\n <div className=\"dc:flex dc:items-center dc:justify-between dc:text-sm\">\n <div className=\"text-dc-text-muted\">\n <span className=\"dc:font-medium\">{summaryStats.nodeCount}</span> events (after)\n </div>\n <div className=\"text-dc-text\">\n <span className=\"text-dc-text-muted\">Paths:</span>{' '}\n <span className=\"dc:font-medium\">{summaryStats.linkCount}</span>\n </div>\n <div className=\"text-dc-text-muted\">\n <span className=\"dc:font-medium\">{summaryStats.totalEntities.toLocaleString()}</span>{' '}\n starting entities\n </div>\n </div>\n </div>\n )}\n </div>\n )\n})\n\nexport default SunburstChart\n"],"mappings":"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"}
1	+ {"version":3,"file":"chart-sunburst-BGhJ4fui.js","names":[],"sources":["../../../src/client/components/charts/SunburstChart.tsx"],"sourcesContent":["/*\n SunburstChart Component\n \n Visualizes flow data using a radial sunburst diagram showing paths from a starting step.\n * Works with the same data as SankeyChart but displays it as hierarchical rings.\n \n The chart displays:\n * - Center: Starting step (layer 0)\n * - Outward rings: Steps after the starting step (layers 1, 2, 3...)\n * - Values indicating count of entities following each path\n \n Note: Unlike Sankey, Sunburst only shows \"after\" steps for cleaner visualization.\n /\n\nimport React, { useMemo, useRef, useState, useEffect } from 'react'\nimport { SunburstChart as RechartsSunburst, ResponsiveContainer, Tooltip } from 'recharts'\nimport { CHART_COLORS } from '../../utils/chartConstants'\nimport type { ChartProps } from '../../types'\nimport type { FlowChartData, SankeyNode, SankeyLink } from '../../types/flow'\nimport { isSankeyData } from '../../types/flow'\n\n/\n Hierarchical data structure for Recharts Sunburst\n /\ninterface SunburstNode {\n name: string\n value?: number\n fill?: string\n children?: SunburstNode[]\n /* Original event name (before path prefix was added) /\n originalName?: string\n}\n\n\n/\n Extract FlowChartData from various data formats\n /\nfunction extractFlowData(data: unknown[]): FlowChartData \| null {\n if (!data \|\| data.length === 0) return null\n\n // If first element is already FlowChartData (server returns as single-row array)\n if (isSankeyData(data[0])) {\n return data[0] as FlowChartData\n }\n\n // If data itself is FlowChartData shape\n if (isSankeyData(data)) {\n return data as unknown as FlowChartData\n }\n\n // Check if data is an array with nodes and links at top level\n const asAny = data as unknown as Record<string, unknown>\n if (asAny.nodes && asAny.links) {\n return asAny as unknown as FlowChartData\n }\n\n return null\n}\n\n/\n Transform FlowChartData (nodes + links) into hierarchical Sunburst format\n * Only includes layer 0 (starting) and positive layers (after steps)\n \n The transformation builds a tree where:\n * - Root = starting event(s) at layer 0\n * - Children = events linked from parent, following the flow\n * - Each path in the tree represents a unique user journey\n /\nfunction transformToSunburstFormat(\n data: FlowChartData,\n colorPalette?: string[]\n): SunburstNode \| null {\n const { nodes, links } = data\n\n if (!nodes \|\| nodes.length === 0) return null\n\n // Filter to only include layer 0 and positive layers (after steps)\n const afterNodes = nodes.filter((n) => n.layer >= 0)\n if (afterNodes.length === 0) return null\n\n // Use theme colors - either from palette or default CHART_COLORS\n const colors = colorPalette \|\| CHART_COLORS\n\n // Get unique event names and create a color map\n // This ensures each event type gets a consistent, distinct color\n const uniqueNames = [...new Set(afterNodes.map((n) => n.name))]\n const colorMap = new Map<string, string>()\n uniqueNames.forEach((name, index) => {\n colorMap.set(name, colors[index % colors.length])\n })\n\n // Create a map of node IDs for quick lookup\n const nodeMap = new Map<string, SankeyNode>()\n afterNodes.forEach((node) => nodeMap.set(node.id, node))\n\n // Create a map of links from source to targets\n // Key: source node ID, Value: array of links from that source\n const linksBySource = new Map<string, SankeyLink[]>()\n links.forEach((link) => {\n // Only include links where source is in our afterNodes set\n if (!nodeMap.has(link.source)) return\n const sourceLinks = linksBySource.get(link.source) \|\| []\n sourceLinks.push(link)\n linksBySource.set(link.source, sourceLinks)\n })\n\n // Find max layer for determining depth\n const maxLayer = Math.max(...afterNodes.map((n) => n.layer))\n\n // Counter for generating unique IDs\n let nodeCounter = 0\n\n /\n Recursively build children for a node by following outgoing links\n * Each link becomes a child node in the tree\n \n @param nodeId - The source node ID to build children from\n * @param currentLayer - Current layer depth\n * @param pathPrefix - Path from root to this node (for unique naming)\n /\n function buildChildren(nodeId: string, currentLayer: number, pathPrefix: string): SunburstNode[] {\n if (currentLayer >= maxLayer) return []\n\n const outgoingLinks = linksBySource.get(nodeId) \|\| []\n if (outgoingLinks.length === 0) return []\n\n // Filter and map links to children\n const children: SunburstNode[] = []\n\n for (const link of outgoingLinks) {\n const targetNode = nodeMap.get(link.target)\n\n // Only include links to nodes in the next layer\n if (!targetNode \|\| targetNode.layer !== currentLayer + 1) continue\n\n // Generate a unique name by including counter to avoid React key collisions\n nodeCounter++\n const uniqueName = `${targetNode.name}_${nodeCounter}`\n\n // Recursively build grandchildren with updated path\n const newPath = pathPrefix ? `${pathPrefix}→${targetNode.name}` : targetNode.name\n const grandchildren = buildChildren(link.target, currentLayer + 1, newPath)\n\n const child: SunburstNode = {\n name: uniqueName,\n originalName: targetNode.name,\n value: link.value,\n fill: colorMap.get(targetNode.name) \|\| colors[0],\n }\n\n if (grandchildren.length > 0) {\n child.children = grandchildren\n }\n\n children.push(child)\n }\n\n return children\n }\n\n // Get starting nodes (layer 0)\n const startingNodes = afterNodes.filter((n) => n.layer === 0)\n if (startingNodes.length === 0) return null\n\n // Build the tree starting from layer 0 nodes\n if (startingNodes.length === 1) {\n // Single starting node - use it as root\n const startNode = startingNodes[0]\n const children = buildChildren(startNode.id, 0, startNode.name)\n\n const result: SunburstNode = {\n name: startNode.name,\n originalName: startNode.name,\n value: startNode.value \|\| children.reduce((sum, c) => sum + (c.value \|\| 0), 0),\n fill: colorMap.get(startNode.name) \|\| colors[0],\n }\n\n if (children.length > 0) {\n result.children = children\n }\n\n return result\n }\n\n // Multiple starting nodes - create a virtual root\n const rootChildren = startingNodes.map((startNode, index) => {\n nodeCounter++\n const children = buildChildren(startNode.id, 0, startNode.name)\n\n const child: SunburstNode = {\n name: `${startNode.name}_root_${index}`,\n originalName: startNode.name,\n value: startNode.value \|\| children.reduce((sum, c) => sum + (c.value \|\| 0), 0),\n fill: colorMap.get(startNode.name) \|\| colors[0],\n }\n\n if (children.length > 0) {\n child.children = children\n }\n\n return child\n })\n\n return {\n name: 'Start',\n originalName: 'Start',\n children: rootChildren,\n }\n}\n\n/\n Custom tooltip for Sunburst chart\n * Shows the original event name (not the unique key used internally)\n /\nfunction SunburstTooltip({\n active,\n payload,\n}: {\n active?: boolean\n payload?: Array<{ payload: SunburstNode }>\n}) {\n if (!active \|\| !payload \|\| payload.length === 0) return null\n\n const data = payload[0].payload\n // Use originalName if available, otherwise fall back to name\n const displayName = data.originalName \|\| data.name\n\n return (\n <div className=\"bg-dc-surface dc:border border-dc-border dc:rounded-md dc:px-3 dc:py-2 dc:shadow-lg dc:text-sm\">\n <div className=\"dc:font-medium text-dc-text\">{displayName}</div>\n {data.value !== undefined && (\n <div className=\"text-dc-text-secondary dc:mt-1\">\n <span className=\"dc:font-medium\">{data.value.toLocaleString()}</span> entities\n </div>\n )}\n </div>\n )\n}\n\n/\n SunburstChart Component\n \n Renders a sunburst diagram visualization from FlowChartData.\n * Shows hierarchical flow paths radiating from a central starting step.\n /\nconst SunburstChart = React.memo(function SunburstChart({\n data,\n height = '100%',\n colorPalette,\n displayConfig,\n}: ChartProps) {\n // Track chart area dimensions (not the full container which includes footer)\n const chartAreaRef = useRef<HTMLDivElement>(null)\n const [chartSize, setChartSize] = useState({ width: 400, height: 400 })\n\n useEffect(() => {\n const updateSize = () => {\n if (chartAreaRef.current) {\n setChartSize({\n width: chartAreaRef.current.offsetWidth,\n height: chartAreaRef.current.offsetHeight,\n })\n }\n }\n updateSize()\n window.addEventListener('resize', updateSize)\n\n // Use ResizeObserver for more accurate size tracking\n const resizeObserver = new ResizeObserver(updateSize)\n if (chartAreaRef.current) {\n resizeObserver.observe(chartAreaRef.current)\n }\n\n return () => {\n window.removeEventListener('resize', updateSize)\n resizeObserver.disconnect()\n }\n }, [])\n\n // Get display config options\n const displayConfigAny = displayConfig as Record<string, unknown> \| undefined\n const innerRadius = (displayConfigAny?.innerRadius as number) ?? 40\n\n // Extract and transform data\n const sunburstData = useMemo(() => {\n const extracted = extractFlowData(data \|\| [])\n if (!extracted) return null\n\n return transformToSunburstFormat(extracted, colorPalette?.colors \|\| CHART_COLORS)\n }, [data, colorPalette])\n\n // Calculate summary stats from original flow data\n const summaryStats = useMemo(() => {\n const extracted = extractFlowData(data \|\| [])\n if (!extracted) return null\n\n // Only count after nodes (layer >= 0)\n const afterNodes = extracted.nodes.filter((n) => n.layer >= 0)\n const afterLinks = extracted.links.filter((link) => {\n const sourceNode = extracted.nodes.find((n) => n.id === link.source)\n return sourceNode && sourceNode.layer >= 0\n })\n\n const totalEntities = extracted.nodes\n .filter((n) => n.layer === 0)\n .reduce((sum, n) => sum + (n.value \|\| 0), 0)\n\n return {\n nodeCount: afterNodes.length,\n linkCount: afterLinks.length,\n totalEntities,\n }\n }, [data])\n\n // Handle no data\n if (!data \|\| data.length === 0 \|\| !sunburstData) {\n return (\n <div\n className=\"dc:flex dc:items-center dc:justify-center dc:w-full text-dc-text-muted\"\n style={{ height }}\n >\n <div className=\"dc:text-center\">\n <div className=\"dc:text-sm dc:font-semibold dc:mb-1\">No flow data</div>\n <div className=\"dc:text-xs text-dc-text-secondary\">\n Configure a flow analysis with a starting step and event dimension\n </div>\n </div>\n </div>\n )\n }\n\n // Calculate outer radius based on chart area size\n const minDimension = Math.min(chartSize.width, chartSize.height)\n const outerRadius = Math.max(minDimension / 2 - 40, 100)\n\n // Get root node info for center label\n const rootName = sunburstData.originalName \|\| sunburstData.name\n const rootValue = sunburstData.value\n\n return (\n <div className=\"dc:relative dc:w-full dc:h-full dc:flex dc:flex-col\" style={{ height }}>\n {/ Sunburst Diagram /}\n <div ref={chartAreaRef} className=\"dc:flex-1 dc:min-h-0 dc:relative\">\n <ResponsiveContainer width=\"100%\" height=\"100%\">\n <RechartsSunburst\n data={sunburstData}\n dataKey=\"value\"\n innerRadius={innerRadius}\n outerRadius={outerRadius}\n stroke=\"var(--dc-bg)\"\n >\n <Tooltip content={<SunburstTooltip />} />\n </RechartsSunburst>\n </ResponsiveContainer>\n\n {/ Center label showing the root node (starting event) /}\n {innerRadius > 0 && (\n <div\n className=\"dc:absolute dc:inset-0 dc:flex dc:items-center dc:justify-center dc:pointer-events-none\"\n style={{ zIndex: 10 }}\n >\n <div className=\"dc:text-center\">\n <div className=\"dc:text-sm dc:font-semibold text-dc-text\">{rootName}</div>\n {rootValue !== undefined && (\n <div className=\"dc:text-xs text-dc-text-secondary\">\n {rootValue.toLocaleString()}\n </div>\n )}\n </div>\n </div>\n )}\n </div>\n\n {/ Summary Footer */}\n {!displayConfigAny?.hideSummaryFooter && summaryStats && (\n <div className=\"dc:flex-shrink-0 dc:px-4 dc:py-2 dc:border-t border-dc-border bg-dc-surface-secondary\">\n <div className=\"dc:flex dc:items-center dc:justify-between dc:text-sm\">\n <div className=\"text-dc-text-muted\">\n <span className=\"dc:font-medium\">{summaryStats.nodeCount}</span> events (after)\n </div>\n <div className=\"text-dc-text\">\n <span className=\"text-dc-text-muted\">Paths:</span>{' '}\n <span className=\"dc:font-medium\">{summaryStats.linkCount}</span>\n </div>\n <div className=\"text-dc-text-muted\">\n <span className=\"dc:font-medium\">{summaryStats.totalEntities.toLocaleString()}</span>{' '}\n starting entities\n </div>\n </div>\n </div>\n )}\n </div>\n )\n})\n\nexport default SunburstChart\n"],"mappings":"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"}

package/dist/client/chunks/{chart-tree-map-CbYjko2s.js → chart-tree-map-Cn1pmrAw.js} RENAMED Viewed

@@ -295,4 +295,4 @@ var g = /* @__PURE__ */ e({ default: () => _ }), _ = l.memo(function({ data: e,
 //#endregion
 export { g as n, _ as t };
-//# sourceMappingURL=chart-tree-map-CbYjko2s.js.map
+//# sourceMappingURL=chart-tree-map-Cn1pmrAw.js.map

package/dist/client/chunks/{chart-tree-map-CbYjko2s.js.map → chart-tree-map-Cn1pmrAw.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"chart-tree-map-CbYjko2s.js","names":[],"sources":["../../../src/client/components/charts/TreeMapChart.tsx"],"sourcesContent":["import React, { useState } from 'react'\nimport { Treemap } from 'recharts'\nimport { scaleQuantize, scaleOrdinal } from 'd3'\nimport ChartContainer from './ChartContainer'\nimport ChartTooltip from './ChartTooltip'\nimport { CHART_COLORS, CHART_COLORS_GRADIENT } from '../../utils/chartConstants'\nimport { formatTimeValue, getFieldGranularity, formatAxisValue } from '../../utils/chartUtils'\nimport { useCubeFieldLabel } from '../../hooks/useCubeFieldLabel'\nimport type { ChartProps } from '../../types'\n\nconst TreeMapChart = React.memo(function TreeMapChart({\n data,\n chartConfig,\n displayConfig = {},\n queryObject,\n height = \"100%\",\n colorPalette,\n onDataPointClick,\n drillEnabled\n}: ChartProps) {\n const [hoveredIndex, setHoveredIndex] = useState<number \| null>(null)\n // Use specialized hook to avoid re-renders from unrelated context changes\n const getFieldLabel = useCubeFieldLabel()\n \n try {\n const safeDisplayConfig = {\n showTooltip: displayConfig?.showTooltip ?? true,\n showLegend: displayConfig?.showLegend ?? true,\n leftYAxisFormat: displayConfig?.leftYAxisFormat\n }\n\n if (!data \|\| data.length === 0) {\n return (\n <div className=\"dc:flex dc:items-center dc:justify-center dc:w-full text-dc-text-muted\" style={{ height }}>\n <div className=\"dc:text-center\">\n <div className=\"dc:text-sm dc:font-semibold dc:mb-1\">No data available</div>\n <div className=\"dc:text-xs text-dc-text-secondary\">No data points to display in treemap chart</div>\n </div>\n </div>\n )\n }\n\n let treemapData: Array<{name: string, size: number, fill?: string, series?: string}>\n let isNumericSeries = false\n let seriesField: string \| undefined\n\n if (chartConfig?.xAxis && chartConfig?.yAxis) {\n // New format - use chart config\n const xAxisField = Array.isArray(chartConfig.xAxis) ? chartConfig.xAxis[0] : chartConfig.xAxis // Name/category field\n const yAxisField = Array.isArray(chartConfig.yAxis) ? chartConfig.yAxis[0] : chartConfig.yAxis // Size field\n seriesField = Array.isArray(chartConfig.series) ? chartConfig.series[0] : chartConfig.series // Color grouping field\n\n const granularity = getFieldGranularity(queryObject, xAxisField)\n \n if (seriesField) {\n // Check if series field is numeric for color scaling\n const seriesValues = data.map(item => {\n const value = item[seriesField!]\n return typeof value === 'string' ? parseFloat(value) : value\n }).filter(val => !isNaN(val))\n \n isNumericSeries = seriesValues.length === data.length && seriesValues.every(val => typeof val === 'number')\n \n \n if (isNumericSeries) {\n // Use D3 quantize scale for better color distribution with small ranges\n const minValue = Math.min(...seriesValues)\n const maxValue = Math.max(...seriesValues)\n \n // Create D3 quantize color scale - maps continuous data to discrete color bands\n const colorScale = scaleQuantize<string>()\n .domain([minValue, maxValue])\n .range(CHART_COLORS_GRADIENT)\n \n treemapData = data.map((item) => {\n const seriesValue = typeof item[seriesField!] === 'string' \n ? parseFloat(item[seriesField!]) \n : item[seriesField!]\n \n const color = colorScale(seriesValue)\n \n return {\n name: formatTimeValue(item[xAxisField], granularity) \|\| String(item[xAxisField]) \|\| 'Unknown',\n size: typeof item[yAxisField] === 'string' \n ? parseFloat(item[yAxisField]) \n : (item[yAxisField] \|\| 0),\n fill: color,\n series: String(item[seriesField!])\n }\n })\n } else {\n // Use D3 ordinal color scale for categorical series\n const uniqueSeriesValues = [...new Set(data.map(item => String(item[seriesField!])))]\n const colorScale = scaleOrdinal<string>()\n .domain(uniqueSeriesValues)\n .range(colorPalette?.colors \|\| CHART_COLORS)\n \n treemapData = data.map((item) => ({\n name: formatTimeValue(item[xAxisField], granularity) \|\| String(item[xAxisField]) \|\| 'Unknown',\n size: typeof item[yAxisField] === 'string' \n ? parseFloat(item[yAxisField]) \n : (item[yAxisField] \|\| 0),\n fill: colorScale(String(item[seriesField!])),\n series: String(item[seriesField!])\n }))\n }\n } else {\n // No series grouping - use index-based colors\n treemapData = data.map((item, index) => ({\n name: formatTimeValue(item[xAxisField], granularity) \|\| String(item[xAxisField]) \|\| 'Unknown',\n size: typeof item[yAxisField] === 'string' \n ? parseFloat(item[yAxisField]) \n : (item[yAxisField] \|\| 0),\n fill: (colorPalette?.colors && colorPalette.colors[index % colorPalette.colors.length]) \|\| CHART_COLORS[index % CHART_COLORS.length]\n }))\n }\n } else {\n // Legacy format or auto-detection\n const firstRow = data[0]\n const keys = Object.keys(firstRow)\n \n // Try to find name/label field\n const nameField = keys.find(key => \n typeof firstRow[key] === 'string' \|\|\n key.toLowerCase().includes('name') \|\|\n key.toLowerCase().includes('label') \|\|\n key.toLowerCase().includes('category')\n ) \|\| keys[0]\n\n // Find a numeric field for size - look for 'size' field first, then any numeric\n const sizeField = keys.find(key => key.toLowerCase().includes('size')) \|\|\n keys.find(key => \n typeof firstRow[key] === 'number' && key !== nameField\n ) \|\| keys[1]\n\n if (!sizeField) {\n return (\n <div className=\"dc:flex dc:items-center dc:justify-center dc:w-full text-dc-warning\" style={{ height }}>\n <div className=\"dc:text-center\">\n <div className=\"dc:text-sm dc:font-semibold dc:mb-1\">Configuration Error</div>\n <div className=\"dc:text-xs\">No numeric field found for treemap chart size</div>\n </div>\n </div>\n )\n }\n\n // Transform data for treemap chart\n treemapData = data.map((item, index) => {\n let name = item[nameField]\n // Handle boolean values with better labels\n if (typeof name === 'boolean') {\n name = name ? 'Active' : 'Inactive'\n } else if (name === 'true' \|\| name === 'false') {\n name = name === 'true' ? 'Active' : 'Inactive'\n } else {\n name = String(name)\n }\n return {\n name,\n size: typeof item[sizeField] === 'string' \n ? parseFloat(item[sizeField]) \n : (item[sizeField] \|\| 0),\n fill: (colorPalette?.colors && colorPalette.colors[index % colorPalette.colors.length]) \|\| CHART_COLORS[index % CHART_COLORS.length]\n }\n })\n }\n\n // Filter out zero/null values and ensure positive sizes\n treemapData = treemapData.filter(item => item.size != null && item.size > 0)\n \n if (treemapData.length === 0) {\n return (\n <div className=\"dc:flex dc:items-center dc:justify-center dc:w-full text-dc-text-muted\" style={{ height }}>\n <div className=\"dc:text-center\">\n <div className=\"dc:text-sm dc:font-semibold dc:mb-1\">No valid data</div>\n <div className=\"dc:text-xs text-dc-text-secondary\">No valid data points for treemap chart after transformation</div>\n </div>\n </div>\n )\n }\n\n // Custom content renderer for treemap cells with HTML overlays\n const CustomizedContent = (props: any) => {\n const { x, y, width, height, index, name, size } = props\n\n if (width < 20 \|\| height < 20) return null // Don't render content for very small cells\n\n const handleClick = (event: React.MouseEvent) => {\n event.stopPropagation()\n const cellData = treemapData[index]\n if (cellData && onDataPointClick) {\n // Use query measures for proper field name (chartConfig.yAxis may contain display labels)\n const measureField = queryObject?.measures?.[0] \|\| chartConfig?.yAxis?.[0] \|\| ''\n onDataPointClick({\n dataPoint: cellData,\n clickedField: measureField,\n xValue: name,\n position: { x: event.clientX, y: event.clientY },\n nativeEvent: event\n })\n }\n }\n\n return (\n <g>\n <rect\n x={x}\n y={y}\n width={width}\n height={height}\n style={{\n fill: treemapData[index]?.fill \|\| ((colorPalette?.colors && colorPalette.colors[index % colorPalette.colors.length]) \|\| CHART_COLORS[index % CHART_COLORS.length]),\n fillOpacity: hoveredIndex !== null ? (hoveredIndex === index ? 1 : 0.6) : 0.8,\n stroke: '#fff',\n strokeWidth: 2,\n cursor: drillEnabled ? 'pointer' : 'default',\n pointerEvents: 'all' // Ensure rect captures click events\n }}\n onMouseEnter={() => setHoveredIndex(index)}\n onMouseLeave={() => setHoveredIndex(null)}\n onClick={drillEnabled && onDataPointClick ? handleClick : undefined}\n />\n <foreignObject \n x={x} \n y={y} \n width={width} \n height={height}\n style={{ pointerEvents: 'none', overflow: 'visible' }}\n >\n <div \n style={{\n width: '100%',\n height: '100%',\n display: 'flex',\n flexDirection: 'column',\n alignItems: 'center',\n justifyContent: 'center',\n padding: '4px',\n boxSizing: 'border-box',\n color: '#ffffff',\n textShadow: '0 1px 2px rgba(0,0,0,0.8)',\n fontFamily: 'system-ui, -apple-system, sans-serif',\n overflow: 'hidden'\n }}\n >\n {width > 40 && height > 30 && (\n <div \n style={{\n fontSize: `${Math.max(10, Math.min(width / 8, height / 8, 16))}px`,\n fontWeight: '600',\n textAlign: 'center',\n lineHeight: '1.2',\n marginBottom: width > 60 && height > 45 ? '4px' : '0',\n wordBreak: 'break-word',\n hyphens: 'auto'\n }}\n >\n {name}\n </div>\n )}\n {width > 60 && height > 45 && (\n <div\n style={{\n fontSize: `${Math.max(8, Math.min(width / 10, height / 10, 14))}px`,\n textAlign: 'center',\n opacity: 0.9\n }}\n >\n {safeDisplayConfig.leftYAxisFormat\n ? formatAxisValue(size, safeDisplayConfig.leftYAxisFormat)\n : (typeof size === 'number' ? size.toLocaleString() : size)\n }\n </div>\n )}\n </div>\n </foreignObject>\n </g>\n )\n }\n\n // Check if we have series data for legend\n const hasSeriesData = treemapData.some(item => 'series' in item)\n const uniqueSeries = hasSeriesData \n ? [...new Set(treemapData.map(item => item.series).filter(Boolean))]\n : []\n \n // For numeric series, create a legend showing the color scale\n let legendPayload: any[] = []\n if (safeDisplayConfig.showLegend && seriesField) {\n \n if (isNumericSeries) {\n // Create color scale legend for numeric values\n const minValue = Math.min(...data.map(item => {\n const value = item[seriesField!]\n return typeof value === 'string' ? parseFloat(value) : value\n }))\n const maxValue = Math.max(...data.map(item => {\n const value = item[seriesField!]\n return typeof value === 'string' ? parseFloat(value) : value\n }))\n \n \n // Create legend entries showing color scale\n legendPayload = CHART_COLORS_GRADIENT.map((color, index) => {\n const ratio = index / (CHART_COLORS_GRADIENT.length - 1)\n const value = minValue + (maxValue - minValue) * ratio\n return {\n value: safeDisplayConfig.leftYAxisFormat\n ? formatAxisValue(value, safeDisplayConfig.leftYAxisFormat)\n : value.toFixed(2),\n type: 'rect',\n color: color\n }\n })\n } else if (uniqueSeries.length > 1) {\n // Use categorical legend for non-numeric series\n legendPayload = uniqueSeries.map((series, index) => ({\n value: series,\n type: 'rect',\n color: CHART_COLORS[index % CHART_COLORS.length]\n }))\n }\n \n }\n\n // Calculate height adjustment for legend\n const hasLegend = safeDisplayConfig.showLegend && legendPayload.length > 0\n const adjustedHeight = hasLegend \n ? (typeof height === 'string' && height.includes('%') \n ? height \n : typeof height === 'number' \n ? height + 60 \n : `calc(${height} + 60px)`)\n : height\n\n return (\n <div className=\"dc:w-full\" style={{ height: adjustedHeight }}>\n <ChartContainer height={hasLegend ? `calc(100% - 50px)` : \"100%\"}>\n <Treemap\n data={treemapData}\n dataKey=\"size\"\n aspectRatio={4/3}\n stroke=\"#fff\"\n content={<CustomizedContent />}\n >\n {safeDisplayConfig.showTooltip && (\n <ChartTooltip\n formatter={safeDisplayConfig.leftYAxisFormat\n ? (value: any, name: string) => [formatAxisValue(value, safeDisplayConfig.leftYAxisFormat), name]\n : undefined\n }\n />\n )}\n </Treemap>\n </ChartContainer>\n \n {/* Custom Legend outside ChartContainer */}\n {hasLegend && (\n <div className=\"dc:flex dc:justify-center dc:items-center dc:mt-4 dc:pb-2\">\n {isNumericSeries ? (\n // Gradient legend for numeric series\n <div className=\"dc:flex dc:flex-col dc:items-center\">\n <div className=\"dc:text-xs dc:font-semibold text-dc-text-primary dc:mb-2\">\n {seriesField ? getFieldLabel(seriesField) : ''}\n </div>\n <div className=\"dc:flex dc:items-center dc:gap-2\">\n <span className=\"dc:text-xs text-dc-text-muted\">\n {safeDisplayConfig.leftYAxisFormat\n ? formatAxisValue(Math.min(...data.map(item => {\n const value = item[seriesField!]\n return typeof value === 'string' ? parseFloat(value) : value\n })), safeDisplayConfig.leftYAxisFormat)\n : Math.min(...data.map(item => {\n const value = item[seriesField!]\n return typeof value === 'string' ? parseFloat(value) : value\n })).toFixed(2)\n }\n </span>\n <div\n className=\"dc:h-4 dc:rounded-sm\"\n style={{\n width: '200px',\n background: `linear-gradient(to right, ${CHART_COLORS_GRADIENT.join(', ')})`\n }}\n />\n <span className=\"dc:text-xs text-dc-text-muted\">\n {safeDisplayConfig.leftYAxisFormat\n ? formatAxisValue(Math.max(...data.map(item => {\n const value = item[seriesField!]\n return typeof value === 'string' ? parseFloat(value) : value\n })), safeDisplayConfig.leftYAxisFormat)\n : Math.max(...data.map(item => {\n const value = item[seriesField!]\n return typeof value === 'string' ? parseFloat(value) : value\n })).toFixed(2)\n }\n </span>\n </div>\n </div>\n ) : (\n // Discrete legend for categorical series\n <div className=\"dc:flex dc:flex-wrap dc:justify-center dc:gap-4\">\n {legendPayload.map((item, index) => (\n <div key={index} className=\"dc:flex dc:items-center dc:gap-2\">\n <div\n className=\"dc:w-3 dc:h-3 rounded-xs\"\n style={{ backgroundColor: item.color }}\n />\n <span className=\"dc:text-xs text-dc-text-muted\">\n {item.value}\n </span>\n </div>\n ))}\n </div>\n )}\n </div>\n )}\n </div>\n )\n } catch (error) {\n // 'TreeMapChart rendering error\n return (\n <div className=\"dc:flex dc:flex-col dc:items-center dc:justify-center dc:w-full text-dc-error dc:p-4\" style={{ height }}>\n <div className=\"dc:text-center\">\n <div className=\"dc:text-sm dc:font-semibold dc:mb-1\">TreeMap Chart Error</div>\n <div className=\"dc:text-xs dc:mb-2\">{error instanceof Error ? error.message : 'Unknown rendering error'}</div>\n <div className=\"dc:text-xs text-dc-text-muted\">Check the data and configuration</div>\n </div>\n </div>\n )\n }\n})\n\nexport default TreeMapChart"],"mappings":"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"}
1	+ {"version":3,"file":"chart-tree-map-Cn1pmrAw.js","names":[],"sources":["../../../src/client/components/charts/TreeMapChart.tsx"],"sourcesContent":["import React, { useState } from 'react'\nimport { Treemap } from 'recharts'\nimport { scaleQuantize, scaleOrdinal } from 'd3'\nimport ChartContainer from './ChartContainer'\nimport ChartTooltip from './ChartTooltip'\nimport { CHART_COLORS, CHART_COLORS_GRADIENT } from '../../utils/chartConstants'\nimport { formatTimeValue, getFieldGranularity, formatAxisValue } from '../../utils/chartUtils'\nimport { useCubeFieldLabel } from '../../hooks/useCubeFieldLabel'\nimport type { ChartProps } from '../../types'\n\nconst TreeMapChart = React.memo(function TreeMapChart({\n data,\n chartConfig,\n displayConfig = {},\n queryObject,\n height = \"100%\",\n colorPalette,\n onDataPointClick,\n drillEnabled\n}: ChartProps) {\n const [hoveredIndex, setHoveredIndex] = useState<number \| null>(null)\n // Use specialized hook to avoid re-renders from unrelated context changes\n const getFieldLabel = useCubeFieldLabel()\n \n try {\n const safeDisplayConfig = {\n showTooltip: displayConfig?.showTooltip ?? true,\n showLegend: displayConfig?.showLegend ?? true,\n leftYAxisFormat: displayConfig?.leftYAxisFormat\n }\n\n if (!data \|\| data.length === 0) {\n return (\n <div className=\"dc:flex dc:items-center dc:justify-center dc:w-full text-dc-text-muted\" style={{ height }}>\n <div className=\"dc:text-center\">\n <div className=\"dc:text-sm dc:font-semibold dc:mb-1\">No data available</div>\n <div className=\"dc:text-xs text-dc-text-secondary\">No data points to display in treemap chart</div>\n </div>\n </div>\n )\n }\n\n let treemapData: Array<{name: string, size: number, fill?: string, series?: string}>\n let isNumericSeries = false\n let seriesField: string \| undefined\n\n if (chartConfig?.xAxis && chartConfig?.yAxis) {\n // New format - use chart config\n const xAxisField = Array.isArray(chartConfig.xAxis) ? chartConfig.xAxis[0] : chartConfig.xAxis // Name/category field\n const yAxisField = Array.isArray(chartConfig.yAxis) ? chartConfig.yAxis[0] : chartConfig.yAxis // Size field\n seriesField = Array.isArray(chartConfig.series) ? chartConfig.series[0] : chartConfig.series // Color grouping field\n\n const granularity = getFieldGranularity(queryObject, xAxisField)\n \n if (seriesField) {\n // Check if series field is numeric for color scaling\n const seriesValues = data.map(item => {\n const value = item[seriesField!]\n return typeof value === 'string' ? parseFloat(value) : value\n }).filter(val => !isNaN(val))\n \n isNumericSeries = seriesValues.length === data.length && seriesValues.every(val => typeof val === 'number')\n \n \n if (isNumericSeries) {\n // Use D3 quantize scale for better color distribution with small ranges\n const minValue = Math.min(...seriesValues)\n const maxValue = Math.max(...seriesValues)\n \n // Create D3 quantize color scale - maps continuous data to discrete color bands\n const colorScale = scaleQuantize<string>()\n .domain([minValue, maxValue])\n .range(CHART_COLORS_GRADIENT)\n \n treemapData = data.map((item) => {\n const seriesValue = typeof item[seriesField!] === 'string' \n ? parseFloat(item[seriesField!]) \n : item[seriesField!]\n \n const color = colorScale(seriesValue)\n \n return {\n name: formatTimeValue(item[xAxisField], granularity) \|\| String(item[xAxisField]) \|\| 'Unknown',\n size: typeof item[yAxisField] === 'string' \n ? parseFloat(item[yAxisField]) \n : (item[yAxisField] \|\| 0),\n fill: color,\n series: String(item[seriesField!])\n }\n })\n } else {\n // Use D3 ordinal color scale for categorical series\n const uniqueSeriesValues = [...new Set(data.map(item => String(item[seriesField!])))]\n const colorScale = scaleOrdinal<string>()\n .domain(uniqueSeriesValues)\n .range(colorPalette?.colors \|\| CHART_COLORS)\n \n treemapData = data.map((item) => ({\n name: formatTimeValue(item[xAxisField], granularity) \|\| String(item[xAxisField]) \|\| 'Unknown',\n size: typeof item[yAxisField] === 'string' \n ? parseFloat(item[yAxisField]) \n : (item[yAxisField] \|\| 0),\n fill: colorScale(String(item[seriesField!])),\n series: String(item[seriesField!])\n }))\n }\n } else {\n // No series grouping - use index-based colors\n treemapData = data.map((item, index) => ({\n name: formatTimeValue(item[xAxisField], granularity) \|\| String(item[xAxisField]) \|\| 'Unknown',\n size: typeof item[yAxisField] === 'string' \n ? parseFloat(item[yAxisField]) \n : (item[yAxisField] \|\| 0),\n fill: (colorPalette?.colors && colorPalette.colors[index % colorPalette.colors.length]) \|\| CHART_COLORS[index % CHART_COLORS.length]\n }))\n }\n } else {\n // Legacy format or auto-detection\n const firstRow = data[0]\n const keys = Object.keys(firstRow)\n \n // Try to find name/label field\n const nameField = keys.find(key => \n typeof firstRow[key] === 'string' \|\|\n key.toLowerCase().includes('name') \|\|\n key.toLowerCase().includes('label') \|\|\n key.toLowerCase().includes('category')\n ) \|\| keys[0]\n\n // Find a numeric field for size - look for 'size' field first, then any numeric\n const sizeField = keys.find(key => key.toLowerCase().includes('size')) \|\|\n keys.find(key => \n typeof firstRow[key] === 'number' && key !== nameField\n ) \|\| keys[1]\n\n if (!sizeField) {\n return (\n <div className=\"dc:flex dc:items-center dc:justify-center dc:w-full text-dc-warning\" style={{ height }}>\n <div className=\"dc:text-center\">\n <div className=\"dc:text-sm dc:font-semibold dc:mb-1\">Configuration Error</div>\n <div className=\"dc:text-xs\">No numeric field found for treemap chart size</div>\n </div>\n </div>\n )\n }\n\n // Transform data for treemap chart\n treemapData = data.map((item, index) => {\n let name = item[nameField]\n // Handle boolean values with better labels\n if (typeof name === 'boolean') {\n name = name ? 'Active' : 'Inactive'\n } else if (name === 'true' \|\| name === 'false') {\n name = name === 'true' ? 'Active' : 'Inactive'\n } else {\n name = String(name)\n }\n return {\n name,\n size: typeof item[sizeField] === 'string' \n ? parseFloat(item[sizeField]) \n : (item[sizeField] \|\| 0),\n fill: (colorPalette?.colors && colorPalette.colors[index % colorPalette.colors.length]) \|\| CHART_COLORS[index % CHART_COLORS.length]\n }\n })\n }\n\n // Filter out zero/null values and ensure positive sizes\n treemapData = treemapData.filter(item => item.size != null && item.size > 0)\n \n if (treemapData.length === 0) {\n return (\n <div className=\"dc:flex dc:items-center dc:justify-center dc:w-full text-dc-text-muted\" style={{ height }}>\n <div className=\"dc:text-center\">\n <div className=\"dc:text-sm dc:font-semibold dc:mb-1\">No valid data</div>\n <div className=\"dc:text-xs text-dc-text-secondary\">No valid data points for treemap chart after transformation</div>\n </div>\n </div>\n )\n }\n\n // Custom content renderer for treemap cells with HTML overlays\n const CustomizedContent = (props: any) => {\n const { x, y, width, height, index, name, size } = props\n\n if (width < 20 \|\| height < 20) return null // Don't render content for very small cells\n\n const handleClick = (event: React.MouseEvent) => {\n event.stopPropagation()\n const cellData = treemapData[index]\n if (cellData && onDataPointClick) {\n // Use query measures for proper field name (chartConfig.yAxis may contain display labels)\n const measureField = queryObject?.measures?.[0] \|\| chartConfig?.yAxis?.[0] \|\| ''\n onDataPointClick({\n dataPoint: cellData,\n clickedField: measureField,\n xValue: name,\n position: { x: event.clientX, y: event.clientY },\n nativeEvent: event\n })\n }\n }\n\n return (\n <g>\n <rect\n x={x}\n y={y}\n width={width}\n height={height}\n style={{\n fill: treemapData[index]?.fill \|\| ((colorPalette?.colors && colorPalette.colors[index % colorPalette.colors.length]) \|\| CHART_COLORS[index % CHART_COLORS.length]),\n fillOpacity: hoveredIndex !== null ? (hoveredIndex === index ? 1 : 0.6) : 0.8,\n stroke: '#fff',\n strokeWidth: 2,\n cursor: drillEnabled ? 'pointer' : 'default',\n pointerEvents: 'all' // Ensure rect captures click events\n }}\n onMouseEnter={() => setHoveredIndex(index)}\n onMouseLeave={() => setHoveredIndex(null)}\n onClick={drillEnabled && onDataPointClick ? handleClick : undefined}\n />\n <foreignObject \n x={x} \n y={y} \n width={width} \n height={height}\n style={{ pointerEvents: 'none', overflow: 'visible' }}\n >\n <div \n style={{\n width: '100%',\n height: '100%',\n display: 'flex',\n flexDirection: 'column',\n alignItems: 'center',\n justifyContent: 'center',\n padding: '4px',\n boxSizing: 'border-box',\n color: '#ffffff',\n textShadow: '0 1px 2px rgba(0,0,0,0.8)',\n fontFamily: 'system-ui, -apple-system, sans-serif',\n overflow: 'hidden'\n }}\n >\n {width > 40 && height > 30 && (\n <div \n style={{\n fontSize: `${Math.max(10, Math.min(width / 8, height / 8, 16))}px`,\n fontWeight: '600',\n textAlign: 'center',\n lineHeight: '1.2',\n marginBottom: width > 60 && height > 45 ? '4px' : '0',\n wordBreak: 'break-word',\n hyphens: 'auto'\n }}\n >\n {name}\n </div>\n )}\n {width > 60 && height > 45 && (\n <div\n style={{\n fontSize: `${Math.max(8, Math.min(width / 10, height / 10, 14))}px`,\n textAlign: 'center',\n opacity: 0.9\n }}\n >\n {safeDisplayConfig.leftYAxisFormat\n ? formatAxisValue(size, safeDisplayConfig.leftYAxisFormat)\n : (typeof size === 'number' ? size.toLocaleString() : size)\n }\n </div>\n )}\n </div>\n </foreignObject>\n </g>\n )\n }\n\n // Check if we have series data for legend\n const hasSeriesData = treemapData.some(item => 'series' in item)\n const uniqueSeries = hasSeriesData \n ? [...new Set(treemapData.map(item => item.series).filter(Boolean))]\n : []\n \n // For numeric series, create a legend showing the color scale\n let legendPayload: any[] = []\n if (safeDisplayConfig.showLegend && seriesField) {\n \n if (isNumericSeries) {\n // Create color scale legend for numeric values\n const minValue = Math.min(...data.map(item => {\n const value = item[seriesField!]\n return typeof value === 'string' ? parseFloat(value) : value\n }))\n const maxValue = Math.max(...data.map(item => {\n const value = item[seriesField!]\n return typeof value === 'string' ? parseFloat(value) : value\n }))\n \n \n // Create legend entries showing color scale\n legendPayload = CHART_COLORS_GRADIENT.map((color, index) => {\n const ratio = index / (CHART_COLORS_GRADIENT.length - 1)\n const value = minValue + (maxValue - minValue) * ratio\n return {\n value: safeDisplayConfig.leftYAxisFormat\n ? formatAxisValue(value, safeDisplayConfig.leftYAxisFormat)\n : value.toFixed(2),\n type: 'rect',\n color: color\n }\n })\n } else if (uniqueSeries.length > 1) {\n // Use categorical legend for non-numeric series\n legendPayload = uniqueSeries.map((series, index) => ({\n value: series,\n type: 'rect',\n color: CHART_COLORS[index % CHART_COLORS.length]\n }))\n }\n \n }\n\n // Calculate height adjustment for legend\n const hasLegend = safeDisplayConfig.showLegend && legendPayload.length > 0\n const adjustedHeight = hasLegend \n ? (typeof height === 'string' && height.includes('%') \n ? height \n : typeof height === 'number' \n ? height + 60 \n : `calc(${height} + 60px)`)\n : height\n\n return (\n <div className=\"dc:w-full\" style={{ height: adjustedHeight }}>\n <ChartContainer height={hasLegend ? `calc(100% - 50px)` : \"100%\"}>\n <Treemap\n data={treemapData}\n dataKey=\"size\"\n aspectRatio={4/3}\n stroke=\"#fff\"\n content={<CustomizedContent />}\n >\n {safeDisplayConfig.showTooltip && (\n <ChartTooltip\n formatter={safeDisplayConfig.leftYAxisFormat\n ? (value: any, name: string) => [formatAxisValue(value, safeDisplayConfig.leftYAxisFormat), name]\n : undefined\n }\n />\n )}\n </Treemap>\n </ChartContainer>\n \n {/* Custom Legend outside ChartContainer */}\n {hasLegend && (\n <div className=\"dc:flex dc:justify-center dc:items-center dc:mt-4 dc:pb-2\">\n {isNumericSeries ? (\n // Gradient legend for numeric series\n <div className=\"dc:flex dc:flex-col dc:items-center\">\n <div className=\"dc:text-xs dc:font-semibold text-dc-text-primary dc:mb-2\">\n {seriesField ? getFieldLabel(seriesField) : ''}\n </div>\n <div className=\"dc:flex dc:items-center dc:gap-2\">\n <span className=\"dc:text-xs text-dc-text-muted\">\n {safeDisplayConfig.leftYAxisFormat\n ? formatAxisValue(Math.min(...data.map(item => {\n const value = item[seriesField!]\n return typeof value === 'string' ? parseFloat(value) : value\n })), safeDisplayConfig.leftYAxisFormat)\n : Math.min(...data.map(item => {\n const value = item[seriesField!]\n return typeof value === 'string' ? parseFloat(value) : value\n })).toFixed(2)\n }\n </span>\n <div\n className=\"dc:h-4 dc:rounded-sm\"\n style={{\n width: '200px',\n background: `linear-gradient(to right, ${CHART_COLORS_GRADIENT.join(', ')})`\n }}\n />\n <span className=\"dc:text-xs text-dc-text-muted\">\n {safeDisplayConfig.leftYAxisFormat\n ? formatAxisValue(Math.max(...data.map(item => {\n const value = item[seriesField!]\n return typeof value === 'string' ? parseFloat(value) : value\n })), safeDisplayConfig.leftYAxisFormat)\n : Math.max(...data.map(item => {\n const value = item[seriesField!]\n return typeof value === 'string' ? parseFloat(value) : value\n })).toFixed(2)\n }\n </span>\n </div>\n </div>\n ) : (\n // Discrete legend for categorical series\n <div className=\"dc:flex dc:flex-wrap dc:justify-center dc:gap-4\">\n {legendPayload.map((item, index) => (\n <div key={index} className=\"dc:flex dc:items-center dc:gap-2\">\n <div\n className=\"dc:w-3 dc:h-3 rounded-xs\"\n style={{ backgroundColor: item.color }}\n />\n <span className=\"dc:text-xs text-dc-text-muted\">\n {item.value}\n </span>\n </div>\n ))}\n </div>\n )}\n </div>\n )}\n </div>\n )\n } catch (error) {\n // 'TreeMapChart rendering error\n return (\n <div className=\"dc:flex dc:flex-col dc:items-center dc:justify-center dc:w-full text-dc-error dc:p-4\" style={{ height }}>\n <div className=\"dc:text-center\">\n <div className=\"dc:text-sm dc:font-semibold dc:mb-1\">TreeMap Chart Error</div>\n <div className=\"dc:text-xs dc:mb-2\">{error instanceof Error ? error.message : 'Unknown rendering error'}</div>\n <div className=\"dc:text-xs text-dc-text-muted\">Check the data and configuration</div>\n </div>\n </div>\n )\n }\n})\n\nexport default TreeMapChart"],"mappings":"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"}

package/dist/client/chunks/{chart-waterfall-Z65TGMUO.js → chart-waterfall-C2nVN4pn.js} RENAMED Viewed

@@ -234,4 +234,4 @@ var D = s.memo(function({ data: e, chartConfig: s, displayConfig: b = {}, height
 //#endregion
 export { b as t };
-//# sourceMappingURL=chart-waterfall-Z65TGMUO.js.map
+//# sourceMappingURL=chart-waterfall-C2nVN4pn.js.map

package/dist/client/chunks/{chart-waterfall-Z65TGMUO.js.map → chart-waterfall-C2nVN4pn.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"chart-waterfall-Z65TGMUO.js","names":[],"sources":["../../../src/client/components/charts/WaterfallChart.tsx"],"sourcesContent":["import React, { useMemo } from 'react'\nimport { ComposedChart, Bar, Line, XAxis, YAxis, CartesianGrid, Cell, LabelList, Legend } from 'recharts'\nimport ChartContainer from './ChartContainer'\nimport ChartTooltip from './ChartTooltip'\nimport AngledXAxisTick from './AngledXAxisTick'\nimport { CHART_MARGINS } from '../../utils/chartConstants'\nimport { formatAxisValue } from '../../utils/chartUtils'\nimport { useCubeFieldLabel } from '../../hooks/useCubeFieldLabel'\nimport type { ChartProps } from '../../types'\n\nconst POSITIVE_COLOR = '#22c55e'\nconst NEGATIVE_COLOR = '#ef4444'\nconst TOTAL_COLOR = '#6366f1'\nconst CONNECTOR_COLOR = '#94a3b8'\n\ninterface WaterfallDataPoint {\n label: string\n value: number\n runningBase: number\n isTotal: boolean\n isNegative: boolean\n displayValue: number\n originalIndex: number\n}\n\nfunction transformToWaterfall(\n data: Record<string, unknown>[],\n xField: string,\n yField: string,\n showTotal: boolean,\n getFieldLabel: (field: string) => string\n): WaterfallDataPoint[] {\n let running = 0\n const result: WaterfallDataPoint[] = data.map((row, i) => {\n const label = String(row[xField] ?? `Row ${i + 1}`)\n const rawValue = row[yField]\n const parsed = typeof rawValue === 'number' ? rawValue : parseFloat(String(rawValue ?? ''))\n const value = isNaN(parsed) ? 0 : parsed\n const isNegative = value < 0\n const base = isNegative ? running + value : running\n const point: WaterfallDataPoint = {\n label,\n value: Math.abs(value),\n runningBase: base,\n isTotal: false,\n isNegative,\n displayValue: value,\n originalIndex: i,\n }\n running += value\n return point\n })\n\n if (showTotal) {\n const totalLabel = getFieldLabel(yField) \|\| 'Total'\n result.push({\n label: totalLabel,\n value: Math.abs(running),\n runningBase: running >= 0 ? 0 : running,\n isTotal: true,\n isNegative: running < 0,\n displayValue: running,\n originalIndex: result.length,\n })\n }\n\n return result\n}\n\ninterface ValueLabelProps {\n x?: number\n y?: number\n width?: number\n value?: number\n isNegative?: boolean\n displayValue?: number\n}\n\nfunction ValueLabel(props: ValueLabelProps) {\n const { x = 0, y = 0, width = 0, value = 0, isNegative, displayValue } = props\n if (displayValue === undefined \|\| displayValue === null) return null\n const numericValue = Number(displayValue)\n const isNeg = isNegative \|\| numericValue < 0\n const yPos = isNeg ? y + value + 14 : y - 6\n return (\n <text\n x={x + width / 2}\n y={yPos}\n fill=\"currentColor\"\n textAnchor=\"middle\"\n fontSize={11}\n >\n {numericValue >= 0 ? '+' : ''}{numericValue.toLocaleString()}\n </text>\n )\n}\n\nconst WaterfallChart = React.memo(function WaterfallChart({\n data,\n chartConfig,\n displayConfig = {},\n height = '100%',\n onDataPointClick,\n drillEnabled,\n}: ChartProps) {\n const getFieldLabel = useCubeFieldLabel()\n\n const showTotal = displayConfig?.showTotal ?? true\n const showConnectorLine = displayConfig?.showConnectorLine ?? true\n const showDataLabels = displayConfig?.showDataLabels ?? false\n const yAxisFormat = displayConfig?.leftYAxisFormat\n\n const { xAxisField, yAxisField, configError } = useMemo(() => {\n const xAxisField: string \| undefined = Array.isArray(chartConfig?.xAxis)\n ? chartConfig.xAxis[0]\n : chartConfig?.x\n const yAxisField: string \| undefined = Array.isArray(chartConfig?.yAxis)\n ? chartConfig.yAxis[0]\n : chartConfig?.y?.[0]\n const configError =\n !xAxisField \|\| !yAxisField\n ? 'Waterfall chart requires an X-axis dimension and a Y-axis measure'\n : null\n return { xAxisField, yAxisField, configError }\n }, [chartConfig])\n\n const waterfallData = useMemo(() => {\n if (configError \|\| !data \|\| data.length === 0 \|\| !xAxisField \|\| !yAxisField) return []\n return transformToWaterfall(\n data as Record<string, unknown>[],\n xAxisField,\n yAxisField,\n showTotal,\n getFieldLabel\n )\n }, [data, xAxisField, yAxisField, showTotal, getFieldLabel, configError])\n\n const connectorData = useMemo(() => {\n if (!showConnectorLine \|\| waterfallData.length === 0) return []\n return waterfallData.map((d) => {\n const connectorY = d.isNegative ? d.runningBase : d.runningBase + d.value\n return { label: d.label, _connector: connectorY }\n })\n }, [waterfallData, showConnectorLine])\n\n const chartData = useMemo(() => {\n return waterfallData.map((d, i) => ({\n ...d,\n _connector: connectorData[i]?._connector,\n }))\n }, [waterfallData, connectorData])\n\n try {\n if (!data \|\| data.length === 0) {\n return (\n <div className=\"dc:flex dc:items-center dc:justify-center dc:w-full text-dc-text-muted\" style={{ height }}>\n <div className=\"dc:text-center\">\n <div className=\"dc:text-sm dc:font-semibold dc:mb-1\">No data available</div>\n <div className=\"dc:text-xs text-dc-text-secondary\">No data points to display in waterfall chart</div>\n </div>\n </div>\n )\n }\n\n if (configError) {\n return (\n <div className=\"dc:flex dc:items-center dc:justify-center dc:w-full text-dc-warning\" style={{ height }}>\n <div className=\"dc:text-center\">\n <div className=\"dc:text-sm dc:font-semibold dc:mb-1\">Configuration Error</div>\n <div className=\"dc:text-xs\">{configError}</div>\n </div>\n </div>\n )\n }\n return (\n <div className=\"dc:relative dc:w-full\" style={{ height }}>\n <ChartContainer height=\"100%\">\n <ComposedChart data={chartData} margin={{ ...CHART_MARGINS, left: 40 }} accessibilityLayer={false}>\n <CartesianGrid strokeDasharray=\"3 3\" style={{ pointerEvents: 'none' }} />\n <XAxis dataKey=\"label\" type=\"category\" tick={<AngledXAxisTick />} height={60} />\n <YAxis\n tick={{ fontSize: 12 }}\n tickFormatter={yAxisFormat ? (v) => formatAxisValue(v, yAxisFormat) : undefined}\n />\n <ChartTooltip\n formatter={(value: any, name: any, props: any) => {\n if (name === '_connector') return ['', '']\n const entry = props?.payload\n if (!entry) return [value, name]\n const displayValue = entry.displayValue ?? value\n return [\n yAxisFormat ? formatAxisValue(displayValue, yAxisFormat) : displayValue?.toLocaleString?.() ?? displayValue,\n entry.isTotal ? 'Total' : entry.isNegative ? 'Decrease' : 'Increase',\n ]\n }}\n labelFormatter={(label: string) => label}\n />\n <Legend\n wrapperStyle={{ fontSize: '12px', paddingTop: '8px' }}\n {...{\n payload: [\n { value: 'Increase', type: 'rect' as const, color: POSITIVE_COLOR },\n { value: 'Decrease', type: 'rect' as const, color: NEGATIVE_COLOR },\n ...(showTotal ? [{ value: 'Total', type: 'rect' as const, color: TOTAL_COLOR }] : []),\n ],\n }}\n />\n <Bar dataKey=\"runningBase\" stackId=\"wf\" fill=\"transparent\" legendType=\"none\" isAnimationActive={false} />\n <Bar\n dataKey=\"value\"\n stackId=\"wf\"\n isAnimationActive={false}\n cursor={drillEnabled ? 'pointer' : undefined}\n onClick={(barData: any, _index: number, event: React.MouseEvent) => {\n if (onDataPointClick && drillEnabled && barData && !barData.isTotal) {\n onDataPointClick({\n dataPoint: barData,\n clickedField: yAxisField!,\n xValue: barData.label,\n position: { x: event.clientX, y: event.clientY },\n nativeEvent: event,\n })\n }\n }}\n >\n {showDataLabels && (\n <LabelList\n dataKey=\"displayValue\"\n content={(props: any) => (\n <ValueLabel\n {...props}\n runningBase={chartData[props.index]?.runningBase}\n isNegative={chartData[props.index]?.isNegative}\n displayValue={chartData[props.index]?.displayValue}\n />\n )}\n />\n )}\n {chartData.map((entry, index) => (\n <Cell\n key={`cell-${index}`}\n fill={entry.isTotal ? TOTAL_COLOR : entry.isNegative ? NEGATIVE_COLOR : POSITIVE_COLOR}\n />\n ))}\n </Bar>\n {showConnectorLine && (\n <Line\n type=\"stepAfter\"\n dataKey=\"_connector\"\n stroke={CONNECTOR_COLOR}\n strokeWidth={1.5}\n strokeDasharray=\"4 2\"\n dot={false}\n activeDot={false}\n legendType=\"none\"\n isAnimationActive={false}\n />\n )}\n </ComposedChart>\n </ChartContainer>\n </div>\n )\n } catch (error) {\n return (\n <div className=\"dc:flex dc:flex-col dc:items-center dc:justify-center dc:w-full text-dc-error dc:p-4\" style={{ height }}>\n <div className=\"dc:text-center\">\n <div className=\"dc:text-sm dc:font-semibold dc:mb-1\">Waterfall Chart Error</div>\n <div className=\"dc:text-xs dc:mb-2\">{error instanceof Error ? error.message : 'Unknown rendering error'}</div>\n <div className=\"dc:text-xs text-dc-text-muted\">Check the data and configuration</div>\n </div>\n </div>\n )\n }\n})\n\nexport default WaterfallChart\n"],"mappings":"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"}
1	+ {"version":3,"file":"chart-waterfall-C2nVN4pn.js","names":[],"sources":["../../../src/client/components/charts/WaterfallChart.tsx"],"sourcesContent":["import React, { useMemo } from 'react'\nimport { ComposedChart, Bar, Line, XAxis, YAxis, CartesianGrid, Cell, LabelList, Legend } from 'recharts'\nimport ChartContainer from './ChartContainer'\nimport ChartTooltip from './ChartTooltip'\nimport AngledXAxisTick from './AngledXAxisTick'\nimport { CHART_MARGINS } from '../../utils/chartConstants'\nimport { formatAxisValue } from '../../utils/chartUtils'\nimport { useCubeFieldLabel } from '../../hooks/useCubeFieldLabel'\nimport type { ChartProps } from '../../types'\n\nconst POSITIVE_COLOR = '#22c55e'\nconst NEGATIVE_COLOR = '#ef4444'\nconst TOTAL_COLOR = '#6366f1'\nconst CONNECTOR_COLOR = '#94a3b8'\n\ninterface WaterfallDataPoint {\n label: string\n value: number\n runningBase: number\n isTotal: boolean\n isNegative: boolean\n displayValue: number\n originalIndex: number\n}\n\nfunction transformToWaterfall(\n data: Record<string, unknown>[],\n xField: string,\n yField: string,\n showTotal: boolean,\n getFieldLabel: (field: string) => string\n): WaterfallDataPoint[] {\n let running = 0\n const result: WaterfallDataPoint[] = data.map((row, i) => {\n const label = String(row[xField] ?? `Row ${i + 1}`)\n const rawValue = row[yField]\n const parsed = typeof rawValue === 'number' ? rawValue : parseFloat(String(rawValue ?? ''))\n const value = isNaN(parsed) ? 0 : parsed\n const isNegative = value < 0\n const base = isNegative ? running + value : running\n const point: WaterfallDataPoint = {\n label,\n value: Math.abs(value),\n runningBase: base,\n isTotal: false,\n isNegative,\n displayValue: value,\n originalIndex: i,\n }\n running += value\n return point\n })\n\n if (showTotal) {\n const totalLabel = getFieldLabel(yField) \|\| 'Total'\n result.push({\n label: totalLabel,\n value: Math.abs(running),\n runningBase: running >= 0 ? 0 : running,\n isTotal: true,\n isNegative: running < 0,\n displayValue: running,\n originalIndex: result.length,\n })\n }\n\n return result\n}\n\ninterface ValueLabelProps {\n x?: number\n y?: number\n width?: number\n value?: number\n isNegative?: boolean\n displayValue?: number\n}\n\nfunction ValueLabel(props: ValueLabelProps) {\n const { x = 0, y = 0, width = 0, value = 0, isNegative, displayValue } = props\n if (displayValue === undefined \|\| displayValue === null) return null\n const numericValue = Number(displayValue)\n const isNeg = isNegative \|\| numericValue < 0\n const yPos = isNeg ? y + value + 14 : y - 6\n return (\n <text\n x={x + width / 2}\n y={yPos}\n fill=\"currentColor\"\n textAnchor=\"middle\"\n fontSize={11}\n >\n {numericValue >= 0 ? '+' : ''}{numericValue.toLocaleString()}\n </text>\n )\n}\n\nconst WaterfallChart = React.memo(function WaterfallChart({\n data,\n chartConfig,\n displayConfig = {},\n height = '100%',\n onDataPointClick,\n drillEnabled,\n}: ChartProps) {\n const getFieldLabel = useCubeFieldLabel()\n\n const showTotal = displayConfig?.showTotal ?? true\n const showConnectorLine = displayConfig?.showConnectorLine ?? true\n const showDataLabels = displayConfig?.showDataLabels ?? false\n const yAxisFormat = displayConfig?.leftYAxisFormat\n\n const { xAxisField, yAxisField, configError } = useMemo(() => {\n const xAxisField: string \| undefined = Array.isArray(chartConfig?.xAxis)\n ? chartConfig.xAxis[0]\n : chartConfig?.x\n const yAxisField: string \| undefined = Array.isArray(chartConfig?.yAxis)\n ? chartConfig.yAxis[0]\n : chartConfig?.y?.[0]\n const configError =\n !xAxisField \|\| !yAxisField\n ? 'Waterfall chart requires an X-axis dimension and a Y-axis measure'\n : null\n return { xAxisField, yAxisField, configError }\n }, [chartConfig])\n\n const waterfallData = useMemo(() => {\n if (configError \|\| !data \|\| data.length === 0 \|\| !xAxisField \|\| !yAxisField) return []\n return transformToWaterfall(\n data as Record<string, unknown>[],\n xAxisField,\n yAxisField,\n showTotal,\n getFieldLabel\n )\n }, [data, xAxisField, yAxisField, showTotal, getFieldLabel, configError])\n\n const connectorData = useMemo(() => {\n if (!showConnectorLine \|\| waterfallData.length === 0) return []\n return waterfallData.map((d) => {\n const connectorY = d.isNegative ? d.runningBase : d.runningBase + d.value\n return { label: d.label, _connector: connectorY }\n })\n }, [waterfallData, showConnectorLine])\n\n const chartData = useMemo(() => {\n return waterfallData.map((d, i) => ({\n ...d,\n _connector: connectorData[i]?._connector,\n }))\n }, [waterfallData, connectorData])\n\n try {\n if (!data \|\| data.length === 0) {\n return (\n <div className=\"dc:flex dc:items-center dc:justify-center dc:w-full text-dc-text-muted\" style={{ height }}>\n <div className=\"dc:text-center\">\n <div className=\"dc:text-sm dc:font-semibold dc:mb-1\">No data available</div>\n <div className=\"dc:text-xs text-dc-text-secondary\">No data points to display in waterfall chart</div>\n </div>\n </div>\n )\n }\n\n if (configError) {\n return (\n <div className=\"dc:flex dc:items-center dc:justify-center dc:w-full text-dc-warning\" style={{ height }}>\n <div className=\"dc:text-center\">\n <div className=\"dc:text-sm dc:font-semibold dc:mb-1\">Configuration Error</div>\n <div className=\"dc:text-xs\">{configError}</div>\n </div>\n </div>\n )\n }\n return (\n <div className=\"dc:relative dc:w-full\" style={{ height }}>\n <ChartContainer height=\"100%\">\n <ComposedChart data={chartData} margin={{ ...CHART_MARGINS, left: 40 }} accessibilityLayer={false}>\n <CartesianGrid strokeDasharray=\"3 3\" style={{ pointerEvents: 'none' }} />\n <XAxis dataKey=\"label\" type=\"category\" tick={<AngledXAxisTick />} height={60} />\n <YAxis\n tick={{ fontSize: 12 }}\n tickFormatter={yAxisFormat ? (v) => formatAxisValue(v, yAxisFormat) : undefined}\n />\n <ChartTooltip\n formatter={(value: any, name: any, props: any) => {\n if (name === '_connector') return ['', '']\n const entry = props?.payload\n if (!entry) return [value, name]\n const displayValue = entry.displayValue ?? value\n return [\n yAxisFormat ? formatAxisValue(displayValue, yAxisFormat) : displayValue?.toLocaleString?.() ?? displayValue,\n entry.isTotal ? 'Total' : entry.isNegative ? 'Decrease' : 'Increase',\n ]\n }}\n labelFormatter={(label: string) => label}\n />\n <Legend\n wrapperStyle={{ fontSize: '12px', paddingTop: '8px' }}\n {...{\n payload: [\n { value: 'Increase', type: 'rect' as const, color: POSITIVE_COLOR },\n { value: 'Decrease', type: 'rect' as const, color: NEGATIVE_COLOR },\n ...(showTotal ? [{ value: 'Total', type: 'rect' as const, color: TOTAL_COLOR }] : []),\n ],\n }}\n />\n <Bar dataKey=\"runningBase\" stackId=\"wf\" fill=\"transparent\" legendType=\"none\" isAnimationActive={false} />\n <Bar\n dataKey=\"value\"\n stackId=\"wf\"\n isAnimationActive={false}\n cursor={drillEnabled ? 'pointer' : undefined}\n onClick={(barData: any, _index: number, event: React.MouseEvent) => {\n if (onDataPointClick && drillEnabled && barData && !barData.isTotal) {\n onDataPointClick({\n dataPoint: barData,\n clickedField: yAxisField!,\n xValue: barData.label,\n position: { x: event.clientX, y: event.clientY },\n nativeEvent: event,\n })\n }\n }}\n >\n {showDataLabels && (\n <LabelList\n dataKey=\"displayValue\"\n content={(props: any) => (\n <ValueLabel\n {...props}\n runningBase={chartData[props.index]?.runningBase}\n isNegative={chartData[props.index]?.isNegative}\n displayValue={chartData[props.index]?.displayValue}\n />\n )}\n />\n )}\n {chartData.map((entry, index) => (\n <Cell\n key={`cell-${index}`}\n fill={entry.isTotal ? TOTAL_COLOR : entry.isNegative ? NEGATIVE_COLOR : POSITIVE_COLOR}\n />\n ))}\n </Bar>\n {showConnectorLine && (\n <Line\n type=\"stepAfter\"\n dataKey=\"_connector\"\n stroke={CONNECTOR_COLOR}\n strokeWidth={1.5}\n strokeDasharray=\"4 2\"\n dot={false}\n activeDot={false}\n legendType=\"none\"\n isAnimationActive={false}\n />\n )}\n </ComposedChart>\n </ChartContainer>\n </div>\n )\n } catch (error) {\n return (\n <div className=\"dc:flex dc:flex-col dc:items-center dc:justify-center dc:w-full text-dc-error dc:p-4\" style={{ height }}>\n <div className=\"dc:text-center\">\n <div className=\"dc:text-sm dc:font-semibold dc:mb-1\">Waterfall Chart Error</div>\n <div className=\"dc:text-xs dc:mb-2\">{error instanceof Error ? error.message : 'Unknown rendering error'}</div>\n <div className=\"dc:text-xs text-dc-text-muted\">Check the data and configuration</div>\n </div>\n </div>\n )\n }\n})\n\nexport default WaterfallChart\n"],"mappings":"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"}

package/dist/client/chunks/{charts-core-CJlGzwsW.js → charts-core-Cy3rHADX.js} RENAMED Viewed

@@ -212,4 +212,4 @@ function s({ value: o, onChange: s, axisLabel: c, previewValue: l = 125e4 }) {
 //#endregion
 export { i as n, s as t };
-//# sourceMappingURL=charts-core-CJlGzwsW.js.map
+//# sourceMappingURL=charts-core-Cy3rHADX.js.map