diff --git a/change/@fluentui-react-charting-4aabb452-e7e3-47e3-9964-7a7c4814e759.json b/change/@fluentui-react-charting-4aabb452-e7e3-47e3-9964-7a7c4814e759.json new file mode 100644 index 00000000000000..157b74502e849c --- /dev/null +++ b/change/@fluentui-react-charting-4aabb452-e7e3-47e3-9964-7a7c4814e759.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "Declarative chart bug fixes", + "packageName": "@fluentui/react-charting", + "email": "74965306+Anush2303@users.noreply.github.com", + "dependentChangeType": "patch" +} diff --git a/packages/charts/react-charting/src/components/AreaChart/AreaChart.base.tsx b/packages/charts/react-charting/src/components/AreaChart/AreaChart.base.tsx index 300ef5a45656be..02933ecb66672e 100644 --- a/packages/charts/react-charting/src/components/AreaChart/AreaChart.base.tsx +++ b/packages/charts/react-charting/src/components/AreaChart/AreaChart.base.tsx @@ -450,7 +450,9 @@ export class AreaChartBase extends React.Component 1 ? true : false; + this._isMultiStackChart = !!(this.props.legendProps?.selectedLegends + ? stackedData?.length >= 1 + : stackedData?.length > 1); return { stackedData, maxOfYVal, diff --git a/packages/charts/react-charting/src/components/DeclarativeChart/PlotlySchemaAdapter.ts b/packages/charts/react-charting/src/components/DeclarativeChart/PlotlySchemaAdapter.ts index d570f55a927c4e..bfdc4419d3ca55 100644 --- a/packages/charts/react-charting/src/components/DeclarativeChart/PlotlySchemaAdapter.ts +++ b/packages/charts/react-charting/src/components/DeclarativeChart/PlotlySchemaAdapter.ts @@ -24,10 +24,11 @@ import { IHorizontalBarChartWithAxisProps } from '../HorizontalBarChartWithAxis/ import { ILineChartProps } from '../LineChart/index'; import { IAreaChartProps } from '../AreaChart/index'; import { IHeatMapChartProps } from '../HeatMapChart/index'; -import { DataVizPalette, getNextColor } from '../../utilities/colors'; +import { DataVizPalette, getColorFromToken, getNextColor } from '../../utilities/colors'; import { GaugeChartVariant, IGaugeChartProps, IGaugeChartSegment } from '../GaugeChart/index'; import { IGroupedVerticalBarChartProps } from '../GroupedVerticalBarChart/index'; import { IVerticalBarChartProps } from '../VerticalBarChart/index'; +import { timeParse } from 'd3-time-format'; const isDate = (value: any): boolean => !isNaN(Date.parse(value)); const isNumber = (value: any): boolean => !isNaN(parseFloat(value)) && isFinite(value); @@ -35,9 +36,10 @@ export const isDateArray = (array: any[]): boolean => isArrayOrTypedArray(array) export const isNumberArray = (array: any[]): boolean => isArrayOrTypedArray(array) && array.every(isNumber); export const isMonthArray = (array: any[]): boolean => { if (array && array.length > 0) { - const presentYear = new Date().getFullYear(); + const parseFullMonth = timeParse('%B'); + const parseShortMonth = timeParse('%b'); return array.every(possiblyMonthValue => { - return isDate(`${possiblyMonthValue} 01, ${presentYear}`); + return parseFullMonth(possiblyMonthValue) !== null || parseShortMonth(possiblyMonthValue) !== null; }); } return false; @@ -147,7 +149,7 @@ export const transformPlotlyJsonToDonutProps = ( height, innerRadius, hideLabels, - showLabelsInPercent: firstData.textinfo ? firstData.textinfo === 'percent' : true, + showLabelsInPercent: firstData.textinfo ? ['percent', 'label+percent'].includes(firstData.textinfo) : true, styles, }; }; @@ -404,7 +406,9 @@ export const transformPlotlyJsonToHorizontalBarWithAxisProps = ( }; }); }) - .flat(); + .flat() + //reversing the order to invert the Y bars order as required by plotly. + .reverse(); const chartHeight: number = typeof layout.height === 'number' ? layout.height : 450; const margin: number = typeof layout.margin?.l === 'number' ? layout.margin?.l : 0; @@ -579,11 +583,11 @@ export const transformPlotlyJsonToGaugeProps = ( const diff = firstData.value - firstData.delta.reference; if (diff >= 0) { sublabel = `\u25B2 ${diff}`; - const color = getColor(firstData.delta.increasing?.color || '', colorMap, isDarkTheme); + const color = getColorFromToken(DataVizPalette.success, isDarkTheme); sublabelColor = color; } else { sublabel = `\u25BC ${Math.abs(diff)}`; - const color = getColor(firstData.delta.decreasing?.color || '', colorMap, isDarkTheme); + const color = getColorFromToken(DataVizPalette.error, isDarkTheme); sublabelColor = color; } } diff --git a/packages/charts/react-charting/src/components/DeclarativeChart/PlotlySchemaAdapterUT.test.tsx b/packages/charts/react-charting/src/components/DeclarativeChart/PlotlySchemaAdapterUT.test.tsx index 174ca2d90161bd..b0764953469fac 100644 --- a/packages/charts/react-charting/src/components/DeclarativeChart/PlotlySchemaAdapterUT.test.tsx +++ b/packages/charts/react-charting/src/components/DeclarativeChart/PlotlySchemaAdapterUT.test.tsx @@ -102,11 +102,7 @@ describe('isMonthArray', () => { expect(isMonthArray([date, date.getDate() + 1, date.getDate() + 2])).toBe(false); }); - test('Should return true when input array contains months data', () => { - expect(isMonthArray([10, 11, 1])).toBe(true); - }); - - test('Should return false when input array contains numeric data(apart from months 1 to 12)', () => { + test('Should return false when input array contains numeric data', () => { expect(isMonthArray([20, 30, 40])).toBe(false); }); diff --git a/packages/charts/react-charting/src/components/DeclarativeChart/__snapshots__/DeclarativeChartRTL.test.tsx.snap b/packages/charts/react-charting/src/components/DeclarativeChart/__snapshots__/DeclarativeChartRTL.test.tsx.snap index a4e8dfbfe3165e..bf5cdb41de7cbd 100644 --- a/packages/charts/react-charting/src/components/DeclarativeChart/__snapshots__/DeclarativeChartRTL.test.tsx.snap +++ b/packages/charts/react-charting/src/components/DeclarativeChart/__snapshots__/DeclarativeChartRTL.test.tsx.snap @@ -4187,7 +4187,7 @@ exports[`DeclarativeChart Should render gaugechart in DeclarativeChart 1`] = ` class= { - fill: #9373c0; + fill: #107c10; font-size: 12px; font-weight: 600; } diff --git a/packages/charts/react-charting/src/components/DeclarativeChart/__snapshots__/PlotlySchemaAdapterUT.test.tsx.snap b/packages/charts/react-charting/src/components/DeclarativeChart/__snapshots__/PlotlySchemaAdapterUT.test.tsx.snap index 2e2347d3576bc3..8966e3f55d1b98 100644 --- a/packages/charts/react-charting/src/components/DeclarativeChart/__snapshots__/PlotlySchemaAdapterUT.test.tsx.snap +++ b/packages/charts/react-charting/src/components/DeclarativeChart/__snapshots__/PlotlySchemaAdapterUT.test.tsx.snap @@ -384,7 +384,7 @@ Object { ], "styles": Object { "sublabel": Object { - "fill": "#f7adda", + "fill": "#54b054", }, }, "sublabel": "▲ 20", @@ -2844,70 +2844,70 @@ Object { "chartTitle": "PHP Framework Popularity at Work - SitePoint, 2015", "data": Array [ Object { - "color": "#cf87da", - "legend": "Laravel", - "x": 1659, - "y": "Laravel", + "color": "#4f6bed", + "legend": "Aura", + "x": 10, + "y": "Aura", }, Object { - "color": "#dac157", - "legend": "Symfony2", - "x": 1067, - "y": "Symfony2", + "color": "#d0b232", + "legend": "Drupal", + "x": 11, + "y": "Drupal", }, Object { - "color": "#637cef", - "legend": "Nette", - "x": 671, - "y": "Nette", + "color": "#c36bd1", + "legend": "TYPO3 Flow", + "x": 17, + "y": "TYPO3 Flow", }, Object { - "color": "#e3008c", - "legend": "CodeIgniter", - "x": 597, - "y": "CodeIgniter", + "color": "#73aa24", + "legend": "FuelPHP", + "x": 25, + "y": "FuelPHP", }, Object { - "color": "#2aa0a4", - "legend": "Yii 2", - "x": 504, - "y": "Yii 2", + "color": "#d77440", + "legend": "Kohana", + "x": 35, + "y": "Kohana", }, Object { - "color": "#9373c0", - "legend": "PHPixie", - "x": 418, - "y": "PHPixie", + "color": "#4fa1e1", + "legend": "Typo 3", + "x": 35, + "y": "Typo 3", }, Object { - "color": "#13a10e", - "legend": "Yii 1", - "x": 407, - "y": "Yii 1", + "color": "#27ac22", + "legend": "Simple MVC Framework", + "x": 42, + "y": "Simple MVC Framework", }, Object { - "color": "#3a96dd", - "legend": "Zend Framework 2", - "x": 390, - "y": "Zend Framework 2", + "color": "#a083c9", + "legend": "Silex", + "x": 65, + "y": "Silex", }, Object { - "color": "#ca5010", - "legend": "Company Internal Framework", - "x": 378, - "y": "Company Internal Framework", + "color": "#4cb4b7", + "legend": "Slim", + "x": 79, + "y": "Slim", }, Object { - "color": "#57811b", - "legend": "Zend Framework 1", - "x": 274, - "y": "Zend Framework 1", + "color": "#ee5fb7", + "legend": "Phalcon", + "x": 169, + "y": "Phalcon", }, Object { - "color": "#b146c2", - "legend": "CakePHP", - "x": 255, - "y": "CakePHP", + "color": "#93a4f4", + "legend": "We use a CMS for everything", + "x": 203, + "y": "We use a CMS for everything", }, Object { "color": "#ae8c00", @@ -2916,70 +2916,70 @@ Object { "y": "No Framework", }, Object { - "color": "#93a4f4", - "legend": "We use a CMS for everything", - "x": 203, - "y": "We use a CMS for everything", + "color": "#b146c2", + "legend": "CakePHP", + "x": 255, + "y": "CakePHP", }, Object { - "color": "#ee5fb7", - "legend": "Phalcon", - "x": 169, - "y": "Phalcon", + "color": "#57811b", + "legend": "Zend Framework 1", + "x": 274, + "y": "Zend Framework 1", }, Object { - "color": "#4cb4b7", - "legend": "Slim", - "x": 79, - "y": "Slim", + "color": "#ca5010", + "legend": "Company Internal Framework", + "x": 378, + "y": "Company Internal Framework", }, Object { - "color": "#a083c9", - "legend": "Silex", - "x": 65, - "y": "Silex", + "color": "#3a96dd", + "legend": "Zend Framework 2", + "x": 390, + "y": "Zend Framework 2", }, Object { - "color": "#27ac22", - "legend": "Simple MVC Framework", - "x": 42, - "y": "Simple MVC Framework", + "color": "#13a10e", + "legend": "Yii 1", + "x": 407, + "y": "Yii 1", }, Object { - "color": "#4fa1e1", - "legend": "Typo 3", - "x": 35, - "y": "Typo 3", + "color": "#9373c0", + "legend": "PHPixie", + "x": 418, + "y": "PHPixie", }, Object { - "color": "#d77440", - "legend": "Kohana", - "x": 35, - "y": "Kohana", + "color": "#2aa0a4", + "legend": "Yii 2", + "x": 504, + "y": "Yii 2", }, Object { - "color": "#73aa24", - "legend": "FuelPHP", - "x": 25, - "y": "FuelPHP", + "color": "#e3008c", + "legend": "CodeIgniter", + "x": 597, + "y": "CodeIgniter", }, Object { - "color": "#c36bd1", - "legend": "TYPO3 Flow", - "x": 17, - "y": "TYPO3 Flow", + "color": "#637cef", + "legend": "Nette", + "x": 671, + "y": "Nette", }, Object { - "color": "#d0b232", - "legend": "Drupal", - "x": 11, - "y": "Drupal", + "color": "#dac157", + "legend": "Symfony2", + "x": 1067, + "y": "Symfony2", }, Object { - "color": "#4f6bed", - "legend": "Aura", - "x": 10, - "y": "Aura", + "color": "#cf87da", + "legend": "Laravel", + "x": 1659, + "y": "Laravel", }, ], "secondaryYAxistitle": "",