Skip to content

Commit bd07179

Browse files
v-baambativ-baambati
authored
Fixed charts overlaps issue and v9 charts rendering issue while refreshing page (#613)
* added height slider * Removed svg elements height and update v9chrt first title * fixed v9 chart legends issue while refreshing page * removed unused code * Updated logic tohandle height * Fixed height issue while rendering new chart * Fixed height issue while rendering new chart * Updated logic tohandle height * update code to handle height in rtl mode
1 parent b842b30 commit bd07179

File tree

3 files changed

+45
-35
lines changed

3 files changed

+45
-35
lines changed

‎apps/plotly_examples/src/App.tsx‎

Lines changed: 23 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@ const App: React.FC = () => {
2727
const [labelDimensionSwitch, setLabelDimensionSwitch] = React.useState("Disable Dimension sliders");
2828
const [labelChartOrderSwitch] = React.useState("Show v9 first");
2929
const [chartWidth, setChartWidth] = React.useState<number>(Number(getSelection("ChartWidth", window.innerWidth.toString())));
30-
const [chartHeight, setChartHeight] = React.useState<number>(Number(getSelection("ChartHeight", "520")));
30+
const [chartHeight, setChartHeight] = React.useState<number>(Number(getSelection("ChartHeight", "400")));
3131

3232
setRTL(isRTL);
3333
const onOptionSelect = (event: SelectionEvents, data: OptionOnSelectData): void => {
@@ -99,24 +99,32 @@ const App: React.FC = () => {
9999
&nbsp;&nbsp;<Body2>@fluentui/react-charts &nbsp;</Body2><Subtitle2>0.0.0-nightly-20251124-0406.1</Subtitle2>
100100
<br />
101101
{isDimensionSlidersEnabled && (<>
102-
<Subtitle2>Chart Width:</Subtitle2>&nbsp;&nbsp;
103-
<Slider
104-
min={300}
105-
max={window.innerWidth}
106-
value={chartWidth}
107-
onChange={handleSliderChange}
108-
/>
109-
<Subtitle2>Chart Height:</Subtitle2>&nbsp;&nbsp;
110-
<Slider
111-
min={300}
112-
max={800}
113-
value={chartHeight}
114-
onChange={handleHeightSliderChange}
115-
/></>)}
102+
<div style={{ display: 'flex', flexDirection: isRTL ? 'row-reverse' : 'row', alignItems: 'center', gap: '20px' }}>
103+
<div style={{ display: 'flex', alignItems: 'center', gap: '10px' }}>
104+
<Subtitle2>Chart Width:</Subtitle2>
105+
<Slider
106+
min={300}
107+
max={window.innerWidth}
108+
value={chartWidth}
109+
onChange={handleSliderChange}
110+
/>
111+
</div>
112+
<div style={{ display: 'flex', alignItems: 'center', gap: '10px' }}>
113+
<Subtitle2>Chart Height:</Subtitle2>
114+
<Slider
115+
min={300}
116+
max={800}
117+
value={chartHeight}
118+
onChange={handleHeightSliderChange}
119+
/>
120+
</div>
121+
</div>
122+
</>)}
116123
<ChartWrapper
117124
width={isDimensionSlidersEnabled ? chartWidth : undefined}
118125
height={isDimensionSlidersEnabled ? chartHeight : undefined}
119126
isReversedOrder={isV9ChartFirst}
127+
isRTL={isRTL}
120128
/>
121129
</PortalCompatProvider>
122130
</FluentProvider>

‎apps/plotly_examples/src/components/ChartWrapper.tsx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,14 +7,15 @@ interface ChartWrapperProps {
77
width: number| undefined;
88
height: number| undefined;
99
isReversedOrder?: boolean;
10+
isRTL?: boolean;
1011
}
1112

12-
export function ChartWrapper({ width, height, isReversedOrder }: ChartWrapperProps) {
13+
export function ChartWrapper({ width, height, isReversedOrder, isRTL }: ChartWrapperProps) {
1314
const v8Theme = createTheme({ palette: paletteSlots, semanticColors: semanticSlots }); //ToDo - Make the slot values dynamic
1415
return (
1516
<ThemeProvider theme={v8Theme}>
1617
<div style={{ marginLeft: '25px', ...(width !== undefined && { width }) }}>
17-
<DeclarativeChartBasicExample width={width} height={height} isReversedOrder={isReversedOrder} />
18+
<DeclarativeChartBasicExample width={width} height={height} isReversedOrder={isReversedOrder} isRTL={isRTL} />
1819
</div>
1920
</ThemeProvider>
2021
);

‎apps/plotly_examples/src/components/DeclarativeChart.tsx‎

Lines changed: 19 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,7 @@ interface IDeclarativeChartProps {
2626
width?: number;
2727
height?: number;
2828
isReversedOrder?: boolean;
29+
isRTL?: boolean;
2930
}
3031

3132

@@ -85,7 +86,7 @@ const schemasData = requireContext.keys().map((fileName: string) => ({
8586

8687
const textFieldStyles: Partial<ITextFieldStyles> = { root: { maxWidth: 300 } };
8788

88-
const DeclarativeChartBasicExample: React.FC<IDeclarativeChartProps> = ({ width, height, isReversedOrder = false }) => {
89+
const DeclarativeChartBasicExample: React.FC<IDeclarativeChartProps> = ({ width, height, isReversedOrder = false, isRTL = false }) => {
8990
const savedOptionStr = getSelection(SCHEMA_KEY, SCHEMA_KEY_DEFAULT);
9091
const savedOption = parseInt(savedOptionStr, 10) - 1; // To handle 0 based index
9192
const savedFileName = `data_${savedOptionStr}.json`;
@@ -128,22 +129,16 @@ const DeclarativeChartBasicExample: React.FC<IDeclarativeChartProps> = ({ width,
128129
if (!height) return;
129130

130131
const applyHeightToCharts = () => {
131-
// Find all chart containers
132-
const containers = [
133-
document.querySelector('[data-testid="chart-container"]'),
134-
document.querySelector('[data-testid="chart-container-v9"]')
135-
];
136-
137-
containers.forEach(container => {
138-
if (container) {
139-
const chartDivs = container.querySelectorAll('div[style*="height"], div[class*="chart"]');
140-
chartDivs.forEach((div: any) => {
141-
if (div && div.style) {
142-
const targetHeight = height - 120;
143-
div.style.height = `${targetHeight}px`;
144-
div.style.maxHeight = `${targetHeight}px`;
145-
}
146-
});
132+
// Find all chart containers by class names
133+
const chartRoots = document.querySelectorAll('[class*="chartWrapper"]');
134+
chartRoots.forEach((root) => {
135+
if (root) {
136+
const parent = (root as HTMLElement).parentElement?.parentElement;
137+
if (parent) {
138+
parent.style.height = `${height}px`;
139+
parent.style.minHeight = `${height}px`;
140+
parent.style.maxHeight = `${height}px`;
141+
}
147142
}
148143
});
149144
};
@@ -153,7 +148,7 @@ const DeclarativeChartBasicExample: React.FC<IDeclarativeChartProps> = ({ width,
153148
const timeoutId = setTimeout(applyHeightToCharts, 500);
154149

155150
return () => clearTimeout(timeoutId);
156-
}, [height, chartRenderKey]);
151+
}, [height, chartRenderKey, isRTL]);
157152

158153
const _onChange = (event: SelectionEvents | null, data: OptionOnSelectData): void => {
159154
const selectedChoice = data.optionText!;
@@ -163,6 +158,8 @@ const DeclarativeChartBasicExample: React.FC<IDeclarativeChartProps> = ({ width,
163158
setSelectedChoice(selectedChoice);
164159
setSelectedSchema(selectedSchema);
165160
setSelectedLegendsState(JSON.stringify(selectedLegends));
161+
// Force re-render to ensure height is applied to new chart
162+
setChartRenderKey(prev => prev + 1);
166163
};
167164

168165
const _onSelectedLegendsEdited = (
@@ -229,6 +226,8 @@ const DeclarativeChartBasicExample: React.FC<IDeclarativeChartProps> = ({ width,
229226
const fileNumberMatch = firstFilteredSchema.fileName.match(/\d+/);
230227
const num_id = fileNumberMatch ? fileNumberMatch[0] : '0';
231228
saveSelection(SCHEMA_KEY, num_id.toString().padStart(3, '0'));
229+
// Force re-render to ensure height is applied to new chart
230+
setChartRenderKey(prev => prev + 1);
232231
} else {
233232
setSelectedChoice('');
234233
setSelectedSchema({});
@@ -259,6 +258,8 @@ const DeclarativeChartBasicExample: React.FC<IDeclarativeChartProps> = ({ width,
259258
const fileNumberMatch = firstFilteredSchema.fileName.match(/\d+/);
260259
const num_id = fileNumberMatch ? fileNumberMatch[0] : '0';
261260
saveSelection(SCHEMA_KEY, num_id.toString().padStart(3, '0'));
261+
// Force re-render to ensure height is applied to new chart
262+
setChartRenderKey(prev => prev + 1);
262263
} else {
263264
setSelectedChoice('');
264265
setSelectedSchema({});

0 commit comments

Comments
 (0)