npm - @fluentui/react-charts - Versions diffs - 0.0.0-nightly-20250818-0407.1 → 0.0.0-nightly-20250819-0407.1 - Mend

@fluentui/react-charts 0.0.0-nightly-20250818-0407.1 → 0.0.0-nightly-20250819-0407.1

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

Files changed (35) hide show

package/CHANGELOG.md CHANGED Viewed

@@ -1,28 +1,28 @@
 # Change Log - @fluentui/react-charts
-This log was last generated on Mon, 18 Aug 2025 04:22:14 GMT and should not be manually modified.
+This log was last generated on Tue, 19 Aug 2025 04:22:01 GMT and should not be manually modified.
 <!-- Start content -->
-## [0.0.0-nightly-20250818-0407.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-charts_v0.0.0-nightly-20250818-0407.1)
+## [0.0.0-nightly-20250819-0407.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-charts_v0.0.0-nightly-20250819-0407.1)
-Mon, 18 Aug 2025 04:22:14 GMT
-[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-charts_v9.2.2..@fluentui/react-charts_v0.0.0-nightly-20250818-0407.1)
+Tue, 19 Aug 2025 04:22:01 GMT
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-charts_v9.2.2..@fluentui/react-charts_v0.0.0-nightly-20250819-0407.1)
 ### Changes
 - Release nightly v9 ([commit](https://github.com/microsoft/fluentui/commit/not available) by fluentui-internal@service.microsoft.com)
-- Bump @fluentui/react-button to v0.0.0-nightly-20250818-0407.1 ([commit](https://github.com/microsoft/fluentui/commit/cd9138d5415d888fc6a573c6d817f1f25efa471d) by beachball)
-- Bump @fluentui/react-jsx-runtime to v0.0.0-nightly-20250818-0407.1 ([commit](https://github.com/microsoft/fluentui/commit/cd9138d5415d888fc6a573c6d817f1f25efa471d) by beachball)
-- Bump @fluentui/react-overflow to v0.0.0-nightly-20250818-0407.1 ([commit](https://github.com/microsoft/fluentui/commit/cd9138d5415d888fc6a573c6d817f1f25efa471d) by beachball)
-- Bump @fluentui/react-popover to v0.0.0-nightly-20250818-0407.1 ([commit](https://github.com/microsoft/fluentui/commit/cd9138d5415d888fc6a573c6d817f1f25efa471d) by beachball)
-- Bump @fluentui/react-shared-contexts to v0.0.0-nightly-20250818-0407.1 ([commit](https://github.com/microsoft/fluentui/commit/cd9138d5415d888fc6a573c6d817f1f25efa471d) by beachball)
-- Bump @fluentui/react-tabster to v0.0.0-nightly-20250818-0407.1 ([commit](https://github.com/microsoft/fluentui/commit/cd9138d5415d888fc6a573c6d817f1f25efa471d) by beachball)
-- Bump @fluentui/react-theme to v0.0.0-nightly-20250818-0407.1 ([commit](https://github.com/microsoft/fluentui/commit/cd9138d5415d888fc6a573c6d817f1f25efa471d) by beachball)
-- Bump @fluentui/react-tooltip to v0.0.0-nightly-20250818-0407.1 ([commit](https://github.com/microsoft/fluentui/commit/cd9138d5415d888fc6a573c6d817f1f25efa471d) by beachball)
-- Bump @fluentui/react-utilities to v0.0.0-nightly-20250818-0407.1 ([commit](https://github.com/microsoft/fluentui/commit/cd9138d5415d888fc6a573c6d817f1f25efa471d) by beachball)
-- Bump @fluentui/react-conformance to v0.0.0-nightly-20250818-0407.1 ([commit](https://github.com/microsoft/fluentui/commit/cd9138d5415d888fc6a573c6d817f1f25efa471d) by beachball)
-- Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-20250818-0407.1 ([commit](https://github.com/microsoft/fluentui/commit/cd9138d5415d888fc6a573c6d817f1f25efa471d) by beachball)
+- Bump @fluentui/react-button to v0.0.0-nightly-20250819-0407.1 ([commit](https://github.com/microsoft/fluentui/commit/6e5fdb4154e68e772e81aedc584981e1e7432202) by beachball)
+- Bump @fluentui/react-jsx-runtime to v0.0.0-nightly-20250819-0407.1 ([commit](https://github.com/microsoft/fluentui/commit/6e5fdb4154e68e772e81aedc584981e1e7432202) by beachball)
+- Bump @fluentui/react-overflow to v0.0.0-nightly-20250819-0407.1 ([commit](https://github.com/microsoft/fluentui/commit/6e5fdb4154e68e772e81aedc584981e1e7432202) by beachball)
+- Bump @fluentui/react-popover to v0.0.0-nightly-20250819-0407.1 ([commit](https://github.com/microsoft/fluentui/commit/6e5fdb4154e68e772e81aedc584981e1e7432202) by beachball)
+- Bump @fluentui/react-shared-contexts to v0.0.0-nightly-20250819-0407.1 ([commit](https://github.com/microsoft/fluentui/commit/6e5fdb4154e68e772e81aedc584981e1e7432202) by beachball)
+- Bump @fluentui/react-tabster to v0.0.0-nightly-20250819-0407.1 ([commit](https://github.com/microsoft/fluentui/commit/6e5fdb4154e68e772e81aedc584981e1e7432202) by beachball)
+- Bump @fluentui/react-theme to v0.0.0-nightly-20250819-0407.1 ([commit](https://github.com/microsoft/fluentui/commit/6e5fdb4154e68e772e81aedc584981e1e7432202) by beachball)
+- Bump @fluentui/react-tooltip to v0.0.0-nightly-20250819-0407.1 ([commit](https://github.com/microsoft/fluentui/commit/6e5fdb4154e68e772e81aedc584981e1e7432202) by beachball)
+- Bump @fluentui/react-utilities to v0.0.0-nightly-20250819-0407.1 ([commit](https://github.com/microsoft/fluentui/commit/6e5fdb4154e68e772e81aedc584981e1e7432202) by beachball)
+- Bump @fluentui/react-conformance to v0.0.0-nightly-20250819-0407.1 ([commit](https://github.com/microsoft/fluentui/commit/6e5fdb4154e68e772e81aedc584981e1e7432202) by beachball)
+- Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-20250819-0407.1 ([commit](https://github.com/microsoft/fluentui/commit/6e5fdb4154e68e772e81aedc584981e1e7432202) by beachball)
 ## [9.2.2](https://github.com/microsoft/fluentui/tree/@fluentui/react-charts_v9.2.2)

package/dist/index.d.ts CHANGED Viewed

@@ -680,6 +680,10 @@ export declare interface ChartProps {
      * data for the points in the line chart
      */
     lineChartData?: LineChartPoints[];
+    /**
+     * data for the points in the scatter chart
+     */
+    scatterChartData?: ScatterChartPoints[];
     /**
      * data for the points in the line chart
      */
@@ -2621,6 +2625,10 @@ export declare interface LineChartDataPoint extends BaseDataPoint {
      * Dependent value of the data point, rendered along the y-axis.
      */
     y: number;
+    /**
+     * text labels of marker points
+     */
+    text?: string;
 }
 /**
@@ -2804,6 +2812,10 @@ export declare interface LineChartStyles extends CartesianChartStyles {
      * styles for line border
      */
     lineBorder?: string;
+    /**
+     * styles for marker label
+     */
+    markerLabel?: string;
 }
 /**
@@ -3331,6 +3343,50 @@ export declare interface ScatterChartDataPoint extends BaseDataPoint {
      * Marker size of the points
      */
     markerSize?: number;
+    /**
+     * text labels of marker points
+     */
+    text?: string;
+}
+/**
+ * {@docCategory IChartData}
+ */
+export declare interface ScatterChartPoints {
+    /**
+     * Legend text for the datapoint in the chart
+     */
+    legend: string;
+    /**
+     * The shape for the legend
+     * default: show the rect legend
+     */
+    legendShape?: LegendShape;
+    /**
+     * dataPoints for the line chart
+     */
+    data: ScatterChartDataPoint[];
+    /**
+     * color for the legend in the chart
+     */
+    color?: string;
+    /**
+     * opacity for chart fill color
+     */
+    opacity?: number;
+    /**
+     * hide dots for points that are not active
+     */
+    hideNonActiveDots?: boolean;
+    /**
+     * Defines the function that is executed on clicking this legend
+     */
+    onLegendClick?: (selectedLegend: string | null | string[]) => void;
+    /**
+     * Whether to use the secondary y scale or not
+     * False by default.
+     */
+    useSecondaryYScale?: boolean;
 }
 /**

package/lib/components/DeclarativeChart/DeclarativeChart.js CHANGED Viewed

@@ -99,24 +99,27 @@ const useIsDarkTheme = ()=>{
         legendProps: multiSelectLegendProps,
         componentRef: chartRef
     };
-    const renderLineAreaScatter = (plotlyData, isAreaChart)=>{
+    const renderLineAreaScatter = (plotlyData, isAreaChart, isScatterChart)=>{
         var _plotlyData_;
         const isScatterMarkers = [
-            'markers',
             'text+markers',
-            'markers+text'
+            'markers+text',
+            'lines+markers',
+            'markers+line',
+            'text+lines+markers'
         ].includes((_plotlyData_ = plotlyData[0]) === null || _plotlyData_ === void 0 ? void 0 : _plotlyData_.mode);
+        const chartType = isAreaChart ? 'area' : isScatterChart ? 'scatter' : 'line';
         const chartProps = {
             ...transformPlotlyJsonToScatterChartProps({
                 data: plotlyData,
                 layout: plotlyInput.layout
-            }, isAreaChart, isScatterMarkers, colorMap, props.colorwayType, isDarkTheme),
+            }, chartType, isScatterMarkers, colorMap, props.colorwayType, isDarkTheme),
             ...commonProps
         };
         if (isAreaChart) {
             return /*#__PURE__*/ React.createElement(ResponsiveAreaChart, chartProps);
         }
-        if (isScatterMarkers) {
+        if (isScatterChart) {
             return /*#__PURE__*/ React.createElement(ResponsiveScatterChart, chartProps);
         }
         return /*#__PURE__*/ React.createElement(ResponsiveLineChart, chartProps);
@@ -133,14 +136,18 @@ const useIsDarkTheme = ()=>{
         // in time and brings additional complexity of handling timezone and locale
         // formatting given the current design of the charting library
         const isXYear = isYearArray(xValues);
-        if ((isXDate || isXNumber) && !isXYear && !isYString) {
-            return renderLineAreaScatter(plotlyInputWithValidData.data, isAreaChart);
+        const allModes = plotlyInputWithValidData.data.map((data)=>data.mode);
+        const isScatterChart = allModes.every((mode)=>mode === 'markers');
+        // If x is date or number and y is not string, render as Line/Area Chart
+        // If x is month, correct the year and render as Line/Area Chart
+        if ((isXDate || isXNumber) && !isXYear && !isYString || isScatterChart && !isYString) {
+            return renderLineAreaScatter(plotlyInputWithValidData.data, isAreaChart, isScatterChart);
         } else if (isXMonth) {
             const updatedData = plotlyInputWithValidData.data.map((dataPoint)=>({
                     ...dataPoint,
                     x: correctYearMonth(dataPoint.x)
                 }));
-            return renderLineAreaScatter(updatedData, isAreaChart);
+            return renderLineAreaScatter(updatedData, isAreaChart, isScatterChart);
         }
         // Unsupported schema, render as VerticalStackedBarChart
         fallbackVSBC = true;
@@ -219,6 +226,7 @@ const useIsDarkTheme = ()=>{
         case 'line':
         case 'fallback':
         case 'scatterpolar':
+        case 'scatter':
             if (chart.type === 'scatterpolar') {
                 const cartesianProjection = projectPolarToCartesian(plotlyInputWithValidData);
                 plotlyInputWithValidData.data = cartesianProjection.data;

package/lib/components/DeclarativeChart/DeclarativeChart.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/components/DeclarativeChart/DeclarativeChart.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/naming-convention /\nimport as React from 'react';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport type { Data, PlotData, PlotlySchema, OutputChartType } from '@fluentui/chart-utilities';\nimport {\n decodeBase64Fields,\n isArrayOrTypedArray,\n isDateArray,\n isMonthArray,\n isNumberArray,\n isYearArray,\n mapFluentChart,\n sanitizeJson,\n} from '@fluentui/chart-utilities';\nimport { tokens } from '@fluentui/react-theme';\nimport { ThemeContext_unstable as V9ThemeContext } from '@fluentui/react-shared-contexts';\nimport { Theme, webLightTheme } from '@fluentui/tokens';\nimport * as d3Color from 'd3-color';\n\nimport {\n correctYearMonth,\n transformPlotlyJsonToDonutProps,\n transformPlotlyJsonToVSBCProps,\n transformPlotlyJsonToScatterChartProps,\n transformPlotlyJsonToHorizontalBarWithAxisProps,\n transformPlotlyJsonToHeatmapProps,\n transformPlotlyJsonToSankeyProps,\n transformPlotlyJsonToGaugeProps,\n transformPlotlyJsonToGVBCProps,\n transformPlotlyJsonToVBCProps,\n transformPlotlyJsonToChartTableProps,\n projectPolarToCartesian,\n isStringArray,\n} from './PlotlySchemaAdapter';\nimport type { ColorwayType } from './PlotlyColorAdapter';\nimport { DonutChart } from '../DonutChart/index';\nimport { VerticalStackedBarChart } from '../VerticalStackedBarChart/index';\nimport { LineChart, LineChartProps } from '../LineChart/index';\nimport { HorizontalBarChartWithAxis } from '../HorizontalBarChartWithAxis/index';\nimport { AreaChart, AreaChartProps } from '../AreaChart/index';\nimport { HeatMapChart } from '../HeatMapChart/index';\nimport { SankeyChart } from '../SankeyChart/SankeyChart';\nimport { GaugeChart } from '../GaugeChart/index';\nimport { GroupedVerticalBarChart } from '../GroupedVerticalBarChart/index';\nimport { VerticalBarChart } from '../VerticalBarChart/index';\nimport { Chart, ImageExportOptions } from '../../types/index';\nimport { ScatterChart } from '../ScatterChart/index';\n\nimport { withResponsiveContainer } from '../ResponsiveContainer/withResponsiveContainer';\nimport { ChartTable } from '../ChartTable/index';\n\nconst ResponsiveDonutChart = withResponsiveContainer(DonutChart);\nconst ResponsiveVerticalStackedBarChart = withResponsiveContainer(VerticalStackedBarChart);\nconst ResponsiveLineChart = withResponsiveContainer(LineChart);\nconst ResponsiveHorizontalBarChartWithAxis = withResponsiveContainer(HorizontalBarChartWithAxis);\nconst ResponsiveAreaChart = withResponsiveContainer(AreaChart);\nconst ResponsiveHeatMapChart = withResponsiveContainer(HeatMapChart);\nconst ResponsiveSankeyChart = withResponsiveContainer(SankeyChart);\nconst ResponsiveGaugeChart = withResponsiveContainer(GaugeChart);\nconst ResponsiveGroupedVerticalBarChart = withResponsiveContainer(GroupedVerticalBarChart);\nconst ResponsiveVerticalBarChart = withResponsiveContainer(VerticalBarChart);\nconst ResponsiveScatterChart = withResponsiveContainer(ScatterChart);\nconst ResponsiveChartTable = withResponsiveContainer(ChartTable);\n\n/*\n DeclarativeChart schema.\n * {@docCategory DeclarativeChart}\n /\nexport interface Schema {\n /\n Plotly schema represented as JSON object\n /\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n plotlySchema: any;\n}\n\n/\n DeclarativeChart props.\n * {@docCategory DeclarativeChart}\n /\nexport interface DeclarativeChartProps extends React.RefAttributes<HTMLDivElement> {\n /\n The schema representing the chart data, layout and configuration\n /\n chartSchema: Schema;\n\n /\n Callback when an event occurs\n /\n onSchemaChange?: (eventData: Schema) => void;\n\n /\n Optional callback to access the IDeclarativeChart interface. Use this instead of ref for accessing\n * the public methods and properties of the component.\n /\n componentRef?: React.RefObject<IDeclarativeChart>;\n\n /\n Optional prop to specify the colorway type of the chart.\n * - 'default': Use Fluent UI color palette aligning with plotly colorway.\n * - 'builtin': Use Fluent UI colorway.\n * - 'others': Reserved for future colorways.\n * @default 'default'\n /\n colorwayType?: ColorwayType;\n}\n\n/\n {@docCategory DeclarativeChart}\n /\nexport interface IDeclarativeChart {\n exportAsImage: (opts?: ImageExportOptions) => Promise<string>;\n}\n\nconst useColorMapping = () => {\n const colorMap = React.useRef(new Map<string, string>());\n return colorMap;\n};\n\nconst useIsDarkTheme = (): boolean => {\n const parentV9Theme = React.useContext(V9ThemeContext) as Theme;\n const v9Theme: Theme = parentV9Theme ? parentV9Theme : webLightTheme;\n\n // Get background and foreground colors\n const backgroundColor = d3Color.hsl(v9Theme.colorNeutralBackground1);\n const foregroundColor = d3Color.hsl(v9Theme.colorNeutralForeground1);\n\n const isDarkTheme = backgroundColor.l < foregroundColor.l;\n\n return isDarkTheme;\n};\n\n/\n DeclarativeChart component.\n * {@docCategory DeclarativeChart}\n */\nexport const DeclarativeChart: React.FunctionComponent<DeclarativeChartProps> = React.forwardRef<\n HTMLDivElement,\n DeclarativeChartProps\n>((props, forwardedRef) => {\n const { plotlySchema } = sanitizeJson(props.chartSchema);\n const chart: OutputChartType = mapFluentChart(plotlySchema);\n if (!chart.isValid) {\n throw new Error(`Invalid chart schema: ${chart.errorMessage}`);\n }\n let plotlyInput = plotlySchema as PlotlySchema;\n try {\n plotlyInput = decodeBase64Fields(plotlyInput);\n } catch (error) {\n throw new Error(`Failed to decode plotly schema: ${error}`);\n }\n const plotlyInputWithValidData: PlotlySchema = {\n ...plotlyInput,\n data: chart.validTracesInfo!.map(trace => plotlyInput.data[trace.index]),\n };\n\n let { selectedLegends } = plotlySchema;\n const colorMap = useColorMapping();\n const isDarkTheme = useIsDarkTheme();\n const chartRef = React.useRef<Chart>(null);\n\n if (!isArrayOrTypedArray(selectedLegends)) {\n selectedLegends = [];\n }\n\n const [activeLegends, setActiveLegends] = React.useState<string[]>(selectedLegends);\n const onActiveLegendsChange = (keys: string[]) => {\n setActiveLegends(keys);\n if (props.onSchemaChange) {\n props.onSchemaChange({ plotlySchema: { plotlyInput, selectedLegends: keys } });\n }\n };\n\n React.useEffect(() => {\n // eslint-disable-next-line @typescript-eslint/no-shadow\n const { plotlySchema } = sanitizeJson(props.chartSchema);\n // eslint-disable-next-line @typescript-eslint/no-shadow\n const { selectedLegends } = plotlySchema;\n setActiveLegends(selectedLegends ?? []);\n }, [props.chartSchema]);\n\n const multiSelectLegendProps = {\n canSelectMultipleLegends: true,\n onChange: onActiveLegendsChange,\n selectedLegends: activeLegends,\n };\n\n const commonProps = {\n legendProps: multiSelectLegendProps,\n componentRef: chartRef,\n };\n\n const renderLineAreaScatter = (plotlyData: Data[], isAreaChart: boolean): JSXElement => {\n const isScatterMarkers = ['markers', 'text+markers', 'markers+text'].includes((plotlyData[0] as PlotData)?.mode);\n const chartProps: LineChartProps \| AreaChartProps = {\n ...transformPlotlyJsonToScatterChartProps(\n { data: plotlyData, layout: plotlyInput.layout },\n isAreaChart,\n isScatterMarkers,\n colorMap,\n props.colorwayType,\n isDarkTheme,\n ),\n ...commonProps,\n };\n if (isAreaChart) {\n return <ResponsiveAreaChart {...chartProps} />;\n }\n if (isScatterMarkers) {\n return <ResponsiveScatterChart {...chartProps} />;\n }\n return <ResponsiveLineChart {...chartProps} />;\n };\n\n const checkAndRenderChart = (isAreaChart: boolean = false) => {\n let fallbackVSBC = false;\n const xValues = (plotlyInputWithValidData.data[0] as PlotData).x;\n const isXDate = isDateArray(xValues);\n const isXNumber = isNumberArray(xValues);\n const isXMonth = isMonthArray(xValues);\n const isYString = isStringArray((plotlyInputWithValidData.data[0] as Partial<PlotData>).y);\n\n // Consider year as categorical variable not numeric continuous variable\n // Also year is not considered a date variable as it is represented as a point\n // in time and brings additional complexity of handling timezone and locale\n // formatting given the current design of the charting library\n const isXYear = isYearArray(xValues);\n\n if ((isXDate \|\| isXNumber) && !isXYear && !isYString) {\n return renderLineAreaScatter(plotlyInputWithValidData.data, isAreaChart);\n } else if (isXMonth) {\n const updatedData = plotlyInputWithValidData.data.map((dataPoint: PlotData) => ({\n ...dataPoint,\n x: correctYearMonth(dataPoint.x),\n }));\n return renderLineAreaScatter(updatedData, isAreaChart);\n }\n // Unsupported schema, render as VerticalStackedBarChart\n fallbackVSBC = true;\n return (\n <ResponsiveVerticalStackedBarChart\n {...transformPlotlyJsonToVSBCProps(\n plotlyInputWithValidData,\n colorMap,\n props.colorwayType,\n isDarkTheme,\n fallbackVSBC,\n )}\n {...commonProps}\n />\n );\n };\n\n // TODO\n const exportAsImage = React.useCallback((opts?: ImageExportOptions): Promise<string> => {\n return new Promise((resolve, reject) => {\n if (!chartRef.current \|\| typeof chartRef.current.toImage !== 'function') {\n return reject(Error('Chart cannot be exported as image'));\n }\n\n chartRef.current\n .toImage({\n background: tokens.colorNeutralBackground1,\n scale: 5,\n ...opts,\n })\n .then(resolve)\n .catch(reject);\n });\n }, []);\n\n React.useImperativeHandle(\n props.componentRef,\n () => ({\n exportAsImage,\n }),\n [exportAsImage],\n );\n\n switch (chart.type) {\n case 'donut':\n return (\n <ResponsiveDonutChart\n {...transformPlotlyJsonToDonutProps(plotlyInputWithValidData, colorMap, props.colorwayType, isDarkTheme)}\n {...commonProps}\n />\n );\n case 'horizontalbar':\n return (\n <ResponsiveHorizontalBarChartWithAxis\n {...transformPlotlyJsonToHorizontalBarWithAxisProps(\n plotlyInputWithValidData,\n colorMap,\n props.colorwayType,\n isDarkTheme,\n )}\n {...commonProps}\n />\n );\n case 'groupedverticalbar':\n return (\n <ResponsiveGroupedVerticalBarChart\n {...transformPlotlyJsonToGVBCProps(plotlyInputWithValidData, colorMap, props.colorwayType, isDarkTheme)}\n {...commonProps}\n />\n );\n case 'verticalstackedbar':\n return (\n <ResponsiveVerticalStackedBarChart\n {...transformPlotlyJsonToVSBCProps(plotlyInputWithValidData, colorMap, props.colorwayType, isDarkTheme)}\n {...commonProps}\n />\n );\n case 'heatmap':\n return (\n <ResponsiveHeatMapChart\n {...transformPlotlyJsonToHeatmapProps(plotlyInputWithValidData)}\n {...commonProps}\n legendProps={{}}\n />\n );\n case 'sankey':\n return (\n <ResponsiveSankeyChart\n {...transformPlotlyJsonToSankeyProps(plotlyInputWithValidData, colorMap, props.colorwayType, isDarkTheme)}\n {...commonProps}\n />\n );\n case 'gauge':\n return (\n <ResponsiveGaugeChart\n {...transformPlotlyJsonToGaugeProps(plotlyInputWithValidData, colorMap, props.colorwayType, isDarkTheme)}\n {...commonProps}\n />\n );\n case 'verticalbar':\n return (\n <ResponsiveVerticalBarChart\n {...transformPlotlyJsonToVBCProps(plotlyInputWithValidData, colorMap, props.colorwayType, isDarkTheme)}\n {...commonProps}\n />\n );\n case 'table':\n return (\n <ResponsiveChartTable\n {...transformPlotlyJsonToChartTableProps(plotlyInputWithValidData, colorMap, isDarkTheme)}\n {...commonProps}\n />\n );\n // TODO: Add 'scatter' as a separate chart type\n case 'area':\n case 'line':\n case 'fallback':\n case 'scatterpolar':\n if (chart.type === 'scatterpolar') {\n const cartesianProjection = projectPolarToCartesian(plotlyInputWithValidData);\n plotlyInputWithValidData.data = cartesianProjection.data;\n }\n // Need recheck for area chart as we don't have ability to check for valid months in previous step\n const isAreaChart = plotlyInputWithValidData.data.some(\n (series: PlotData) => series.fill === 'tonexty' \|\| series.fill === 'tozeroy' \|\| !!series.stackgroup,\n );\n return checkAndRenderChart(isAreaChart);\n default:\n throw new Error(`Unsupported chart type :${plotlyInputWithValidData.data[0]?.type}`);\n }\n});\nDeclarativeChart.displayName = 'DeclarativeChart';\nDeclarativeChart.defaultProps = {\n colorwayType: 'default',\n};\n"],"names":["React","decodeBase64Fields","isArrayOrTypedArray","isDateArray","isMonthArray","isNumberArray","isYearArray","mapFluentChart","sanitizeJson","tokens","ThemeContext_unstable","V9ThemeContext","webLightTheme","d3Color","correctYearMonth","transformPlotlyJsonToDonutProps","transformPlotlyJsonToVSBCProps","transformPlotlyJsonToScatterChartProps","transformPlotlyJsonToHorizontalBarWithAxisProps","transformPlotlyJsonToHeatmapProps","transformPlotlyJsonToSankeyProps","transformPlotlyJsonToGaugeProps","transformPlotlyJsonToGVBCProps","transformPlotlyJsonToVBCProps","transformPlotlyJsonToChartTableProps","projectPolarToCartesian","isStringArray","DonutChart","VerticalStackedBarChart","LineChart","HorizontalBarChartWithAxis","AreaChart","HeatMapChart","SankeyChart","GaugeChart","GroupedVerticalBarChart","VerticalBarChart","ScatterChart","withResponsiveContainer","ChartTable","ResponsiveDonutChart","ResponsiveVerticalStackedBarChart","ResponsiveLineChart","ResponsiveHorizontalBarChartWithAxis","ResponsiveAreaChart","ResponsiveHeatMapChart","ResponsiveSankeyChart","ResponsiveGaugeChart","ResponsiveGroupedVerticalBarChart","ResponsiveVerticalBarChart","ResponsiveScatterChart","ResponsiveChartTable","useColorMapping","colorMap","useRef","Map","useIsDarkTheme","parentV9Theme","useContext","v9Theme","backgroundColor","hsl","colorNeutralBackground1","foregroundColor","colorNeutralForeground1","isDarkTheme","l","DeclarativeChart","forwardRef","props","forwardedRef","plotlySchema","chartSchema","chart","isValid","Error","errorMessage","plotlyInput","error","plotlyInputWithValidData","data","validTracesInfo","map","trace","index","selectedLegends","chartRef","activeLegends","setActiveLegends","useState","onActiveLegendsChange","keys","onSchemaChange","useEffect","multiSelectLegendProps","canSelectMultipleLegends","onChange","commonProps","legendProps","componentRef","renderLineAreaScatter","plotlyData","isAreaChart","isScatterMarkers","includes","mode","chartProps","layout","colorwayType","checkAndRenderChart","fallbackVSBC","xValues","x","isXDate","isXNumber","isXMonth","isYString","y","isXYear","updatedData","dataPoint","exportAsImage","useCallback","opts","Promise","resolve","reject","current","toImage","background","scale","then","catch","useImperativeHandle","type","cartesianProjection","some","series","fill","stackgroup","displayName","defaultProps"],"mappings":"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"}
1	+ {"version":3,"sources":["../src/components/DeclarativeChart/DeclarativeChart.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/naming-convention /\nimport as React from 'react';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport type { Data, PlotData, PlotlySchema, OutputChartType } from '@fluentui/chart-utilities';\nimport {\n decodeBase64Fields,\n isArrayOrTypedArray,\n isDateArray,\n isMonthArray,\n isNumberArray,\n isYearArray,\n mapFluentChart,\n sanitizeJson,\n} from '@fluentui/chart-utilities';\nimport { tokens } from '@fluentui/react-theme';\nimport { ThemeContext_unstable as V9ThemeContext } from '@fluentui/react-shared-contexts';\nimport { Theme, webLightTheme } from '@fluentui/tokens';\nimport * as d3Color from 'd3-color';\n\nimport {\n correctYearMonth,\n transformPlotlyJsonToDonutProps,\n transformPlotlyJsonToVSBCProps,\n transformPlotlyJsonToScatterChartProps,\n transformPlotlyJsonToHorizontalBarWithAxisProps,\n transformPlotlyJsonToHeatmapProps,\n transformPlotlyJsonToSankeyProps,\n transformPlotlyJsonToGaugeProps,\n transformPlotlyJsonToGVBCProps,\n transformPlotlyJsonToVBCProps,\n transformPlotlyJsonToChartTableProps,\n projectPolarToCartesian,\n isStringArray,\n} from './PlotlySchemaAdapter';\nimport type { ColorwayType } from './PlotlyColorAdapter';\nimport { DonutChart } from '../DonutChart/index';\nimport { VerticalStackedBarChart } from '../VerticalStackedBarChart/index';\nimport { LineChart, LineChartProps } from '../LineChart/index';\nimport { HorizontalBarChartWithAxis } from '../HorizontalBarChartWithAxis/index';\nimport { AreaChart, AreaChartProps } from '../AreaChart/index';\nimport { HeatMapChart } from '../HeatMapChart/index';\nimport { SankeyChart } from '../SankeyChart/SankeyChart';\nimport { GaugeChart } from '../GaugeChart/index';\nimport { GroupedVerticalBarChart } from '../GroupedVerticalBarChart/index';\nimport { VerticalBarChart } from '../VerticalBarChart/index';\nimport { Chart, ImageExportOptions } from '../../types/index';\nimport { ScatterChart, ScatterChartProps } from '../ScatterChart/index';\n\nimport { withResponsiveContainer } from '../ResponsiveContainer/withResponsiveContainer';\nimport { ChartTable } from '../ChartTable/index';\n\nconst ResponsiveDonutChart = withResponsiveContainer(DonutChart);\nconst ResponsiveVerticalStackedBarChart = withResponsiveContainer(VerticalStackedBarChart);\nconst ResponsiveLineChart = withResponsiveContainer(LineChart);\nconst ResponsiveHorizontalBarChartWithAxis = withResponsiveContainer(HorizontalBarChartWithAxis);\nconst ResponsiveAreaChart = withResponsiveContainer(AreaChart);\nconst ResponsiveHeatMapChart = withResponsiveContainer(HeatMapChart);\nconst ResponsiveSankeyChart = withResponsiveContainer(SankeyChart);\nconst ResponsiveGaugeChart = withResponsiveContainer(GaugeChart);\nconst ResponsiveGroupedVerticalBarChart = withResponsiveContainer(GroupedVerticalBarChart);\nconst ResponsiveVerticalBarChart = withResponsiveContainer(VerticalBarChart);\nconst ResponsiveScatterChart = withResponsiveContainer(ScatterChart);\nconst ResponsiveChartTable = withResponsiveContainer(ChartTable);\n\n/*\n DeclarativeChart schema.\n * {@docCategory DeclarativeChart}\n /\nexport interface Schema {\n /\n Plotly schema represented as JSON object\n /\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n plotlySchema: any;\n}\n\n/\n DeclarativeChart props.\n * {@docCategory DeclarativeChart}\n /\nexport interface DeclarativeChartProps extends React.RefAttributes<HTMLDivElement> {\n /\n The schema representing the chart data, layout and configuration\n /\n chartSchema: Schema;\n\n /\n Callback when an event occurs\n /\n onSchemaChange?: (eventData: Schema) => void;\n\n /\n Optional callback to access the IDeclarativeChart interface. Use this instead of ref for accessing\n * the public methods and properties of the component.\n /\n componentRef?: React.RefObject<IDeclarativeChart>;\n\n /\n Optional prop to specify the colorway type of the chart.\n * - 'default': Use Fluent UI color palette aligning with plotly colorway.\n * - 'builtin': Use Fluent UI colorway.\n * - 'others': Reserved for future colorways.\n * @default 'default'\n /\n colorwayType?: ColorwayType;\n}\n\n/\n {@docCategory DeclarativeChart}\n /\nexport interface IDeclarativeChart {\n exportAsImage: (opts?: ImageExportOptions) => Promise<string>;\n}\n\nconst useColorMapping = () => {\n const colorMap = React.useRef(new Map<string, string>());\n return colorMap;\n};\n\nconst useIsDarkTheme = (): boolean => {\n const parentV9Theme = React.useContext(V9ThemeContext) as Theme;\n const v9Theme: Theme = parentV9Theme ? parentV9Theme : webLightTheme;\n\n // Get background and foreground colors\n const backgroundColor = d3Color.hsl(v9Theme.colorNeutralBackground1);\n const foregroundColor = d3Color.hsl(v9Theme.colorNeutralForeground1);\n\n const isDarkTheme = backgroundColor.l < foregroundColor.l;\n\n return isDarkTheme;\n};\n\n/\n DeclarativeChart component.\n * {@docCategory DeclarativeChart}\n */\nexport const DeclarativeChart: React.FunctionComponent<DeclarativeChartProps> = React.forwardRef<\n HTMLDivElement,\n DeclarativeChartProps\n>((props, forwardedRef) => {\n const { plotlySchema } = sanitizeJson(props.chartSchema);\n const chart: OutputChartType = mapFluentChart(plotlySchema);\n if (!chart.isValid) {\n throw new Error(`Invalid chart schema: ${chart.errorMessage}`);\n }\n let plotlyInput = plotlySchema as PlotlySchema;\n try {\n plotlyInput = decodeBase64Fields(plotlyInput);\n } catch (error) {\n throw new Error(`Failed to decode plotly schema: ${error}`);\n }\n const plotlyInputWithValidData: PlotlySchema = {\n ...plotlyInput,\n data: chart.validTracesInfo!.map(trace => plotlyInput.data[trace.index]),\n };\n\n let { selectedLegends } = plotlySchema;\n const colorMap = useColorMapping();\n const isDarkTheme = useIsDarkTheme();\n const chartRef = React.useRef<Chart>(null);\n\n if (!isArrayOrTypedArray(selectedLegends)) {\n selectedLegends = [];\n }\n\n const [activeLegends, setActiveLegends] = React.useState<string[]>(selectedLegends);\n const onActiveLegendsChange = (keys: string[]) => {\n setActiveLegends(keys);\n if (props.onSchemaChange) {\n props.onSchemaChange({ plotlySchema: { plotlyInput, selectedLegends: keys } });\n }\n };\n\n React.useEffect(() => {\n // eslint-disable-next-line @typescript-eslint/no-shadow\n const { plotlySchema } = sanitizeJson(props.chartSchema);\n // eslint-disable-next-line @typescript-eslint/no-shadow\n const { selectedLegends } = plotlySchema;\n setActiveLegends(selectedLegends ?? []);\n }, [props.chartSchema]);\n\n const multiSelectLegendProps = {\n canSelectMultipleLegends: true,\n onChange: onActiveLegendsChange,\n selectedLegends: activeLegends,\n };\n\n const commonProps = {\n legendProps: multiSelectLegendProps,\n componentRef: chartRef,\n };\n\n const renderLineAreaScatter = (plotlyData: Data[], isAreaChart: boolean, isScatterChart: boolean): JSXElement => {\n const isScatterMarkers = [\n 'text+markers',\n 'markers+text',\n 'lines+markers',\n 'markers+line',\n 'text+lines+markers',\n ].includes((plotlyData[0] as PlotData)?.mode);\n const chartType = isAreaChart ? 'area' : isScatterChart ? 'scatter' : 'line';\n const chartProps: LineChartProps \| AreaChartProps \| ScatterChartProps = {\n ...transformPlotlyJsonToScatterChartProps(\n { data: plotlyData, layout: plotlyInput.layout },\n chartType,\n isScatterMarkers,\n colorMap,\n props.colorwayType,\n isDarkTheme,\n ),\n ...commonProps,\n };\n if (isAreaChart) {\n return <ResponsiveAreaChart {...chartProps} />;\n }\n if (isScatterChart) {\n return <ResponsiveScatterChart {...(chartProps as ScatterChartProps)} />;\n }\n return <ResponsiveLineChart {...chartProps} />;\n };\n\n const checkAndRenderChart = (isAreaChart: boolean = false) => {\n let fallbackVSBC = false;\n const xValues = (plotlyInputWithValidData.data[0] as PlotData).x;\n const isXDate = isDateArray(xValues);\n const isXNumber = isNumberArray(xValues);\n const isXMonth = isMonthArray(xValues);\n const isYString = isStringArray((plotlyInputWithValidData.data[0] as Partial<PlotData>).y);\n\n // Consider year as categorical variable not numeric continuous variable\n // Also year is not considered a date variable as it is represented as a point\n // in time and brings additional complexity of handling timezone and locale\n // formatting given the current design of the charting library\n const isXYear = isYearArray(xValues);\n\n const allModes = plotlyInputWithValidData.data.map((data: PlotData) => data.mode);\n const isScatterChart = allModes.every((mode: string) => mode === 'markers');\n // If x is date or number and y is not string, render as Line/Area Chart\n // If x is month, correct the year and render as Line/Area Chart\n if (((isXDate \|\| isXNumber) && !isXYear && !isYString) \|\| (isScatterChart && !isYString)) {\n return renderLineAreaScatter(plotlyInputWithValidData.data, isAreaChart, isScatterChart);\n } else if (isXMonth) {\n const updatedData = plotlyInputWithValidData.data.map((dataPoint: PlotData) => ({\n ...dataPoint,\n x: correctYearMonth(dataPoint.x),\n }));\n return renderLineAreaScatter(updatedData, isAreaChart, isScatterChart);\n }\n // Unsupported schema, render as VerticalStackedBarChart\n fallbackVSBC = true;\n return (\n <ResponsiveVerticalStackedBarChart\n {...transformPlotlyJsonToVSBCProps(\n plotlyInputWithValidData,\n colorMap,\n props.colorwayType,\n isDarkTheme,\n fallbackVSBC,\n )}\n {...commonProps}\n />\n );\n };\n\n // TODO\n const exportAsImage = React.useCallback((opts?: ImageExportOptions): Promise<string> => {\n return new Promise((resolve, reject) => {\n if (!chartRef.current \|\| typeof chartRef.current.toImage !== 'function') {\n return reject(Error('Chart cannot be exported as image'));\n }\n\n chartRef.current\n .toImage({\n background: tokens.colorNeutralBackground1,\n scale: 5,\n ...opts,\n })\n .then(resolve)\n .catch(reject);\n });\n }, []);\n\n React.useImperativeHandle(\n props.componentRef,\n () => ({\n exportAsImage,\n }),\n [exportAsImage],\n );\n\n switch (chart.type) {\n case 'donut':\n return (\n <ResponsiveDonutChart\n {...transformPlotlyJsonToDonutProps(plotlyInputWithValidData, colorMap, props.colorwayType, isDarkTheme)}\n {...commonProps}\n />\n );\n case 'horizontalbar':\n return (\n <ResponsiveHorizontalBarChartWithAxis\n {...transformPlotlyJsonToHorizontalBarWithAxisProps(\n plotlyInputWithValidData,\n colorMap,\n props.colorwayType,\n isDarkTheme,\n )}\n {...commonProps}\n />\n );\n case 'groupedverticalbar':\n return (\n <ResponsiveGroupedVerticalBarChart\n {...transformPlotlyJsonToGVBCProps(plotlyInputWithValidData, colorMap, props.colorwayType, isDarkTheme)}\n {...commonProps}\n />\n );\n case 'verticalstackedbar':\n return (\n <ResponsiveVerticalStackedBarChart\n {...transformPlotlyJsonToVSBCProps(plotlyInputWithValidData, colorMap, props.colorwayType, isDarkTheme)}\n {...commonProps}\n />\n );\n case 'heatmap':\n return (\n <ResponsiveHeatMapChart\n {...transformPlotlyJsonToHeatmapProps(plotlyInputWithValidData)}\n {...commonProps}\n legendProps={{}}\n />\n );\n case 'sankey':\n return (\n <ResponsiveSankeyChart\n {...transformPlotlyJsonToSankeyProps(plotlyInputWithValidData, colorMap, props.colorwayType, isDarkTheme)}\n {...commonProps}\n />\n );\n case 'gauge':\n return (\n <ResponsiveGaugeChart\n {...transformPlotlyJsonToGaugeProps(plotlyInputWithValidData, colorMap, props.colorwayType, isDarkTheme)}\n {...commonProps}\n />\n );\n case 'verticalbar':\n return (\n <ResponsiveVerticalBarChart\n {...transformPlotlyJsonToVBCProps(plotlyInputWithValidData, colorMap, props.colorwayType, isDarkTheme)}\n {...commonProps}\n />\n );\n case 'table':\n return (\n <ResponsiveChartTable\n {...transformPlotlyJsonToChartTableProps(plotlyInputWithValidData, colorMap, isDarkTheme)}\n {...commonProps}\n />\n );\n // TODO: Add 'scatter' as a separate chart type\n case 'area':\n case 'line':\n case 'fallback':\n case 'scatterpolar':\n case 'scatter':\n if (chart.type === 'scatterpolar') {\n const cartesianProjection = projectPolarToCartesian(plotlyInputWithValidData);\n plotlyInputWithValidData.data = cartesianProjection.data;\n }\n // Need recheck for area chart as we don't have ability to check for valid months in previous step\n const isAreaChart = plotlyInputWithValidData.data.some(\n (series: PlotData) => series.fill === 'tonexty' \|\| series.fill === 'tozeroy' \|\| !!series.stackgroup,\n );\n return checkAndRenderChart(isAreaChart);\n default:\n throw new Error(`Unsupported chart type :${plotlyInputWithValidData.data[0]?.type}`);\n }\n});\nDeclarativeChart.displayName = 'DeclarativeChart';\nDeclarativeChart.defaultProps = {\n colorwayType: 'default',\n};\n"],"names":["React","decodeBase64Fields","isArrayOrTypedArray","isDateArray","isMonthArray","isNumberArray","isYearArray","mapFluentChart","sanitizeJson","tokens","ThemeContext_unstable","V9ThemeContext","webLightTheme","d3Color","correctYearMonth","transformPlotlyJsonToDonutProps","transformPlotlyJsonToVSBCProps","transformPlotlyJsonToScatterChartProps","transformPlotlyJsonToHorizontalBarWithAxisProps","transformPlotlyJsonToHeatmapProps","transformPlotlyJsonToSankeyProps","transformPlotlyJsonToGaugeProps","transformPlotlyJsonToGVBCProps","transformPlotlyJsonToVBCProps","transformPlotlyJsonToChartTableProps","projectPolarToCartesian","isStringArray","DonutChart","VerticalStackedBarChart","LineChart","HorizontalBarChartWithAxis","AreaChart","HeatMapChart","SankeyChart","GaugeChart","GroupedVerticalBarChart","VerticalBarChart","ScatterChart","withResponsiveContainer","ChartTable","ResponsiveDonutChart","ResponsiveVerticalStackedBarChart","ResponsiveLineChart","ResponsiveHorizontalBarChartWithAxis","ResponsiveAreaChart","ResponsiveHeatMapChart","ResponsiveSankeyChart","ResponsiveGaugeChart","ResponsiveGroupedVerticalBarChart","ResponsiveVerticalBarChart","ResponsiveScatterChart","ResponsiveChartTable","useColorMapping","colorMap","useRef","Map","useIsDarkTheme","parentV9Theme","useContext","v9Theme","backgroundColor","hsl","colorNeutralBackground1","foregroundColor","colorNeutralForeground1","isDarkTheme","l","DeclarativeChart","forwardRef","props","forwardedRef","plotlySchema","chartSchema","chart","isValid","Error","errorMessage","plotlyInput","error","plotlyInputWithValidData","data","validTracesInfo","map","trace","index","selectedLegends","chartRef","activeLegends","setActiveLegends","useState","onActiveLegendsChange","keys","onSchemaChange","useEffect","multiSelectLegendProps","canSelectMultipleLegends","onChange","commonProps","legendProps","componentRef","renderLineAreaScatter","plotlyData","isAreaChart","isScatterChart","isScatterMarkers","includes","mode","chartType","chartProps","layout","colorwayType","checkAndRenderChart","fallbackVSBC","xValues","x","isXDate","isXNumber","isXMonth","isYString","y","isXYear","allModes","every","updatedData","dataPoint","exportAsImage","useCallback","opts","Promise","resolve","reject","current","toImage","background","scale","then","catch","useImperativeHandle","type","cartesianProjection","some","series","fill","stackgroup","displayName","defaultProps"],"mappings":"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"}

package/lib/components/DeclarativeChart/PlotlySchemaAdapter.js CHANGED Viewed

@@ -259,19 +259,20 @@ export const transformPlotlyJsonToVSBCProps = (input, colorMap, colorwayType, is
                         yMaxValue = Math.max(yMaxValue, yVal);
                     }
                 } else if (series.type === 'scatter' || !!fallbackVSBC) {
-                    var _series_line;
+                    var _series_mode, _series_line, _series_mode1;
                     const lineColor = resolveColor(extractedLineColors, index1, legend, colorMap, isDarkTheme);
-                    const lineOptions = getLineOptions(series.line);
+                    const lineOptions = !((_series_mode = series.mode) === null || _series_mode === void 0 ? void 0 : _series_mode.includes('text')) ? getLineOptions(series.line) : undefined;
                     const dashType = ((_series_line = series.line) === null || _series_line === void 0 ? void 0 : _series_line.dash) || 'solid';
-                    const legendShape = dashType === 'dot' || dashType === 'dash' || dashType === 'dashdot' ? 'dottedLine' : 'default';
+                    const legendShape = dashType === 'dot' || dashType === 'dash' || dashType === 'dashdot' ? 'dottedLine' : ((_series_mode1 = series.mode) === null || _series_mode1 === void 0 ? void 0 : _series_mode1.includes('markers')) ? 'circle' : 'default';
                     mapXToDataPoints[x].lineData.push({
                         legend: legend + (validXYRanges.length > 1 ? `.${rangeIdx + 1}` : ''),
                         legendShape,
                         y: yVal,
                         color: lineColor,
-                        ...lineOptions ? {
-                            lineOptions
-                        } : {},
+                        lineOptions: {
+                            ...lineOptions !== null && lineOptions !== void 0 ? lineOptions : {},
+                            mode: series.mode
+                        },
                         useSecondaryYScale: usesSecondaryYScale(series)
                     });
                     if (!usesSecondaryYScale(series) && typeof yVal === 'number') {
@@ -457,12 +458,14 @@ export const transformPlotlyJsonToVBCProps = (input, colorMap, colorwayType, isD
         roundCorners: true
     };
 };
-export const transformPlotlyJsonToScatterChartProps = (input, isAreaChart, isScatterMarkers, colorMap, colorwayType, isDarkTheme)=>{
+export const transformPlotlyJsonToScatterChartProps = (input, chartType, isScatterMarkers, colorMap, colorwayType, isDarkTheme)=>{
+    const isAreaChart = chartType === 'area';
+    const isScatterChart = chartType === 'scatter';
     const secondaryYAxisValues = getSecondaryYAxisValues(input.data, input.layout, isAreaChart ? 0 : undefined, isAreaChart ? 0 : undefined);
     let mode = 'tonexty';
     const { legends, hideLegend } = getLegendProps(input.data, input.layout);
     const chartData = input.data.map((series, index)=>{
-        var _series_mode, _series_line, _series_marker, _series_line1, _input_layout_template_layout, _input_layout_template, _input_layout, _series_line2;
+        var _series_mode, _series_line, _series_marker, _series_line1, _input_layout_template_layout, _input_layout_template, _input_layout, _series_mode1, _series_line2, _series_mode2;
         const colors = isScatterMarkers ? (series === null || series === void 0 ? void 0 : (_series_mode = series.mode) === null || _series_mode === void 0 ? void 0 : _series_mode.includes('line')) ? (_series_line = series.line) === null || _series_line === void 0 ? void 0 : _series_line.color : (_series_marker = series.marker) === null || _series_marker === void 0 ? void 0 : _series_marker.color : (_series_line1 = series.line) === null || _series_line1 === void 0 ? void 0 : _series_line1.color;
         // extract colors for each series only once
         const extractedColors = extractColor((_input_layout = input.layout) === null || _input_layout === void 0 ? void 0 : (_input_layout_template = _input_layout.template) === null || _input_layout_template === void 0 ? void 0 : (_input_layout_template_layout = _input_layout_template.layout) === null || _input_layout_template_layout === void 0 ? void 0 : _input_layout_template_layout.colorway, colorwayType, colors, colorMap, isDarkTheme);
@@ -470,21 +473,21 @@ export const transformPlotlyJsonToScatterChartProps = (input, isAreaChart, isSca
         const isXString = isStringArray(xValues);
         const isXDate = isDateArray(xValues);
         const isXNumber = isNumberArray(xValues);
-        // string case is not possible for scatter chart as it is already filtered out in declarative chart
-        const isXYearCategory = false;
+        const isXYearCategory = isYearArray(series.x); // Consider year as categorical not numeric continuous axis
         const legend = legends[index];
         // resolve color for each legend's lines from the extracted colors
         const seriesColor = resolveColor(extractedColors, index, legend, colorMap, isDarkTheme);
         mode = series.fill === 'tozeroy' ? 'tozeroy' : 'tonexty';
-        const lineOptions = getLineOptions(series.line);
+        const lineOptions = !((_series_mode1 = series.mode) === null || _series_mode1 === void 0 ? void 0 : _series_mode1.includes('text')) ? getLineOptions(series.line) : undefined;
         const dashType = ((_series_line2 = series.line) === null || _series_line2 === void 0 ? void 0 : _series_line2.dash) || 'solid';
-        const legendShape = dashType === 'dot' || dashType === 'dash' || dashType === 'dashdot' ? 'dottedLine' : 'default';
+        const legendShape = dashType === 'dot' || dashType === 'dash' || dashType === 'dashdot' ? 'dottedLine' : ((_series_mode2 = series.mode) === null || _series_mode2 === void 0 ? void 0 : _series_mode2.includes('markers')) ? 'circle' : 'default';
         const validXYRanges = getValidXYRanges(series);
         return validXYRanges.map(([rangeStart, rangeEnd], rangeIdx)=>{
             var _series_marker;
             const rangeXValues = xValues.slice(rangeStart, rangeEnd);
             const rangeYValues = series.y.slice(rangeStart, rangeEnd);
             const markerSizes = isArrayOrTypedArray((_series_marker = series.marker) === null || _series_marker === void 0 ? void 0 : _series_marker.size) ? series.marker.size.slice(rangeStart, rangeEnd) : [];
+            const textValues = Array.isArray(series.text) ? series.text.slice(rangeStart, rangeEnd) : undefined;
             return {
                 legend,
                 legendShape,
@@ -497,13 +500,17 @@ export const transformPlotlyJsonToScatterChartProps = (input, isAreaChart, isSca
                             markerSize: markerSizes[i]
                         } : typeof ((_series_marker1 = series.marker) === null || _series_marker1 === void 0 ? void 0 : _series_marker1.size) === 'number' ? {
                             markerSize: series.marker.size
+                        } : {},
+                        ...textValues ? {
+                            text: textValues[i]
                         } : {}
                     };
                 }),
                 color: seriesColor,
-                ...lineOptions ? {
-                    lineOptions
-                } : {},
+                lineOptions: {
+                    ...lineOptions !== null && lineOptions !== void 0 ? lineOptions : {},
+                    mode: series.mode
+                },
                 useSecondaryYScale: usesSecondaryYScale(series)
             };
         });
@@ -515,6 +522,10 @@ export const transformPlotlyJsonToScatterChartProps = (input, isAreaChart, isSca
         chartTitle,
         lineChartData: chartData
     };
+    const scatterChartProps = {
+        chartTitle,
+        scatterChartData: chartData
+    };
     if (isAreaChart) {
         var _input_layout, _input_layout1;
         var _input_layout_height;
@@ -536,7 +547,7 @@ export const transformPlotlyJsonToScatterChartProps = (input, isAreaChart, isSca
         var _input_layout2, _input_layout3;
         var _input_layout_height1;
         return {
-            data: chartProps,
+            data: isScatterChart ? scatterChartProps : chartProps,
             supportNegativeData: true,
             xAxisTitle,
             yAxisTitle,