Skip to content

Commit 9ddedfa

Browse files
v-baambativ-baambati
authored
added height slider in plotly example (#605)
* added height slider * Removed svg elements height and update v9chrt first title
1 parent 97e8dbf commit 9ddedfa

File tree

4 files changed

+101
-20
lines changed

4 files changed

+101
-20
lines changed

‎apps/plotly_examples/src/App.tsx‎

Lines changed: 27 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -21,12 +21,13 @@ import { SliderOnChangeData } from '@fluentui/react-components';
2121
const App: React.FC = () => {
2222
const [value, setValue] = React.useState(getSelection("Theme", "Light"));
2323
const [isRTL, setisRTL] = React.useState(getSelection("RTL", "false") === "true");
24-
const [isWidthSet, setisWidthSet] = React.useState(getSelection("WidthSet", "true") === "true");
24+
const [isDimensionSlidersEnabled, setIsDimensionSlidersEnabled] = React.useState(getSelection("DimensionSlidersEnabled", "true") === "true");
2525
const [isV9ChartFirst, setIsV9ChartFirst] = React.useState(getSelection("isV9ChartFirst", "false") === "true");
2626
const [labelRTLMode, setLabelRTLMode] = React.useState("Enable RTL");
27-
const [labelWidthSwitch, setLabelWidthSwitch] = React.useState("Disable Width slider");
28-
const [labelChartOrderSwitch] = React.useState("Mean the Chart Order");
27+
const [labelDimensionSwitch, setLabelDimensionSwitch] = React.useState("Disable Dimension sliders");
28+
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")));
3031

3132
setRTL(isRTL);
3233
const onOptionSelect = (event: SelectionEvents, data: OptionOnSelectData): void => {
@@ -42,11 +43,11 @@ const App: React.FC = () => {
4243
saveSelection("RTL", newIsRTL.toString());
4344
};
4445

45-
const handleWidthSwitchChange = () => {
46-
const newIsWidthSet = !isWidthSet;
47-
setisWidthSet(newIsWidthSet);
48-
setLabelWidthSwitch(newIsWidthSet ? "Disable width slider" : "Enable Width slider");
49-
saveSelection("WidthSet", newIsWidthSet.toString());
46+
const handleDimensionSlidersChange = () => {
47+
const newIsEnabled = !isDimensionSlidersEnabled;
48+
setIsDimensionSlidersEnabled(newIsEnabled);
49+
setLabelDimensionSwitch(newIsEnabled ? "Disable Dimension sliders" : "Enable Dimension sliders");
50+
saveSelection("DimensionSlidersEnabled", newIsEnabled.toString());
5051
};
5152

5253
const handleChartOrderSwitchChange = () => {
@@ -60,6 +61,11 @@ const App: React.FC = () => {
6061
saveSelection("ChartWidth", data.value.toString());
6162
};
6263

64+
const handleHeightSliderChange = (event: React.ChangeEvent<HTMLInputElement>, data: SliderOnChangeData) => {
65+
setChartHeight(Number(data.value));
66+
saveSelection("ChartHeight", data.value.toString());
67+
};
68+
6369
return (
6470
<div>
6571
<FluentProvider theme={value === "Light" ? webLightTheme : webDarkTheme} targetDocument={document}>
@@ -80,9 +86,9 @@ const App: React.FC = () => {
8086
label={labelRTLMode}
8187
/>
8288
<Switch
83-
checked={isWidthSet}
84-
onChange={handleWidthSwitchChange}
85-
label={labelWidthSwitch}
89+
checked={isDimensionSlidersEnabled}
90+
onChange={handleDimensionSlidersChange}
91+
label={labelDimensionSwitch}
8692
/>
8793
<Switch
8894
checked={isV9ChartFirst}
@@ -92,16 +98,24 @@ const App: React.FC = () => {
9298
&nbsp;&nbsp;<Body2>@fluentui/react-charting &nbsp;</Body2><Subtitle2>v5.25.2</Subtitle2>
9399
&nbsp;&nbsp;<Body2>@fluentui/react-charts &nbsp;</Body2><Subtitle2>0.0.0-nightly-20251117-0407.1</Subtitle2>
94100
<br />
95-
{isWidthSet && (<>
101+
{isDimensionSlidersEnabled && (<>
96102
<Subtitle2>Chart Width:</Subtitle2>&nbsp;&nbsp;
97103
<Slider
98104
min={300}
99105
max={window.innerWidth}
100106
value={chartWidth}
101107
onChange={handleSliderChange}
108+
/>
109+
<Subtitle2>Chart Height:</Subtitle2>&nbsp;&nbsp;
110+
<Slider
111+
min={300}
112+
max={800}
113+
value={chartHeight}
114+
onChange={handleHeightSliderChange}
102115
/></>)}
103116
<ChartWrapper
104-
width={isWidthSet ? chartWidth : undefined}
117+
width={isDimensionSlidersEnabled ? chartWidth : undefined}
118+
height={isDimensionSlidersEnabled ? chartHeight : undefined}
105119
isReversedOrder={isV9ChartFirst}
106120
/>
107121
</PortalCompatProvider>

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

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,15 +5,16 @@ import DeclarativeChartBasicExample from './DeclarativeChart';
55

66
interface ChartWrapperProps {
77
width: number| undefined;
8+
height: number| undefined;
89
isReversedOrder?: boolean;
910
}
1011

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

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

Lines changed: 46 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,8 @@ import { mapFluentChart } from '@fluentui/chart-utilities';
2323
import { DeclarativeChart as DeclarativeChartV9 } from '@fluentui/react-charts'
2424

2525
interface IDeclarativeChartProps {
26+
width?: number;
27+
height?: number;
2628
isReversedOrder?: boolean;
2729
}
2830

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

8486
const textFieldStyles: Partial<ITextFieldStyles> = { root: { maxWidth: 300 } };
8587

86-
const DeclarativeChartBasicExample: React.FC<IDeclarativeChartProps> = ({ isReversedOrder = false }) => {
88+
const DeclarativeChartBasicExample: React.FC<IDeclarativeChartProps> = ({ width, height, isReversedOrder = false }) => {
8789
const savedOptionStr = getSelection(SCHEMA_KEY, SCHEMA_KEY_DEFAULT);
8890
const savedOption = parseInt(savedOptionStr, 10) - 1; // To handle 0 based index
8991
const savedFileName = `data_${savedOptionStr}.json`;
@@ -101,6 +103,7 @@ const DeclarativeChartBasicExample: React.FC<IDeclarativeChartProps> = ({ isReve
101103
const declarativeChartRef = React.useRef<IDeclarativeChart>(null!);
102104
const declarativeChartV9Ref = React.useRef<IDeclarativeChart>(null!);
103105
let lastKnownValidLegends: string[] | undefined = selectedLegends;
106+
const [chartRenderKey, setChartRenderKey] = React.useState<number>(0);
104107

105108
React.useEffect(() => {
106109
const handleContextMenu = (e: MouseEvent) => {
@@ -115,6 +118,43 @@ const DeclarativeChartBasicExample: React.FC<IDeclarativeChartProps> = ({ isReve
115118
};
116119
}, []);
117120

121+
// Force re-render when height or width changes
122+
React.useEffect(() => {
123+
setChartRenderKey(prev => prev + 1);
124+
}, [height, width]);
125+
126+
// Force chart height after render
127+
React.useEffect(() => {
128+
if (!height) return;
129+
130+
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+
});
147+
}
148+
});
149+
};
150+
151+
// Apply immediately and after a short delay to catch async renders
152+
applyHeightToCharts();
153+
const timeoutId = setTimeout(applyHeightToCharts, 500);
154+
155+
return () => clearTimeout(timeoutId);
156+
}, [height, chartRenderKey]);
157+
118158
const _onChange = (event: SelectionEvents | null, data: OptionOnSelectData): void => {
119159
const selectedChoice = data.optionText!;
120160
const selectedSchema = schemasData.find((s) => (s.schema as { id: string }).id.toString() === data.optionValue!.toString())?.schema;
@@ -322,7 +362,11 @@ const DeclarativeChartBasicExample: React.FC<IDeclarativeChartProps> = ({ isReve
322362
<br />
323363
<br />
324364
<ErrorBoundary>
325-
<PlotlyChart schema={plotlySchemaCopy} />
365+
<PlotlyChart
366+
schema={plotlySchemaCopy}
367+
width={width}
368+
height={height ? height - 40 : undefined}
369+
/>
326370
</ErrorBoundary>
327371
</div>
328372
);

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

Lines changed: 25 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,30 @@
11
import Plotly from "plotly.js";
22
import createPlotlyComponent from "react-plotly.js/factory";
33
const Plot = createPlotlyComponent(Plotly);
4+
interface PlotlyChartProps {
5+
schema: any;
6+
width?: number;
7+
height?: number;
8+
}
49

5-
export default function PlotlyChart(schema: any) {
6-
const { data, layout } = schema.schema;
7-
return <Plot data={data} layout={layout} />;
10+
export default function PlotlyChart({ schema, width, height }: PlotlyChartProps) {
11+
const { data, layout } = schema;
12+
13+
return (
14+
<div
15+
key={`plotly-${width || 'auto'}-${height || 'auto'}`}
16+
style={{
17+
height: height ? `${height}px` : '500px',
18+
width: width ? `${width}px` : '100%',
19+
overflow: 'visible'
20+
}}
21+
>
22+
<Plot
23+
data={data}
24+
layout={layout}
25+
style={{ width: '100%', height: '100%' }}
26+
config={{ responsive: true }}
27+
/>
28+
</div>
29+
);
830
}

0 commit comments

Comments
 (0)