From a09edc1ab012208060cb5f241e4e8dee7229af4d Mon Sep 17 00:00:00 2001 From: "Atishay Jain (from Dev Box)" Date: Wed, 26 Nov 2025 20:57:04 +0530 Subject: [PATCH 1/9] Limit d3 color to the utility needed --- .../src/components/ChartTable/ChartTable.tsx | 16 ++++++++-------- .../DeclarativeChart/DeclarativeChart.tsx | 6 +++--- 2 files changed, 11 insertions(+), 11 deletions(-) diff --git a/packages/charts/react-charts/library/src/components/ChartTable/ChartTable.tsx b/packages/charts/react-charts/library/src/components/ChartTable/ChartTable.tsx index 26429390e36e3..40e8edd325810 100644 --- a/packages/charts/react-charts/library/src/components/ChartTable/ChartTable.tsx +++ b/packages/charts/react-charts/library/src/components/ChartTable/ChartTable.tsx @@ -7,17 +7,17 @@ import { useRtl } from '../../utilities/utilities'; import { ImageExportOptions } from '../../types/index'; import { toImage } from '../../utilities/image-export-utils'; import { tokens } from '@fluentui/react-theme'; -import * as d3 from 'd3-color'; +import { color as d3Color, rgb as d3Rgb } from 'd3-color'; import { getColorContrast } from '../../utilities/colors'; import { resolveCSSVariables } from '../../utilities/utilities'; function invertHexColor(hex: string): string { - const color = d3.color(hex); - if (!color) { + const parsedColor = d3Color(hex); + if (!parsedColor) { return tokens.colorNeutralForeground1!; } - const rgb = color.rgb(); - return d3.rgb(255 - rgb.r, 255 - rgb.g, 255 - rgb.b).formatHex(); + const parsedRgb = parsedColor.rgb(); + return d3Rgb(255 - parsedRgb.r, 255 - parsedRgb.g, 255 - parsedRgb.b).formatHex(); } function getSafeBackgroundColor(chartContainer: HTMLElement, foreground?: string, background?: string): string { @@ -30,8 +30,8 @@ function getSafeBackgroundColor(chartContainer: HTMLElement, foreground?: string const resolvedFg = resolveCSSVariables(chartContainer, foreground || fallbackFg); const resolvedBg = resolveCSSVariables(chartContainer, background || fallbackBg); - const fg = d3.color(resolvedFg); - const bg = d3.color(resolvedBg); + const fg = d3Color(resolvedFg); + const bg = d3Color(resolvedBg); if (!fg || !bg) { return resolvedBg; @@ -71,7 +71,7 @@ export const ChartTable: React.FunctionComponent = React.forwar const bgColorSet = new Set(); headers.forEach(header => { const bg = header?.style?.backgroundColor; - const normalized = d3.color(bg || '')?.formatHex(); + const normalized = d3Color(bg || '')?.formatHex(); if (normalized) { bgColorSet.add(normalized); } diff --git a/packages/charts/react-charts/library/src/components/DeclarativeChart/DeclarativeChart.tsx b/packages/charts/react-charts/library/src/components/DeclarativeChart/DeclarativeChart.tsx index ca56f65f5a93c..a00530cf005b2 100644 --- a/packages/charts/react-charts/library/src/components/DeclarativeChart/DeclarativeChart.tsx +++ b/packages/charts/react-charts/library/src/components/DeclarativeChart/DeclarativeChart.tsx @@ -14,7 +14,7 @@ import type { GridProperties } from './PlotlySchemaAdapter'; import { tokens } from '@fluentui/react-theme'; import { ThemeContext_unstable as V9ThemeContext } from '@fluentui/react-shared-contexts'; import { Theme, webLightTheme } from '@fluentui/tokens'; -import * as d3Color from 'd3-color'; +import { hsl as d3Hsl } from 'd3-color'; import { correctYearMonth, @@ -326,8 +326,8 @@ const useIsDarkTheme = (): boolean => { const v9Theme: Theme = parentV9Theme ? parentV9Theme : webLightTheme; // Get background and foreground colors - const backgroundColor = d3Color.hsl(v9Theme.colorNeutralBackground1); - const foregroundColor = d3Color.hsl(v9Theme.colorNeutralForeground1); + const backgroundColor = d3Hsl(v9Theme.colorNeutralBackground1); + const foregroundColor = d3Hsl(v9Theme.colorNeutralForeground1); const isDarkTheme = backgroundColor.l < foregroundColor.l; From 575ee59088a82899d28e49dff6f31207dba04716 Mon Sep 17 00:00:00 2001 From: "Atishay Jain (from Dev Box)" Date: Sun, 30 Nov 2025 15:40:53 +0530 Subject: [PATCH 2/9] Add support for vega lite for fluent charts --- .../react-charts/VEGA_SCHEMA_INTEGRATION.md | 247 + .../library/etc/react-charts.api.md | 23 +- .../charts/react-charts/library/package.json | 8 +- .../library/src/VegaDeclarativeChart.ts | 1 + .../DeclarativeChart/DeclarativeChart.tsx | 8 +- .../DeclarativeChart/PlotlySchemaAdapter.ts | 229 +- .../DeclarativeChart/VegaLiteSchemaAdapter.ts | 1635 +++++ .../VegaLiteSchemaAdapterUT.test.tsx | 350 + .../DeclarativeChart/VegaLiteTypes.ts | 516 ++ .../VegaDeclarativeChart.BarLine.test.tsx | 239 + .../VegaDeclarativeChart.ChartType.test.tsx | 235 + ...aDeclarativeChart.FinancialRatios.test.tsx | 72 + .../VegaDeclarativeChart.Issues.test.tsx | 224 + ...gaDeclarativeChart.ScatterHeatmap.test.tsx | 333 + ...DeclarativeChart.SchemaValidation.test.tsx | 453 ++ .../VegaDeclarativeChart.Snapshots.test.tsx | 267 + .../VegaDeclarativeChart.test.tsx | 204 + .../VegaDeclarativeChart.tsx | 603 ++ ...gaDeclarativeChart.ChartType.test.tsx.snap | 156 + ...arativeChart.FinancialRatios.test.tsx.snap | 471 ++ .../VegaDeclarativeChart.Issues.test.tsx.snap | 156 + ...larativeChart.ScatterHeatmap.test.tsx.snap | 2438 +++++++ ...gaDeclarativeChart.Snapshots.test.tsx.snap | 5634 +++++++++++++++++ .../components/VegaDeclarativeChart/index.ts | 1 + .../charts/react-charts/library/src/index.ts | 1 + .../react-charts/stories/generate-imports.js | 37 + .../docs/DeclarativeChartOverview.md | 223 + .../VegaDeclarativeChartDefault.stories.tsx | 332 + .../VegaDeclarativeChart/index.stories.tsx | 4 + .../schemas/ad_ctr_scatter.json | 34 + .../schemas/age_distribution_bar.json | 24 + .../schemas/air_quality_heatmap.json | 37 + .../schemas/api_response_line.json | 28 + .../schemas/area_multiSeries_noStack.json | 51 + .../schemas/area_single_tozeroy.json | 43 + .../schemas/area_stacked_tonexty.json | 74 + .../schemas/areachart.json | 25 + .../schemas/attendance_bar.json | 21 + .../schemas/attendance_heatmap.json | 45 + .../schemas/bandwidth_stacked_area.json | 23 + .../schemas/barchart.json | 19 + .../schemas/biodiversity_grouped.json | 25 + .../schemas/bmi_scatter.json | 37 + .../schemas/budget_actual_grouped.json | 28 + .../schemas/bug_priority_donut.json | 30 + .../schemas/campaign_performance_combo.json | 33 + .../schemas/cashflow_combo.json | 39 + .../schemas/category_sales_stacked.json | 27 + .../schemas/channel_distribution_donut.json | 29 + .../schemas/climate_zones_scatter.json | 27 + .../schemas/co2_emissions_area.json | 26 + .../schemas/code_commits_combo.json | 33 + .../schemas/conversion_funnel.json | 21 + .../schemas/course_enrollment_donut.json | 29 + .../schemas/customer_segments_donut.json | 28 + .../schemas/daily_orders_line.json | 24 + .../schemas/defect_rates_bar.json | 25 + .../schemas/deployment_frequency_bar.json | 23 + .../schemas/discount_impact_combo.json | 37 + .../schemas/disease_prevalence_donut.json | 29 + .../schemas/dividend_timeline_area.json | 30 + .../schemas/donutchart.json | 18 + .../schemas/downtime_stacked.json | 27 + .../schemas/dropout_analysis_line.json | 30 + .../schemas/efficiency_ratio_combo.json | 33 + .../schemas/energy_consumption_stacked.json | 27 + .../schemas/engagement_heatmap.json | 45 + .../schemas/error_rates_bar.json | 25 + .../schemas/expense_horizontal_bar.json | 22 + .../schemas/financial_ratios_heatmap.json | 37 + .../formatting_combined_date_percentage.json | 36 + .../schemas/formatting_date_full_month.json | 36 + .../schemas/formatting_date_month_day.json | 44 + .../schemas/formatting_date_year_month.json | 38 + .../schemas/formatting_dates_numbers.json | 42 + .../formatting_number_decimal_places.json | 32 + .../schemas/formatting_number_si_prefix.json | 33 + .../formatting_percentage_2decimals.json | 33 + .../formatting_percentage_decimals.json | 35 + .../schemas/game_scores_line.json | 28 + .../schemas/genre_popularity_donut.json | 29 + .../schemas/grade_distribution_bar.json | 33 + .../schemas/graduation_rates_area.json | 29 + .../schemas/grouped_bar.json | 24 + .../schemas/health_metrics_scatter.json | 35 + .../schemas/heatmapchart.json | 24 + .../schemas/histogram_basic_count.json | 79 + .../schemas/histogram_custom_bins.json | 81 + .../schemas/histogram_max_aggregate.json | 68 + .../schemas/histogram_mean_aggregate.json | 68 + .../schemas/histogram_sum_aggregate.json | 66 + .../schemas/hospital_capacity_heatmap.json | 40 + .../schemas/impression_trends_line.json | 28 + .../schemas/influencer_metrics_grouped.json | 24 + .../schemas/inventory_levels_area.json | 28 + .../schemas/inventory_turnover_area.json | 24 + .../schemas/lead_generation_combo.json | 33 + .../schemas/league_standings_grouped.json | 22 + .../schemas/learning_progress_combo.json | 33 + .../schemas/line_bar_combo.json | 32 + .../schemas/linechart.json | 25 + .../schemas/linechart_annotations.json | 37 + .../schemas/linechart_colorFillBars.json | 30 + .../schemas/log_scale_growth.json | 26 + .../schemas/machine_utilization_heatmap.json | 35 + .../schemas/maintenance_schedule_rect.json | 32 + .../schemas/market_share_donut.json | 18 + .../schemas/medication_adherence_stacked.json | 27 + .../multiplot_customer_demographics.json | 47 + .../schemas/multiplot_ecommerce_kpis.json | 44 + .../schemas/multiplot_employee_survey.json | 60 + .../multiplot_inventory_fulfillment.json | 45 + .../schemas/multiplot_marketing_campaign.json | 52 + .../multiplot_mobile_app_analytics.json | 48 + .../multiplot_performance_metrics.json | 41 + .../schemas/multiplot_sales_comparison.json | 41 + .../schemas/multiplot_server_monitoring.json | 54 + .../schemas/multiplot_stock_comparison.json | 41 + .../schemas/multiplot_web_analytics.json | 45 + .../schemas/ordering_category_ascending.json | 36 + .../schemas/ordering_category_descending.json | 34 + .../schemas/ordering_custom_array.json | 32 + .../schemas/ordering_value_ascending.json | 35 + .../schemas/ordering_value_descending.json | 36 + .../schemas/patient_vitals_line.json | 22 + .../schemas/performance_scatter.json | 32 + .../schemas/player_age_distribution_bar.json | 20 + .../schemas/player_stats_scatter.json | 26 + .../schemas/portfolio_donut.json | 23 + .../schemas/precipitation_bar.json | 27 + .../schemas/price_demand_scatter.json | 27 + .../schemas/product_performance_grouped.json | 24 + .../schemas/production_output_line.json | 28 + .../schemas/profit_loss_bar.json | 23 + .../schemas/quality_metrics_scatter.json | 28 + .../schemas/recovery_timeline_area.json | 33 + .../schemas/renewable_energy_donut.json | 28 + .../schemas/revenue_bar_vertical.json | 20 + .../schemas/revenue_streams_stacked.json | 27 + .../schemas/roi_scatter.json | 44 + .../schemas/sales_trend_line.json | 27 + .../schemas/scatter_correlation.json | 24 + .../schemas/scatterchart.json | 22 + .../schemas/sea_level_log_area.json | 31 + .../schemas/season_performance_area.json | 30 + .../schemas/seasonal_trends_area_line.json | 40 + .../schemas/sentiment_stacked.json | 32 + .../schemas/server_load_heatmap.json | 37 + .../schemas/shift_productivity_grouped.json | 22 + .../schemas/shipping_times_bar.json | 19 + .../schemas/skill_assessment_stacked.json | 24 + .../schemas/social_reach_area.json | 28 + .../schemas/stacked_bar_vertical.json | 27 + .../schemas/stock_price_area.json | 37 + .../schemas/streaming_viewership_combo.json | 33 + .../schemas/student_performance_grouped.json | 28 + .../schemas/study_hours_scatter.json | 30 + .../schemas/supply_chain_horizontal.json | 20 + .../schemas/symptom_severity_combo.json | 33 + .../schemas/system_uptime_line.json | 33 + .../schemas/team_rankings_horizontal.json | 21 + .../schemas/temperature_area.json | 24 + .../schemas/temperature_trend_line.json | 33 + .../schemas/test_scores_line.json | 28 + .../tournament_brackets_horizontal.json | 27 + .../schemas/treatment_outcomes_grouped.json | 33 + .../schemas/user_sessions_area.json | 28 + .../schemas/viral_growth_log.json | 33 + .../schemas/weather_patterns_combo.json | 38 + .../schemas/website_traffic_heatmap.json | 32 + 170 files changed, 19622 insertions(+), 130 deletions(-) create mode 100644 packages/charts/react-charts/VEGA_SCHEMA_INTEGRATION.md create mode 100644 packages/charts/react-charts/library/src/VegaDeclarativeChart.ts create mode 100644 packages/charts/react-charts/library/src/components/DeclarativeChart/VegaLiteSchemaAdapter.ts create mode 100644 packages/charts/react-charts/library/src/components/DeclarativeChart/VegaLiteSchemaAdapterUT.test.tsx create mode 100644 packages/charts/react-charts/library/src/components/DeclarativeChart/VegaLiteTypes.ts create mode 100644 packages/charts/react-charts/library/src/components/VegaDeclarativeChart/VegaDeclarativeChart.BarLine.test.tsx create mode 100644 packages/charts/react-charts/library/src/components/VegaDeclarativeChart/VegaDeclarativeChart.ChartType.test.tsx create mode 100644 packages/charts/react-charts/library/src/components/VegaDeclarativeChart/VegaDeclarativeChart.FinancialRatios.test.tsx create mode 100644 packages/charts/react-charts/library/src/components/VegaDeclarativeChart/VegaDeclarativeChart.Issues.test.tsx create mode 100644 packages/charts/react-charts/library/src/components/VegaDeclarativeChart/VegaDeclarativeChart.ScatterHeatmap.test.tsx create mode 100644 packages/charts/react-charts/library/src/components/VegaDeclarativeChart/VegaDeclarativeChart.SchemaValidation.test.tsx create mode 100644 packages/charts/react-charts/library/src/components/VegaDeclarativeChart/VegaDeclarativeChart.Snapshots.test.tsx create mode 100644 packages/charts/react-charts/library/src/components/VegaDeclarativeChart/VegaDeclarativeChart.test.tsx create mode 100644 packages/charts/react-charts/library/src/components/VegaDeclarativeChart/VegaDeclarativeChart.tsx create mode 100644 packages/charts/react-charts/library/src/components/VegaDeclarativeChart/__snapshots__/VegaDeclarativeChart.ChartType.test.tsx.snap create mode 100644 packages/charts/react-charts/library/src/components/VegaDeclarativeChart/__snapshots__/VegaDeclarativeChart.FinancialRatios.test.tsx.snap create mode 100644 packages/charts/react-charts/library/src/components/VegaDeclarativeChart/__snapshots__/VegaDeclarativeChart.Issues.test.tsx.snap create mode 100644 packages/charts/react-charts/library/src/components/VegaDeclarativeChart/__snapshots__/VegaDeclarativeChart.ScatterHeatmap.test.tsx.snap create mode 100644 packages/charts/react-charts/library/src/components/VegaDeclarativeChart/__snapshots__/VegaDeclarativeChart.Snapshots.test.tsx.snap create mode 100644 packages/charts/react-charts/library/src/components/VegaDeclarativeChart/index.ts create mode 100644 packages/charts/react-charts/stories/generate-imports.js create mode 100644 packages/charts/react-charts/stories/src/VegaDeclarativeChart/VegaDeclarativeChartDefault.stories.tsx create mode 100644 packages/charts/react-charts/stories/src/VegaDeclarativeChart/index.stories.tsx create mode 100644 packages/charts/react-charts/stories/src/VegaDeclarativeChart/schemas/ad_ctr_scatter.json create mode 100644 packages/charts/react-charts/stories/src/VegaDeclarativeChart/schemas/age_distribution_bar.json create mode 100644 packages/charts/react-charts/stories/src/VegaDeclarativeChart/schemas/air_quality_heatmap.json create mode 100644 packages/charts/react-charts/stories/src/VegaDeclarativeChart/schemas/api_response_line.json create mode 100644 packages/charts/react-charts/stories/src/VegaDeclarativeChart/schemas/area_multiSeries_noStack.json create mode 100644 packages/charts/react-charts/stories/src/VegaDeclarativeChart/schemas/area_single_tozeroy.json create mode 100644 packages/charts/react-charts/stories/src/VegaDeclarativeChart/schemas/area_stacked_tonexty.json create mode 100644 packages/charts/react-charts/stories/src/VegaDeclarativeChart/schemas/areachart.json create mode 100644 packages/charts/react-charts/stories/src/VegaDeclarativeChart/schemas/attendance_bar.json create mode 100644 packages/charts/react-charts/stories/src/VegaDeclarativeChart/schemas/attendance_heatmap.json create mode 100644 packages/charts/react-charts/stories/src/VegaDeclarativeChart/schemas/bandwidth_stacked_area.json create mode 100644 packages/charts/react-charts/stories/src/VegaDeclarativeChart/schemas/barchart.json create mode 100644 packages/charts/react-charts/stories/src/VegaDeclarativeChart/schemas/biodiversity_grouped.json create mode 100644 packages/charts/react-charts/stories/src/VegaDeclarativeChart/schemas/bmi_scatter.json create mode 100644 packages/charts/react-charts/stories/src/VegaDeclarativeChart/schemas/budget_actual_grouped.json create mode 100644 packages/charts/react-charts/stories/src/VegaDeclarativeChart/schemas/bug_priority_donut.json create mode 100644 packages/charts/react-charts/stories/src/VegaDeclarativeChart/schemas/campaign_performance_combo.json create mode 100644 packages/charts/react-charts/stories/src/VegaDeclarativeChart/schemas/cashflow_combo.json create mode 100644 packages/charts/react-charts/stories/src/VegaDeclarativeChart/schemas/category_sales_stacked.json create mode 100644 packages/charts/react-charts/stories/src/VegaDeclarativeChart/schemas/channel_distribution_donut.json create mode 100644 packages/charts/react-charts/stories/src/VegaDeclarativeChart/schemas/climate_zones_scatter.json create mode 100644 packages/charts/react-charts/stories/src/VegaDeclarativeChart/schemas/co2_emissions_area.json create mode 100644 packages/charts/react-charts/stories/src/VegaDeclarativeChart/schemas/code_commits_combo.json create mode 100644 packages/charts/react-charts/stories/src/VegaDeclarativeChart/schemas/conversion_funnel.json create mode 100644 packages/charts/react-charts/stories/src/VegaDeclarativeChart/schemas/course_enrollment_donut.json create mode 100644 packages/charts/react-charts/stories/src/VegaDeclarativeChart/schemas/customer_segments_donut.json create mode 100644 packages/charts/react-charts/stories/src/VegaDeclarativeChart/schemas/daily_orders_line.json create mode 100644 packages/charts/react-charts/stories/src/VegaDeclarativeChart/schemas/defect_rates_bar.json create mode 100644 packages/charts/react-charts/stories/src/VegaDeclarativeChart/schemas/deployment_frequency_bar.json create mode 100644 packages/charts/react-charts/stories/src/VegaDeclarativeChart/schemas/discount_impact_combo.json create mode 100644 packages/charts/react-charts/stories/src/VegaDeclarativeChart/schemas/disease_prevalence_donut.json create mode 100644 packages/charts/react-charts/stories/src/VegaDeclarativeChart/schemas/dividend_timeline_area.json create mode 100644 packages/charts/react-charts/stories/src/VegaDeclarativeChart/schemas/donutchart.json create mode 100644 packages/charts/react-charts/stories/src/VegaDeclarativeChart/schemas/downtime_stacked.json create mode 100644 packages/charts/react-charts/stories/src/VegaDeclarativeChart/schemas/dropout_analysis_line.json create mode 100644 packages/charts/react-charts/stories/src/VegaDeclarativeChart/schemas/efficiency_ratio_combo.json create mode 100644 packages/charts/react-charts/stories/src/VegaDeclarativeChart/schemas/energy_consumption_stacked.json create mode 100644 packages/charts/react-charts/stories/src/VegaDeclarativeChart/schemas/engagement_heatmap.json create mode 100644 packages/charts/react-charts/stories/src/VegaDeclarativeChart/schemas/error_rates_bar.json create mode 100644 packages/charts/react-charts/stories/src/VegaDeclarativeChart/schemas/expense_horizontal_bar.json create mode 100644 packages/charts/react-charts/stories/src/VegaDeclarativeChart/schemas/financial_ratios_heatmap.json create mode 100644 packages/charts/react-charts/stories/src/VegaDeclarativeChart/schemas/formatting_combined_date_percentage.json create mode 100644 packages/charts/react-charts/stories/src/VegaDeclarativeChart/schemas/formatting_date_full_month.json create mode 100644 packages/charts/react-charts/stories/src/VegaDeclarativeChart/schemas/formatting_date_month_day.json create mode 100644 packages/charts/react-charts/stories/src/VegaDeclarativeChart/schemas/formatting_date_year_month.json create mode 100644 packages/charts/react-charts/stories/src/VegaDeclarativeChart/schemas/formatting_dates_numbers.json create mode 100644 packages/charts/react-charts/stories/src/VegaDeclarativeChart/schemas/formatting_number_decimal_places.json create mode 100644 packages/charts/react-charts/stories/src/VegaDeclarativeChart/schemas/formatting_number_si_prefix.json create mode 100644 packages/charts/react-charts/stories/src/VegaDeclarativeChart/schemas/formatting_percentage_2decimals.json create mode 100644 packages/charts/react-charts/stories/src/VegaDeclarativeChart/schemas/formatting_percentage_decimals.json create mode 100644 packages/charts/react-charts/stories/src/VegaDeclarativeChart/schemas/game_scores_line.json create mode 100644 packages/charts/react-charts/stories/src/VegaDeclarativeChart/schemas/genre_popularity_donut.json create mode 100644 packages/charts/react-charts/stories/src/VegaDeclarativeChart/schemas/grade_distribution_bar.json create mode 100644 packages/charts/react-charts/stories/src/VegaDeclarativeChart/schemas/graduation_rates_area.json create mode 100644 packages/charts/react-charts/stories/src/VegaDeclarativeChart/schemas/grouped_bar.json create mode 100644 packages/charts/react-charts/stories/src/VegaDeclarativeChart/schemas/health_metrics_scatter.json create mode 100644 packages/charts/react-charts/stories/src/VegaDeclarativeChart/schemas/heatmapchart.json create mode 100644 packages/charts/react-charts/stories/src/VegaDeclarativeChart/schemas/histogram_basic_count.json create mode 100644 packages/charts/react-charts/stories/src/VegaDeclarativeChart/schemas/histogram_custom_bins.json create mode 100644 packages/charts/react-charts/stories/src/VegaDeclarativeChart/schemas/histogram_max_aggregate.json create mode 100644 packages/charts/react-charts/stories/src/VegaDeclarativeChart/schemas/histogram_mean_aggregate.json create mode 100644 packages/charts/react-charts/stories/src/VegaDeclarativeChart/schemas/histogram_sum_aggregate.json create mode 100644 packages/charts/react-charts/stories/src/VegaDeclarativeChart/schemas/hospital_capacity_heatmap.json create mode 100644 packages/charts/react-charts/stories/src/VegaDeclarativeChart/schemas/impression_trends_line.json create mode 100644 packages/charts/react-charts/stories/src/VegaDeclarativeChart/schemas/influencer_metrics_grouped.json create mode 100644 packages/charts/react-charts/stories/src/VegaDeclarativeChart/schemas/inventory_levels_area.json create mode 100644 packages/charts/react-charts/stories/src/VegaDeclarativeChart/schemas/inventory_turnover_area.json create mode 100644 packages/charts/react-charts/stories/src/VegaDeclarativeChart/schemas/lead_generation_combo.json create mode 100644 packages/charts/react-charts/stories/src/VegaDeclarativeChart/schemas/league_standings_grouped.json create mode 100644 packages/charts/react-charts/stories/src/VegaDeclarativeChart/schemas/learning_progress_combo.json create mode 100644 packages/charts/react-charts/stories/src/VegaDeclarativeChart/schemas/line_bar_combo.json create mode 100644 packages/charts/react-charts/stories/src/VegaDeclarativeChart/schemas/linechart.json create mode 100644 packages/charts/react-charts/stories/src/VegaDeclarativeChart/schemas/linechart_annotations.json create mode 100644 packages/charts/react-charts/stories/src/VegaDeclarativeChart/schemas/linechart_colorFillBars.json create mode 100644 packages/charts/react-charts/stories/src/VegaDeclarativeChart/schemas/log_scale_growth.json create mode 100644 packages/charts/react-charts/stories/src/VegaDeclarativeChart/schemas/machine_utilization_heatmap.json create mode 100644 packages/charts/react-charts/stories/src/VegaDeclarativeChart/schemas/maintenance_schedule_rect.json create mode 100644 packages/charts/react-charts/stories/src/VegaDeclarativeChart/schemas/market_share_donut.json create mode 100644 packages/charts/react-charts/stories/src/VegaDeclarativeChart/schemas/medication_adherence_stacked.json create mode 100644 packages/charts/react-charts/stories/src/VegaDeclarativeChart/schemas/multiplot_customer_demographics.json create mode 100644 packages/charts/react-charts/stories/src/VegaDeclarativeChart/schemas/multiplot_ecommerce_kpis.json create mode 100644 packages/charts/react-charts/stories/src/VegaDeclarativeChart/schemas/multiplot_employee_survey.json create mode 100644 packages/charts/react-charts/stories/src/VegaDeclarativeChart/schemas/multiplot_inventory_fulfillment.json create mode 100644 packages/charts/react-charts/stories/src/VegaDeclarativeChart/schemas/multiplot_marketing_campaign.json create mode 100644 packages/charts/react-charts/stories/src/VegaDeclarativeChart/schemas/multiplot_mobile_app_analytics.json create mode 100644 packages/charts/react-charts/stories/src/VegaDeclarativeChart/schemas/multiplot_performance_metrics.json create mode 100644 packages/charts/react-charts/stories/src/VegaDeclarativeChart/schemas/multiplot_sales_comparison.json create mode 100644 packages/charts/react-charts/stories/src/VegaDeclarativeChart/schemas/multiplot_server_monitoring.json create mode 100644 packages/charts/react-charts/stories/src/VegaDeclarativeChart/schemas/multiplot_stock_comparison.json create mode 100644 packages/charts/react-charts/stories/src/VegaDeclarativeChart/schemas/multiplot_web_analytics.json create mode 100644 packages/charts/react-charts/stories/src/VegaDeclarativeChart/schemas/ordering_category_ascending.json create mode 100644 packages/charts/react-charts/stories/src/VegaDeclarativeChart/schemas/ordering_category_descending.json create mode 100644 packages/charts/react-charts/stories/src/VegaDeclarativeChart/schemas/ordering_custom_array.json create mode 100644 packages/charts/react-charts/stories/src/VegaDeclarativeChart/schemas/ordering_value_ascending.json create mode 100644 packages/charts/react-charts/stories/src/VegaDeclarativeChart/schemas/ordering_value_descending.json create mode 100644 packages/charts/react-charts/stories/src/VegaDeclarativeChart/schemas/patient_vitals_line.json create mode 100644 packages/charts/react-charts/stories/src/VegaDeclarativeChart/schemas/performance_scatter.json create mode 100644 packages/charts/react-charts/stories/src/VegaDeclarativeChart/schemas/player_age_distribution_bar.json create mode 100644 packages/charts/react-charts/stories/src/VegaDeclarativeChart/schemas/player_stats_scatter.json create mode 100644 packages/charts/react-charts/stories/src/VegaDeclarativeChart/schemas/portfolio_donut.json create mode 100644 packages/charts/react-charts/stories/src/VegaDeclarativeChart/schemas/precipitation_bar.json create mode 100644 packages/charts/react-charts/stories/src/VegaDeclarativeChart/schemas/price_demand_scatter.json create mode 100644 packages/charts/react-charts/stories/src/VegaDeclarativeChart/schemas/product_performance_grouped.json create mode 100644 packages/charts/react-charts/stories/src/VegaDeclarativeChart/schemas/production_output_line.json create mode 100644 packages/charts/react-charts/stories/src/VegaDeclarativeChart/schemas/profit_loss_bar.json create mode 100644 packages/charts/react-charts/stories/src/VegaDeclarativeChart/schemas/quality_metrics_scatter.json create mode 100644 packages/charts/react-charts/stories/src/VegaDeclarativeChart/schemas/recovery_timeline_area.json create mode 100644 packages/charts/react-charts/stories/src/VegaDeclarativeChart/schemas/renewable_energy_donut.json create mode 100644 packages/charts/react-charts/stories/src/VegaDeclarativeChart/schemas/revenue_bar_vertical.json create mode 100644 packages/charts/react-charts/stories/src/VegaDeclarativeChart/schemas/revenue_streams_stacked.json create mode 100644 packages/charts/react-charts/stories/src/VegaDeclarativeChart/schemas/roi_scatter.json create mode 100644 packages/charts/react-charts/stories/src/VegaDeclarativeChart/schemas/sales_trend_line.json create mode 100644 packages/charts/react-charts/stories/src/VegaDeclarativeChart/schemas/scatter_correlation.json create mode 100644 packages/charts/react-charts/stories/src/VegaDeclarativeChart/schemas/scatterchart.json create mode 100644 packages/charts/react-charts/stories/src/VegaDeclarativeChart/schemas/sea_level_log_area.json create mode 100644 packages/charts/react-charts/stories/src/VegaDeclarativeChart/schemas/season_performance_area.json create mode 100644 packages/charts/react-charts/stories/src/VegaDeclarativeChart/schemas/seasonal_trends_area_line.json create mode 100644 packages/charts/react-charts/stories/src/VegaDeclarativeChart/schemas/sentiment_stacked.json create mode 100644 packages/charts/react-charts/stories/src/VegaDeclarativeChart/schemas/server_load_heatmap.json create mode 100644 packages/charts/react-charts/stories/src/VegaDeclarativeChart/schemas/shift_productivity_grouped.json create mode 100644 packages/charts/react-charts/stories/src/VegaDeclarativeChart/schemas/shipping_times_bar.json create mode 100644 packages/charts/react-charts/stories/src/VegaDeclarativeChart/schemas/skill_assessment_stacked.json create mode 100644 packages/charts/react-charts/stories/src/VegaDeclarativeChart/schemas/social_reach_area.json create mode 100644 packages/charts/react-charts/stories/src/VegaDeclarativeChart/schemas/stacked_bar_vertical.json create mode 100644 packages/charts/react-charts/stories/src/VegaDeclarativeChart/schemas/stock_price_area.json create mode 100644 packages/charts/react-charts/stories/src/VegaDeclarativeChart/schemas/streaming_viewership_combo.json create mode 100644 packages/charts/react-charts/stories/src/VegaDeclarativeChart/schemas/student_performance_grouped.json create mode 100644 packages/charts/react-charts/stories/src/VegaDeclarativeChart/schemas/study_hours_scatter.json create mode 100644 packages/charts/react-charts/stories/src/VegaDeclarativeChart/schemas/supply_chain_horizontal.json create mode 100644 packages/charts/react-charts/stories/src/VegaDeclarativeChart/schemas/symptom_severity_combo.json create mode 100644 packages/charts/react-charts/stories/src/VegaDeclarativeChart/schemas/system_uptime_line.json create mode 100644 packages/charts/react-charts/stories/src/VegaDeclarativeChart/schemas/team_rankings_horizontal.json create mode 100644 packages/charts/react-charts/stories/src/VegaDeclarativeChart/schemas/temperature_area.json create mode 100644 packages/charts/react-charts/stories/src/VegaDeclarativeChart/schemas/temperature_trend_line.json create mode 100644 packages/charts/react-charts/stories/src/VegaDeclarativeChart/schemas/test_scores_line.json create mode 100644 packages/charts/react-charts/stories/src/VegaDeclarativeChart/schemas/tournament_brackets_horizontal.json create mode 100644 packages/charts/react-charts/stories/src/VegaDeclarativeChart/schemas/treatment_outcomes_grouped.json create mode 100644 packages/charts/react-charts/stories/src/VegaDeclarativeChart/schemas/user_sessions_area.json create mode 100644 packages/charts/react-charts/stories/src/VegaDeclarativeChart/schemas/viral_growth_log.json create mode 100644 packages/charts/react-charts/stories/src/VegaDeclarativeChart/schemas/weather_patterns_combo.json create mode 100644 packages/charts/react-charts/stories/src/VegaDeclarativeChart/schemas/website_traffic_heatmap.json diff --git a/packages/charts/react-charts/VEGA_SCHEMA_INTEGRATION.md b/packages/charts/react-charts/VEGA_SCHEMA_INTEGRATION.md new file mode 100644 index 0000000000000..3c446ebd3d413 --- /dev/null +++ b/packages/charts/react-charts/VEGA_SCHEMA_INTEGRATION.md @@ -0,0 +1,247 @@ +# Vega-Lite Schema Integration Summary + +## Overview + +Successfully integrated 112 Vega-Lite JSON schemas into the VegaDeclarativeChart component with comprehensive testing infrastructure. + +## Files Created/Modified + +### 1. Schema Files (90 new + 22 existing = 112 total) + +Location: `stories/src/VegaDeclarativeChart/schemas/` + +**Categories:** + +- **Financial Analytics** (10): stock prices, portfolio allocation, cash flow, ROI, etc. +- **E-Commerce & Retail** (10): orders, conversion funnels, inventory, customer segments +- **Marketing & Social Media** (10): campaigns, engagement, viral growth, sentiment +- **Healthcare & Fitness** (10): patient vitals, treatments, health metrics +- **Education & Learning** (10): test scores, attendance, graduation rates +- **Manufacturing & Operations** (10): production, defects, machine utilization +- **Climate & Environmental** (10): temperature, emissions, renewable energy +- **Technology & DevOps** (10): API monitoring, deployments, server load +- **Sports & Entertainment** (10): player stats, team rankings, streaming +- **Basic Charts** (11): line, area, bar, scatter, donut, heatmap, combos +- **Additional** (11): various other use cases + +### 2. Updated Story File + +**File:** `stories/src/VegaDeclarativeChart/VegaDeclarativeChartDefault.stories.tsx` + +**Key Features:** + +- Dynamic loading of all 112 schemas using `require.context` +- Automatic categorization by domain +- Category-based filtering dropdown +- Enhanced error boundary with stack traces +- Comprehensive chart type distribution display +- Support for: + - Line, area, bar (vertical/horizontal/stacked/grouped) + - Scatter, donut, heatmap charts + - Combo/layered charts (line+bar, line+area, etc.) + - Multiple axis types (temporal, quantitative, ordinal, nominal, log) + - Data transforms (fold, etc.) + +### 3. Comprehensive Test Suite + +**File:** `library/src/components/VegaDeclarativeChart/VegaDeclarativeChart.SchemaValidation.test.tsx` + +**Test Features:** + +1. **Automatic Schema Discovery**: Loads all JSON schemas from the schemas directory +2. **Transformation Validation**: Tests each schema's transformation to Fluent chart props +3. **Feature Detection**: Identifies unsupported features: + + - Layered/combo charts with multiple mark types + - Logarithmic scales + - Data transforms (fold, filter, etc.) + - Independent y-axis scales (dual-axis) + - Size encoding (bubble charts) + - Opacity encoding + - xOffset encoding (grouped bars) + - Text marks (annotations) + - Rule marks (reference lines) + - Color fill bars (rect with x/x2) + +4. **Comprehensive Reporting**: + + - Success rate calculation + - Failed transformations with error details + - Schemas with unsupported features grouped by chart type + - Chart type distribution statistics + - Render validation for successful transformations + +5. **Specific Feature Tests**: + - Layered/combo chart handling + - Log scale support + - Data transform support + +## Chart Type Coverage + +### Fully Supported Chart Types: + +- ✅ **Line Charts**: Single and multi-series with temporal/quantitative axes +- ✅ **Area Charts**: Filled areas with optional stacking +- ✅ **Scatter Charts**: Point marks with size/color encoding +- ✅ **Vertical Bar Charts**: Simple bars with categorical x-axis +- ✅ **Horizontal Bar Charts**: Simple bars with categorical y-axis +- ✅ **Stacked Bar Charts**: Multiple series stacked +- ✅ **Grouped Bar Charts**: Multiple series side-by-side (with xOffset) +- ✅ **Donut/Pie Charts**: Arc marks with theta encoding +- ✅ **Heatmaps**: Rect marks with x, y, and color encodings + +### Partially Supported Features: + +- ⚠️ **Combo Charts**: Layered specs work if mark types are compatible +- ⚠️ **Log Scales**: May render but accuracy not guaranteed +- ⚠️ **Data Transforms**: Fold transform works, others untested +- ⚠️ **Dual-Axis**: Independent y-scales may not render correctly +- ⚠️ **Annotations**: Text and rule marks may not be fully supported +- ⚠️ **Size Encoding**: Bubble charts may have limited support + +### Axis Types Covered: + +- ✅ **Temporal**: Date/time data with formatting +- ✅ **Quantitative**: Numeric continuous data +- ✅ **Ordinal**: Ordered categorical data +- ✅ **Nominal**: Unordered categorical data +- ⚠️ **Log**: Logarithmic scales (partial support) + +## Running the Tests + +```bash +cd library +npm test -- VegaDeclarativeChart.SchemaValidation.test.tsx +``` + +**Expected Output:** + +- Total schemas tested: 112 +- Success rate: >70% (estimated) +- Detailed report of: + - Successfully transformed schemas + - Failed transformations with errors + - Schemas with unsupported features + - Chart type distribution + +## Viewing the Story + +```bash +cd ../stories +npm run storybook +``` + +Navigate to: **Charts > VegaDeclarativeChart > Default** + +**Features:** + +1. Category dropdown to filter by domain (11 categories) +2. Chart type dropdown with 112 schemas +3. Live JSON editor +4. Real-time chart preview +5. Width/height controls +6. Error boundary with detailed messages +7. Feature list and category statistics + +## Schema Structure + +All schemas follow Vega-Lite v5 specification: + +```json +{ + "$schema": "https://vega.github.io/schema/vega-lite/v5.json", + "description": "Human-readable description", + "data": { + "values": [/* realistic sample data */] + }, + "mark": "type" or { "type": "...", /* options */ }, + "encoding": { + "x": { "field": "...", "type": "..." }, + "y": { "field": "...", "type": "..." }, + /* additional encodings */ + }, + "title": "Chart Title" +} +``` + +## Unsupported Vega-Lite Features + +The following Vega-Lite features are NOT standard Fluent UI chart capabilities: + +1. **Sankey Charts**: Not a standard Vega-Lite mark (requires custom implementation) +2. **Funnel Charts**: Not a standard Vega-Lite mark +3. **Gantt Charts**: Not a standard Vega-Lite mark +4. **Gauge Charts**: Not a standard Vega-Lite mark +5. **Geographic Maps**: Not implemented in Fluent UI charts +6. **Complex Transforms**: Only basic transforms like fold are supported +7. **Interactive Selections**: Vega-Lite selection grammar not fully implemented +8. **Faceting**: Small multiples not supported +9. **Repeat**: Repeated charts not supported +10. **Concatenation**: Side-by-side charts not supported + +## Error Handling + +### Schema-Level Errors: + +- Invalid JSON: Caught by JSON parser with error message +- Missing required fields: Caught during transformation with descriptive error +- Unsupported mark types: Falls back to line chart or throws error + +### Runtime Errors: + +- Error boundary catches rendering exceptions +- Displays error message with stack trace +- Allows editing to fix the schema + +### Test-Level Errors: + +- Transformation failures are captured and reported +- Schemas are marked as "failed" with error details +- Unsupported features are detected and listed + +## Best Practices for Schema Authors + +1. **Use Standard Marks**: Stick to line, area, bar, point, circle, arc, rect +2. **Simple Encodings**: Use x, y, color, size, tooltip +3. **Avoid Complex Transforms**: Use pre-transformed data when possible +4. **Test Incrementally**: Start with simple schema, add features gradually +5. **Include Titles**: Add descriptive titles and field labels +6. **Realistic Data**: Use representative sample data +7. **Handle Nulls**: Ensure data doesn't have null/undefined values + +## Integration with CI/CD + +The test suite can be integrated into CI/CD pipelines: + +```yaml +# Example GitHub Actions workflow +- name: Test Vega Schema Validation + run: | + cd library + npm test -- VegaDeclarativeChart.SchemaValidation.test.tsx --coverage +``` + +## Future Enhancements + +1. **Schema Validation**: Add JSON Schema validation for Vega-Lite specs +2. **Auto-Detection**: Automatically detect and report unsupported features before rendering +3. **Fallback Strategies**: Implement graceful degradation for unsupported features +4. **Performance Testing**: Add performance benchmarks for complex schemas +5. **Accessibility**: Ensure all generated charts meet WCAG standards +6. **Export**: Add ability to export schemas and rendered charts +7. **Schema Builder**: Visual schema builder UI in Storybook + +## Documentation + +- **Vega-Lite Docs**: https://vega.github.io/vega-lite/docs/ +- **Fluent UI Charts**: https://developer.microsoft.com/en-us/fluentui#/controls/web/charts +- **Component API**: See VegaDeclarativeChart.tsx JSDoc comments + +## Support + +For issues or questions: + +1. Check test output for transformation errors +2. Review error boundary messages in Storybook +3. Consult Vega-Lite documentation for spec syntax +4. Review Fluent UI chart component documentation diff --git a/packages/charts/react-charts/library/etc/react-charts.api.md b/packages/charts/react-charts/library/etc/react-charts.api.md index c854df3d9f38f..d116786711e0e 100644 --- a/packages/charts/react-charts/library/etc/react-charts.api.md +++ b/packages/charts/react-charts/library/etc/react-charts.api.md @@ -1653,7 +1653,8 @@ export interface ScatterChartStyles extends CartesianChartStyles { // @public export interface Schema { - plotlySchema: any; + plotlySchema?: any; + selectedLegends?: string[]; } // @public (undocumented) @@ -1709,6 +1710,26 @@ export interface SparklineStyles { // @public (undocumented) export const Textbox: React_2.FunctionComponent; +// @public +export const VegaDeclarativeChart: React_2.ForwardRefExoticComponent>; + +// @public +export interface VegaDeclarativeChartProps { + chartSchema: VegaSchema; + className?: string; + onSchemaChange?: (newSchema: VegaSchema) => void; + style?: React_2.CSSProperties; +} + +// @public +export type VegaLiteSpec = any; + +// @public +export interface VegaSchema { + selectedLegends?: string[]; + vegaLiteSpec: VegaLiteSpec; +} + // @public export const VerticalBarChart: React_2.FunctionComponent; diff --git a/packages/charts/react-charts/library/package.json b/packages/charts/react-charts/library/package.json index d1373dbab1f5e..d4e2a198c9783 100644 --- a/packages/charts/react-charts/library/package.json +++ b/packages/charts/react-charts/library/package.json @@ -66,7 +66,13 @@ "@types/react": ">=16.14.0 <20.0.0", "@types/react-dom": ">=16.9.0 <20.0.0", "react": ">=16.14.0 <20.0.0", - "react-dom": ">=16.14.0 <20.0.0" + "react-dom": ">=16.14.0 <20.0.0", + "vega-lite": ">=5.0.0 <7.0.0" + }, + "peerDependenciesMeta": { + "vega-lite": { + "optional": true + } }, "exports": { ".": { diff --git a/packages/charts/react-charts/library/src/VegaDeclarativeChart.ts b/packages/charts/react-charts/library/src/VegaDeclarativeChart.ts new file mode 100644 index 0000000000000..e725af67d077d --- /dev/null +++ b/packages/charts/react-charts/library/src/VegaDeclarativeChart.ts @@ -0,0 +1 @@ +export * from './components/VegaDeclarativeChart'; diff --git a/packages/charts/react-charts/library/src/components/DeclarativeChart/DeclarativeChart.tsx b/packages/charts/react-charts/library/src/components/DeclarativeChart/DeclarativeChart.tsx index a00530cf005b2..1a9f81e667604 100644 --- a/packages/charts/react-charts/library/src/components/DeclarativeChart/DeclarativeChart.tsx +++ b/packages/charts/react-charts/library/src/components/DeclarativeChart/DeclarativeChart.tsx @@ -90,7 +90,12 @@ export interface Schema { * Plotly schema represented as JSON object */ // eslint-disable-next-line @typescript-eslint/no-explicit-any - plotlySchema: any; + plotlySchema?: any; + + /** + * Selected legends (used for multi-select legend interaction) + */ + selectedLegends?: string[]; } /** @@ -342,6 +347,7 @@ export const DeclarativeChart: React.FunctionComponent = HTMLDivElement, DeclarativeChartProps >(({ colorwayType = 'default', ...props }, forwardedRef) => { + // Default Plotly adapter path const { plotlySchema } = sanitizeJson(props.chartSchema); const chart: OutputChartType = mapFluentChart(plotlySchema); if (!chart.isValid) { diff --git a/packages/charts/react-charts/library/src/components/DeclarativeChart/PlotlySchemaAdapter.ts b/packages/charts/react-charts/library/src/components/DeclarativeChart/PlotlySchemaAdapter.ts index f8f71e9fc927c..1047b579d5f74 100644 --- a/packages/charts/react-charts/library/src/components/DeclarativeChart/PlotlySchemaAdapter.ts +++ b/packages/charts/react-charts/library/src/components/DeclarativeChart/PlotlySchemaAdapter.ts @@ -698,6 +698,54 @@ const createAnnotationId = (text: string, index: number): string => { const DEFAULT_ARROW_OFFSET = -40; +const resolveAlignProperty = ( + primaryValue: string | undefined, + fallbackValue: string | undefined, + mapper: (value?: string) => T | undefined, +): T | undefined => mapper(primaryValue) ?? mapper(fallbackValue); + +const calculateOffset = ( + arrowValue: unknown, + arrowRef: string | undefined, + shiftValue: unknown, +): { offset?: number; hasExplicit: boolean } => { + let hasExplicit = false; + let total = 0; + const arrow = toFiniteNumber(arrowValue); + const ref = typeof arrowRef === 'string' ? arrowRef.toLowerCase() : undefined; + if (arrow !== undefined && (ref === undefined || ref === 'pixel')) { + total += arrow; + hasExplicit = true; + } + const shift = toFiniteNumber(shiftValue); + if (shift !== undefined) { + total += shift; + hasExplicit = true; + } + return { offset: hasExplicit && total !== 0 ? total : undefined, hasExplicit }; +}; + +const resolveRelativeCoordinate = ( + axis: 'x' | 'y', + refType: 'axis' | 'relative', + value: unknown, + annotation: NonNullable, + layout: Partial | undefined, + data: Data[] | undefined, +): number | undefined => { + const normalize = (val: number | undefined) => (axis === 'y' ? transformRelativeYForChart(val) : val); + if (refType === 'relative') { + return normalize(toFiniteNumber(value)); + } + const axisRef = (axis === 'x' ? annotation.xref : annotation.yref) as string | undefined; + const relative = toRelativeCoordinate( + value, + getAxisLayoutByRef(layout, axisRef, axis), + getAxisNumericRangeFromData(axis, axisRef, layout, data), + ); + return relative === undefined ? undefined : normalize(relative); +}; + const mapArrowsideToArrow = (annotation: PlotlyAnnotation): ChartAnnotationArrowHead => { let includeStart = false; let includeEnd = false; @@ -772,84 +820,60 @@ const convertPlotlyAnnotation = ( return undefined; } - const xRefType = resolveRefType(annotation.xref as string | undefined, 'x'); - const yRefType = resolveRefType(annotation.yref as string | undefined, 'y'); + const resolvedAnnotation = annotation as NonNullable; + + const xRefType = resolveRefType(resolvedAnnotation.xref as string | undefined, 'x'); + const yRefType = resolveRefType(resolvedAnnotation.yref as string | undefined, 'y'); if (!xRefType || !yRefType) { return undefined; } - let coordinates: ChartAnnotation['coordinates'] | undefined; - - if (xRefType === 'axis' && yRefType === 'axis') { - const xAxisLayout = getAxisLayoutByRef(layout, annotation.xref as string | undefined, 'x'); - const yAxisLayout = getAxisLayoutByRef(layout, annotation.yref as string | undefined, 'y'); - const xValue = convertDataValue(annotation.x, xAxisLayout); - const yValue = convertDataValue(annotation.y, yAxisLayout); - if (xValue === undefined || yValue === undefined) { - return undefined; - } - const yRefNormalized = typeof annotation.yref === 'string' ? annotation.yref.toLowerCase() : undefined; - coordinates = { - type: 'data', - x: xValue, - y: yValue, - ...(yRefNormalized === 'y2' ? { yAxis: 'secondary' as const } : {}), - }; - } else if (xRefType === 'relative' && yRefType === 'relative') { - const xValue = toFiniteNumber(annotation.x); - const yValue = toFiniteNumber(annotation.y); - const chartRelativeY = transformRelativeYForChart(yValue); - if (xValue === undefined || chartRelativeY === undefined) { - return undefined; - } - coordinates = { - type: 'relative', - x: xValue, - y: chartRelativeY, - }; - } else if (xRefType === 'relative' && yRefType === 'axis') { - const xValue = toFiniteNumber(annotation.x); - const yAxisLayout = getAxisLayoutByRef(layout, annotation.yref as string | undefined, 'y'); - const yFallbackRange = getAxisNumericRangeFromData('y', annotation.yref as string | undefined, layout, data); - const yRelative = toRelativeCoordinate(annotation.y, yAxisLayout, yFallbackRange); - const chartRelativeY = transformRelativeYForChart(yRelative); - if (xValue === undefined || chartRelativeY === undefined) { - return undefined; + const coordinates: ChartAnnotation['coordinates'] | undefined = (() => { + if (xRefType === 'axis' && yRefType === 'axis') { + const xAxisLayout = getAxisLayoutByRef(layout, resolvedAnnotation.xref as string | undefined, 'x'); + const yAxisLayout = getAxisLayoutByRef(layout, resolvedAnnotation.yref as string | undefined, 'y'); + const xValue = convertDataValue(resolvedAnnotation.x, xAxisLayout); + const yValue = convertDataValue(resolvedAnnotation.y, yAxisLayout); + if (xValue === undefined || yValue === undefined) { + return undefined; + } + const yRefNormalized = typeof resolvedAnnotation.yref === 'string' ? resolvedAnnotation.yref.toLowerCase() : undefined; + return { + type: 'data', + x: xValue, + y: yValue, + ...(yRefNormalized === 'y2' ? { yAxis: 'secondary' as const } : {}), + }; } - coordinates = { - type: 'relative', - x: xValue, - y: chartRelativeY, - }; - } else if (xRefType === 'axis' && yRefType === 'relative') { - const yValue = toFiniteNumber(annotation.y); - const xAxisLayout = getAxisLayoutByRef(layout, annotation.xref as string | undefined, 'x'); - const xFallbackRange = getAxisNumericRangeFromData('x', annotation.xref as string | undefined, layout, data); - const xRelative = toRelativeCoordinate(annotation.x, xAxisLayout, xFallbackRange); - const chartRelativeY = transformRelativeYForChart(yValue); - if (xRelative === undefined || chartRelativeY === undefined) { - return undefined; + if (xRefType === 'pixel' && yRefType === 'pixel') { + const xValue = toFiniteNumber(resolvedAnnotation.x); + const yValue = toFiniteNumber(resolvedAnnotation.y); + if (xValue === undefined || yValue === undefined) { + return undefined; + } + return { + type: 'pixel', + x: xValue, + y: yValue, + }; } - coordinates = { - type: 'relative', - x: xRelative, - y: chartRelativeY, - }; - } else if (xRefType === 'pixel' && yRefType === 'pixel') { - const xValue = toFiniteNumber(annotation.x); - const yValue = toFiniteNumber(annotation.y); - if (xValue === undefined || yValue === undefined) { - return undefined; + if (xRefType !== 'pixel' && yRefType !== 'pixel') { + const xRelative = resolveRelativeCoordinate('x', xRefType === 'axis' ? 'axis' : 'relative', resolvedAnnotation.x, resolvedAnnotation, layout, data); + const yRelative = resolveRelativeCoordinate('y', yRefType === 'axis' ? 'axis' : 'relative', resolvedAnnotation.y, resolvedAnnotation, layout, data); + if (xRelative === undefined || yRelative === undefined) { + return undefined; + } + return { + type: 'relative', + x: xRelative, + y: yRelative, + }; } - coordinates = { - type: 'pixel', - x: xValue, - y: yValue, - }; - } else { return undefined; - } + })(); + + if (!coordinates) return undefined; const textValue = annotation.text; const rawText = textValue === undefined || textValue === null ? '' : String(textValue); @@ -872,68 +896,19 @@ const convertPlotlyAnnotation = ( layoutProps.clipToBounds = true; } - const horizontalAlign = mapHorizontalAlign(annotation.xanchor as string | undefined); - if (horizontalAlign) { - layoutProps.align = horizontalAlign; - } - - if (!layoutProps.align) { - const alignProp = mapHorizontalAlign((annotation as { align?: string }).align); - if (alignProp) { - layoutProps.align = alignProp; - } - } + const horizontalAlign = resolveAlignProperty(resolvedAnnotation.xanchor as string | undefined, (resolvedAnnotation as { align?: string }).align, mapHorizontalAlign); + if (horizontalAlign) layoutProps.align = horizontalAlign; - const verticalAlign = mapVerticalAlign(annotation.yanchor as string | undefined); - if (verticalAlign) { - layoutProps.verticalAlign = verticalAlign; - } + const verticalAlign = resolveAlignProperty(resolvedAnnotation.yanchor as string | undefined, (resolvedAnnotation as { valign?: string }).valign, mapVerticalAlign); + if (verticalAlign) layoutProps.verticalAlign = verticalAlign; - if (!layoutProps.verticalAlign) { - const valignProp = mapVerticalAlign((annotation as { valign?: string }).valign); - if (valignProp) { - layoutProps.verticalAlign = valignProp; - } - } + const offsetX = calculateOffset(resolvedAnnotation.ax, resolvedAnnotation.axref as string | undefined, resolvedAnnotation.xshift); + const offsetY = calculateOffset(resolvedAnnotation.ay, resolvedAnnotation.ayref as string | undefined, resolvedAnnotation.yshift); - const offsetXComponents: number[] = []; - let hasExplicitOffset = false; - const ax = toFiniteNumber(annotation.ax); - const axRef = typeof annotation.axref === 'string' ? annotation.axref.toLowerCase() : undefined; - if (ax !== undefined && (axRef === undefined || axRef === 'pixel')) { - offsetXComponents.push(ax); - hasExplicitOffset = true; - } - const xShift = toFiniteNumber(annotation.xshift); - if (xShift !== undefined) { - offsetXComponents.push(xShift); - hasExplicitOffset = true; - } - if (offsetXComponents.length > 0) { - const offsetX = offsetXComponents.reduce((sum, value) => sum + value, 0); - if (offsetX !== 0) { - layoutProps.offsetX = offsetX; - } - } + if (offsetX.offset !== undefined) layoutProps.offsetX = offsetX.offset; + if (offsetY.offset !== undefined) layoutProps.offsetY = offsetY.offset; - const offsetYComponents: number[] = []; - const ay = toFiniteNumber(annotation.ay); - const ayRef = typeof annotation.ayref === 'string' ? annotation.ayref.toLowerCase() : undefined; - if (ay !== undefined && (ayRef === undefined || ayRef === 'pixel')) { - offsetYComponents.push(ay); - hasExplicitOffset = true; - } - const yShift = toFiniteNumber(annotation.yshift); - if (yShift !== undefined) { - offsetYComponents.push(yShift); - hasExplicitOffset = true; - } - if (offsetYComponents.length > 0) { - const offsetY = offsetYComponents.reduce((sum, value) => sum + value, 0); - if (offsetY !== 0) { - layoutProps.offsetY = offsetY; - } - } + const hasExplicitOffset = offsetX.hasExplicit || offsetY.hasExplicit; if (showArrow && !hasExplicitOffset && layoutProps.offsetY === undefined) { layoutProps.offsetY = DEFAULT_ARROW_OFFSET; diff --git a/packages/charts/react-charts/library/src/components/DeclarativeChart/VegaLiteSchemaAdapter.ts b/packages/charts/react-charts/library/src/components/DeclarativeChart/VegaLiteSchemaAdapter.ts new file mode 100644 index 0000000000000..24f341f78323e --- /dev/null +++ b/packages/charts/react-charts/library/src/components/DeclarativeChart/VegaLiteSchemaAdapter.ts @@ -0,0 +1,1635 @@ +'use client'; + +import * as React from 'react'; +// Using custom VegaLiteTypes for internal adapter logic +// For public API, VegaDeclarativeChart accepts vega-lite's TopLevelSpec +import type { + VegaLiteSpec, + VegaLiteUnitSpec, + VegaLiteMarkDef, + VegaLiteData, + VegaLiteInterpolate, +} from './VegaLiteTypes'; +import type { LineChartProps } from '../LineChart/index'; +import type { VerticalBarChartProps } from '../VerticalBarChart/index'; +import type { VerticalStackedBarChartProps } from '../VerticalStackedBarChart/index'; +import type { GroupedVerticalBarChartProps } from '../GroupedVerticalBarChart/index'; +import type { HorizontalBarChartWithAxisProps } from '../HorizontalBarChartWithAxis/index'; +import type { AreaChartProps } from '../AreaChart/index'; +import type { DonutChartProps } from '../DonutChart/index'; +import type { ScatterChartProps } from '../ScatterChart/index'; +import type { HeatMapChartProps } from '../HeatMapChart/index'; +import type { + ChartProps, + LineChartPoints, + LineChartDataPoint, + VerticalBarChartDataPoint, + VerticalStackedChartProps, + HorizontalBarChartWithAxisDataPoint, + ChartDataPoint, + ScatterChartDataPoint, + HeatMapChartData, + HeatMapChartDataPoint, + ChartAnnotation, + LineDataInVerticalStackedBarChart, + AxisCategoryOrder, +} from '../../types/index'; +import type { ColorFillBarsProps } from '../LineChart/index'; +import type { Legend, LegendsProps } from '../Legends/index'; +import { getNextColor } from '../../utilities/colors'; +import { format as d3Format } from 'd3-format'; +import { bin as d3Bin, extent as d3Extent, sum as d3Sum, min as d3Min, max as d3Max, mean as d3Mean } from 'd3-array'; +import type { Bin } from 'd3-array'; + +/** + * Vega-Lite to Fluent Charts adapter for line/point charts. + * + * Transforms Vega-Lite JSON specifications into Fluent LineChart props. + * Supports basic line charts with temporal/quantitative axes and color-encoded series. + * + * TODO: Future enhancements + * - Multi-view layouts (facet, concat, repeat) + * - Selection interactions + * - Remote data loading (url) + * - Transform pipeline (filter, aggregate, calculate) + * - Conditional encodings + * - Additional mark types (area, bar, etc.) + * - Tooltip customization + */ + +/** + * Determines if a spec is a layered specification + */ +function isLayerSpec(spec: VegaLiteSpec): spec is VegaLiteSpec & { layer: VegaLiteUnitSpec[] } { + return Array.isArray(spec.layer) && spec.layer.length > 0; +} + +/** + * Determines if a spec is a single unit specification + */ +function isUnitSpec(spec: VegaLiteSpec): boolean { + return spec.mark !== undefined && spec.encoding !== undefined; +} + +/** + * Extracts inline data values from a Vega-Lite data specification + * TODO: Add support for URL-based data loading + * TODO: Add support for named dataset resolution + * TODO: Add support for data format parsing (csv, tsv) + */ +function extractDataValues(data: VegaLiteData | undefined): Array> { + if (!data) { + return []; + } + + if (data.values && Array.isArray(data.values)) { + return data.values; + } + + // TODO: Handle data.url - load remote data + if (data.url) { + console.warn('VegaLiteSchemaAdapter: Remote data URLs are not yet supported'); + return []; + } + + // TODO: Handle data.name - resolve named datasets + if (data.name) { + console.warn('VegaLiteSchemaAdapter: Named datasets are not yet supported'); + return []; + } + + return []; +} + +/** + * Normalizes a Vega-Lite spec into an array of unit specs with resolved data and encoding + * Handles both single-view and layered specifications + */ +function normalizeSpec(spec: VegaLiteSpec): VegaLiteUnitSpec[] { + if (isLayerSpec(spec)) { + // Layered spec: merge shared data and encoding with each layer + const sharedData = spec.data; + const sharedEncoding = spec.encoding; + + return spec.layer.map(layer => ({ + ...layer, + data: layer.data || sharedData, + encoding: { + ...sharedEncoding, + ...layer.encoding, + }, + })); + } + + if (isUnitSpec(spec)) { + // Single unit spec + return [ + { + mark: spec.mark!, + encoding: spec.encoding, + data: spec.data, + }, + ]; + } + + console.warn('VegaLiteSchemaAdapter: Unsupported spec structure'); + return []; +} + +/** + * Parses a value to a Date if it's temporal, otherwise returns as number or string + */ +function parseValue(value: unknown, isTemporalType: boolean): Date | number | string { + if (value === null || value === undefined) { + return ''; + } + + if (isTemporalType) { + // Try parsing as date + const dateValue = new Date(value as string | number); + if (!isNaN(dateValue.getTime())) { + return dateValue; + } + } + + if (typeof value === 'number') { + return value; + } + + return String(value); +} + +/** + * Maps Vega-Lite interpolate to Fluent curve options + * Note: Only maps to curve types supported by LineChartLineOptions + */ +function mapInterpolateToCurve(interpolate: VegaLiteInterpolate | undefined): 'linear' | 'natural' | 'step' | 'stepAfter' | 'stepBefore' | undefined { + if (!interpolate) { + return undefined; + } + + switch (interpolate) { + case 'linear': + case 'linear-closed': + return 'linear'; + case 'step': + return 'step'; + case 'step-before': + return 'stepBefore'; + case 'step-after': + return 'stepAfter'; + case 'natural': + return 'natural'; + // Note: basis, cardinal, monotone, catmull-rom are not supported by LineChartLineOptions + default: + return 'linear'; + } +} + +/** + * Extracts mark properties from VegaLiteMarkDef + */ +function getMarkProperties(mark: VegaLiteMarkDef): { + color?: string; + interpolate?: VegaLiteInterpolate; + strokeWidth?: number; + point?: boolean | { filled?: boolean; size?: number }; +} { + if (typeof mark === 'string') { + return {}; + } + return { + color: mark.color, + interpolate: mark.interpolate, + strokeWidth: mark.strokeWidth, + point: mark.point, + }; +} + +/** + * Extracts annotations from Vega-Lite layers with text or rule marks + * Text marks become text annotations, rule marks become reference lines + */ +function extractAnnotations(spec: VegaLiteSpec): ChartAnnotation[] { + const annotations: ChartAnnotation[] = []; + + if (!spec.layer || !Array.isArray(spec.layer)) { + return annotations; + } + + spec.layer.forEach((layer, index) => { + const mark = typeof layer.mark === 'string' ? layer.mark : layer.mark?.type; + const encoding = layer.encoding || {}; + + // Text marks become annotations + if (mark === 'text' && encoding.x && encoding.y) { + const textValue = encoding.text?.value || encoding.text?.field || ''; + const xValue = encoding.x.value || encoding.x.field; + const yValue = encoding.y.value || encoding.y.field; + + if (textValue && (xValue !== undefined || encoding.x.datum !== undefined) && + (yValue !== undefined || encoding.y.datum !== undefined)) { + annotations.push({ + id: `text-annotation-${index}`, + text: String(textValue), + coordinates: { + type: 'data', + x: (encoding.x as any).datum || xValue || 0, + y: (encoding.y as any).datum || yValue || 0, + }, + style: { + textColor: typeof layer.mark === 'object' ? layer.mark.color : undefined, + }, + }); + } + } + + // Rule marks can become reference lines (horizontal or vertical) + if (mark === 'rule') { + // Horizontal rule (y value constant) + if (encoding.y && (encoding.y.value !== undefined || (encoding.y as any).datum !== undefined)) { + const yValue = encoding.y.value || (encoding.y as any).datum; + annotations.push({ + id: `rule-h-${index}`, + text: '', // Rules typically don't have text + coordinates: { + type: 'data', + x: 0, + y: yValue as number, + }, + style: { + borderColor: typeof layer.mark === 'object' ? layer.mark.color : '#000', + borderWidth: typeof layer.mark === 'object' ? layer.mark.strokeWidth || 1 : 1, + }, + }); + } + // Vertical rule (x value constant) + else if (encoding.x && (encoding.x.value !== undefined || (encoding.x as any).datum !== undefined)) { + const xValue = encoding.x.value || (encoding.x as any).datum; + annotations.push({ + id: `rule-v-${index}`, + text: '', + coordinates: { + type: 'data', + x: xValue as number | string | Date, + y: 0, + }, + style: { + borderColor: typeof layer.mark === 'object' ? layer.mark.color : '#000', + borderWidth: typeof layer.mark === 'object' ? layer.mark.strokeWidth || 1 : 1, + }, + }); + } + } + }); + + return annotations; +} + +/** + * Extracts color fill bars (background regions) from rect marks with x/x2 or y/y2 encodings + */ +function extractColorFillBars(spec: VegaLiteSpec, isDarkTheme?: boolean): ColorFillBarsProps[] { + const colorFillBars: ColorFillBarsProps[] = []; + + if (!spec.layer || !Array.isArray(spec.layer)) { + return colorFillBars; + } + + let colorIndex = 0; + spec.layer.forEach((layer, index) => { + const mark = typeof layer.mark === 'string' ? layer.mark : layer.mark?.type; + const encoding = layer.encoding || {}; + + // Rect marks with x and x2 become color fill bars (vertical regions) + if (mark === 'rect' && encoding.x && encoding.x2) { + const color = typeof layer.mark === 'object' && layer.mark.color + ? layer.mark.color + : getNextColor(colorIndex++, 0, isDarkTheme); + + // Extract start and end x values + const startX = (encoding.x as any).datum || (encoding.x as any).value; + const endX = (encoding.x2 as any).datum || (encoding.x2 as any).value; + + if (startX !== undefined && endX !== undefined) { + colorFillBars.push({ + legend: `region-${index}`, + color, + data: [{ startX, endX }], + applyPattern: false, + }); + } + } + }); + + return colorFillBars; +} + +/** + * Extracts tick configuration from axis properties + */ +function extractTickConfig(spec: VegaLiteSpec): { + tickValues?: (number | Date | string)[]; + xAxisTickCount?: number; + yAxisTickCount?: number; +} { + const config: { + tickValues?: (number | Date | string)[]; + xAxisTickCount?: number; + yAxisTickCount?: number; + } = {}; + + const encoding = spec.encoding || {}; + + if (encoding.x?.axis) { + if (encoding.x.axis.values) { + config.tickValues = encoding.x.axis.values as (number | string)[]; + } + if (encoding.x.axis.tickCount) { + config.xAxisTickCount = encoding.x.axis.tickCount; + } + } + + if (encoding.y?.axis) { + if (encoding.y.axis.tickCount) { + config.yAxisTickCount = encoding.y.axis.tickCount; + } + } + + return config; +} + +/** + * Extracts Y-axis scale type from encoding + * Returns 'log' if logarithmic scale is specified, undefined otherwise + */ +function extractYAxisType(encoding: any): 'log' | undefined { + const yScale = encoding?.y?.scale; + return yScale?.type === 'log' ? 'log' : undefined; +} + +/** + * Converts Vega-Lite sort specification to Fluent Charts AxisCategoryOrder + * Supports: 'ascending', 'descending', null, array, or object with op/order + * @param sort - Vega-Lite sort specification + * @returns AxisCategoryOrder compatible value + */ +function convertVegaSortToAxisCategoryOrder(sort: any): AxisCategoryOrder | undefined { + if (!sort) { + return undefined; + } + + // Handle string sorts: 'ascending' | 'descending' + if (typeof sort === 'string') { + if (sort === 'ascending') { + return 'category ascending'; + } + if (sort === 'descending') { + return 'category descending'; + } + return undefined; + } + + // Handle array sort (explicit ordering) + if (Array.isArray(sort)) { + return sort as string[]; + } + + // Handle object sort with op and order + if (typeof sort === 'object' && sort.op && sort.order) { + const op = sort.op === 'average' ? 'mean' : sort.op; // Map 'average' to 'mean' + const order = sort.order === 'ascending' ? 'ascending' : 'descending'; + return `${op} ${order}` as AxisCategoryOrder; + } + + return undefined; +} + +/** + * Extracts axis category ordering from Vega-Lite encoding + * Returns props for xAxisCategoryOrder and yAxisCategoryOrder + */ +function extractAxisCategoryOrderProps(encoding: any): { + xAxisCategoryOrder?: AxisCategoryOrder; + yAxisCategoryOrder?: AxisCategoryOrder; +} { + const result: { + xAxisCategoryOrder?: AxisCategoryOrder; + yAxisCategoryOrder?: AxisCategoryOrder; + } = {}; + + if (encoding?.x?.sort) { + const xOrder = convertVegaSortToAxisCategoryOrder(encoding.x.sort); + if (xOrder) { + result.xAxisCategoryOrder = xOrder; + } + } + + if (encoding?.y?.sort) { + const yOrder = convertVegaSortToAxisCategoryOrder(encoding.y.sort); + if (yOrder) { + result.yAxisCategoryOrder = yOrder; + } + } + + return result; +} + +/** + * Groups data rows into series based on color encoding field + * Returns a map of series name to data points + */ +function groupDataBySeries( + dataValues: Array>, + xField: string | undefined, + yField: string | undefined, + colorField: string | undefined, + isXTemporal: boolean, + isYTemporal: boolean, +): Map { + const seriesMap = new Map(); + + if (!xField || !yField) { + return seriesMap; + } + + dataValues.forEach(row => { + const xValue = parseValue(row[xField], isXTemporal); + const yValue = parseValue(row[yField], isYTemporal); + + // Skip invalid values + if (xValue === '' || yValue === '' || (typeof yValue !== 'number' && typeof yValue !== 'string')) { + return; + } + + const seriesName = colorField && row[colorField] !== undefined ? String(row[colorField]) : 'default'; + + if (!seriesMap.has(seriesName)) { + seriesMap.set(seriesName, []); + } + + seriesMap.get(seriesName)!.push({ + x: typeof xValue === 'string' ? parseFloat(xValue) || 0 : xValue, + y: yValue as number, + }); + }); + + return seriesMap; +} + +/** + * Transforms Vega-Lite specification to Fluent LineChart props + * + * @param spec - Vega-Lite specification + * @param colorMap - Color mapping ref for consistent coloring + * @param isDarkTheme - Whether dark theme is active + * @returns LineChartProps for rendering with Fluent LineChart component + */ +export function transformVegaLiteToLineChartProps( + spec: VegaLiteSpec, + colorMap: React.RefObject>, + isDarkTheme?: boolean, +): LineChartProps { + // Normalize spec into unit specs + const unitSpecs = normalizeSpec(spec); + + if (unitSpecs.length === 0) { + throw new Error('VegaLiteSchemaAdapter: No valid unit specs found in specification'); + } + + // For now, handle single unit spec (first layer) + // TODO: Support multiple layers by combining data from all layers + const primarySpec = unitSpecs[0]; + const dataValues = extractDataValues(primarySpec.data); + const encoding = primarySpec.encoding || {}; + const markProps = getMarkProperties(primarySpec.mark); + + // Extract field names and types + const xField = encoding.x?.field; + const yField = encoding.y?.field; + const colorField = encoding.color?.field; + + const isXTemporal = encoding.x?.type === 'temporal'; + const isYTemporal = encoding.y?.type === 'temporal'; + + // Group data into series + const seriesMap = groupDataBySeries(dataValues, xField, yField, colorField, isXTemporal, isYTemporal); + + // Convert series map to LineChartPoints array + const lineChartData: LineChartPoints[] = []; + let seriesIndex = 0; + + seriesMap.forEach((dataPoints, seriesName) => { + const color = markProps.color || getNextColor(seriesIndex, 0, isDarkTheme); + + const curveOption = mapInterpolateToCurve(markProps.interpolate); + + lineChartData.push({ + legend: seriesName, + data: dataPoints, + color, + ...(curveOption && { + lineOptions: { + curve: curveOption, + }, + }), + }); + + seriesIndex++; + }); + + // Extract chart title + const chartTitle = typeof spec.title === 'string' ? spec.title : spec.title?.text; + + // Extract axis titles and formats + const xAxisTitle = encoding.x?.axis?.title ?? undefined; + const yAxisTitle = encoding.y?.axis?.title ?? undefined; + const tickFormat = encoding.x?.axis?.format; + const yAxisTickFormatString = encoding.y?.axis?.format; + + // Convert y-axis format string to d3-format function + const yAxisTickFormat = yAxisTickFormatString ? d3Format(yAxisTickFormatString) : undefined; + + // Extract tick values and counts + const tickValues = encoding.x?.axis?.values; + const yAxisTickCount = encoding.y?.axis?.tickCount; + + // Extract domain/range for min/max values + const yMinValue = Array.isArray(encoding.y?.scale?.domain) ? encoding.y.scale.domain[0] as number : undefined; + const yMaxValue = Array.isArray(encoding.y?.scale?.domain) ? encoding.y.scale.domain[1] as number : undefined; + + // Extract annotations and color fill bars from layers + const annotations = extractAnnotations(spec); + const colorFillBars = extractColorFillBars(spec, isDarkTheme); + + // Check for log scale on Y-axis + const yAxisType = extractYAxisType(encoding); + + // Extract axis category ordering + const categoryOrderProps = extractAxisCategoryOrderProps(encoding); + + // Build LineChartProps + const chartProps: ChartProps = { + lineChartData, + ...(chartTitle && { chartTitle }), + }; + + return { + data: chartProps, + width: typeof spec.width === 'number' ? spec.width : undefined, + height: typeof spec.height === 'number' ? spec.height : undefined, + ...(xAxisTitle && { chartTitle: xAxisTitle }), + ...(yAxisTitle && { yAxisTitle }), + ...(tickFormat && { tickFormat }), + ...(yAxisTickFormat && { yAxisTickFormat }), + ...(tickValues && { tickValues }), + ...(yAxisTickCount && { yAxisTickCount }), + ...(yMinValue !== undefined && { yMinValue }), + ...(yMaxValue !== undefined && { yMaxValue }), + ...(annotations.length > 0 && { annotations }), + ...(colorFillBars.length > 0 && { colorFillBars }), + ...(yAxisType && { yAxisType }), + ...categoryOrderProps, + hideLegend: encoding.color?.legend?.disable ?? false, + }; +} + +/** + * Generates legend props from Vega-Lite specification + * Used for multi-plot scenarios where legends are rendered separately + * + * @param spec - Vega-Lite specification + * @param colorMap - Color mapping ref for consistent coloring + * @param isDarkTheme - Whether dark theme is active + * @returns LegendsProps for rendering legends + */ +export function getVegaLiteLegendsProps( + spec: VegaLiteSpec, + colorMap: React.RefObject>, + isDarkTheme?: boolean, +): LegendsProps { + const unitSpecs = normalizeSpec(spec); + const legends: Legend[] = []; + + if (unitSpecs.length === 0) { + return { + legends, + centerLegends: true, + enabledWrapLines: true, + canSelectMultipleLegends: true, + }; + } + + const primarySpec = unitSpecs[0]; + const dataValues = extractDataValues(primarySpec.data); + const encoding = primarySpec.encoding || {}; + const colorField = encoding.color?.field; + + if (!colorField) { + return { + legends, + centerLegends: true, + enabledWrapLines: true, + canSelectMultipleLegends: true, + }; + } + + // Extract unique series names + const seriesNames = new Set(); + dataValues.forEach(row => { + if (row[colorField] !== undefined) { + seriesNames.add(String(row[colorField])); + } + }); + + // Generate legends + let seriesIndex = 0; + seriesNames.forEach(seriesName => { + const color = getNextColor(seriesIndex, 0, isDarkTheme); + legends.push({ + title: seriesName, + color, + }); + seriesIndex++; + }); + + return { + legends, + centerLegends: true, + enabledWrapLines: true, + canSelectMultipleLegends: true, + }; +} + +/** + * Extracts chart titles from Vega-Lite specification + */ +export function getVegaLiteTitles(spec: VegaLiteSpec): { + chartTitle?: string; + xAxisTitle?: string; + yAxisTitle?: string; +} { + const unitSpecs = normalizeSpec(spec); + + if (unitSpecs.length === 0) { + return {}; + } + + const primarySpec = unitSpecs[0]; + const encoding = primarySpec.encoding || {}; + + return { + chartTitle: typeof spec.title === 'string' ? spec.title : spec.title?.text, + xAxisTitle: encoding.x?.axis?.title ?? undefined, + yAxisTitle: encoding.y?.axis?.title ?? undefined, + }; +} + +/** + * Transforms Vega-Lite specification to Fluent VerticalBarChart props + * + * Supports bar mark with quantitative y-axis and nominal/ordinal x-axis + * + * @param spec - Vega-Lite specification + * @param colorMap - Color mapping ref for consistent coloring + * @param isDarkTheme - Whether dark theme is active + * @returns VerticalBarChartProps for rendering + */ +export function transformVegaLiteToVerticalBarChartProps( + spec: VegaLiteSpec, + colorMap: React.RefObject>, + isDarkTheme?: boolean, +): VerticalBarChartProps { + const unitSpecs = normalizeSpec(spec); + + if (unitSpecs.length === 0) { + throw new Error('VegaLiteSchemaAdapter: No valid unit specs found in specification'); + } + + const primarySpec = unitSpecs[0]; + const dataValues = extractDataValues(primarySpec.data); + const encoding = primarySpec.encoding || {}; + const markProps = getMarkProperties(primarySpec.mark); + + const xField = encoding.x?.field; + const yField = encoding.y?.field; + const colorField = encoding.color?.field; + + if (!xField || !yField) { + throw new Error('VegaLiteSchemaAdapter: Both x and y encodings are required for bar charts'); + } + + const barData: VerticalBarChartDataPoint[] = []; + const colorIndex = new Map(); + let currentColorIndex = 0; + + dataValues.forEach(row => { + const xValue = row[xField]; + const yValue = row[yField]; + + if (xValue === undefined || yValue === undefined || typeof yValue !== 'number') { + return; + } + + const legend = colorField && row[colorField] !== undefined ? String(row[colorField]) : String(xValue); + + if (!colorIndex.has(legend)) { + colorIndex.set(legend, currentColorIndex++); + } + + const color = markProps.color || getNextColor(colorIndex.get(legend)!, 0, isDarkTheme); + + barData.push({ + x: xValue as number | string, + y: yValue, + legend, + color, + }); + }); + + const titles = getVegaLiteTitles(spec); + + // Extract axis category ordering + const categoryOrderProps = extractAxisCategoryOrderProps(encoding); + + return { + data: barData, + chartTitle: titles.chartTitle, + xAxisTitle: titles.xAxisTitle, + yAxisTitle: titles.yAxisTitle, + roundCorners: true, + wrapXAxisLables: typeof barData[0]?.x === 'string', + ...categoryOrderProps, + }; +} + +/** + * Transforms Vega-Lite specification to Fluent VerticalStackedBarChart props + * + * Supports stacked bar charts with color encoding for stacking + * + * @param spec - Vega-Lite specification + * @param colorMap - Color mapping ref for consistent coloring + * @param isDarkTheme - Whether dark theme is active + * @returns VerticalStackedBarChartProps for rendering + */ +export function transformVegaLiteToVerticalStackedBarChartProps( + spec: VegaLiteSpec, + colorMap: React.RefObject>, + isDarkTheme?: boolean, +): VerticalStackedBarChartProps { + const unitSpecs = normalizeSpec(spec); + + if (unitSpecs.length === 0) { + throw new Error('VegaLiteSchemaAdapter: No valid unit specs found in specification'); + } + + // Separate bar and line specs from layered specifications + const barSpecs = unitSpecs.filter(s => { + const mark = typeof s.mark === 'string' ? s.mark : s.mark?.type; + return mark === 'bar'; + }); + + const lineSpecs = unitSpecs.filter(s => { + const mark = typeof s.mark === 'string' ? s.mark : s.mark?.type; + return mark === 'line' || mark === 'point'; + }); + + if (barSpecs.length === 0) { + throw new Error('VegaLiteSchemaAdapter: At least one bar layer is required for stacked bar charts'); + } + + const primarySpec = barSpecs[0]; + const dataValues = extractDataValues(primarySpec.data); + const encoding = primarySpec.encoding || {}; + const markProps = getMarkProperties(primarySpec.mark); + + const xField = encoding.x?.field; + const yField = encoding.y?.field; + const colorField = encoding.color?.field; + const colorValue = encoding.color?.value; // Static color value + + if (!xField || !yField) { + throw new Error('VegaLiteSchemaAdapter: x and y encodings are required for stacked bar charts'); + } + + // Group data by x value, then by color (stack) + const mapXToDataPoints: { [key: string]: VerticalStackedChartProps } = {}; + const colorIndex = new Map(); + let currentColorIndex = 0; + + // Process bar data + dataValues.forEach(row => { + const xValue = row[xField]; + const yValue = row[yField]; + const stackValue = colorField ? row[colorField] : 'Bar'; // Default legend if no color field + + if (xValue === undefined || yValue === undefined || typeof yValue !== 'number') { + return; + } + + const xKey = String(xValue); + const legend = stackValue !== undefined ? String(stackValue) : 'Bar'; + + if (!mapXToDataPoints[xKey]) { + mapXToDataPoints[xKey] = { + xAxisPoint: xValue as number | string, + chartData: [], + lineData: [], + }; + } + + if (!colorIndex.has(legend)) { + colorIndex.set(legend, currentColorIndex++); + } + + // Use static color if provided, otherwise use color scale + const color = colorValue || markProps.color || getNextColor(colorIndex.get(legend)!, 0, isDarkTheme); + + mapXToDataPoints[xKey].chartData.push({ + legend, + data: yValue, + color, + }); + }); + + // Process line data from additional layers (if any) + lineSpecs.forEach((lineSpec, lineIndex) => { + const lineDataValues = extractDataValues(lineSpec.data); + const lineEncoding = lineSpec.encoding || {}; + const lineMarkProps = getMarkProperties(lineSpec.mark); + + const lineXField = lineEncoding.x?.field; + const lineYField = lineEncoding.y?.field; + const lineColorField = lineEncoding.color?.field; + + if (!lineXField || !lineYField) { + return; // Skip if required fields are missing + } + + const lineLegendBase = lineColorField ? 'Line' : `Line ${lineIndex + 1}`; + + lineDataValues.forEach(row => { + const xValue = row[lineXField]; + const yValue = row[lineYField]; + + if (xValue === undefined || yValue === undefined) { + return; + } + + const xKey = String(xValue); + const lineLegend = lineColorField && row[lineColorField] !== undefined + ? String(row[lineColorField]) + : lineLegendBase; + + // Ensure x-axis point exists + if (!mapXToDataPoints[xKey]) { + mapXToDataPoints[xKey] = { + xAxisPoint: xValue as number | string, + chartData: [], + lineData: [], + }; + } + + // Determine line color + let lineColor: string; + if (lineMarkProps.color) { + lineColor = lineMarkProps.color; + } else if (lineColorField && row[lineColorField] !== undefined) { + const lineColorKey = String(row[lineColorField]); + if (!colorIndex.has(lineColorKey)) { + colorIndex.set(lineColorKey, currentColorIndex++); + } + lineColor = getNextColor(colorIndex.get(lineColorKey)!, 0, isDarkTheme); + } else { + // Default color for lines + lineColor = getNextColor(currentColorIndex++, 0, isDarkTheme); + } + + // Determine if this line should use secondary Y-axis + // Check if spec has independent Y scales AND line uses different Y field than bars + const hasIndependentYScales = (spec as any).resolve?.scale?.y === 'independent'; + const useSecondaryYScale = hasIndependentYScales && lineYField !== yField; + + const lineData: LineDataInVerticalStackedBarChart = { + y: yValue as number, + color: lineColor, + legend: lineLegend, + legendShape: 'triangle', + data: typeof yValue === 'number' ? yValue : undefined, + useSecondaryYScale, + }; + + // Add line options if available + if (lineMarkProps.strokeWidth) { + lineData.lineOptions = { + strokeWidth: lineMarkProps.strokeWidth, + }; + } + + mapXToDataPoints[xKey].lineData!.push(lineData); + }); + }); + + const chartData = Object.values(mapXToDataPoints); + const titles = getVegaLiteTitles(spec); + + // Check if we have secondary Y-axis data + const hasSecondaryYAxis = chartData.some(point => + point.lineData?.some(line => line.useSecondaryYScale) + ); + + // Extract secondary Y-axis properties from line layers + let secondaryYAxisProps = {}; + if (hasSecondaryYAxis && lineSpecs.length > 0) { + const lineSpec = lineSpecs[0]; + const lineEncoding = lineSpec.encoding || {}; + const lineYAxis = lineEncoding.y?.axis; + + if (lineYAxis?.title) { + secondaryYAxisProps = { + secondaryYAxistitle: lineYAxis.title, + }; + } + } + + // Check for log scale on primary Y-axis + const yAxisType = extractYAxisType(encoding); + + // Extract axis category ordering + const categoryOrderProps = extractAxisCategoryOrderProps(encoding); + + return { + data: chartData, + chartTitle: titles.chartTitle, + xAxisTitle: titles.xAxisTitle, + yAxisTitle: titles.yAxisTitle, + width: spec.width as number | undefined, + height: (spec.height as number | undefined) ?? 350, + hideLegend: true, + showYAxisLables: true, + roundCorners: true, + hideTickOverlap: true, + barGapMax: 2, + noOfCharsToTruncate: 20, + showYAxisLablesTooltip: true, + wrapXAxisLables: typeof chartData[0]?.xAxisPoint === 'string', + ...(yAxisType && { yAxisType }), + ...secondaryYAxisProps, + ...categoryOrderProps, + }; +} + +/** + * Transforms Vega-Lite specification to Fluent GroupedVerticalBarChart props + * + * Supports grouped bar charts with color encoding for grouping + * + * @param spec - Vega-Lite specification + * @param colorMap - Color mapping ref for consistent coloring + * @param isDarkTheme - Whether dark theme is active + * @returns GroupedVerticalBarChartProps for rendering + */ +export function transformVegaLiteToGroupedVerticalBarChartProps( + spec: VegaLiteSpec, + colorMap: React.RefObject>, + isDarkTheme?: boolean, +): GroupedVerticalBarChartProps { + const unitSpecs = normalizeSpec(spec); + + if (unitSpecs.length === 0) { + throw new Error('VegaLiteSchemaAdapter: No valid unit specs found in specification'); + } + + const primarySpec = unitSpecs[0]; + const dataValues = extractDataValues(primarySpec.data); + const encoding = primarySpec.encoding || {}; + + const xField = encoding.x?.field; + const yField = encoding.y?.field; + const colorField = encoding.color?.field; + + if (!xField || !yField || !colorField) { + throw new Error('VegaLiteSchemaAdapter: x, y, and color encodings are required for grouped bar charts'); + } + + // Group data by x value (name), then by color (series) + const groupedData: { [key: string]: { [legend: string]: number } } = {}; + const colorIndex = new Map(); + let currentColorIndex = 0; + + dataValues.forEach(row => { + const xValue = row[xField]; + const yValue = row[yField]; + const groupValue = row[colorField]; + + if (xValue === undefined || yValue === undefined || typeof yValue !== 'number' || groupValue === undefined) { + return; + } + + const xKey = String(xValue); + const legend = String(groupValue); + + if (!groupedData[xKey]) { + groupedData[xKey] = {}; + } + + groupedData[xKey][legend] = yValue; + + if (!colorIndex.has(legend)) { + colorIndex.set(legend, currentColorIndex++); + } + }); + + // Convert to GroupedVerticalBarChartData format + const chartData = Object.keys(groupedData).map(name => { + const series = Object.keys(groupedData[name]).map(legend => ({ + key: legend, + data: groupedData[name][legend], + legend, + color: getNextColor(colorIndex.get(legend)!, 0, isDarkTheme), + })); + + return { + name, + series, + }; + }); + + const titles = getVegaLiteTitles(spec); + + return { + data: chartData, + chartTitle: titles.chartTitle, + xAxisTitle: titles.xAxisTitle, + yAxisTitle: titles.yAxisTitle, + }; +} + +/** + * Transforms Vega-Lite specification to Fluent HorizontalBarChartWithAxis props + * + * Supports horizontal bar charts with quantitative x-axis and nominal/ordinal y-axis + * + * @param spec - Vega-Lite specification + * @param colorMap - Color mapping ref for consistent coloring + * @param isDarkTheme - Whether dark theme is active + * @returns HorizontalBarChartWithAxisProps for rendering + */ +export function transformVegaLiteToHorizontalBarChartProps( + spec: VegaLiteSpec, + colorMap: React.RefObject>, + isDarkTheme?: boolean, +): HorizontalBarChartWithAxisProps { + const unitSpecs = normalizeSpec(spec); + + if (unitSpecs.length === 0) { + throw new Error('VegaLiteSchemaAdapter: No valid unit specs found in specification'); + } + + const primarySpec = unitSpecs[0]; + const dataValues = extractDataValues(primarySpec.data); + const encoding = primarySpec.encoding || {}; + const markProps = getMarkProperties(primarySpec.mark); + + const xField = encoding.x?.field; + const yField = encoding.y?.field; + const colorField = encoding.color?.field; + + if (!xField || !yField) { + throw new Error('VegaLiteSchemaAdapter: Both x and y encodings are required for horizontal bar charts'); + } + + const barData: HorizontalBarChartWithAxisDataPoint[] = []; + const colorIndex = new Map(); + let currentColorIndex = 0; + + dataValues.forEach(row => { + const xValue = row[xField]; + const yValue = row[yField]; + + if (xValue === undefined || yValue === undefined || typeof xValue !== 'number') { + return; + } + + const legend = colorField && row[colorField] !== undefined ? String(row[colorField]) : String(yValue); + + if (!colorIndex.has(legend)) { + colorIndex.set(legend, currentColorIndex++); + } + + const color = markProps.color || getNextColor(colorIndex.get(legend)!, 0, isDarkTheme); + + barData.push({ + x: xValue, + y: yValue as number | string, + legend, + color, + }); + }); + + const titles = getVegaLiteTitles(spec); + const annotations = extractAnnotations(spec); + const tickConfig = extractTickConfig(spec); + + const result: HorizontalBarChartWithAxisProps = { + data: barData, + chartTitle: titles.chartTitle, + xAxisTitle: titles.xAxisTitle, + yAxisTitle: titles.yAxisTitle, + }; + + if (annotations.length > 0) { + result.annotations = annotations; + } + + if (tickConfig.tickValues) { + result.tickValues = tickConfig.tickValues as number[] | string[] | Date[]; + } + + if (tickConfig.xAxisTickCount) { + result.xAxisTickCount = tickConfig.xAxisTickCount; + } + + if (tickConfig.yAxisTickCount) { + result.yAxisTickCount = tickConfig.yAxisTickCount; + } + + return result; +} + +/** + * Transforms Vega-Lite specification to Fluent AreaChart props + * + * Area charts use the same data structure as line charts but with filled areas. + * Supports temporal/quantitative x-axis and quantitative y-axis with color-encoded series + * + * Vega-Lite Stacking Behavior: + * - If y.stack is null or undefined with no color encoding: mode = 'tozeroy' (fill to zero baseline) + * - If y.stack is 'zero' or color encoding exists: mode = 'tonexty' (stacked areas) + * - Multiple series with color encoding automatically stack + * + * @param spec - Vega-Lite specification + * @param colorMap - Color mapping ref for consistent coloring + * @param isDarkTheme - Whether dark theme is active + * @returns AreaChartProps for rendering + */ +export function transformVegaLiteToAreaChartProps( + spec: VegaLiteSpec, + colorMap: React.RefObject>, + isDarkTheme?: boolean, +): AreaChartProps { + // Area charts use the same structure as line charts in Fluent Charts + // The only difference is the component renders with filled areas + const lineChartProps = transformVegaLiteToLineChartProps(spec, colorMap, isDarkTheme); + + // Determine stacking mode based on Vega-Lite spec + const unitSpecs = normalizeSpec(spec); + const primarySpec = unitSpecs[0]; + const encoding = primarySpec?.encoding || {}; + + // Check if stacking is enabled + // In Vega-Lite, area charts stack by default when color encoding is present + // stack can be explicitly set to null to disable stacking + const hasColorEncoding = !!encoding.color?.field; + const stackConfig = encoding.y?.stack; + const isStacked = stackConfig !== null && (stackConfig === 'zero' || hasColorEncoding); + + // Set mode: 'tozeroy' for single series, 'tonexty' for stacked + const mode: 'tozeroy' | 'tonexty' = isStacked ? 'tonexty' : 'tozeroy'; + + return { + ...lineChartProps, + mode, + } as AreaChartProps; +} + +/** + * Transforms Vega-Lite specification to Fluent ScatterChart props + * + * Supports scatter plots with quantitative x and y axes and color-encoded series + * + * @param spec - Vega-Lite specification + * @param colorMap - Color mapping ref for consistent coloring + * @param isDarkTheme - Whether dark theme is active + * @returns ScatterChartProps for rendering + */ +export function transformVegaLiteToScatterChartProps( + spec: VegaLiteSpec, + colorMap: React.RefObject>, + isDarkTheme?: boolean, +): ScatterChartProps { + const unitSpecs = normalizeSpec(spec); + + if (unitSpecs.length === 0) { + throw new Error('VegaLiteSchemaAdapter: No valid unit specs found in specification'); + } + + const primarySpec = unitSpecs[0]; + const dataValues = extractDataValues(primarySpec.data); + const encoding = primarySpec.encoding || {}; + const markProps = getMarkProperties(primarySpec.mark); + + const xField = encoding.x?.field; + const yField = encoding.y?.field; + const colorField = encoding.color?.field; + const sizeField = encoding.size?.field; + + if (!xField || !yField) { + throw new Error('VegaLiteSchemaAdapter: Both x and y encodings are required for scatter charts'); + } + + const isXTemporal = encoding.x?.type === 'temporal'; + const isYTemporal = encoding.y?.type === 'temporal'; + + // Group data by series (color encoding) + const groupedData: Record>> = {}; + + dataValues.forEach(row => { + const seriesName = colorField && row[colorField] !== undefined ? String(row[colorField]) : 'default'; + + if (!groupedData[seriesName]) { + groupedData[seriesName] = []; + } + + groupedData[seriesName].push(row); + }); + + const seriesNames = Object.keys(groupedData); + + const chartData: LineChartPoints[] = seriesNames.map((seriesName, index) => { + const seriesData = groupedData[seriesName]; + + const points: ScatterChartDataPoint[] = seriesData.map(row => { + const xValue = parseValue(row[xField], isXTemporal); + const yValue = parseValue(row[yField], isYTemporal); + const markerSize = sizeField && row[sizeField] !== undefined ? Number(row[sizeField]) : undefined; + + return { + x: typeof xValue === 'number' || xValue instanceof Date ? xValue : String(xValue), + y: typeof yValue === 'number' ? yValue : 0, + ...(markerSize !== undefined && { markerSize }), + }; + }); + + // Get color for this series + const colorValue = colorField && encoding.color?.scale?.range && Array.isArray(encoding.color.scale.range) + ? encoding.color.scale.range[index] + : markProps.color; + const color = typeof colorValue === 'string' ? colorValue : getNextColor(index, 0, isDarkTheme); + + return { + legend: seriesName, + data: points, + color, + }; + }); + + const titles = getVegaLiteTitles(spec); + const annotations = extractAnnotations(spec); + const tickConfig = extractTickConfig(spec); + + // Check for log scale on Y-axis + const yAxisType = extractYAxisType(encoding); + + // Extract axis category ordering + const categoryOrderProps = extractAxisCategoryOrderProps(encoding); + + const result: ScatterChartProps = { + data: { + chartTitle: titles.chartTitle, + scatterChartData: chartData, + }, + xAxisTitle: titles.xAxisTitle, + yAxisTitle: titles.yAxisTitle, + ...(yAxisType && { yAxisType }), + ...categoryOrderProps, + }; + + if (annotations.length > 0) { + result.annotations = annotations; + } + + if (tickConfig.tickValues) { + result.tickValues = tickConfig.tickValues as number[] | string[] | Date[]; + } + + if (tickConfig.xAxisTickCount) { + result.xAxisTickCount = tickConfig.xAxisTickCount; + } + + if (tickConfig.yAxisTickCount) { + result.yAxisTickCount = tickConfig.yAxisTickCount; + } + + return result; +} + +/** + * Transforms Vega-Lite specification to Fluent DonutChart props + * + * Supports pie/donut charts with arc marks and theta encoding + * + * @param spec - Vega-Lite specification + * @param colorMap - Color mapping ref for consistent coloring + * @param isDarkTheme - Whether dark theme is active + * @returns DonutChartProps for rendering + */ +export function transformVegaLiteToDonutChartProps( + spec: VegaLiteSpec, + colorMap: React.RefObject>, + isDarkTheme?: boolean, +): DonutChartProps { + const unitSpecs = normalizeSpec(spec); + + if (unitSpecs.length === 0) { + throw new Error('VegaLiteSchemaAdapter: No valid unit specs found in specification'); + } + + const primarySpec = unitSpecs[0]; + const dataValues = extractDataValues(primarySpec.data); + const encoding = primarySpec.encoding || {}; + + const thetaField = encoding.theta?.field; + const colorField = encoding.color?.field; + + if (!thetaField) { + throw new Error('VegaLiteSchemaAdapter: Theta encoding is required for donut charts'); + } + + // Extract innerRadius from mark properties if available + const mark = primarySpec.mark; + const innerRadius = typeof mark === 'object' && (mark as any)?.innerRadius !== undefined + ? (mark as any).innerRadius + : 0; + + const chartData: ChartDataPoint[] = []; + const colorIndex = new Map(); + let currentColorIndex = 0; + + dataValues.forEach(row => { + const value = row[thetaField]; + const legend = colorField && row[colorField] !== undefined ? String(row[colorField]) : String(value); + + if (value === undefined || typeof value !== 'number') { + return; + } + + if (!colorIndex.has(legend)) { + colorIndex.set(legend, currentColorIndex++); + } + + chartData.push({ + legend, + data: value, + color: getNextColor(colorIndex.get(legend)!, 0, isDarkTheme), + }); + }); + + const titles = getVegaLiteTitles(spec); + + return { + data: { + chartTitle: titles.chartTitle, + chartData, + }, + innerRadius, + }; +} + +/** + * Transforms Vega-Lite specification to Fluent HeatMapChart props + * + * Supports heatmaps with rect marks and x/y/color encodings + * + * @param spec - Vega-Lite specification + * @param colorMap - Color mapping ref for consistent coloring + * @param isDarkTheme - Whether dark theme is active + * @returns HeatMapChartProps for rendering + */ +export function transformVegaLiteToHeatMapChartProps( + spec: VegaLiteSpec, + colorMap: React.RefObject>, + isDarkTheme?: boolean, +): HeatMapChartProps { + const unitSpecs = normalizeSpec(spec); + + if (unitSpecs.length === 0) { + throw new Error('VegaLiteSchemaAdapter: No valid unit specs found in specification'); + } + + const primarySpec = unitSpecs[0]; + const dataValues = extractDataValues(primarySpec.data); + const encoding = primarySpec.encoding || {}; + + const xField = encoding.x?.field; + const yField = encoding.y?.field; + const colorField = encoding.color?.field; + + if (!xField || !yField || !colorField) { + throw new Error('VegaLiteSchemaAdapter: x, y, and color encodings are required for heatmap charts'); + } + + const heatmapDataPoints: HeatMapChartDataPoint[] = []; + let minValue = Number.POSITIVE_INFINITY; + let maxValue = Number.NEGATIVE_INFINITY; + + dataValues.forEach(row => { + const xValue = row[xField]; + const yValue = row[yField]; + const colorValue = row[colorField]; + + if (xValue === undefined || yValue === undefined || colorValue === undefined) { + return; + } + + const value = typeof colorValue === 'number' ? colorValue : 0; + + minValue = Math.min(minValue, value); + maxValue = Math.max(maxValue, value); + + heatmapDataPoints.push({ + x: xValue as string | Date | number, + y: yValue as string | Date | number, + value, + rectText: value, + }); + }); + + const heatmapData: HeatMapChartData = { + legend: '', + data: heatmapDataPoints, + value: 0, + }; + + const titles = getVegaLiteTitles(spec); + + // Create color scale domain and range + // Use a simple 5-point gradient from min to max + const steps = 5; + const domainValues: number[] = []; + const rangeValues: string[] = []; + + for (let i = 0; i < steps; i++) { + const t = i / (steps - 1); + domainValues.push(minValue + (maxValue - minValue) * t); + + // Generate gradient from blue to red (cold to hot) + // In dark theme, use different colors + if (isDarkTheme) { + // Dark theme: darker blue to bright orange + const r = Math.round(0 + 255 * t); + const g = Math.round(100 + (165 - 100) * t); + const b = Math.round(255 - 255 * t); + rangeValues.push(`rgb(${r}, ${g}, ${b})`); + } else { + // Light theme: light blue to red + const r = Math.round(0 + 255 * t); + const g = Math.round(150 - 150 * t); + const b = Math.round(255 - 255 * t); + rangeValues.push(`rgb(${r}, ${g}, ${b})`); + } + } + + return { + chartTitle: titles.chartTitle, + data: [heatmapData], + domainValuesForColorScale: domainValues, + rangeValuesForColorScale: rangeValues, + xAxisTitle: titles.xAxisTitle, + yAxisTitle: titles.yAxisTitle, + width: spec.width as number | undefined, + height: (spec.height as number | undefined) ?? 350, + hideLegend: true, + showYAxisLables: true, + sortOrder: 'none', + hideTickOverlap: true, + noOfCharsToTruncate: 20, + showYAxisLablesTooltip: true, + wrapXAxisLables: true, + }; +} + +/** + * Helper function to get bin center for display + */ +function getBinCenter(bin: Bin): number { + return (bin.x0! + bin.x1!) / 2; +} + +/** + * Helper function to calculate histogram aggregation function + * + * @param aggregate - Aggregation type (count, sum, mean, min, max) + * @param bin - Binned data values + * @returns Aggregated value + */ +function calculateHistogramAggregate( + aggregate: 'count' | 'sum' | 'mean' | 'average' | 'median' | 'min' | 'max' | undefined, + bin: number[], +): number { + switch (aggregate) { + case 'sum': + return d3Sum(bin); + case 'mean': + case 'average': + return bin.length === 0 ? 0 : d3Mean(bin) ?? 0; + case 'min': + return d3Min(bin) ?? 0; + case 'max': + return d3Max(bin) ?? 0; + case 'count': + default: + return bin.length; + } +} + +/** + * Transforms Vega-Lite specification to Fluent VerticalBarChart props for histogram rendering + * + * Supports histograms with binned x-axis and aggregated y-axis + * Vega-Lite syntax: `{ "mark": "bar", "encoding": { "x": { "field": "value", "bin": true }, "y": { "aggregate": "count" } } }` + * + * @param spec - Vega-Lite specification + * @param colorMap - Color mapping ref for consistent coloring + * @param isDarkTheme - Whether dark theme is active + * @returns VerticalBarChartProps for rendering histogram + */ +export function transformVegaLiteToHistogramProps( + spec: VegaLiteSpec, + colorMap: React.RefObject>, + isDarkTheme?: boolean, +): VerticalBarChartProps { + const unitSpecs = normalizeSpec(spec); + + if (unitSpecs.length === 0) { + throw new Error('VegaLiteSchemaAdapter: No valid unit specs found in specification'); + } + + const primarySpec = unitSpecs[0]; + const dataValues = extractDataValues(primarySpec.data); + const encoding = primarySpec.encoding || {}; + + const xField = encoding.x?.field; + const yAggregate = encoding.y?.aggregate || 'count'; + const binConfig = encoding.x?.bin; + + if (!xField || !binConfig) { + throw new Error('VegaLiteSchemaAdapter: Histogram requires x encoding with bin property'); + } + + // Extract numeric values from the field + const values = dataValues + .map(row => row[xField]) + .filter(val => typeof val === 'number') as number[]; + + if (values.length === 0) { + throw new Error('VegaLiteSchemaAdapter: No numeric values found for histogram binning'); + } + + // Create bins using d3 + const [minVal, maxVal] = d3Extent(values) as [number, number]; + const binGenerator = d3Bin().domain([minVal, maxVal]); + + // Apply bin configuration + if (typeof binConfig === 'object') { + if (binConfig.maxbins) { + binGenerator.thresholds(binConfig.maxbins); + } + if (binConfig.extent) { + binGenerator.domain(binConfig.extent); + } + } + + const bins = binGenerator(values); + + // Calculate histogram data points + const histogramData: VerticalBarChartDataPoint[] = bins.map(bin => { + const x = getBinCenter(bin); + const y = calculateHistogramAggregate(yAggregate, bin); + const xAxisCalloutData = `[${bin.x0} - ${bin.x1})`; + + return { + x, + y, + legend: encoding.color?.field ? String(dataValues[0]?.[encoding.color.field]) : 'Frequency', + color: getNextColor(0, 0, isDarkTheme), + xAxisCalloutData, + }; + }); + + const titles = getVegaLiteTitles(spec); + const annotations = extractAnnotations(spec); + + return { + data: histogramData, + chartTitle: titles.chartTitle, + xAxisTitle: titles.xAxisTitle || xField, + yAxisTitle: titles.yAxisTitle || yAggregate, + roundCorners: true, + hideTickOverlap: true, + maxBarWidth: 50, + ...(annotations.length > 0 && { annotations }), + mode: 'histogram', + }; +} diff --git a/packages/charts/react-charts/library/src/components/DeclarativeChart/VegaLiteSchemaAdapterUT.test.tsx b/packages/charts/react-charts/library/src/components/DeclarativeChart/VegaLiteSchemaAdapterUT.test.tsx new file mode 100644 index 0000000000000..93199f4c5583b --- /dev/null +++ b/packages/charts/react-charts/library/src/components/DeclarativeChart/VegaLiteSchemaAdapterUT.test.tsx @@ -0,0 +1,350 @@ +import { + transformVegaLiteToLineChartProps, + getVegaLiteLegendsProps, + getVegaLiteTitles, +} from './VegaLiteSchemaAdapter'; +import type { VegaLiteSpec } from './VegaLiteTypes'; + +const colorMap = new Map(); + +describe('VegaLiteSchemaAdapter', () => { + describe('transformVegaLiteToLineChartProps', () => { + test('Should transform basic line chart with quantitative axes', () => { + const spec: VegaLiteSpec = { + mark: 'line', + data: { + values: [ + { x: 1, y: 28 }, + { x: 2, y: 55 }, + { x: 3, y: 43 }, + { x: 4, y: 91 }, + { x: 5, y: 81 }, + ], + }, + encoding: { + x: { field: 'x', type: 'quantitative' }, + y: { field: 'y', type: 'quantitative' }, + }, + }; + + const result = transformVegaLiteToLineChartProps(spec, { current: colorMap }, false); + + expect(result).toMatchSnapshot(); + expect(result.data.lineChartData).toHaveLength(1); + expect(result.data.lineChartData![0].data).toHaveLength(5); + expect(result.data.lineChartData![0].legend).toBe('default'); + }); + + test('Should transform line chart with temporal x-axis', () => { + const spec: VegaLiteSpec = { + mark: 'line', + data: { + values: [ + { date: '2024-01-01', value: 100 }, + { date: '2024-02-01', value: 150 }, + { date: '2024-03-01', value: 120 }, + { date: '2024-04-01', value: 180 }, + ], + }, + encoding: { + x: { field: 'date', type: 'temporal', axis: { title: 'Date' } }, + y: { field: 'value', type: 'quantitative', axis: { title: 'Value' } }, + }, + title: 'Time Series Chart', + }; + + const result = transformVegaLiteToLineChartProps(spec, { current: colorMap }, false); + + expect(result).toMatchSnapshot(); + expect(result.data.lineChartData).toHaveLength(1); + expect(result.data.lineChartData![0].data[0].x).toBeInstanceOf(Date); + expect(result.yAxisTitle).toBe('Value'); + }); + + test('Should transform multi-series chart with color encoding', () => { + const spec: VegaLiteSpec = { + mark: 'line', + data: { + values: [ + { x: 1, y: 28, category: 'A' }, + { x: 2, y: 55, category: 'A' }, + { x: 3, y: 43, category: 'A' }, + { x: 1, y: 35, category: 'B' }, + { x: 2, y: 60, category: 'B' }, + { x: 3, y: 50, category: 'B' }, + ], + }, + encoding: { + x: { field: 'x', type: 'quantitative' }, + y: { field: 'y', type: 'quantitative' }, + color: { field: 'category', type: 'nominal' }, + }, + }; + + const result = transformVegaLiteToLineChartProps(spec, { current: colorMap }, false); + + expect(result).toMatchSnapshot(); + expect(result.data.lineChartData).toHaveLength(2); + expect(result.data.lineChartData![0].legend).toBe('A'); + expect(result.data.lineChartData![1].legend).toBe('B'); + expect(result.data.lineChartData![0].data).toHaveLength(3); + expect(result.data.lineChartData![1].data).toHaveLength(3); + }); + + test('Should transform layered spec with line and point marks', () => { + const spec: VegaLiteSpec = { + data: { + values: [ + { x: 1, y: 28 }, + { x: 2, y: 55 }, + { x: 3, y: 43 }, + ], + }, + layer: [ + { + mark: 'line', + encoding: { + x: { field: 'x', type: 'quantitative' }, + y: { field: 'y', type: 'quantitative' }, + }, + }, + { + mark: 'point', + encoding: { + x: { field: 'x', type: 'quantitative' }, + y: { field: 'y', type: 'quantitative' }, + }, + }, + ], + }; + + const result = transformVegaLiteToLineChartProps(spec, { current: colorMap }, false); + + expect(result).toMatchSnapshot(); + expect(result.data.lineChartData).toHaveLength(1); + expect(result.data.lineChartData![0].data).toHaveLength(3); + }); + + test('Should extract axis titles and formats', () => { + const spec: VegaLiteSpec = { + mark: 'line', + data: { + values: [ + { x: 1, y: 100 }, + { x: 2, y: 200 }, + ], + }, + encoding: { + x: { + field: 'x', + type: 'quantitative', + axis: { title: 'X Axis', format: '.0f' }, + }, + y: { + field: 'y', + type: 'quantitative', + axis: { title: 'Y Axis', format: '.2f', tickCount: 5 }, + }, + }, + title: 'Chart with Formats', + width: 800, + height: 400, + }; + + const result = transformVegaLiteToLineChartProps(spec, { current: colorMap }, false); + + expect(result).toMatchSnapshot(); + expect(result.tickFormat).toBe('.0f'); + expect(result.yAxisTickFormat).toBe('.2f'); + expect(result.yAxisTickCount).toBe(5); + expect(result.width).toBe(800); + expect(result.height).toBe(400); + }); + + test('Should handle interpolation mapping', () => { + const spec: VegaLiteSpec = { + mark: { + type: 'line', + interpolate: 'monotone', + }, + data: { + values: [ + { x: 1, y: 28 }, + { x: 2, y: 55 }, + ], + }, + encoding: { + x: { field: 'x', type: 'quantitative' }, + y: { field: 'y', type: 'quantitative' }, + }, + }; + + const result = transformVegaLiteToLineChartProps(spec, { current: colorMap }, false); + + expect(result).toMatchSnapshot(); + expect(result.data.lineChartData![0].lineOptions?.curve).toBe('monotoneX'); + }); + + test('Should handle y-axis domain/range', () => { + const spec: VegaLiteSpec = { + mark: 'line', + data: { + values: [ + { x: 1, y: 50 }, + { x: 2, y: 150 }, + ], + }, + encoding: { + x: { field: 'x', type: 'quantitative' }, + y: { + field: 'y', + type: 'quantitative', + scale: { domain: [0, 200] }, + }, + }, + }; + + const result = transformVegaLiteToLineChartProps(spec, { current: colorMap }, false); + + expect(result).toMatchSnapshot(); + expect(result.yMinValue).toBe(0); + expect(result.yMaxValue).toBe(200); + }); + + test('Should hide legend when disabled', () => { + const spec: VegaLiteSpec = { + mark: 'line', + data: { + values: [ + { x: 1, y: 28, category: 'A' }, + { x: 2, y: 55, category: 'B' }, + ], + }, + encoding: { + x: { field: 'x', type: 'quantitative' }, + y: { field: 'y', type: 'quantitative' }, + color: { field: 'category', type: 'nominal', legend: { disable: true } }, + }, + }; + + const result = transformVegaLiteToLineChartProps(spec, { current: colorMap }, false); + + expect(result).toMatchSnapshot(); + expect(result.hideLegend).toBe(true); + }); + + test('Should throw error for empty spec', () => { + const spec: VegaLiteSpec = {}; + + expect(() => transformVegaLiteToLineChartProps(spec, { current: colorMap }, false)).toThrow( + 'No valid unit specs found', + ); + }); + }); + + describe('getVegaLiteLegendsProps', () => { + test('Should generate legends for multi-series chart', () => { + const spec: VegaLiteSpec = { + mark: 'line', + data: { + values: [ + { x: 1, y: 28, series: 'Alpha' }, + { x: 2, y: 55, series: 'Beta' }, + { x: 3, y: 43, series: 'Gamma' }, + ], + }, + encoding: { + x: { field: 'x', type: 'quantitative' }, + y: { field: 'y', type: 'quantitative' }, + color: { field: 'series', type: 'nominal' }, + }, + }; + + const result = getVegaLiteLegendsProps(spec, { current: colorMap }, false); + + expect(result).toMatchSnapshot(); + expect(result.legends).toHaveLength(3); + expect(result.legends.map(l => l.title)).toContain('Alpha'); + expect(result.legends.map(l => l.title)).toContain('Beta'); + expect(result.legends.map(l => l.title)).toContain('Gamma'); + expect(result.canSelectMultipleLegends).toBe(true); + }); + + test('Should return empty legends when no color encoding', () => { + const spec: VegaLiteSpec = { + mark: 'line', + data: { + values: [ + { x: 1, y: 28 }, + { x: 2, y: 55 }, + ], + }, + encoding: { + x: { field: 'x', type: 'quantitative' }, + y: { field: 'y', type: 'quantitative' }, + }, + }; + + const result = getVegaLiteLegendsProps(spec, { current: colorMap }, false); + + expect(result).toMatchSnapshot(); + expect(result.legends).toHaveLength(0); + }); + }); + + describe('getVegaLiteTitles', () => { + test('Should extract chart and axis titles', () => { + const spec: VegaLiteSpec = { + title: 'Sales Over Time', + mark: 'line', + data: { values: [] }, + encoding: { + x: { field: 'month', type: 'temporal', axis: { title: 'Month' } }, + y: { field: 'sales', type: 'quantitative', axis: { title: 'Sales ($)' } }, + }, + }; + + const result = getVegaLiteTitles(spec); + + expect(result).toMatchSnapshot(); + expect(result.chartTitle).toBe('Sales Over Time'); + expect(result.xAxisTitle).toBe('Month'); + expect(result.yAxisTitle).toBe('Sales ($)'); + }); + + test('Should handle object-form title', () => { + const spec: VegaLiteSpec = { + title: { text: 'Main Title', subtitle: 'Subtitle' }, + mark: 'line', + data: { values: [] }, + encoding: { + x: { field: 'x', type: 'quantitative' }, + y: { field: 'y', type: 'quantitative' }, + }, + }; + + const result = getVegaLiteTitles(spec); + + expect(result).toMatchSnapshot(); + expect(result.chartTitle).toBe('Main Title'); + }); + + test('Should return empty titles for minimal spec', () => { + const spec: VegaLiteSpec = { + mark: 'line', + data: { values: [] }, + encoding: { + x: { field: 'x', type: 'quantitative' }, + y: { field: 'y', type: 'quantitative' }, + }, + }; + + const result = getVegaLiteTitles(spec); + + expect(result).toMatchSnapshot(); + expect(result.chartTitle).toBeUndefined(); + expect(result.xAxisTitle).toBeUndefined(); + expect(result.yAxisTitle).toBeUndefined(); + }); + }); +}); diff --git a/packages/charts/react-charts/library/src/components/DeclarativeChart/VegaLiteTypes.ts b/packages/charts/react-charts/library/src/components/DeclarativeChart/VegaLiteTypes.ts new file mode 100644 index 0000000000000..4089bf7dddb7d --- /dev/null +++ b/packages/charts/react-charts/library/src/components/DeclarativeChart/VegaLiteTypes.ts @@ -0,0 +1,516 @@ +/** + * Vega-Lite TypeScript interfaces for declarative chart specifications. + * This is a minimal subset focused on line/point charts with basic encodings. + * + * RECOMMENDED: For full type coverage, install the official vega-lite package: + * ``` + * npm install vega-lite + * ``` + * Then import `TopLevelSpec` from 'vega-lite' for complete schema support. + * + * The types provided here are a lightweight alternative that covers common use cases + * without requiring the full vega-lite dependency (~5.8MB unpacked). + * + * Full Vega-Lite spec: https://vega.github.io/vega-lite/docs/ + * + * TODO: Add support for: + * - Transform operations (filter, aggregate, calculate, etc.) + * - Remote data sources (url, named datasets) + * - Facet and concatenation for multi-view layouts + * - Selection interactions + * - Additional mark types (bar, area, etc.) + * - Conditional encodings + * - Tooltip customization + */ + +/** + * Vega-Lite data type for field encodings + */ +export type VegaLiteType = 'quantitative' | 'temporal' | 'ordinal' | 'nominal' | 'geojson'; + +/** + * Vega-Lite mark types + */ +export type VegaLiteMark = 'line' | 'point' | 'circle' | 'square' | 'bar' | 'area' | 'rect' | 'rule' | 'text'; + +/** + * Vega-Lite scale type + */ +export type VegaLiteScaleType = 'linear' | 'log' | 'pow' | 'sqrt' | 'symlog' | 'time' | 'utc' | 'ordinal' | 'band' | 'point'; + +/** + * Vega-Lite interpolation method + */ +export type VegaLiteInterpolate = 'linear' | 'linear-closed' | 'step' | 'step-before' | 'step-after' | 'basis' | 'cardinal' | 'monotone' | 'natural'; + +/** + * Vega-Lite axis configuration + */ +export interface VegaLiteAxis { + /** + * Axis title + */ + title?: string | null; + + /** + * Format string for axis tick labels + * Uses d3-format for quantitative and d3-time-format for temporal + */ + format?: string; + + /** + * Tick values to display + */ + values?: number[] | string[]; + + /** + * Number of ticks + */ + tickCount?: number; + + /** + * Grid visibility + */ + grid?: boolean; +} + +/** + * Vega-Lite scale configuration + */ +export interface VegaLiteScale { + /** + * Scale type + */ + type?: VegaLiteScaleType; + + /** + * Domain values [min, max] + */ + domain?: [number | string, number | string]; + + /** + * Range values [min, max] + */ + range?: [number | string, number | string] | string[]; + + /** + * Color scheme name (e.g., 'category10', 'tableau10') + */ + scheme?: string; +} + +/** + * Vega-Lite legend configuration + */ +export interface VegaLiteLegend { + /** + * Legend title + */ + title?: string | null; + + /** + * Hide the legend + */ + disable?: boolean; +} + +/** + * Vega-Lite sort specification + */ +export type VegaLiteSort = + | 'ascending' + | 'descending' + | null + | { + field?: string; + op?: 'count' | 'sum' | 'mean' | 'average' | 'median' | 'min' | 'max'; + order?: 'ascending' | 'descending'; + } + | string[]; + +/** + * Vega-Lite binning configuration + */ +export interface VegaLiteBin { + /** + * Maximum number of bins + */ + maxbins?: number; + + /** + * Exact step size between bins + */ + step?: number; + + /** + * Extent [min, max] for binning + */ + extent?: [number, number]; + + /** + * Base for nice bin values (e.g., 10 for powers of 10) + */ + base?: number; + + /** + * Whether to include the boundary in bins + */ + anchor?: number; +} + +/** + * Vega-Lite position encoding channel (x or y) + */ +export interface VegaLitePositionEncoding { + /** + * Field name in data + */ + field?: string; + + /** + * Data type + */ + type?: VegaLiteType; + + /** + * Axis configuration + */ + axis?: VegaLiteAxis | null; + + /** + * Constant value for encoding (for reference lines and annotations) + */ + value?: number | string | Date; + + /** + * Datum value for encoding (alternative to value) + */ + datum?: number | string | Date; + + /** + * Scale configuration + */ + scale?: VegaLiteScale | null; + + /** + * Sort order for categorical axes + * Supports: 'ascending', 'descending', null, array of values, or object with field/op/order + */ + sort?: VegaLiteSort; + + /** + * Binning configuration for histograms + * Set to true for default binning or provide custom bin parameters + */ + bin?: boolean | VegaLiteBin; + + /** + * Stack configuration for area/bar charts + * - null: disable stacking + * - 'zero': stack from zero baseline (default for area charts) + * - 'center': center stack + * - 'normalize': normalize to 100% + */ + stack?: null | 'zero' | 'center' | 'normalize'; + + /** + * Aggregate function + * TODO: Implement aggregate support + */ + aggregate?: 'count' | 'sum' | 'mean' | 'average' | 'median' | 'min' | 'max'; +} + +/** + * Vega-Lite color encoding channel + */ +export interface VegaLiteColorEncoding { + /** + * Field name for color differentiation + */ + field?: string; + + /** + * Data type + */ + type?: VegaLiteType; + + /** + * Legend configuration + */ + legend?: VegaLiteLegend | null; + + /** + * Scale configuration + */ + scale?: VegaLiteScale | null; + + /** + * Fixed color value + */ + value?: string; +} + +/** + * Vega-Lite encoding channels + */ +export interface VegaLiteEncoding { + /** + * X-axis encoding + */ + x?: VegaLitePositionEncoding; + + /** + * Y-axis encoding + */ + y?: VegaLitePositionEncoding; + + /** + * Color encoding for series differentiation + */ + color?: VegaLiteColorEncoding; + + /** + * Size encoding + * TODO: Implement size encoding for point marks + */ + size?: { + field?: string; + type?: VegaLiteType; + value?: number; + }; + + /** + * Shape encoding + * TODO: Implement shape encoding for point marks + */ + shape?: { + field?: string; + type?: VegaLiteType; + value?: string; + }; + + /** + * Theta encoding for pie/donut charts + */ + theta?: { + field?: string; + type?: VegaLiteType; + aggregate?: 'count' | 'sum' | 'mean' | 'average' | 'median' | 'min' | 'max'; + }; + + /** + * X2 encoding for interval marks (rect, rule, bar with ranges) + */ + x2?: VegaLitePositionEncoding; + + /** + * Y2 encoding for interval marks (rect, rule, bar with ranges) + */ + y2?: VegaLitePositionEncoding; + + /** + * Text encoding for text marks + */ + text?: { + field?: string; + type?: VegaLiteType; + value?: string; + }; +} + +/** + * Vega-Lite mark definition (can be string or object) + */ +export type VegaLiteMarkDef = + | VegaLiteMark + | { + type: VegaLiteMark; + /** + * Mark color + */ + color?: string; + /** + * Line interpolation method + */ + interpolate?: VegaLiteInterpolate; + /** + * Point marker visibility + */ + point?: boolean | { filled?: boolean; size?: number }; + /** + * Stroke width + */ + strokeWidth?: number; + /** + * Fill opacity + */ + fillOpacity?: number; + /** + * Stroke opacity + */ + strokeOpacity?: number; + /** + * Overall opacity + */ + opacity?: number; + }; + +/** + * Vega-Lite inline data + */ +export interface VegaLiteData { + /** + * Inline data values (array of objects) + */ + values?: Array>; + + /** + * URL to load data from + * TODO: Implement remote data loading + */ + url?: string; + + /** + * Named dataset reference + * TODO: Implement named dataset resolution + */ + name?: string; + + /** + * Data format specification + * TODO: Implement format parsing (csv, json, etc.) + */ + format?: { + type?: 'json' | 'csv' | 'tsv'; + parse?: Record; + }; +} + +/** + * Base Vega-Lite spec unit (single view) + */ +export interface VegaLiteUnitSpec { + /** + * Mark type + */ + mark: VegaLiteMarkDef; + + /** + * Encoding channels + */ + encoding?: VegaLiteEncoding; + + /** + * Data specification + */ + data?: VegaLiteData; + + /** + * Data transformations + * TODO: Implement transform pipeline + */ + transform?: Array>; +} + +/** + * Vega-Lite layer spec (multiple overlaid views) + */ +export interface VegaLiteLayerSpec { + /** + * Layer array + */ + layer: VegaLiteUnitSpec[]; + + /** + * Shared data across layers + */ + data?: VegaLiteData; + + /** + * Shared encoding across layers + */ + encoding?: VegaLiteEncoding; + + /** + * Data transformations + * TODO: Implement transform pipeline + */ + transform?: Array>; +} + +/** + * Top-level Vega-Lite specification + */ +export interface VegaLiteSpec { + /** + * Schema version + */ + $schema?: string; + + /** + * Chart title + */ + title?: string | { text: string; subtitle?: string }; + + /** + * Chart description + */ + description?: string; + + /** + * Chart width + */ + width?: number | 'container'; + + /** + * Chart height + */ + height?: number | 'container'; + + /** + * Data specification (for single/layer specs) + */ + data?: VegaLiteData; + + /** + * Mark type (for single view) + */ + mark?: VegaLiteMarkDef; + + /** + * Encoding channels (for single view) + */ + encoding?: VegaLiteEncoding; + + /** + * Layer specification + */ + layer?: VegaLiteUnitSpec[]; + + /** + * Data transformations + * TODO: Implement transform pipeline + */ + transform?: Array>; + + /** + * Background color + */ + background?: string; + + /** + * Padding configuration + */ + padding?: number | { top?: number; bottom?: number; left?: number; right?: number }; + + /** + * Auto-size configuration + */ + autosize?: string | { type?: string; contains?: string }; + + /** + * Configuration overrides + * TODO: Implement config resolution + */ + config?: Record; +} diff --git a/packages/charts/react-charts/library/src/components/VegaDeclarativeChart/VegaDeclarativeChart.BarLine.test.tsx b/packages/charts/react-charts/library/src/components/VegaDeclarativeChart/VegaDeclarativeChart.BarLine.test.tsx new file mode 100644 index 0000000000000..a64f43fa596e3 --- /dev/null +++ b/packages/charts/react-charts/library/src/components/VegaDeclarativeChart/VegaDeclarativeChart.BarLine.test.tsx @@ -0,0 +1,239 @@ +import * as React from 'react'; +import { render } from '@testing-library/react'; +import { VegaDeclarativeChart } from './VegaDeclarativeChart'; + +/** + * Snapshot tests specifically for bar+line combo charts + * to verify that both bars and lines are rendered correctly + */ + +describe('VegaDeclarativeChart - Bar+Line Combo Rendering', () => { + describe('Bar + Line Combinations', () => { + it('should render bar chart with single line overlay', () => { + const spec = { + layer: [ + { + mark: 'bar', + encoding: { + x: { field: 'month', type: 'ordinal' as const }, + y: { field: 'sales', type: 'quantitative' as const }, + color: { field: 'region', type: 'nominal' as const }, + }, + }, + { + mark: 'line', + encoding: { + x: { field: 'month', type: 'ordinal' as const }, + y: { field: 'target', type: 'quantitative' as const }, + }, + }, + ], + data: { + values: [ + { month: 'Jan', sales: 100, target: 120, region: 'North' }, + { month: 'Jan', sales: 80, target: 120, region: 'South' }, + { month: 'Feb', sales: 120, target: 130, region: 'North' }, + { month: 'Feb', sales: 90, target: 130, region: 'South' }, + { month: 'Mar', sales: 110, target: 125, region: 'North' }, + { month: 'Mar', sales: 85, target: 125, region: 'South' }, + ], + }, + }; + + const { container } = render( + + ); + + // Should render + expect(container.firstChild).toBeTruthy(); + + // Check for SVG (chart rendered) + const svg = container.querySelector('svg'); + expect(svg).toBeTruthy(); + + // Snapshot the entire output + expect(container).toMatchSnapshot(); + }); + + it('should render simple bar+line without color encoding', () => { + const spec = { + layer: [ + { + mark: 'bar', + encoding: { + x: { field: 'x', type: 'ordinal' as const }, + y: { field: 'y1', type: 'quantitative' as const }, + }, + }, + { + mark: 'line', + encoding: { + x: { field: 'x', type: 'ordinal' as const }, + y: { field: 'y2', type: 'quantitative' as const }, + }, + }, + ], + data: { + values: [ + { x: 'A', y1: 10, y2: 15 }, + { x: 'B', y1: 20, y2: 18 }, + { x: 'C', y1: 15, y2: 22 }, + ], + }, + }; + + const { container } = render( + + ); + + expect(container.firstChild).toBeTruthy(); + expect(container.querySelector('svg')).toBeTruthy(); + expect(container).toMatchSnapshot(); + }); + + it('should render bar+line with temporal x-axis', () => { + const spec = { + layer: [ + { + mark: 'bar', + encoding: { + x: { field: 'date', type: 'temporal' as const }, + y: { field: 'sales', type: 'quantitative' as const }, + color: { field: 'category', type: 'nominal' as const }, + }, + }, + { + mark: { type: 'line' as const, point: true }, + encoding: { + x: { field: 'date', type: 'temporal' as const }, + y: { field: 'profit', type: 'quantitative' as const }, + }, + }, + ], + data: { + values: [ + { date: '2024-01-01', sales: 100, profit: 30, category: 'A' }, + { date: '2024-01-02', sales: 120, profit: 35, category: 'A' }, + { date: '2024-01-03', sales: 110, profit: 32, category: 'A' }, + ], + }, + }; + + const { container } = render( + + ); + + expect(container.firstChild).toBeTruthy(); + expect(container.querySelector('svg')).toBeTruthy(); + expect(container).toMatchSnapshot(); + }); + + it('should render the actual line_bar_combo schema from schemas folder', () => { + const lineBarComboSpec = { + layer: [ + { + mark: 'bar', + encoding: { + x: { field: 'month', type: 'temporal' as const, axis: { title: 'Month' } }, + y: { field: 'sales', type: 'quantitative' as const, axis: { title: 'Sales ($)' } }, + color: { value: 'lightblue' }, + }, + }, + { + mark: { type: 'line' as const, point: true, color: 'red' }, + encoding: { + x: { field: 'month', type: 'temporal' as const }, + y: { field: 'profit', type: 'quantitative' as const }, + }, + }, + ], + data: { + values: [ + { month: '2024-01', sales: 45000, profit: 12000 }, + { month: '2024-02', sales: 52000, profit: 15000 }, + { month: '2024-03', sales: 48000, profit: 13500 }, + { month: '2024-04', sales: 61000, profit: 18000 }, + { month: '2024-05', sales: 58000, profit: 16500 }, + { month: '2024-06', sales: 67000, profit: 20000 }, + ], + }, + title: 'Sales and Profit Trend', + }; + + const { container } = render( + + ); + + // Should render successfully + expect(container.firstChild).toBeTruthy(); + + // Should have SVG + const svg = container.querySelector('svg'); + expect(svg).toBeTruthy(); + + // Verify bars exist (rect elements for bars) + const rects = container.querySelectorAll('rect'); + expect(rects.length).toBeGreaterThan(0); + + // Verify lines exist (path elements for lines) + const paths = container.querySelectorAll('path'); + expect(paths.length).toBeGreaterThan(0); + + expect(container).toMatchSnapshot(); + }); + }); + + describe('Chart Type Detection for Bar+Line', () => { + it('should detect bar+line combo and use stacked-bar type', () => { + const spec = { + layer: [ + { mark: 'bar', encoding: { x: { field: 'x', type: 'ordinal' as const }, y: { field: 'y1', type: 'quantitative' as const }, color: { field: 'cat', type: 'nominal' as const } } }, + { mark: 'line', encoding: { x: { field: 'x', type: 'ordinal' as const }, y: { field: 'y2', type: 'quantitative' as const } } }, + ], + data: { values: [{ x: 'A', y1: 10, y2: 15, cat: 'C1' }] }, + }; + + // This should not throw an error + expect(() => { + render(); + }).not.toThrow(); + }); + }); + + describe('Error Cases', () => { + it('should handle bar layer without color encoding gracefully', () => { + const spec = { + layer: [ + { + mark: 'bar', + encoding: { + x: { field: 'x', type: 'ordinal' as const }, + y: { field: 'y1', type: 'quantitative' as const }, + // No color encoding + }, + }, + { + mark: 'line', + encoding: { + x: { field: 'x', type: 'ordinal' as const }, + y: { field: 'y2', type: 'quantitative' as const }, + }, + }, + ], + data: { + values: [ + { x: 'A', y1: 10, y2: 15 }, + { x: 'B', y1: 20, y2: 18 }, + ], + }, + }; + + const { container } = render( + + ); + + // Should still render (fallback behavior) + expect(container.firstChild).toBeTruthy(); + }); + }); +}); diff --git a/packages/charts/react-charts/library/src/components/VegaDeclarativeChart/VegaDeclarativeChart.ChartType.test.tsx b/packages/charts/react-charts/library/src/components/VegaDeclarativeChart/VegaDeclarativeChart.ChartType.test.tsx new file mode 100644 index 0000000000000..3b2b06efcdf07 --- /dev/null +++ b/packages/charts/react-charts/library/src/components/VegaDeclarativeChart/VegaDeclarativeChart.ChartType.test.tsx @@ -0,0 +1,235 @@ +import * as React from 'react'; +import { render } from '@testing-library/react'; +import { VegaDeclarativeChart } from './VegaDeclarativeChart'; + +/** + * Tests to verify correct chart type detection and rendering + * + * These tests specifically address: + * 1. Grouped bar charts (with xOffset) should render as GroupedVerticalBarChart, not VerticalStackedBarChart + * 2. Donut charts (with innerRadius) should render with innerRadius, not as pie charts + * 3. Heatmap charts should render correctly + */ + +describe('VegaDeclarativeChart - Chart Type Detection', () => { + describe('Grouped Bar Charts', () => { + it('should detect grouped bar chart with xOffset encoding', () => { + const spec = { + mark: 'bar', + data: { + values: [ + { quarter: 'Q1', region: 'North', sales: 45000 }, + { quarter: 'Q1', region: 'South', sales: 38000 }, + { quarter: 'Q2', region: 'North', sales: 52000 }, + { quarter: 'Q2', region: 'South', sales: 41000 }, + ], + }, + encoding: { + x: { field: 'quarter', type: 'nominal' as const }, + y: { field: 'sales', type: 'quantitative' as const }, + color: { field: 'region', type: 'nominal' as const }, + xOffset: { field: 'region' }, + }, + }; + + const { container } = render( + + ); + + // Should render successfully without errors + expect(container.firstChild).toBeTruthy(); + + // Grouped bar chart should create SVG with bars + const svg = container.querySelector('svg'); + expect(svg).toBeTruthy(); + }); + + it('should detect stacked bar chart without xOffset', () => { + const spec = { + mark: 'bar', + data: { + values: [ + { quarter: 'Q1', region: 'North', sales: 45000 }, + { quarter: 'Q1', region: 'South', sales: 38000 }, + { quarter: 'Q2', region: 'North', sales: 52000 }, + { quarter: 'Q2', region: 'South', sales: 41000 }, + ], + }, + encoding: { + x: { field: 'quarter', type: 'nominal' as const }, + y: { field: 'sales', type: 'quantitative' as const }, + color: { field: 'region', type: 'nominal' as const }, + // No xOffset - should be stacked + }, + }; + + const { container } = render( + + ); + + // Should render successfully + expect(container.firstChild).toBeTruthy(); + const svg = container.querySelector('svg'); + expect(svg).toBeTruthy(); + }); + }); + + describe('Donut Charts', () => { + it('should render donut chart with innerRadius', () => { + const spec = { + mark: { type: 'arc' as const, innerRadius: 50 }, + data: { + values: [ + { category: 'A', value: 28 }, + { category: 'B', value: 55 }, + { category: 'C', value: 43 }, + { category: 'D', value: 91 }, + ], + }, + encoding: { + theta: { field: 'value', type: 'quantitative' as const }, + color: { field: 'category', type: 'nominal' as const }, + }, + }; + + const { container } = render( + + ); + + expect(container.firstChild).toBeTruthy(); + + // Donut chart should have SVG + const svg = container.querySelector('svg'); + expect(svg).toBeTruthy(); + }); + + it('should render pie chart without innerRadius', () => { + const spec = { + mark: 'arc' as const, + data: { + values: [ + { category: 'A', value: 28 }, + { category: 'B', value: 55 }, + { category: 'C', value: 43 }, + ], + }, + encoding: { + theta: { field: 'value', type: 'quantitative' as const }, + color: { field: 'category', type: 'nominal' as const }, + }, + }; + + const { container } = render( + + ); + + expect(container.firstChild).toBeTruthy(); + const svg = container.querySelector('svg'); + expect(svg).toBeTruthy(); + }); + }); + + describe('Heatmap Charts', () => { + it('should render heatmap with rect mark and x/y/color encodings', () => { + const spec = { + mark: 'rect' as const, + data: { + values: [ + { x: 'A', y: 'Monday', value: 10 }, + { x: 'B', y: 'Monday', value: 20 }, + { x: 'C', y: 'Monday', value: 15 }, + { x: 'A', y: 'Tuesday', value: 25 }, + { x: 'B', y: 'Tuesday', value: 30 }, + { x: 'C', y: 'Tuesday', value: 22 }, + ], + }, + encoding: { + x: { field: 'x', type: 'nominal' as const }, + y: { field: 'y', type: 'nominal' as const }, + color: { field: 'value', type: 'quantitative' as const }, + }, + }; + + const { container } = render( + + ); + + expect(container.firstChild).toBeTruthy(); + + // Heatmap should have SVG + const svg = container.querySelector('svg'); + expect(svg).toBeTruthy(); + }); + }); + + describe('Snapshots for Chart Type Detection', () => { + it('should match snapshot for grouped bar chart', () => { + const spec = { + mark: 'bar', + data: { + values: [ + { quarter: 'Q1', region: 'North', sales: 45000 }, + { quarter: 'Q1', region: 'South', sales: 38000 }, + ], + }, + encoding: { + x: { field: 'quarter', type: 'nominal' as const }, + y: { field: 'sales', type: 'quantitative' as const }, + color: { field: 'region', type: 'nominal' as const }, + xOffset: { field: 'region' }, + }, + }; + + const { container } = render( + + ); + + expect(container).toMatchSnapshot(); + }); + + it('should match snapshot for donut chart with innerRadius', () => { + const spec = { + mark: { type: 'arc' as const, innerRadius: 50 }, + data: { + values: [ + { category: 'A', value: 28 }, + { category: 'B', value: 55 }, + ], + }, + encoding: { + theta: { field: 'value', type: 'quantitative' as const }, + color: { field: 'category', type: 'nominal' as const }, + }, + }; + + const { container } = render( + + ); + + expect(container).toMatchSnapshot(); + }); + + it('should match snapshot for heatmap chart', () => { + const spec = { + mark: 'rect' as const, + data: { + values: [ + { x: 'A', y: 'Monday', value: 10 }, + { x: 'B', y: 'Monday', value: 20 }, + ], + }, + encoding: { + x: { field: 'x', type: 'nominal' as const }, + y: { field: 'y', type: 'nominal' as const }, + color: { field: 'value', type: 'quantitative' as const }, + }, + }; + + const { container } = render( + + ); + + expect(container).toMatchSnapshot(); + }); + }); +}); diff --git a/packages/charts/react-charts/library/src/components/VegaDeclarativeChart/VegaDeclarativeChart.FinancialRatios.test.tsx b/packages/charts/react-charts/library/src/components/VegaDeclarativeChart/VegaDeclarativeChart.FinancialRatios.test.tsx new file mode 100644 index 0000000000000..ca4d2d6a2b992 --- /dev/null +++ b/packages/charts/react-charts/library/src/components/VegaDeclarativeChart/VegaDeclarativeChart.FinancialRatios.test.tsx @@ -0,0 +1,72 @@ +import * as React from 'react'; +import { render } from '@testing-library/react'; +import { VegaDeclarativeChart } from './VegaDeclarativeChart'; +import type { VegaDeclarativeChartProps } from './VegaDeclarativeChart'; + +// Suppress console warnings for cleaner test output +beforeAll(() => { + jest.spyOn(console, 'warn').mockImplementation(() => {}); + jest.spyOn(console, 'error').mockImplementation(() => {}); +}); + +afterAll(() => { + jest.restoreAllMocks(); +}); + +describe('VegaDeclarativeChart - Financial Ratios Heatmap', () => { + it('should render financial ratios heatmap without errors', () => { + const financialRatiosSpec = { + $schema: 'https://vega.github.io/schema/vega-lite/v5.json', + description: 'Financial ratios comparison', + data: { + values: [ + { company: 'Company A', ratio: 'Current Ratio', value: 2.1 }, + { company: 'Company A', ratio: 'Quick Ratio', value: 1.5 }, + { company: 'Company A', ratio: 'Debt-to-Equity', value: 0.8 }, + { company: 'Company A', ratio: 'ROE', value: 15.2 }, + { company: 'Company B', ratio: 'Current Ratio', value: 1.8 }, + { company: 'Company B', ratio: 'Quick Ratio', value: 1.2 }, + { company: 'Company B', ratio: 'Debt-to-Equity', value: 1.3 }, + { company: 'Company B', ratio: 'ROE', value: 12.7 }, + { company: 'Company C', ratio: 'Current Ratio', value: 2.5 }, + { company: 'Company C', ratio: 'Quick Ratio', value: 1.9 }, + { company: 'Company C', ratio: 'Debt-to-Equity', value: 0.5 }, + { company: 'Company C', ratio: 'ROE', value: 18.5 }, + ], + }, + mark: 'rect', + encoding: { + x: { field: 'company', type: 'nominal', axis: { title: 'Company' } }, + y: { field: 'ratio', type: 'nominal', axis: { title: 'Financial Ratio' } }, + color: { + field: 'value', + type: 'quantitative', + scale: { scheme: 'viridis' }, + legend: { title: 'Value' }, + }, + tooltip: [ + { field: 'company', type: 'nominal' }, + { field: 'ratio', type: 'nominal' }, + { field: 'value', type: 'quantitative', format: '.1f' }, + ], + }, + title: 'Financial Ratios Heatmap', + }; + + const props: VegaDeclarativeChartProps = { + chartSchema: { vegaLiteSpec: financialRatiosSpec }, + }; + + const { container } = render(); + + // Verify SVG is rendered + const svg = container.querySelector('svg'); + expect(svg).toBeInTheDocument(); + + // Verify heatmap rectangles are rendered (should have 12 data points) + const rects = container.querySelectorAll('rect'); + expect(rects.length).toBeGreaterThan(0); + + expect(container).toMatchSnapshot(); + }); +}); diff --git a/packages/charts/react-charts/library/src/components/VegaDeclarativeChart/VegaDeclarativeChart.Issues.test.tsx b/packages/charts/react-charts/library/src/components/VegaDeclarativeChart/VegaDeclarativeChart.Issues.test.tsx new file mode 100644 index 0000000000000..ae16c20466bae --- /dev/null +++ b/packages/charts/react-charts/library/src/components/VegaDeclarativeChart/VegaDeclarativeChart.Issues.test.tsx @@ -0,0 +1,224 @@ +import * as React from 'react'; +import { render } from '@testing-library/react'; +import { VegaDeclarativeChart } from './VegaDeclarativeChart'; + +/** + * Tests for specific issues reported: + * 1. Heatmap chart not rendering + * 2. Line+Bar combo not showing line (layered spec limitation) + * 3. Line with color fill bars not working (layered spec limitation) + */ + +describe('VegaDeclarativeChart - Issue Fixes', () => { + // Suppress console.warn for layered spec warnings + const originalWarn = console.warn; + beforeAll(() => { + console.warn = jest.fn(); + }); + afterAll(() => { + console.warn = originalWarn; + }); + + describe('Issue 1: Heatmap Chart Not Rendering', () => { + it('should render simple heatmap chart', () => { + const heatmapSpec = { + mark: 'rect' as const, + data: { + values: [ + { x: 'A', y: 'Monday', value: 10 }, + { x: 'B', y: 'Monday', value: 20 }, + { x: 'C', y: 'Monday', value: 15 }, + { x: 'A', y: 'Tuesday', value: 25 }, + { x: 'B', y: 'Tuesday', value: 30 }, + { x: 'C', y: 'Tuesday', value: 22 }, + { x: 'A', y: 'Wednesday', value: 18 }, + { x: 'B', y: 'Wednesday', value: 28 }, + { x: 'C', y: 'Wednesday', value: 35 }, + ], + }, + encoding: { + x: { field: 'x', type: 'nominal' as const, axis: { title: 'X Category' } }, + y: { field: 'y', type: 'nominal' as const, axis: { title: 'Day' } }, + color: { field: 'value', type: 'quantitative' as const, scale: { scheme: 'blues' } }, + }, + title: 'Heatmap Chart', + }; + + const { container } = render( + + ); + + // Heatmap should render successfully + expect(container.firstChild).toBeTruthy(); + + // Should have SVG element + const svg = container.querySelector('svg'); + expect(svg).toBeTruthy(); + }); + + it('should match snapshot for heatmap', () => { + const heatmapSpec = { + mark: 'rect' as const, + data: { + values: [ + { x: 'A', y: 'Mon', value: 10 }, + { x: 'B', y: 'Mon', value: 20 }, + ], + }, + encoding: { + x: { field: 'x', type: 'nominal' as const }, + y: { field: 'y', type: 'nominal' as const }, + color: { field: 'value', type: 'quantitative' as const }, + }, + }; + + const { container } = render( + + ); + + expect(container).toMatchSnapshot(); + }); + }); + + describe('Issue 2: Line+Bar Combo (Now Supported!)', () => { + it('should render line+bar combo with both bars and lines', () => { + const comboSpec = { + layer: [ + { + mark: 'bar', + encoding: { + x: { field: 'month', type: 'temporal' as const, axis: { title: 'Month' } }, + y: { field: 'sales', type: 'quantitative' as const, axis: { title: 'Sales ($)' } }, + color: { field: 'category', type: 'nominal' as const }, + }, + }, + { + mark: { type: 'line' as const, point: true, color: 'red' }, + encoding: { + x: { field: 'month', type: 'temporal' as const }, + y: { field: 'profit', type: 'quantitative' as const }, + }, + }, + ], + data: { + values: [ + { month: '2024-01', sales: 45000, profit: 12000, category: 'A' }, + { month: '2024-02', sales: 52000, profit: 15000, category: 'A' }, + { month: '2024-03', sales: 48000, profit: 13500, category: 'A' }, + ], + }, + title: 'Sales and Profit Trend', + }; + + const { container } = render( + + ); + + // Should render successfully with both bars and lines + expect(container.firstChild).toBeTruthy(); + + // Should NOT warn about bar+line combo (it's supported now) + expect(console.warn).not.toHaveBeenCalled(); + }); + + it('should match snapshot for line+bar combo', () => { + const comboSpec = { + layer: [ + { mark: 'bar', encoding: { x: { field: 'x', type: 'ordinal' as const }, y: { field: 'y1', type: 'quantitative' as const } } }, + { mark: 'line', encoding: { x: { field: 'x', type: 'ordinal' as const }, y: { field: 'y2', type: 'quantitative' as const } } }, + ], + data: { values: [{ x: 'A', y1: 10, y2: 20 }, { x: 'B', y1: 15, y2: 25 }] }, + }; + + const { container } = render( + + ); + + expect(container).toMatchSnapshot(); + }); + }); + + describe('Issue 3: Line with Color Fill Bars (Layered Spec)', () => { + it('should render line with color fill (first layer only with warning)', () => { + const colorFillSpec = { + layer: [ + { + mark: { type: 'rect' as const, opacity: 0.2, color: 'lightblue' }, + encoding: { + x: { datum: '2023-01-02' }, + x2: { datum: '2023-01-04' }, + }, + }, + { + data: { + values: [ + { date: '2023-01-01', value: 28 }, + { date: '2023-01-02', value: 55 }, + { date: '2023-01-03', value: 43 }, + { date: '2023-01-04', value: 91 }, + { date: '2023-01-05', value: 81 }, + ], + }, + mark: 'line', + encoding: { + x: { field: 'date', type: 'temporal' as const, axis: { title: 'Date' } }, + y: { field: 'value', type: 'quantitative' as const, axis: { title: 'Value' } }, + }, + }, + ], + title: 'Line Chart with Color Fill Bars', + }; + + const { container } = render( + + ); + + // Should render (the rect from first layer, though it may not display properly without x/y fields) + expect(container.firstChild).toBeTruthy(); + + // Should have warned about layered spec + expect(console.warn).toHaveBeenCalledWith( + expect.stringContaining('Layered specifications with multiple chart types are not fully supported') + ); + }); + }); + + describe('Heatmap Detection Edge Cases', () => { + it('should NOT detect heatmap when color is not quantitative', () => { + const spec = { + mark: 'rect' as const, + data: { values: [{ x: 'A', y: 'B', cat: 'C1' }] }, + encoding: { + x: { field: 'x', type: 'nominal' as const }, + y: { field: 'y', type: 'nominal' as const }, + color: { field: 'cat', type: 'nominal' as const }, // nominal, not quantitative + }, + }; + + const { container } = render( + + ); + + // Should still render but as different chart type + expect(container.firstChild).toBeTruthy(); + }); + + it('should NOT detect heatmap when using datum instead of field', () => { + const spec = { + mark: 'rect' as const, + encoding: { + x: { datum: '2023-01-01' }, // datum, not field + y: { datum: 'A' }, + color: { value: 'blue' }, + }, + }; + + const { container } = render( + + ); + + // Should render but not as heatmap + expect(container.firstChild).toBeTruthy(); + }); + }); +}); diff --git a/packages/charts/react-charts/library/src/components/VegaDeclarativeChart/VegaDeclarativeChart.ScatterHeatmap.test.tsx b/packages/charts/react-charts/library/src/components/VegaDeclarativeChart/VegaDeclarativeChart.ScatterHeatmap.test.tsx new file mode 100644 index 0000000000000..2051d4efbcdb0 --- /dev/null +++ b/packages/charts/react-charts/library/src/components/VegaDeclarativeChart/VegaDeclarativeChart.ScatterHeatmap.test.tsx @@ -0,0 +1,333 @@ +import * as React from 'react'; +import { render } from '@testing-library/react'; +import { VegaDeclarativeChart } from './VegaDeclarativeChart'; +import type { IVegaDeclarativeChartProps } from './VegaDeclarativeChart.types'; + +// Suppress console warnings for cleaner test output +beforeAll(() => { + jest.spyOn(console, 'warn').mockImplementation(() => {}); + jest.spyOn(console, 'error').mockImplementation(() => {}); +}); + +afterAll(() => { + jest.restoreAllMocks(); +}); + +describe('VegaDeclarativeChart - Scatter Charts', () => { + it('should render scatter chart with basic point encoding', () => { + const scatterSpec = { + $schema: 'https://vega.github.io/schema/vega-lite/v5.json', + data: { + values: [ + { x: 10, y: 20, category: 'A' }, + { x: 20, y: 30, category: 'B' }, + { x: 30, y: 25, category: 'A' }, + { x: 40, y: 35, category: 'B' }, + { x: 50, y: 40, category: 'C' }, + ], + }, + mark: 'point', + encoding: { + x: { field: 'x', type: 'quantitative' }, + y: { field: 'y', type: 'quantitative' }, + color: { field: 'category', type: 'nominal' }, + }, + }; + + const props: IVegaDeclarativeChartProps = { + chartSchema: { vegaLiteSpec: scatterSpec }, + }; + + const { container } = render(); + + // Check that an SVG element is rendered + expect(container.querySelector('svg')).toBeInTheDocument(); + + // Check for scatter plot elements (circles or points) + const circles = container.querySelectorAll('circle'); + expect(circles.length).toBeGreaterThan(0); + + // Snapshot test + expect(container).toMatchSnapshot(); + }); + + it('should render scatter chart with size encoding', () => { + const scatterSpec = { + $schema: 'https://vega.github.io/schema/vega-lite/v5.json', + data: { + values: [ + { height: 160, weight: 52, bmi: 20.3, category: 'Normal' }, + { height: 165, weight: 68, bmi: 25.0, category: 'Overweight' }, + { height: 170, weight: 75, bmi: 25.9, category: 'Overweight' }, + { height: 175, weight: 70, bmi: 22.9, category: 'Normal' }, + { height: 180, weight: 95, bmi: 29.3, category: 'Overweight' }, + ], + }, + mark: 'point', + encoding: { + x: { field: 'height', type: 'quantitative' }, + y: { field: 'weight', type: 'quantitative' }, + color: { field: 'category', type: 'nominal' }, + size: { value: 100 }, + }, + }; + + const props: IVegaDeclarativeChartProps = { + chartSchema: { vegaLiteSpec: scatterSpec }, + }; + + const { container } = render(); + + expect(container.querySelector('svg')).toBeInTheDocument(); + const circles = container.querySelectorAll('circle'); + expect(circles.length).toBeGreaterThan(0); + + expect(container).toMatchSnapshot(); + }); + + it('should render scatter chart from actual bmi_scatter.json schema', () => { + const bmiScatterSpec = { + $schema: 'https://vega.github.io/schema/vega-lite/v5.json', + description: 'BMI distribution analysis', + data: { + values: [ + { height: 160, weight: 52, bmi: 20.3, category: 'Normal' }, + { height: 165, weight: 68, bmi: 25.0, category: 'Overweight' }, + { height: 170, weight: 75, bmi: 25.9, category: 'Overweight' }, + { height: 175, weight: 70, bmi: 22.9, category: 'Normal' }, + { height: 180, weight: 95, bmi: 29.3, category: 'Overweight' }, + { height: 158, weight: 45, bmi: 18.0, category: 'Underweight' }, + { height: 172, weight: 82, bmi: 27.7, category: 'Overweight' }, + { height: 168, weight: 58, bmi: 20.5, category: 'Normal' }, + { height: 177, weight: 88, bmi: 28.1, category: 'Overweight' }, + { height: 162, weight: 48, bmi: 18.3, category: 'Underweight' }, + ], + }, + mark: 'point', + encoding: { + x: { field: 'height', type: 'quantitative', axis: { title: 'Height (cm)' } }, + y: { field: 'weight', type: 'quantitative', axis: { title: 'Weight (kg)' } }, + color: { + field: 'category', + type: 'nominal', + scale: { domain: ['Underweight', 'Normal', 'Overweight'], range: ['#ff7f0e', '#2ca02c', '#d62728'] }, + legend: { title: 'BMI Category' }, + }, + size: { value: 100 }, + tooltip: [ + { field: 'height', type: 'quantitative', title: 'Height (cm)' }, + { field: 'weight', type: 'quantitative', title: 'Weight (kg)' }, + { field: 'bmi', type: 'quantitative', title: 'BMI', format: '.1f' }, + { field: 'category', type: 'nominal', title: 'Category' }, + ], + }, + title: 'BMI Distribution Scatter', + }; + + const props: IVegaDeclarativeChartProps = { + chartSchema: { vegaLiteSpec: bmiScatterSpec }, + }; + + const { container } = render(); + + // Verify SVG is rendered + const svg = container.querySelector('svg'); + expect(svg).toBeInTheDocument(); + + // Verify scatter points are rendered + const circles = container.querySelectorAll('circle'); + expect(circles.length).toBeGreaterThan(0); + + expect(container).toMatchSnapshot(); + }); +}); + +describe('VegaDeclarativeChart - Heatmap Charts', () => { + it('should render heatmap with rect marks and quantitative color', () => { + const heatmapSpec = { + $schema: 'https://vega.github.io/schema/vega-lite/v5.json', + data: { + values: [ + { x: 'A', y: 'Mon', value: 10 }, + { x: 'B', y: 'Mon', value: 20 }, + { x: 'A', y: 'Tue', value: 30 }, + { x: 'B', y: 'Tue', value: 40 }, + ], + }, + mark: 'rect', + encoding: { + x: { field: 'x', type: 'ordinal' }, + y: { field: 'y', type: 'ordinal' }, + color: { field: 'value', type: 'quantitative' }, + }, + }; + + const props: IVegaDeclarativeChartProps = { + chartSchema: { vegaLiteSpec: heatmapSpec }, + }; + + const { container } = render(); + + // Check that an SVG element is rendered + expect(container.querySelector('svg')).toBeInTheDocument(); + + // Check for heatmap rectangles + const rects = container.querySelectorAll('rect'); + expect(rects.length).toBeGreaterThan(0); + + expect(container).toMatchSnapshot(); + }); + + it('should render heatmap from actual air_quality_heatmap.json schema', () => { + const airQualitySpec = { + $schema: 'https://vega.github.io/schema/vega-lite/v5.json', + description: 'Air quality index by location', + data: { + values: [ + { city: 'New York', time: 'Morning', aqi: 45 }, + { city: 'New York', time: 'Afternoon', aqi: 62 }, + { city: 'New York', time: 'Evening', aqi: 58 }, + { city: 'Los Angeles', time: 'Morning', aqi: 85 }, + { city: 'Los Angeles', time: 'Afternoon', aqi: 95 }, + { city: 'Los Angeles', time: 'Evening', aqi: 78 }, + { city: 'Chicago', time: 'Morning', aqi: 52 }, + { city: 'Chicago', time: 'Afternoon', aqi: 68 }, + { city: 'Chicago', time: 'Evening', aqi: 61 }, + { city: 'Houston', time: 'Morning', aqi: 72 }, + { city: 'Houston', time: 'Afternoon', aqi: 88 }, + { city: 'Houston', time: 'Evening', aqi: 75 }, + ], + }, + mark: 'rect', + encoding: { + x: { field: 'time', type: 'ordinal', axis: { title: 'Time of Day' } }, + y: { field: 'city', type: 'ordinal', axis: { title: 'City' } }, + color: { + field: 'aqi', + type: 'quantitative', + scale: { scheme: 'redyellowgreen', domain: [0, 150], reverse: true }, + legend: { title: 'AQI' }, + }, + tooltip: [ + { field: 'city', type: 'ordinal' }, + { field: 'time', type: 'ordinal' }, + { field: 'aqi', type: 'quantitative', title: 'Air Quality Index' }, + ], + }, + title: 'Air Quality Index Heatmap', + }; + + const props: IVegaDeclarativeChartProps = { + chartSchema: { vegaLiteSpec: airQualitySpec }, + }; + + const { container } = render(); + + // Verify SVG is rendered + const svg = container.querySelector('svg'); + expect(svg).toBeInTheDocument(); + + // Verify heatmap rectangles are rendered + const rects = container.querySelectorAll('rect'); + expect(rects.length).toBeGreaterThan(0); + + expect(container).toMatchSnapshot(); + }); + + it('should render heatmap from actual attendance_heatmap.json schema', () => { + const attendanceSpec = { + $schema: 'https://vega.github.io/schema/vega-lite/v5.json', + description: 'Class attendance patterns', + data: { + values: [ + { day: 'Monday', period: 'Period 1', attendance: 92 }, + { day: 'Monday', period: 'Period 2', attendance: 89 }, + { day: 'Monday', period: 'Period 3', attendance: 87 }, + { day: 'Monday', period: 'Period 4', attendance: 85 }, + { day: 'Tuesday', period: 'Period 1', attendance: 90 }, + { day: 'Tuesday', period: 'Period 2', attendance: 88 }, + { day: 'Tuesday', period: 'Period 3', attendance: 91 }, + { day: 'Tuesday', period: 'Period 4', attendance: 86 }, + { day: 'Wednesday', period: 'Period 1', attendance: 94 }, + { day: 'Wednesday', period: 'Period 2', attendance: 92 }, + { day: 'Wednesday', period: 'Period 3', attendance: 90 }, + { day: 'Wednesday', period: 'Period 4', attendance: 88 }, + ], + }, + mark: 'rect', + encoding: { + x: { field: 'day', type: 'ordinal', axis: { title: 'Day of Week' } }, + y: { field: 'period', type: 'ordinal', axis: { title: 'Class Period' } }, + color: { + field: 'attendance', + type: 'quantitative', + scale: { scheme: 'blues' }, + legend: { title: 'Attendance %' }, + }, + tooltip: [ + { field: 'day', type: 'ordinal' }, + { field: 'period', type: 'ordinal' }, + { field: 'attendance', type: 'quantitative', title: 'Attendance %', format: '.0f' }, + ], + }, + title: 'Weekly Attendance Patterns', + }; + + const props: IVegaDeclarativeChartProps = { + chartSchema: { vegaLiteSpec: attendanceSpec }, + }; + + const { container } = render(); + + // Verify SVG is rendered + const svg = container.querySelector('svg'); + expect(svg).toBeInTheDocument(); + + // Verify heatmap rectangles are rendered + const rects = container.querySelectorAll('rect'); + expect(rects.length).toBeGreaterThan(0); + + expect(container).toMatchSnapshot(); + }); +}); + +describe('VegaDeclarativeChart - Chart Type Detection', () => { + it('should detect scatter chart type from point mark', () => { + const scatterSpec = { + $schema: 'https://vega.github.io/schema/vega-lite/v5.json', + data: { values: [{ x: 1, y: 2 }] }, + mark: 'point', + encoding: { + x: { field: 'x', type: 'quantitative' }, + y: { field: 'y', type: 'quantitative' }, + }, + }; + + const props: IVegaDeclarativeChartProps = { + chartSchema: { vegaLiteSpec: scatterSpec }, + }; + + const { container } = render(); + expect(container.querySelector('svg')).toBeInTheDocument(); + }); + + it('should detect heatmap chart type from rect mark with quantitative color', () => { + const heatmapSpec = { + $schema: 'https://vega.github.io/schema/vega-lite/v5.json', + data: { values: [{ x: 'A', y: 'B', value: 10 }] }, + mark: 'rect', + encoding: { + x: { field: 'x', type: 'ordinal' }, + y: { field: 'y', type: 'ordinal' }, + color: { field: 'value', type: 'quantitative' }, + }, + }; + + const props: IVegaDeclarativeChartProps = { + chartSchema: { vegaLiteSpec: heatmapSpec }, + }; + + const { container } = render(); + expect(container.querySelector('svg')).toBeInTheDocument(); + }); +}); diff --git a/packages/charts/react-charts/library/src/components/VegaDeclarativeChart/VegaDeclarativeChart.SchemaValidation.test.tsx b/packages/charts/react-charts/library/src/components/VegaDeclarativeChart/VegaDeclarativeChart.SchemaValidation.test.tsx new file mode 100644 index 0000000000000..9337d83c7cbd0 --- /dev/null +++ b/packages/charts/react-charts/library/src/components/VegaDeclarativeChart/VegaDeclarativeChart.SchemaValidation.test.tsx @@ -0,0 +1,453 @@ +import * as React from 'react'; +import { render } from '@testing-library/react'; +import { VegaDeclarativeChart } from './VegaDeclarativeChart'; +import * as fs from 'fs'; +import * as path from 'path'; + +// Import transformation functions to test them directly +import { + transformVegaLiteToLineChartProps, + transformVegaLiteToVerticalBarChartProps, + transformVegaLiteToVerticalStackedBarChartProps, + transformVegaLiteToGroupedVerticalBarChartProps, + transformVegaLiteToHorizontalBarChartProps, + transformVegaLiteToAreaChartProps, + transformVegaLiteToScatterChartProps, + transformVegaLiteToDonutChartProps, + transformVegaLiteToHeatMapChartProps, +} from '../DeclarativeChart/VegaLiteSchemaAdapter'; + +interface SchemaTestResult { + schemaName: string; + success: boolean; + chartType?: string; + error?: string; + unsupportedFeatures?: string[]; +} + +/** + * Get chart type from Vega-Lite spec + */ +function getChartType(spec: any): string { + const mark = spec.layer ? spec.layer[0]?.mark : spec.mark; + const markType = typeof mark === 'string' ? mark : mark?.type; + const encoding = spec.layer ? spec.layer[0]?.encoding : spec.encoding; + const hasColorEncoding = !!encoding?.color?.field; + + if (markType === 'arc' && encoding?.theta) { + return 'donut'; + } + if (markType === 'rect' && encoding?.x && encoding?.y && encoding?.color) { + return 'heatmap'; + } + if (markType === 'bar') { + const isYNominal = encoding?.y?.type === 'nominal' || encoding?.y?.type === 'ordinal'; + const isXNominal = encoding?.x?.type === 'nominal' || encoding?.x?.type === 'ordinal'; + + if (isYNominal && !isXNominal) { + return 'horizontal-bar'; + } + if (hasColorEncoding) { + return 'stacked-bar'; + } + return 'bar'; + } + if (markType === 'area') { + return 'area'; + } + if (markType === 'point' || markType === 'circle' || markType === 'square') { + return 'scatter'; + } + return 'line'; +} + +/** + * Load all schema files from the schemas directory + */ +function loadAllSchemas(): Map { + const schemas = new Map(); + const schemasDir = path.join(__dirname, '../../../../stories/src/VegaDeclarativeChart/schemas'); + + if (!fs.existsSync(schemasDir)) { + console.warn(`Schemas directory not found: ${schemasDir}`); + return schemas; + } + + const files = fs.readdirSync(schemasDir); + const jsonFiles = files.filter(f => f.endsWith('.json')); + + jsonFiles.forEach(file => { + try { + const filePath = path.join(schemasDir, file); + const content = fs.readFileSync(filePath, 'utf-8'); + const schema = JSON.parse(content); + const name = file.replace('.json', ''); + schemas.set(name, schema); + } catch (error: any) { + console.error(`Error loading schema ${file}:`, error.message); + } + }); + + return schemas; +} + +/** + * Test if a schema can be transformed to Fluent chart props + */ +function testSchemaTransformation(schemaName: string, spec: any): SchemaTestResult { + const result: SchemaTestResult = { + schemaName, + success: false, + unsupportedFeatures: [], + }; + + try { + const chartType = getChartType(spec); + result.chartType = chartType; + + const colorMap = new Map(); + const isDarkTheme = false; + + // Test transformation based on chart type + switch (chartType) { + case 'line': + transformVegaLiteToLineChartProps(spec, { current: colorMap }, isDarkTheme); + break; + case 'bar': + transformVegaLiteToVerticalBarChartProps(spec, { current: colorMap }, isDarkTheme); + break; + case 'stacked-bar': + transformVegaLiteToVerticalStackedBarChartProps(spec, { current: colorMap }, isDarkTheme); + break; + case 'grouped-bar': + transformVegaLiteToGroupedVerticalBarChartProps(spec, { current: colorMap }, isDarkTheme); + break; + case 'horizontal-bar': + transformVegaLiteToHorizontalBarChartProps(spec, { current: colorMap }, isDarkTheme); + break; + case 'area': + transformVegaLiteToAreaChartProps(spec, { current: colorMap }, isDarkTheme); + break; + case 'scatter': + transformVegaLiteToScatterChartProps(spec, { current: colorMap }, isDarkTheme); + break; + case 'donut': + transformVegaLiteToDonutChartProps(spec, { current: colorMap }, isDarkTheme); + break; + case 'heatmap': + transformVegaLiteToHeatMapChartProps(spec, { current: colorMap }, isDarkTheme); + break; + default: + throw new Error(`Unknown chart type: ${chartType}`); + } + + result.success = true; + + // Detect potentially unsupported features + const unsupported: string[] = []; + + // Check for layered specs (combo charts) + if (spec.layer && spec.layer.length > 1) { + const marks = spec.layer.map((l: any) => (typeof l.mark === 'string' ? l.mark : l.mark?.type)); + const uniqueMarks = Array.from(new Set(marks)); + if (uniqueMarks.length > 1) { + unsupported.push(`Layered chart with marks: ${uniqueMarks.join(', ')}`); + } + } + + // Check for log scale + if ( + spec.encoding?.y?.scale?.type === 'log' || + spec.encoding?.x?.scale?.type === 'log' || + (spec.layer && + spec.layer.some((l: any) => l.encoding?.y?.scale?.type === 'log' || l.encoding?.x?.scale?.type === 'log')) + ) { + unsupported.push('Logarithmic scale'); + } + + // Check for transforms + if (spec.transform && spec.transform.length > 0) { + const transformTypes = spec.transform.map((t: any) => Object.keys(t)[0]); + unsupported.push(`Transforms: ${transformTypes.join(', ')}`); + } + + // Check for independent y-axis resolution in combo charts + if (spec.resolve?.scale?.y === 'independent') { + unsupported.push('Independent y-axis scales (dual-axis)'); + } + + // Check for size encoding in scatter charts + if (spec.encoding?.size || (spec.layer && spec.layer.some((l: any) => l.encoding?.size))) { + unsupported.push('Size encoding (bubble charts)'); + } + + // Check for opacity encoding + if (spec.encoding?.opacity || (spec.layer && spec.layer.some((l: any) => l.encoding?.opacity))) { + unsupported.push('Opacity encoding'); + } + + // Check for xOffset (grouped bars) + if (spec.encoding?.xOffset) { + unsupported.push('xOffset encoding (grouped bars)'); + } + + // Check for text marks (annotations) + const hasTextMarks = + spec.mark === 'text' || + spec.mark?.type === 'text' || + (spec.layer && spec.layer.some((l: any) => l.mark === 'text' || l.mark?.type === 'text')); + if (hasTextMarks) { + unsupported.push('Text marks (annotations)'); + } + + // Check for rule marks (reference lines) + const hasRuleMarks = + spec.mark === 'rule' || + spec.mark?.type === 'rule' || + (spec.layer && spec.layer.some((l: any) => l.mark === 'rule' || l.mark?.type === 'rule')); + if (hasRuleMarks) { + unsupported.push('Rule marks (reference lines)'); + } + + // Check for rect marks with x/x2 (color fill bars) + if (spec.layer) { + const hasColorFillRects = spec.layer.some( + (l: any) => + (l.mark === 'rect' || l.mark?.type === 'rect') && l.encoding?.x && (l.encoding?.x2 || l.encoding?.xOffset), + ); + if (hasColorFillRects) { + unsupported.push('Color fill bars (rect with x/x2)'); + } + } + + result.unsupportedFeatures = unsupported; + } catch (error: any) { + result.success = false; + result.error = error.message; + } + + return result; +} + +describe('VegaDeclarativeChart - All Schemas Validation', () => { + let allSchemas: Map; + let testResults: SchemaTestResult[] = []; + + beforeAll(() => { + allSchemas = loadAllSchemas(); + console.log(`\n📊 Loading ${allSchemas.size} Vega-Lite schemas for validation...\n`); + }); + + it('should load all schema files from the schemas directory', () => { + expect(allSchemas.size).toBeGreaterThan(0); + console.log(`✅ Loaded ${allSchemas.size} schemas successfully`); + }); + + it('should validate all schemas and identify unsupported features', () => { + allSchemas.forEach((spec, name) => { + const result = testSchemaTransformation(name, spec); + testResults.push(result); + }); + + // Generate summary report + const successful = testResults.filter(r => r.success); + const failed = testResults.filter(r => !r.success); + const withUnsupportedFeatures = testResults.filter(r => r.success && r.unsupportedFeatures!.length > 0); + + console.log('\n' + '='.repeat(80)); + console.log('VEGA-LITE SCHEMA VALIDATION SUMMARY'); + console.log('='.repeat(80)); + console.log(`Total Schemas Tested: ${testResults.length}`); + console.log(`✅ Successfully Transformed: ${successful.length} (${((successful.length / testResults.length) * 100).toFixed(1)}%)`); + console.log(`❌ Failed Transformation: ${failed.length} (${((failed.length / testResults.length) * 100).toFixed(1)}%)`); + console.log(`⚠️ With Unsupported Features: ${withUnsupportedFeatures.length}`); + console.log('='.repeat(80)); + + if (failed.length > 0) { + console.log('\n❌ FAILED TRANSFORMATIONS:'); + console.log('-'.repeat(80)); + failed.forEach(result => { + console.log(`Schema: ${result.schemaName}`); + console.log(` Chart Type: ${result.chartType || 'unknown'}`); + console.log(` Error: ${result.error}`); + console.log(''); + }); + } + + if (withUnsupportedFeatures.length > 0) { + console.log('\n⚠️ SCHEMAS WITH UNSUPPORTED FEATURES:'); + console.log('-'.repeat(80)); + + // Group by chart type + const byChartType = new Map(); + withUnsupportedFeatures.forEach(result => { + const type = result.chartType || 'unknown'; + if (!byChartType.has(type)) { + byChartType.set(type, []); + } + byChartType.get(type)!.push(result); + }); + + byChartType.forEach((results, chartType) => { + console.log(`\n[${chartType.toUpperCase()}] - ${results.length} schemas`); + results.forEach(result => { + console.log(` • ${result.schemaName}`); + result.unsupportedFeatures!.forEach(feature => { + console.log(` - ${feature}`); + }); + }); + }); + } + + // Chart type distribution + console.log('\n📈 CHART TYPE DISTRIBUTION:'); + console.log('-'.repeat(80)); + const chartTypeCounts = new Map(); + testResults.forEach(result => { + const type = result.chartType || 'unknown'; + chartTypeCounts.set(type, (chartTypeCounts.get(type) || 0) + 1); + }); + + Array.from(chartTypeCounts.entries()) + .sort((a, b) => b[1] - a[1]) + .forEach(([type, count]) => { + console.log(` ${type.padEnd(20)}: ${count}`); + }); + + console.log('\n' + '='.repeat(80) + '\n'); + + // The test passes if at least 70% of schemas transform successfully + const successRate = successful.length / testResults.length; + expect(successRate).toBeGreaterThan(0.7); + }); + + it('should render each successfully transformed schema without crashing', () => { + const successful = testResults.filter(r => r.success); + const consoleSpy = jest.spyOn(console, 'error').mockImplementation(); + let renderCount = 0; + + successful.forEach(result => { + const spec = allSchemas.get(result.schemaName); + if (spec) { + try { + const { container } = render(); + expect(container).toBeTruthy(); + renderCount++; + } catch (error: any) { + console.error(`Failed to render ${result.schemaName}:`, error.message); + } + } + }); + + consoleSpy.mockRestore(); + console.log(`\n✅ Successfully rendered ${renderCount}/${successful.length} transformed schemas\n`); + expect(renderCount).toBe(successful.length); + }); + + it('should throw appropriate errors for schemas that cannot be transformed', () => { + const failed = testResults.filter(r => !r.success); + + failed.forEach(result => { + const spec = allSchemas.get(result.schemaName); + if (spec) { + expect(() => { + const consoleSpy = jest.spyOn(console, 'error').mockImplementation(); + render(); + consoleSpy.mockRestore(); + }).toThrow(); + } + }); + }); +}); + +describe('VegaDeclarativeChart - Specific Feature Tests', () => { + it('should handle layered/combo charts', () => { + const comboSpec = { + layer: [ + { + mark: 'bar', + encoding: { + x: { field: 'date', type: 'temporal' }, + y: { field: 'sales', type: 'quantitative' }, + }, + }, + { + mark: 'line', + encoding: { + x: { field: 'date', type: 'temporal' }, + y: { field: 'profit', type: 'quantitative' }, + }, + }, + ], + data: { + values: [ + { date: '2023-01', sales: 100, profit: 20 }, + { date: '2023-02', sales: 150, profit: 30 }, + ], + }, + }; + + // This may or may not work depending on implementation + // The test documents the behavior + try { + const { container } = render(); + expect(container).toBeTruthy(); + console.log('✅ Layered charts are supported'); + } catch (error: any) { + console.log('❌ Layered charts are not fully supported:', error.message); + expect(error).toBeDefined(); + } + }); + + it('should handle log scale charts', () => { + const logScaleSpec = { + mark: 'line', + data: { + values: [ + { x: 1, y: 10 }, + { x: 2, y: 100 }, + { x: 3, y: 1000 }, + ], + }, + encoding: { + x: { field: 'x', type: 'quantitative' }, + y: { field: 'y', type: 'quantitative', scale: { type: 'log' } }, + }, + }; + + try { + const { container } = render(); + expect(container).toBeTruthy(); + console.log('✅ Logarithmic scales are supported'); + } catch (error: any) { + console.log('⚠️ Logarithmic scales may not be fully supported:', error.message); + // Log scale might work but not be perfectly accurate + } + }); + + it('should handle transforms (fold, filter, etc.)', () => { + const transformSpec = { + mark: 'line', + data: { + values: [ + { month: 'Jan', seriesA: 100, seriesB: 80 }, + { month: 'Feb', seriesA: 120, seriesB: 90 }, + ], + }, + transform: [{ fold: ['seriesA', 'seriesB'], as: ['series', 'value'] }], + encoding: { + x: { field: 'month', type: 'ordinal' }, + y: { field: 'value', type: 'quantitative' }, + color: { field: 'series', type: 'nominal' }, + }, + }; + + try { + const { container } = render(); + expect(container).toBeTruthy(); + console.log('✅ Data transforms are supported'); + } catch (error: any) { + console.log('⚠️ Data transforms may not be fully supported:', error.message); + } + }); +}); diff --git a/packages/charts/react-charts/library/src/components/VegaDeclarativeChart/VegaDeclarativeChart.Snapshots.test.tsx b/packages/charts/react-charts/library/src/components/VegaDeclarativeChart/VegaDeclarativeChart.Snapshots.test.tsx new file mode 100644 index 0000000000000..edc8a29de8569 --- /dev/null +++ b/packages/charts/react-charts/library/src/components/VegaDeclarativeChart/VegaDeclarativeChart.Snapshots.test.tsx @@ -0,0 +1,267 @@ +import * as React from 'react'; +import { render } from '@testing-library/react'; +import { VegaDeclarativeChart } from './VegaDeclarativeChart'; +import * as fs from 'fs'; +import * as path from 'path'; + +/** + * Snapshot tests for VegaDeclarativeChart with all schema files + * + * These tests render each schema and capture snapshots to detect unintended changes + * in the chart rendering output. + */ + +interface SchemaFile { + name: string; + spec: any; + category: string; +} + +/** + * Load all schema files from the schemas directory + */ +function loadAllSchemas(): SchemaFile[] { + const schemas: SchemaFile[] = []; + const schemasDir = path.join(__dirname, '../../../../stories/src/VegaDeclarativeChart/schemas'); + + if (!fs.existsSync(schemasDir)) { + console.warn(`Schemas directory not found: ${schemasDir}`); + return schemas; + } + + const files = fs.readdirSync(schemasDir); + const jsonFiles = files.filter(f => f.endsWith('.json')); + + jsonFiles.forEach(file => { + try { + const filePath = path.join(schemasDir, file); + const content = fs.readFileSync(filePath, 'utf-8'); + const spec = JSON.parse(content); + const name = file.replace('.json', ''); + + // Categorize based on name patterns + let category = 'Other'; + if (name.includes('linechart') || name.includes('areachart') || name.includes('barchart') || + name.includes('scatterchart') || name.includes('donutchart') || name.includes('heatmapchart') || + name.includes('grouped_bar') || name.includes('stacked_bar') || name.includes('line_bar_combo')) { + category = 'Basic'; + } else if (name.includes('stock') || name.includes('portfolio') || name.includes('profit') || + name.includes('revenue') || name.includes('cashflow') || name.includes('budget') || + name.includes('expense') || name.includes('roi') || name.includes('financial') || + name.includes('dividend')) { + category = 'Financial'; + } else if (name.includes('orders') || name.includes('conversion') || name.includes('product') || + name.includes('inventory') || name.includes('customer') || name.includes('price') || + name.includes('seasonal') || name.includes('category') || name.includes('shipping') || + name.includes('discount') || name.includes('sales') || name.includes('market')) { + category = 'E-Commerce'; + } else if (name.includes('campaign') || name.includes('engagement') || name.includes('social') || + name.includes('ad') || name.includes('ctr') || name.includes('channel') || + name.includes('influencer') || name.includes('viral') || name.includes('sentiment') || + name.includes('impression') || name.includes('lead')) { + category = 'Marketing'; + } else if (name.includes('patient') || name.includes('age') || name.includes('disease') || + name.includes('treatment') || name.includes('hospital') || name.includes('bmi') || + name.includes('recovery') || name.includes('medication') || name.includes('symptom') || + name.includes('health')) { + category = 'Healthcare'; + } else if (name.includes('test') || name.includes('grade') || name.includes('course') || + name.includes('student') || name.includes('attendance') || name.includes('study') || + name.includes('graduation') || name.includes('skill') || name.includes('learning') || + name.includes('dropout')) { + category = 'Education'; + } else if (name.includes('production') || name.includes('defect') || name.includes('machine') || + name.includes('downtime') || name.includes('quality') || name.includes('shift') || + name.includes('turnover') || name.includes('supply') || name.includes('efficiency') || + name.includes('maintenance')) { + category = 'Manufacturing'; + } else if (name.includes('temperature') || name.includes('precipitation') || name.includes('co2') || + name.includes('renewable') || name.includes('air') || name.includes('weather') || + name.includes('sea') || name.includes('biodiversity') || name.includes('energy') || + name.includes('climate')) { + category = 'Climate'; + } else if (name.includes('api') || name.includes('error') || name.includes('server') || + name.includes('deployment') || name.includes('user_sessions') || name.includes('bug') || + name.includes('performance') || name.includes('code') || name.includes('bandwidth') || + name.includes('system') || name.includes('website') || name.includes('log_scale')) { + category = 'Technology'; + } else if (name.includes('player') || name.includes('team') || name.includes('game') || + name.includes('season') || name.includes('attendance_bar') || name.includes('league') || + name.includes('streaming') || name.includes('genre') || name.includes('tournament')) { + category = 'Sports'; + } + + schemas.push({ name, spec, category }); + } catch (error: any) { + console.error(`Error loading schema ${file}:`, error.message); + } + }); + + return schemas.sort((a, b) => { + if (a.category !== b.category) { + const categoryOrder = ['Basic', 'Financial', 'E-Commerce', 'Marketing', 'Healthcare', 'Education', 'Manufacturing', 'Climate', 'Technology', 'Sports', 'Other']; + return categoryOrder.indexOf(a.category) - categoryOrder.indexOf(b.category); + } + return a.name.localeCompare(b.name); + }); +} + +describe('VegaDeclarativeChart - Snapshot Tests', () => { + const allSchemas = loadAllSchemas(); + + if (allSchemas.length === 0) { + it('should load schema files', () => { + expect(allSchemas.length).toBeGreaterThan(0); + }); + return; + } + + console.log(`\n📸 Creating snapshots for ${allSchemas.length} Vega-Lite schemas...\n`); + + // Group schemas by category for organized testing + const schemasByCategory = allSchemas.reduce((acc, schema) => { + if (!acc[schema.category]) { + acc[schema.category] = []; + } + acc[schema.category].push(schema); + return acc; + }, {} as Record); + + // Create snapshot tests for each category + Object.entries(schemasByCategory).forEach(([category, schemas]) => { + describe(`${category} Charts`, () => { + schemas.forEach(({ name, spec }) => { + it(`should render ${name} correctly`, () => { + const { container } = render( + + ); + + // Snapshot the entire rendered output + expect(container).toMatchSnapshot(); + }); + }); + }); + }); + + // Additional tests for edge cases + describe('Edge Cases', () => { + it('should handle empty data gracefully', () => { + const spec = { + mark: 'line', + data: { values: [] }, + encoding: { + x: { field: 'x', type: 'quantitative' }, + y: { field: 'y', type: 'quantitative' }, + }, + }; + + const { container } = render( + + ); + + expect(container).toMatchSnapshot(); + }); + + it('should render with custom dimensions', () => { + const spec = allSchemas[0]?.spec; + if (!spec) return; + + const { container } = render( + + ); + + expect(container).toMatchSnapshot(); + }); + + it('should render in dark theme', () => { + const spec = allSchemas[0]?.spec; + if (!spec) return; + + const { container } = render( + + ); + + expect(container).toMatchSnapshot(); + }); + + it('should handle legend selection', () => { + const spec = { + mark: 'line', + data: { + values: [ + { x: 1, y: 28, series: 'A' }, + { x: 2, y: 55, series: 'A' }, + { x: 1, y: 35, series: 'B' }, + { x: 2, y: 60, series: 'B' }, + ], + }, + encoding: { + x: { field: 'x', type: 'quantitative' }, + y: { field: 'y', type: 'quantitative' }, + color: { field: 'series', type: 'nominal' }, + }, + }; + + const { container } = render( + + ); + + expect(container).toMatchSnapshot(); + }); + }); + + // Summary test + it('should have loaded all expected schemas', () => { + const categoryCount = Object.keys(schemasByCategory).length; + console.log(`\n✅ Snapshot tests created for ${allSchemas.length} schemas across ${categoryCount} categories`); + console.log('\nBreakdown by category:'); + Object.entries(schemasByCategory).forEach(([category, schemas]) => { + console.log(` ${category}: ${schemas.length} schemas`); + }); + + expect(allSchemas.length).toBeGreaterThan(100); + }); +}); + +describe('VegaDeclarativeChart - Transformation Snapshots', () => { + const allSchemas = loadAllSchemas(); + + if (allSchemas.length === 0) return; + + describe('Chart Props Transformation', () => { + // Test a sample from each category to verify transformation + const sampleSchemas = allSchemas.filter((_, index) => index % 10 === 0); + + sampleSchemas.forEach(({ name, spec }) => { + it(`should transform ${name} to Fluent chart props`, () => { + // The transformation happens inside VegaDeclarativeChart + // We capture the rendered output which includes the transformed props + const { container } = render( + + ); + + // Verify chart was rendered (contains SVG or chart elements) + const hasChart = container.querySelector('svg') !== null || + container.querySelector('[class*="chart"]') !== null || + container.querySelector('[class*="Chart"]') !== null; + + expect(hasChart).toBe(true); + expect(container.firstChild).toMatchSnapshot(); + }); + }); + }); +}); diff --git a/packages/charts/react-charts/library/src/components/VegaDeclarativeChart/VegaDeclarativeChart.test.tsx b/packages/charts/react-charts/library/src/components/VegaDeclarativeChart/VegaDeclarativeChart.test.tsx new file mode 100644 index 0000000000000..b9d35e97f3fca --- /dev/null +++ b/packages/charts/react-charts/library/src/components/VegaDeclarativeChart/VegaDeclarativeChart.test.tsx @@ -0,0 +1,204 @@ +import * as React from 'react'; +import { render } from '@testing-library/react'; +import { VegaDeclarativeChart } from './VegaDeclarativeChart'; + +describe('VegaDeclarativeChart', () => { + it('renders with basic line chart spec', () => { + const spec = { + mark: 'line', + data: { + values: [ + { x: 1, y: 10 }, + { x: 2, y: 20 }, + { x: 3, y: 15 }, + ], + }, + encoding: { + x: { field: 'x', type: 'quantitative' }, + y: { field: 'y', type: 'quantitative' }, + }, + }; + + const { container } = render(); + expect(container).toBeTruthy(); + }); + + it('renders vertical bar chart', () => { + const spec = { + mark: 'bar', + data: { + values: [ + { category: 'A', amount: 28 }, + { category: 'B', amount: 55 }, + { category: 'C', amount: 43 }, + ], + }, + encoding: { + x: { field: 'category', type: 'nominal' }, + y: { field: 'amount', type: 'quantitative' }, + }, + }; + + const { container } = render(); + expect(container).toBeTruthy(); + }); + + it('renders stacked bar chart with color encoding', () => { + const spec = { + mark: 'bar', + data: { + values: [ + { category: 'A', group: 'G1', amount: 28 }, + { category: 'A', group: 'G2', amount: 15 }, + { category: 'B', group: 'G1', amount: 55 }, + { category: 'B', group: 'G2', amount: 20 }, + ], + }, + encoding: { + x: { field: 'category', type: 'nominal' }, + y: { field: 'amount', type: 'quantitative' }, + color: { field: 'group', type: 'nominal' }, + }, + }; + + const { container } = render(); + expect(container).toBeTruthy(); + }); + + it('renders horizontal bar chart', () => { + const spec = { + mark: 'bar', + data: { + values: [ + { category: 'A', amount: 28 }, + { category: 'B', amount: 55 }, + { category: 'C', amount: 43 }, + ], + }, + encoding: { + y: { field: 'category', type: 'nominal' }, + x: { field: 'amount', type: 'quantitative' }, + }, + }; + + const { container } = render(); + expect(container).toBeTruthy(); + }); + + it('throws error when vegaLiteSpec is missing', () => { + // Suppress console.error for this test + const consoleSpy = jest.spyOn(console, 'error').mockImplementation(); + + expect(() => { + render(); + }).toThrow('VegaDeclarativeChart: vegaLiteSpec is required'); + + consoleSpy.mockRestore(); + }); + + it('handles legend selection', () => { + const onSchemaChange = jest.fn(); + const spec = { + mark: 'line', + data: { + values: [ + { x: 1, y: 10, category: 'A' }, + { x: 2, y: 20, category: 'B' }, + ], + }, + encoding: { + x: { field: 'x', type: 'quantitative' }, + y: { field: 'y', type: 'quantitative' }, + color: { field: 'category', type: 'nominal' }, + }, + }; + + render(); + // Legend interaction would be tested in integration tests + }); + + it('renders area chart', () => { + const spec = { + mark: 'area', + data: { + values: [ + { date: '2023-01', value: 100 }, + { date: '2023-02', value: 150 }, + { date: '2023-03', value: 120 }, + ], + }, + encoding: { + x: { field: 'date', type: 'temporal' }, + y: { field: 'value', type: 'quantitative' }, + }, + }; + + const { container } = render(); + expect(container).toBeTruthy(); + }); + + it('renders scatter chart', () => { + const spec = { + mark: 'point', + data: { + values: [ + { x: 10, y: 20, size: 100 }, + { x: 15, y: 30, size: 200 }, + { x: 25, y: 15, size: 150 }, + ], + }, + encoding: { + x: { field: 'x', type: 'quantitative' }, + y: { field: 'y', type: 'quantitative' }, + size: { field: 'size', type: 'quantitative' }, + }, + }; + + const { container } = render(); + expect(container).toBeTruthy(); + }); + + it('renders donut chart', () => { + const spec = { + mark: 'arc', + data: { + values: [ + { category: 'A', value: 30 }, + { category: 'B', value: 70 }, + { category: 'C', value: 50 }, + ], + }, + encoding: { + theta: { field: 'value', type: 'quantitative' }, + color: { field: 'category', type: 'nominal' }, + }, + }; + + const { container } = render(); + expect(container).toBeTruthy(); + }); + + it('renders heatmap chart', () => { + const spec = { + mark: 'rect', + data: { + values: [ + { x: 'A', y: 'Mon', value: 28 }, + { x: 'B', y: 'Mon', value: 55 }, + { x: 'C', y: 'Mon', value: 43 }, + { x: 'A', y: 'Tue', value: 91 }, + { x: 'B', y: 'Tue', value: 81 }, + { x: 'C', y: 'Tue', value: 53 }, + ], + }, + encoding: { + x: { field: 'x', type: 'nominal' }, + y: { field: 'y', type: 'nominal' }, + color: { field: 'value', type: 'quantitative' }, + }, + }; + + const { container } = render(); + expect(container).toBeTruthy(); + }); +}); diff --git a/packages/charts/react-charts/library/src/components/VegaDeclarativeChart/VegaDeclarativeChart.tsx b/packages/charts/react-charts/library/src/components/VegaDeclarativeChart/VegaDeclarativeChart.tsx new file mode 100644 index 0000000000000..2904acf5f1d71 --- /dev/null +++ b/packages/charts/react-charts/library/src/components/VegaDeclarativeChart/VegaDeclarativeChart.tsx @@ -0,0 +1,603 @@ +'use client'; + +import * as React from 'react'; +import { + transformVegaLiteToLineChartProps, + transformVegaLiteToVerticalBarChartProps, + transformVegaLiteToVerticalStackedBarChartProps, + transformVegaLiteToGroupedVerticalBarChartProps, + transformVegaLiteToHorizontalBarChartProps, + transformVegaLiteToAreaChartProps, + transformVegaLiteToScatterChartProps, + transformVegaLiteToDonutChartProps, + transformVegaLiteToHeatMapChartProps, + transformVegaLiteToHistogramProps, +} from '../DeclarativeChart/VegaLiteSchemaAdapter'; +import { withResponsiveContainer } from '../ResponsiveContainer/withResponsiveContainer'; +import { LineChart } from '../LineChart/index'; +import { VerticalBarChart } from '../VerticalBarChart/index'; +import { VerticalStackedBarChart } from '../VerticalStackedBarChart/index'; +import { GroupedVerticalBarChart } from '../GroupedVerticalBarChart/index'; +import { HorizontalBarChartWithAxis } from '../HorizontalBarChartWithAxis/index'; +import { AreaChart } from '../AreaChart/index'; +import { ScatterChart } from '../ScatterChart/index'; +import { DonutChart } from '../DonutChart/index'; +import { HeatMapChart } from '../HeatMapChart/index'; +import { ThemeContext_unstable as V9ThemeContext } from '@fluentui/react-shared-contexts'; +import { webLightTheme } from '@fluentui/tokens'; +import type { Chart } from '../../types/index'; + +/** + * Vega-Lite specification type + * + * For full type support, install the vega-lite package: + * ``` + * npm install vega-lite + * ``` + * + * Then you can import and use TopLevelSpec: + * ```typescript + * import type { TopLevelSpec } from 'vega-lite'; + * const spec: TopLevelSpec = { ... }; + * ``` + */ +export type VegaLiteSpec = any; + +/** + * Schema for VegaDeclarativeChart component + */ +export interface VegaSchema { + /** + * Vega-Lite specification + * + * @see https://vega.github.io/vega-lite/docs/spec.html + */ + vegaLiteSpec: VegaLiteSpec; + + /** + * Selected legends for filtering + */ + selectedLegends?: string[]; +} + +/** + * Props for VegaDeclarativeChart component + */ +export interface VegaDeclarativeChartProps { + /** + * Vega-Lite chart schema + */ + chartSchema: VegaSchema; + + /** + * Callback when schema changes (e.g., legend selection) + */ + onSchemaChange?: (newSchema: VegaSchema) => void; + + /** + * Additional CSS class name + */ + className?: string; + + /** + * Additional inline styles + */ + style?: React.CSSProperties; +} + +/** + * Hook to determine if dark theme is active + */ +function useIsDarkTheme(): boolean { + const theme = React.useContext(V9ThemeContext); + const currentTheme = theme || webLightTheme; + return currentTheme?.colorBrandBackground2 === '#004C50'; +} + +/** + * Hook for color mapping across charts + */ +function useColorMapping() { + return React.useRef>(new Map()); +} + +/** + * Check if spec is a horizontal concatenation + */ +function isHConcatSpec(spec: VegaLiteSpec): boolean { + return spec.hconcat && Array.isArray(spec.hconcat) && spec.hconcat.length > 0; +} + +/** + * Check if spec is a vertical concatenation + */ +function isVConcatSpec(spec: VegaLiteSpec): boolean { + return spec.vconcat && Array.isArray(spec.vconcat) && spec.vconcat.length > 0; +} + +/** + * Check if spec is any kind of concatenation + */ +function isConcatSpec(spec: VegaLiteSpec): boolean { + return isHConcatSpec(spec) || isVConcatSpec(spec); +} + +/** + * Get grid properties for concat specs + */ +function getVegaConcatGridProperties(spec: VegaLiteSpec): { + templateRows: string; + templateColumns: string; + isHorizontal: boolean; + specs: VegaLiteSpec[]; +} { + if (isHConcatSpec(spec)) { + return { + templateRows: '1fr', + templateColumns: `repeat(${spec.hconcat.length}, 1fr)`, + isHorizontal: true, + specs: spec.hconcat, + }; + } + + if (isVConcatSpec(spec)) { + return { + templateRows: `repeat(${spec.vconcat.length}, 1fr)`, + templateColumns: '1fr', + isHorizontal: false, + specs: spec.vconcat, + }; + } + + return { + templateRows: '1fr', + templateColumns: '1fr', + isHorizontal: false, + specs: [spec], + }; +} + +const ResponsiveLineChart = withResponsiveContainer(LineChart); +const ResponsiveVerticalBarChart = withResponsiveContainer(VerticalBarChart); +const ResponsiveVerticalStackedBarChart = withResponsiveContainer(VerticalStackedBarChart); +const ResponsiveGroupedVerticalBarChart = withResponsiveContainer(GroupedVerticalBarChart); +const ResponsiveHorizontalBarChartWithAxis = withResponsiveContainer(HorizontalBarChartWithAxis); +const ResponsiveAreaChart = withResponsiveContainer(AreaChart); +const ResponsiveScatterChart = withResponsiveContainer(ScatterChart); +const ResponsiveDonutChart = withResponsiveContainer(DonutChart); +const ResponsiveHeatMapChart = withResponsiveContainer(HeatMapChart); + +/** + * Chart type mapping with transformers and renderers + * Follows the factory functor pattern from PlotlyDeclarativeChart + */ +type VegaChartTypeMap = { + line: { transformer: typeof transformVegaLiteToLineChartProps; renderer: typeof ResponsiveLineChart }; + bar: { transformer: typeof transformVegaLiteToVerticalBarChartProps; renderer: typeof ResponsiveVerticalBarChart }; + 'stacked-bar': { transformer: typeof transformVegaLiteToVerticalStackedBarChartProps; renderer: typeof ResponsiveVerticalStackedBarChart }; + 'grouped-bar': { transformer: typeof transformVegaLiteToGroupedVerticalBarChartProps; renderer: typeof ResponsiveGroupedVerticalBarChart }; + 'horizontal-bar': { transformer: typeof transformVegaLiteToHorizontalBarChartProps; renderer: typeof ResponsiveHorizontalBarChartWithAxis }; + area: { transformer: typeof transformVegaLiteToAreaChartProps; renderer: typeof ResponsiveAreaChart }; + scatter: { transformer: typeof transformVegaLiteToScatterChartProps; renderer: typeof ResponsiveScatterChart }; + donut: { transformer: typeof transformVegaLiteToDonutChartProps; renderer: typeof ResponsiveDonutChart }; + heatmap: { transformer: typeof transformVegaLiteToHeatMapChartProps; renderer: typeof ResponsiveHeatMapChart }; + histogram: { transformer: typeof transformVegaLiteToHistogramProps; renderer: typeof ResponsiveVerticalBarChart }; +}; + +const vegaChartMap: VegaChartTypeMap = { + line: { transformer: transformVegaLiteToLineChartProps, renderer: ResponsiveLineChart }, + bar: { transformer: transformVegaLiteToVerticalBarChartProps, renderer: ResponsiveVerticalBarChart }, + 'stacked-bar': { transformer: transformVegaLiteToVerticalStackedBarChartProps, renderer: ResponsiveVerticalStackedBarChart }, + 'grouped-bar': { transformer: transformVegaLiteToGroupedVerticalBarChartProps, renderer: ResponsiveGroupedVerticalBarChart }, + 'horizontal-bar': { transformer: transformVegaLiteToHorizontalBarChartProps, renderer: ResponsiveHorizontalBarChartWithAxis }, + area: { transformer: transformVegaLiteToAreaChartProps, renderer: ResponsiveAreaChart }, + scatter: { transformer: transformVegaLiteToScatterChartProps, renderer: ResponsiveScatterChart }, + donut: { transformer: transformVegaLiteToDonutChartProps, renderer: ResponsiveDonutChart }, + heatmap: { transformer: transformVegaLiteToHeatMapChartProps, renderer: ResponsiveHeatMapChart }, + histogram: { transformer: transformVegaLiteToHistogramProps, renderer: ResponsiveVerticalBarChart }, +}; + +/** + * Determines the chart type based on Vega-Lite spec + */ +function getChartType(spec: VegaLiteSpec): { + type: 'line' | 'bar' | 'stacked-bar' | 'grouped-bar' | 'horizontal-bar' | 'area' | 'scatter' | 'donut' | 'heatmap' | 'histogram'; + mark: string; +} { + // Handle layered specs - check if it's a bar+line combo for stacked bar with lines + if (spec.layer && spec.layer.length > 1) { + const marks = spec.layer.map((layer: any) => typeof layer.mark === 'string' ? layer.mark : layer.mark?.type); + const hasBar = marks.includes('bar'); + const hasLine = marks.includes('line') || marks.includes('point'); + + // Bar + line combo should use stacked bar chart (which supports line overlays) + if (hasBar && hasLine) { + const barLayer = spec.layer.find((layer: any) => { + const mark = typeof layer.mark === 'string' ? layer.mark : layer.mark?.type; + return mark === 'bar'; + }); + + if (barLayer?.encoding?.color?.field) { + return { type: 'stacked-bar', mark: 'bar' }; + } + // If no color encoding, still use stacked bar to support line overlay + return { type: 'stacked-bar', mark: 'bar' }; + } + } + + // Handle layered specs - use first layer's mark for other cases + const mark = spec.layer ? spec.layer[0]?.mark : spec.mark; + const markType = typeof mark === 'string' ? mark : mark?.type; + + const encoding = spec.layer ? spec.layer[0]?.encoding : spec.encoding; + const hasColorEncoding = !!encoding?.color?.field; + + // Arc marks for pie/donut charts + // Donut charts have innerRadius defined in mark properties + if (markType === 'arc' && encoding?.theta) { + return { type: 'donut', mark: markType }; + } + + // Rect marks for heatmaps + // For heatmaps, we need rect mark with x, y, and color (quantitative) encodings + // Must have actual field names, not just datum values + if (markType === 'rect' && + encoding?.x?.field && + encoding?.y?.field && + encoding?.color?.field && + encoding?.color?.type === 'quantitative') { + return { type: 'heatmap', mark: markType }; + } + + // Bar charts + if (markType === 'bar') { + // Check for histogram: binned x-axis with aggregate y-axis + if (encoding?.x?.bin) { + return { type: 'histogram', mark: markType }; + } + + const isXNominal = encoding?.x?.type === 'nominal' || encoding?.x?.type === 'ordinal'; + const isYNominal = encoding?.y?.type === 'nominal' || encoding?.y?.type === 'ordinal'; + + // Horizontal bar: x is quantitative, y is nominal/ordinal + if (isYNominal && !isXNominal) { + return { type: 'horizontal-bar', mark: markType }; + } + + // Vertical bars with color encoding + if (hasColorEncoding) { + // Check for xOffset encoding which indicates grouped bars + // @ts-ignore - xOffset is a valid Vega-Lite encoding + const hasXOffset = !!encoding?.xOffset?.field; + + if (hasXOffset) { + return { type: 'grouped-bar', mark: markType }; + } + + // Otherwise, default to stacked bar + return { type: 'stacked-bar', mark: markType }; + } + + // Simple vertical bar + return { type: 'bar', mark: markType }; + } + + // Area charts + if (markType === 'area') { + return { type: 'area', mark: markType }; + } + + // Scatter/point charts + if (markType === 'point' || markType === 'circle' || markType === 'square') { + return { type: 'scatter', mark: markType }; + } + + // Line charts (default) + return { type: 'line', mark: markType }; +} + +/** + * Renders a single Vega-Lite chart spec + */ +function renderSingleChart( + spec: VegaLiteSpec, + colorMap: React.RefObject>, + isDarkTheme: boolean, + chartRef: React.RefObject, + multiSelectLegendProps: any, + interactiveCommonProps: any, +): JSX.Element { + const chartType = getChartType(spec); + const chartConfig = vegaChartMap[chartType.type]; + + if (!chartConfig) { + throw new Error(`VegaDeclarativeChart: Unsupported chart type '${chartType.type}'`); + } + + const { transformer, renderer: ChartRenderer } = chartConfig; + const chartProps = transformer(spec, colorMap, isDarkTheme) as any; + + // Special handling for charts with different prop patterns + if (chartType.type === 'donut') { + return ; + } else if (chartType.type === 'heatmap') { + return ; + } else { + return ; + } +} + +/** + * VegaDeclarativeChart - Render Vega-Lite specifications with Fluent UI styling + * + * Supported chart types: + * - Line charts: mark: 'line' or 'point' + * - Area charts: mark: 'area' + * - Scatter charts: mark: 'point', 'circle', or 'square' + * - Vertical bar charts: mark: 'bar' with nominal/ordinal x-axis + * - Stacked bar charts: mark: 'bar' with color encoding + * - Grouped bar charts: mark: 'bar' with color encoding (via configuration) + * - Horizontal bar charts: mark: 'bar' with nominal/ordinal y-axis + * - Donut/Pie charts: mark: 'arc' with theta encoding + * - Heatmaps: mark: 'rect' with x, y, and color (quantitative) encodings + * - Combo charts: Layered specs with bar + line marks render as VerticalStackedBarChart with line overlays + * + * Multi-plot Support: + * - Horizontal concatenation (hconcat): Multiple charts side-by-side + * - Vertical concatenation (vconcat): Multiple charts stacked vertically + * - Shared data and encoding are merged from parent spec to each subplot + * + * Limitations: + * - Most layered specifications (multiple chart types) are not fully supported + * - Bar + Line combinations ARE supported and will render properly + * - For other composite charts, only the first layer will be rendered + * - Faceting and repeat operators are not yet supported + * - Funnel charts are not a native Vega-Lite mark type. The conversion_funnel.json example + * uses a horizontal bar chart (y: nominal, x: quantitative) which is the standard way to + * represent funnel data in Vega-Lite. For specialized funnel visualizations with tapering + * shapes, consider using Plotly's native funnel chart type instead. + * + * Note: Sankey, Gantt, and Gauge charts are not standard Vega-Lite marks. + * These specialized visualizations would require custom extensions or alternative approaches. + * + * @example Line Chart + * ```tsx + * import { VegaDeclarativeChart } from '@fluentui/react-charts'; + * + * const spec = { + * mark: 'line', + * data: { values: [{ x: 1, y: 10 }, { x: 2, y: 20 }] }, + * encoding: { + * x: { field: 'x', type: 'quantitative' }, + * y: { field: 'y', type: 'quantitative' } + * } + * }; + * + * + * ``` + * + * @example Area Chart + * ```tsx + * const areaSpec = { + * mark: 'area', + * data: { values: [{ date: '2023-01', value: 100 }, { date: '2023-02', value: 150 }] }, + * encoding: { + * x: { field: 'date', type: 'temporal' }, + * y: { field: 'value', type: 'quantitative' } + * } + * }; + * + * + * ``` + * + * @example Scatter Chart + * ```tsx + * const scatterSpec = { + * mark: 'point', + * data: { values: [{ x: 10, y: 20, size: 100 }, { x: 15, y: 30, size: 200 }] }, + * encoding: { + * x: { field: 'x', type: 'quantitative' }, + * y: { field: 'y', type: 'quantitative' }, + * size: { field: 'size', type: 'quantitative' } + * } + * }; + * + * + * ``` + * + * @example Vertical Bar Chart + * ```tsx + * const barSpec = { + * mark: 'bar', + * data: { values: [{ cat: 'A', val: 28 }, { cat: 'B', val: 55 }] }, + * encoding: { + * x: { field: 'cat', type: 'nominal' }, + * y: { field: 'val', type: 'quantitative' } + * } + * }; + * + * + * ``` + * + * @example Stacked Bar Chart + * ```tsx + * const stackedSpec = { + * mark: 'bar', + * data: { values: [ + * { cat: 'A', group: 'G1', val: 28 }, + * { cat: 'A', group: 'G2', val: 15 } + * ]}, + * encoding: { + * x: { field: 'cat', type: 'nominal' }, + * y: { field: 'val', type: 'quantitative' }, + * color: { field: 'group', type: 'nominal' } + * } + * }; + * + * + * ``` + * + * @example Donut Chart + * ```tsx + * const donutSpec = { + * mark: 'arc', + * data: { values: [{ category: 'A', value: 30 }, { category: 'B', value: 70 }] }, + * encoding: { + * theta: { field: 'value', type: 'quantitative' }, + * color: { field: 'category', type: 'nominal' } + * } + * }; + * + * + * ``` + * + * @example Heatmap + * ```tsx + * const heatmapSpec = { + * mark: 'rect', + * data: { values: [ + * { x: 'A', y: 'Mon', value: 28 }, + * { x: 'B', y: 'Mon', value: 55 }, + * { x: 'A', y: 'Tue', value: 43 } + * ]}, + * encoding: { + * x: { field: 'x', type: 'nominal' }, + * y: { field: 'y', type: 'nominal' }, + * color: { field: 'value', type: 'quantitative' } + * } + * }; + * + * + * ``` + */ +export const VegaDeclarativeChart = React.forwardRef( + (props, forwardedRef) => { + const { vegaLiteSpec, selectedLegends = [] } = props.chartSchema; + + if (!vegaLiteSpec) { + throw new Error('VegaDeclarativeChart: vegaLiteSpec is required in chartSchema'); + } + + const colorMap = useColorMapping(); + const isDarkTheme = useIsDarkTheme(); + const chartRef = React.useRef(null); + + const [activeLegends, setActiveLegends] = React.useState(selectedLegends); + + const onActiveLegendsChange = (keys: string[]) => { + setActiveLegends(keys); + if (props.onSchemaChange) { + props.onSchemaChange({ vegaLiteSpec, selectedLegends: keys }); + } + }; + + React.useEffect(() => { + setActiveLegends(props.chartSchema.selectedLegends ?? []); + }, [props.chartSchema.selectedLegends]); + + const multiSelectLegendProps = { + canSelectMultipleLegends: true, + onChange: onActiveLegendsChange, + selectedLegends: activeLegends, + }; + + const interactiveCommonProps = { + componentRef: chartRef, + legendProps: multiSelectLegendProps, + }; + + try { + // Check if this is a concat spec (multiple charts side-by-side or stacked) + if (isHConcatSpec(vegaLiteSpec) || isVConcatSpec(vegaLiteSpec)) { + const gridProps = getVegaConcatGridProperties(vegaLiteSpec); + + return ( +
+ {gridProps.specs.map((subSpec: VegaLiteSpec, index: number) => { + // Merge shared data and encoding from parent spec into each subplot + const mergedSpec = { + ...subSpec, + data: subSpec.data || vegaLiteSpec.data, + encoding: { + ...(vegaLiteSpec.encoding || {}), + ...(subSpec.encoding || {}), + }, + }; + + const cellRow = gridProps.isHorizontal ? 1 : index + 1; + const cellColumn = gridProps.isHorizontal ? index + 1 : 1; + + return ( +
+ {renderSingleChart( + mergedSpec, + colorMap, + isDarkTheme, + chartRef, + multiSelectLegendProps, + interactiveCommonProps, + )} +
+ ); + })} +
+ ); + } + + // Check if this is a layered spec (composite chart) + if (vegaLiteSpec.layer && vegaLiteSpec.layer.length > 1) { + // Check if it's a supported bar+line combo + const marks = vegaLiteSpec.layer.map((layer: any) => typeof layer.mark === 'string' ? layer.mark : layer.mark?.type); + const hasBar = marks.includes('bar'); + const hasLine = marks.includes('line') || marks.includes('point'); + const isBarLineCombo = hasBar && hasLine; + + // Only warn for unsupported layered specs + if (!isBarLineCombo) { + console.warn( + 'VegaDeclarativeChart: Layered specifications with multiple chart types are not fully supported. ' + + 'Only the first layer will be rendered. Bar+Line combinations are supported via VerticalStackedBarChart.' + ); + } + } + + // Render single chart + const chartComponent = renderSingleChart( + vegaLiteSpec, + colorMap, + isDarkTheme, + chartRef, + multiSelectLegendProps, + interactiveCommonProps, + ); + + return ( +
+ {chartComponent} +
+ ); + } catch (error) { + throw new Error(`Failed to transform Vega-Lite spec: ${error}`); + } + }, +); + +VegaDeclarativeChart.displayName = 'VegaDeclarativeChart'; diff --git a/packages/charts/react-charts/library/src/components/VegaDeclarativeChart/__snapshots__/VegaDeclarativeChart.ChartType.test.tsx.snap b/packages/charts/react-charts/library/src/components/VegaDeclarativeChart/__snapshots__/VegaDeclarativeChart.ChartType.test.tsx.snap new file mode 100644 index 0000000000000..41012d9383b5e --- /dev/null +++ b/packages/charts/react-charts/library/src/components/VegaDeclarativeChart/__snapshots__/VegaDeclarativeChart.ChartType.test.tsx.snap @@ -0,0 +1,156 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`VegaDeclarativeChart - Chart Type Detection Snapshots for Chart Type Detection should match snapshot for heatmap chart 1`] = ` +
+
+
+ +
+
+
+`; diff --git a/packages/charts/react-charts/library/src/components/VegaDeclarativeChart/__snapshots__/VegaDeclarativeChart.FinancialRatios.test.tsx.snap b/packages/charts/react-charts/library/src/components/VegaDeclarativeChart/__snapshots__/VegaDeclarativeChart.FinancialRatios.test.tsx.snap new file mode 100644 index 0000000000000..381c1cf29daf6 --- /dev/null +++ b/packages/charts/react-charts/library/src/components/VegaDeclarativeChart/__snapshots__/VegaDeclarativeChart.FinancialRatios.test.tsx.snap @@ -0,0 +1,471 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`VegaDeclarativeChart - Financial Ratios Heatmap should render financial ratios heatmap without errors 1`] = ` +
+
+
+ +
+
+
+`; diff --git a/packages/charts/react-charts/library/src/components/VegaDeclarativeChart/__snapshots__/VegaDeclarativeChart.Issues.test.tsx.snap b/packages/charts/react-charts/library/src/components/VegaDeclarativeChart/__snapshots__/VegaDeclarativeChart.Issues.test.tsx.snap new file mode 100644 index 0000000000000..9487d80ecdcd2 --- /dev/null +++ b/packages/charts/react-charts/library/src/components/VegaDeclarativeChart/__snapshots__/VegaDeclarativeChart.Issues.test.tsx.snap @@ -0,0 +1,156 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`VegaDeclarativeChart - Issue Fixes Issue 1: Heatmap Chart Not Rendering should match snapshot for heatmap 1`] = ` +
+
+
+ +
+
+
+`; diff --git a/packages/charts/react-charts/library/src/components/VegaDeclarativeChart/__snapshots__/VegaDeclarativeChart.ScatterHeatmap.test.tsx.snap b/packages/charts/react-charts/library/src/components/VegaDeclarativeChart/__snapshots__/VegaDeclarativeChart.ScatterHeatmap.test.tsx.snap new file mode 100644 index 0000000000000..3e1c0a6522e90 --- /dev/null +++ b/packages/charts/react-charts/library/src/components/VegaDeclarativeChart/__snapshots__/VegaDeclarativeChart.ScatterHeatmap.test.tsx.snap @@ -0,0 +1,2438 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`VegaDeclarativeChart - Heatmap Charts should render heatmap from actual air_quality_heatmap.json schema 1`] = ` +
+
+
+ +
+
+
+`; + +exports[`VegaDeclarativeChart - Heatmap Charts should render heatmap from actual attendance_heatmap.json schema 1`] = ` +
+
+
+ +
+
+
+`; + +exports[`VegaDeclarativeChart - Heatmap Charts should render heatmap with rect marks and quantitative color 1`] = ` +
+
+
+ +
+
+
+`; + +exports[`VegaDeclarativeChart - Scatter Charts should render scatter chart from actual bmi_scatter.json schema 1`] = ` +
+
+
+ +
+
+
+`; + +exports[`VegaDeclarativeChart - Scatter Charts should render scatter chart with basic point encoding 1`] = ` +
+
+
+ +
+
+
+`; + +exports[`VegaDeclarativeChart - Scatter Charts should render scatter chart with size encoding 1`] = ` +
+
+
+ +
+
+
+`; diff --git a/packages/charts/react-charts/library/src/components/VegaDeclarativeChart/__snapshots__/VegaDeclarativeChart.Snapshots.test.tsx.snap b/packages/charts/react-charts/library/src/components/VegaDeclarativeChart/__snapshots__/VegaDeclarativeChart.Snapshots.test.tsx.snap new file mode 100644 index 0000000000000..8fcd9b2d7a019 --- /dev/null +++ b/packages/charts/react-charts/library/src/components/VegaDeclarativeChart/__snapshots__/VegaDeclarativeChart.Snapshots.test.tsx.snap @@ -0,0 +1,5634 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`VegaDeclarativeChart - Snapshot Tests Basic Charts should render heatmapchart correctly 1`] = ` +
+
+
+ +
+
+
+`; + +exports[`VegaDeclarativeChart - Snapshot Tests Education Charts should render attendance_heatmap correctly 1`] = ` +
+
+
+ +
+
+
+`; + +exports[`VegaDeclarativeChart - Snapshot Tests Financial Charts should render financial_ratios_heatmap correctly 1`] = ` +
+
+
+ +
+
+
+`; + +exports[`VegaDeclarativeChart - Snapshot Tests Healthcare Charts should render hospital_capacity_heatmap correctly 1`] = ` +
+
+
+ +
+
+
+`; + +exports[`VegaDeclarativeChart - Snapshot Tests Manufacturing Charts should render air_quality_heatmap correctly 1`] = ` +
+
+
+ +
+
+
+`; + +exports[`VegaDeclarativeChart - Snapshot Tests Manufacturing Charts should render machine_utilization_heatmap correctly 1`] = ` +
+
+
+ +
+
+
+`; + +exports[`VegaDeclarativeChart - Snapshot Tests Marketing Charts should render engagement_heatmap correctly 1`] = ` +
+
+
+ +
+
+
+`; + +exports[`VegaDeclarativeChart - Snapshot Tests Marketing Charts should render server_load_heatmap correctly 1`] = ` +
+
+
+ +
+
+
+`; + +exports[`VegaDeclarativeChart - Snapshot Tests Technology Charts should render website_traffic_heatmap correctly 1`] = ` +
+
+
+ +
+
+
+`; + +exports[`VegaDeclarativeChart - Transformation Snapshots Chart Props Transformation should transform air_quality_heatmap to Fluent chart props 1`] = ` +
+
+ +
+
+`; + +exports[`VegaDeclarativeChart - Transformation Snapshots Chart Props Transformation should transform engagement_heatmap to Fluent chart props 1`] = ` +
+
+ +
+
+`; diff --git a/packages/charts/react-charts/library/src/components/VegaDeclarativeChart/index.ts b/packages/charts/react-charts/library/src/components/VegaDeclarativeChart/index.ts new file mode 100644 index 0000000000000..04d6eaa3e554e --- /dev/null +++ b/packages/charts/react-charts/library/src/components/VegaDeclarativeChart/index.ts @@ -0,0 +1 @@ +export * from './VegaDeclarativeChart'; diff --git a/packages/charts/react-charts/library/src/index.ts b/packages/charts/react-charts/library/src/index.ts index 3d2a65cadd858..94a061c84057f 100644 --- a/packages/charts/react-charts/library/src/index.ts +++ b/packages/charts/react-charts/library/src/index.ts @@ -14,6 +14,7 @@ export * from './utilities/colors'; export * from './Popover'; export * from './ResponsiveContainer'; export * from './DeclarativeChart'; +export * from './VegaDeclarativeChart'; export * from './AreaChart'; export * from './HorizontalBarChartWithAxis'; export * from './HeatMapChart'; diff --git a/packages/charts/react-charts/stories/generate-imports.js b/packages/charts/react-charts/stories/generate-imports.js new file mode 100644 index 0000000000000..a896aae18bb9e --- /dev/null +++ b/packages/charts/react-charts/stories/generate-imports.js @@ -0,0 +1,37 @@ +const fs = require('fs'); +const path = require('path'); + +// Get all schema files +const schemasDir = path.join(__dirname, '../src/VegaDeclarativeChart/schemas'); +const files = fs.readdirSync(schemasDir).filter(f => f.endsWith('.json')); + +console.log(`Found ${files.length} schema files\n`); + +// Generate import statements +const imports = files.map(file => { + const name = file.replace('.json', ''); + const camelCase = name + .split(/[-_]/) + .map((part, i) => i === 0 ? part : part.charAt(0).toUpperCase() + part.slice(1)) + .join(''); + const varName = camelCase + 'Schema'; + + return { + file: name, + varName, + import: `import ${varName} from './schemas/${name}.json';` + }; +}); + +// Output imports +console.log('// Import statements:'); +console.log('// ==================\n'); +imports.forEach(imp => console.log(imp.import)); + +console.log('\n\n// Schema map entries:'); +console.log('// ===================\n'); +imports.forEach(imp => { + console.log(` '${imp.file}': ${imp.varName},`); +}); + +console.log(`\n\nTotal: ${imports.length} schemas`); diff --git a/packages/charts/react-charts/stories/src/DeclarativeChart/docs/DeclarativeChartOverview.md b/packages/charts/react-charts/stories/src/DeclarativeChart/docs/DeclarativeChartOverview.md index 852b5767a4fd7..2c34e1e9cbf9e 100644 --- a/packages/charts/react-charts/stories/src/DeclarativeChart/docs/DeclarativeChartOverview.md +++ b/packages/charts/react-charts/stories/src/DeclarativeChart/docs/DeclarativeChartOverview.md @@ -1 +1,224 @@ DeclarativeChart enables developers to render interactive chart visualizations using Plotly's widely adopted JSON-based schema while ensuring a consistent Fluent UI design language. + +For Vega-Lite specifications, use the **VegaDeclarativeChart** component instead. + +## Components + +### DeclarativeChart + +Renders charts from **Plotly JSON schemas**. Supports all Fluent chart types with full Plotly compatibility. + +### VegaDeclarativeChart + +Renders charts from **Vega-Lite specifications**. Supports the following chart types: + +- **Line Charts** - `mark: 'line'` or `mark: 'point'` +- **Area Charts** - `mark: 'area'` +- **Scatter Charts** - `mark: 'point'`, `mark: 'circle'`, or `mark: 'square'` +- **Vertical Bar Charts** - `mark: 'bar'` with nominal/ordinal x-axis +- **Stacked Bar Charts** - `mark: 'bar'` with color encoding (stacks by default) +- **Grouped Bar Charts** - Available via explicit configuration +- **Horizontal Bar Charts** - `mark: 'bar'` with nominal/ordinal y-axis +- **Donut/Pie Charts** - `mark: 'arc'` with theta encoding +- **Heatmaps** - `mark: 'rect'` with x, y, and color encodings + +> **Note:** Sankey, Funnel, Gantt, and Gauge charts are not standard Vega-Lite marks. These specialized visualizations would require custom extensions or alternative approaches. + +#### Examples + +**Line Chart:** + +```tsx +import { VegaDeclarativeChart } from '@fluentui/react-charts'; + +const lineSpec = { + mark: 'line', + data: { + values: [ + { x: 1, y: 10 }, + { x: 2, y: 20 }, + ], + }, + encoding: { + x: { field: 'x', type: 'quantitative' }, + y: { field: 'y', type: 'quantitative' }, + }, +}; + +; +``` + +**Area Chart:** + +```tsx +const areaSpec = { + mark: 'area', + data: { + values: [ + { date: '2023-01', value: 100 }, + { date: '2023-02', value: 150 }, + ], + }, + encoding: { + x: { field: 'date', type: 'temporal' }, + y: { field: 'value', type: 'quantitative' }, + }, +}; + +; +``` + +**Scatter Chart:** + +```tsx +const scatterSpec = { + mark: 'point', + data: { + values: [ + { x: 10, y: 20, size: 100 }, + { x: 15, y: 30, size: 200 }, + ], + }, + encoding: { + x: { field: 'x', type: 'quantitative' }, + y: { field: 'y', type: 'quantitative' }, + size: { field: 'size', type: 'quantitative' }, + }, +}; + +; +``` + +**Vertical Bar Chart:** + +```tsx +const barSpec = { + mark: 'bar', + data: { + values: [ + { category: 'A', amount: 28 }, + { category: 'B', amount: 55 }, + ], + }, + encoding: { + x: { field: 'category', type: 'nominal' }, + y: { field: 'amount', type: 'quantitative' }, + }, +}; + +; +``` + +**Stacked Bar Chart:** + +```tsx +const stackedSpec = { + mark: 'bar', + data: { + values: [ + { category: 'A', group: 'G1', amount: 28 }, + { category: 'A', group: 'G2', amount: 15 }, + ], + }, + encoding: { + x: { field: 'category', type: 'nominal' }, + y: { field: 'amount', type: 'quantitative' }, + color: { field: 'group', type: 'nominal' }, + }, +}; + +; +``` + +**Horizontal Bar Chart:** + +```tsx +const hbarSpec = { + mark: 'bar', + data: { + values: [ + { category: 'A', amount: 28 }, + { category: 'B', amount: 55 }, + ], + }, + encoding: { + y: { field: 'category', type: 'nominal' }, + x: { field: 'amount', type: 'quantitative' }, + }, +}; + +; +``` + +**Donut Chart:** + +```tsx +const donutSpec = { + mark: 'arc', + data: { + values: [ + { category: 'A', value: 30 }, + { category: 'B', value: 70 }, + ], + }, + encoding: { + theta: { field: 'value', type: 'quantitative' }, + color: { field: 'category', type: 'nominal' }, + }, +}; + +; +``` + +**Heatmap:** + +```tsx +const heatmapSpec = { + mark: 'rect', + data: { + values: [ + { x: 'A', y: 'Mon', value: 28 }, + { x: 'B', y: 'Mon', value: 55 }, + { x: 'A', y: 'Tue', value: 43 }, + ], + }, + encoding: { + x: { field: 'x', type: 'nominal' }, + y: { field: 'y', type: 'nominal' }, + color: { field: 'value', type: 'quantitative' }, + }, +}; + +; +``` + +## Bundle Size Optimization + +Both components are **tree-shakable**: + +- Using only `DeclarativeChart`? Vega-Lite code is excluded from your bundle +- Using only `VegaDeclarativeChart`? Plotly adapter code is excluded from your bundle +- Import only what you need for optimal bundle size + +## Vega-Lite Type Definitions + +VegaDeclarativeChart accepts any valid Vega-Lite specification. For comprehensive TypeScript support, optionally install the official types: + +```bash +npm install vega-lite +``` + +Then use the official types: + +```typescript +import type { TopLevelSpec } from 'vega-lite'; +import { VegaDeclarativeChart } from '@fluentui/react-charts'; + +const spec: TopLevelSpec = { + // Full type checking and IntelliSense +}; + +; +``` + +The vega-lite package is marked as an **optional peer dependency**, so it won't be bundled unless you explicitly use its types. diff --git a/packages/charts/react-charts/stories/src/VegaDeclarativeChart/VegaDeclarativeChartDefault.stories.tsx b/packages/charts/react-charts/stories/src/VegaDeclarativeChart/VegaDeclarativeChartDefault.stories.tsx new file mode 100644 index 0000000000000..0a5fec6987ec6 --- /dev/null +++ b/packages/charts/react-charts/stories/src/VegaDeclarativeChart/VegaDeclarativeChartDefault.stories.tsx @@ -0,0 +1,332 @@ +import * as React from 'react'; +import { VegaDeclarativeChart } from '../../../library/src/components/VegaDeclarativeChart'; +import { + Dropdown, + Field, + Input, + InputOnChangeData, + Option, + OptionOnSelectData, + SelectionEvents, +} from '@fluentui/react-components'; + +// Dynamically import all schemas +// @ts-ignore +const schemasContext = require.context('./schemas', false, /\.json$/); +const ALL_SCHEMAS: Record = {}; +const SCHEMA_NAMES: string[] = []; + +schemasContext.keys().forEach((key: string) => { + const schemaName = key.replace('./', '').replace('.json', ''); + ALL_SCHEMAS[schemaName] = schemasContext(key); + SCHEMA_NAMES.push(schemaName); +}); + +interface ErrorBoundaryProps { + children: React.ReactNode; +} + +interface ErrorBoundaryState { + hasError: boolean; + error: string; +} + +class ErrorBoundary extends React.Component { + public static getDerivedStateFromError(error: Error) { + return { hasError: true, error: `${error.message}\n${error.stack}` }; + } + + constructor(props: ErrorBoundaryProps) { + super(props); + this.state = { hasError: false, error: '' }; + } + + public render() { + if (this.state.hasError) { + return ( +
+

Error rendering chart:

+ 
{this.state.error}
+
+ ); + } + + return this.props.children; + } +} + +// Categorize schemas for better organization +function categorizeSchemas(): Map { + const categories = new Map(); + + SCHEMA_NAMES.forEach(name => { + let category = 'Other'; + + // Categorization logic based on schema name patterns + if (name.includes('stock') || name.includes('portfolio') || name.includes('profit') || + name.includes('revenue') || name.includes('cashflow') || name.includes('budget') || + name.includes('expense') || name.includes('roi') || name.includes('financial') || + name.includes('dividend')) { + category = 'Financial'; + } else if (name.includes('orders') || name.includes('conversion') || name.includes('product') || + name.includes('inventory') || name.includes('customer') || name.includes('price') || + name.includes('seasonal') || name.includes('category') || name.includes('shipping') || + name.includes('discount') || name.includes('sales') || name.includes('market')) { + category = 'E-Commerce'; + } else if (name.includes('campaign') || name.includes('engagement') || name.includes('social') || + name.includes('ad') || name.includes('ctr') || name.includes('channel') || + name.includes('influencer') || name.includes('viral') || name.includes('sentiment') || + name.includes('impression') || name.includes('lead')) { + category = 'Marketing'; + } else if (name.includes('patient') || name.includes('age') || name.includes('disease') || + name.includes('treatment') || name.includes('hospital') || name.includes('bmi') || + name.includes('recovery') || name.includes('medication') || name.includes('symptom') || + name.includes('health')) { + category = 'Healthcare'; + } else if (name.includes('test') || name.includes('grade') || name.includes('course') || + name.includes('student') || name.includes('attendance') || name.includes('study') || + name.includes('graduation') || name.includes('skill') || name.includes('learning') || + name.includes('dropout')) { + category = 'Education'; + } else if (name.includes('production') || name.includes('defect') || name.includes('machine') || + name.includes('downtime') || name.includes('quality') || name.includes('shift') || + name.includes('turnover') || name.includes('supply') || name.includes('efficiency') || + name.includes('maintenance')) { + category = 'Manufacturing'; + } else if (name.includes('temperature') || name.includes('precipitation') || name.includes('co2') || + name.includes('renewable') || name.includes('air') || name.includes('weather') || + name.includes('sea') || name.includes('biodiversity') || name.includes('energy') || + name.includes('climate')) { + category = 'Climate'; + } else if (name.includes('api') || name.includes('error') || name.includes('server') || + name.includes('deployment') || name.includes('user_sessions') || name.includes('bug') || + name.includes('performance') || name.includes('code') || name.includes('bandwidth') || + name.includes('system') || name.includes('website') || name.includes('log_scale')) { + category = 'Technology'; + } else if (name.includes('player') || name.includes('team') || name.includes('game') || + name.includes('season') || name.includes('attendance_bar') || name.includes('league') || + name.includes('streaming') || name.includes('genre') || name.includes('tournament')) { + category = 'Sports'; + } else if (name.includes('linechart') || name.includes('areachart') || name.includes('barchart') || + name.includes('scatterchart') || name.includes('donutchart') || name.includes('heatmapchart') || + name.includes('grouped_bar') || name.includes('stacked_bar') || name.includes('line_bar_combo')) { + category = 'Basic Charts'; + } + + if (!categories.has(category)) { + categories.set(category, []); + } + categories.get(category)!.push(name); + }); + + return categories; +} + +const SCHEMA_CATEGORIES = categorizeSchemas(); + +// Generate options from all schemas +const ALL_OPTIONS: Array<{key: string, text: string, category: string}> = []; +SCHEMA_CATEGORIES.forEach((schemas, category) => { + schemas.forEach(schemaName => { + const text = schemaName + .split(/[-_]/) + .map(word => word.charAt(0).toUpperCase() + word.slice(1)) + .join(' '); + ALL_OPTIONS.push({ key: schemaName, text, category }); + }); +}); + +// Sort options by category and name +ALL_OPTIONS.sort((a, b) => { + if (a.category !== b.category) { + // Priority order for categories + const categoryOrder = ['Basic Charts', 'Financial', 'E-Commerce', 'Marketing', 'Healthcare', 'Education', 'Manufacturing', 'Climate', 'Technology', 'Sports', 'Other']; + return categoryOrder.indexOf(a.category) - categoryOrder.indexOf(b.category); + } + return a.text.localeCompare(b.text); +}); + +export const Default = () => { + const [selectedChart, setSelectedChart] = React.useState('linechart'); + const [schemaText, setSchemaText] = React.useState(JSON.stringify(ALL_SCHEMAS.linechart, null, 2)); + const [width, setWidth] = React.useState(600); + const [height, setHeight] = React.useState(400); + const [selectedCategory, setSelectedCategory] = React.useState('All'); + + const handleChartChange = (_e: SelectionEvents, data: OptionOnSelectData) => { + const chartKey = data.optionValue || 'linechart'; + setSelectedChart(chartKey); + setSchemaText(JSON.stringify(ALL_SCHEMAS[chartKey], null, 2)); + }; + + const handleCategoryChange = (_e: SelectionEvents, data: OptionOnSelectData) => { + setSelectedCategory(data.optionValue || 'All'); + }; + + const handleSchemaChange = (e: React.ChangeEvent) => { + setSchemaText(e.target.value); + }; + + const handleWidthChange = (_e: React.ChangeEvent, data: InputOnChangeData) => { + const value = parseInt(data.value); + if (!isNaN(value) && value > 0) { + setWidth(value); + } + }; + + const handleHeightChange = (_e: React.ChangeEvent, data: InputOnChangeData) => { + const value = parseInt(data.value); + if (!isNaN(value) && value > 0) { + setHeight(value); + } + }; + + let parsedSchema: any; + let parseError: string | null = null; + try { + parsedSchema = JSON.parse(schemaText); + } catch (e: any) { + parsedSchema = null; + parseError = e.message; + } + + const filteredOptions = + selectedCategory === 'All' + ? ALL_OPTIONS + : ALL_OPTIONS.filter(opt => opt.category === selectedCategory); + + const categories = ['All', ...Array.from(SCHEMA_CATEGORIES.keys())].sort((a, b) => { + if (a === 'All') return -1; + if (b === 'All') return 1; + const categoryOrder = ['Basic Charts', 'Financial', 'E-Commerce', 'Marketing', 'Healthcare', 'Education', 'Manufacturing', 'Climate', 'Technology', 'Sports', 'Other']; + return categoryOrder.indexOf(a) - categoryOrder.indexOf(b); + }); + + return ( +
+

Vega-Lite Declarative Chart - {SCHEMA_NAMES.length} Schemas

+

+ This component renders charts from Vega-Lite specifications. Browse through {SCHEMA_NAMES.length} real-world chart examples + across {SCHEMA_CATEGORIES.size} categories. Select a chart type or edit the JSON schema below to customize the visualization. +

+ +
+ + + {categories.map(category => ( + + ))} + + + + + opt.key === selectedChart)?.text || 'Line Chart'} + onOptionSelect={handleChartChange} + style={{ width: '300px' }} + > + {filteredOptions.map(option => ( + + ))} + + + + + + + + + + +
+ +
+
+ +