FrontMizfaTools commented on issue #12327:
URL: https://github.com/apache/echarts/issues/12327#issuecomment-2063042850
const handleZoomIn = () => {
if (zoomLevel < maxZoomLevel) {
zoomLevel = zoomLevel + 0.3;
}
chartRef.current.getEchartsInstance().setOption(
{
series: {
zoom: zoomLevel + 0.3
}
},
false
);
};
same issue in here
im not using state so we dont have any problem about rerender.
Im trying to have a zoom button for changing the zoom level of data. but
its reseting collapse and expand of tree data.
the full source:
import React, { useEffect, useRef, useState } from 'react';
import ReactEChartsCore from 'echarts-for-react/lib/core';
import { TreeChart } from 'echarts/charts';
import {
GridComponent,
TitleComponent,
TooltipComponent
} from 'echarts/components';
import * as echarts from 'echarts/core';
import { CanvasRenderer } from 'echarts/renderers';
import { getColor } from 'helpers/utils';
import { Button, Card, Form, OverlayTrigger, Popover } from
'react-bootstrap';
import FalconCardHeader from 'components/common/FalconCardHeader';
import HelpTooltip from 'components/common/HelpTooltip';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import CardChartDropDown from 'components/common/CardChartDropDown';
import { useAppContext } from 'Main';
import { crawlTooltip } from 'tooltip/crawl/crawlTooltips';
echarts.use([
TitleComponent,
TooltipComponent,
GridComponent,
TreeChart,
CanvasRenderer
]); // تنظیمات نمودار
let zoomLevel = 1;
const maxZoomLevel = 20;
const minZoomLevel = 0.001;
const getOption = data => ({
textStyle: {
fontFamily: 'dana'
},
formatter: params => console.log('FORMATTER', params),
// نحوه نمایش تولتیپ نمودار
tooltip: {
trigger: 'item',
triggerOn: 'mousemove',
padding: [7, 10],
backgroundColor: getColor('gray-100'),
borderColor: getColor('gray-300'),
textStyle: { color: getColor('gray-1100'), fontSize: 8 },
borderWidth: 1,
show: false,
formatter: params => {
return `<div>
<div style="direction:rtl;" class="d-flex gap-1 justify-content-start"
>
<span class="fw-bolder">
کلمه:
</span>
<span style="direction:ltr;"> ${params.name} </span>
</div>
<span class="fw-bolder">
</div>`;
},
transitionDuration: 0,
axisPointer: {
type: 'none'
}
},
series: [
{
// تنظیمات نمایشی نمودار
roam: true,
layout: 'orthogonal',
scaleLimit: {
min: minZoomLevel,
max: maxZoomLevel
},
type: 'tree',
data: [data],
top: '1%',
left: '7%',
bottom: '1%',
itemStyle: {
color: getColor('primary'),
backgroundColor: 'red',
borderWidth: '30px'
},
right: '20%',
lineStyle: { color: getColor('primary') },
label: {
position: 'left',
verticalAlign: 'middle',
align: 'right',
color: getColor('gray-1100'),
border: 0,
fontSize: 8,
formatter: params => decodeURIComponent(params.name)
},
showSymbol: true,
symbol: 'emptyCircle',
symbolSize: 10,
leaves: {
label: {
position: 'right',
verticalAlign: 'middle',
align: 'left'
},
itemStyle: {
color: getColor('primary'),
borderRadius: [0, 3, 3, 0]
}
},
expandAndCollapse: true,
animationDuration: 550,
animationDurationUpdate: 750
}
]
});
// نمودار درخت پایه
const Tree = ({ data, layout = 'orthogonal', title = '' }) => {
const chartRef = useRef(null);
const [fontSize, setFontSize] = useState(8);
// کنترل ریست نمودار
const handleZoomReset = () => {
zoomLevel = 1;
chartRef.current.getEchartsInstance().dispatchAction({
type: 'restore'
});
};
// افزودن زوم نمودار
const handleZoomIn = () => {
if (zoomLevel < maxZoomLevel) {
zoomLevel = zoomLevel + 0.3;
}
chartRef.current.getEchartsInstance().setOption(
{
series: {
zoom: zoomLevel + 0.3
}
},
false
);
};
//کم کردن زوم نمودار
const handleZoomOut = () => {
if (zoomLevel > minZoomLevel) {
zoomLevel = zoomLevel - 0.3;
}
chartRef.current.getEchartsInstance().setOption(
{
series: {
zoom: zoomLevel - 0.3
}
},
false
);
};
const {
config: { isDark }
} = useAppContext();
const cardRef = useRef();
const handleFontChange = size => {
console.log(size, chartRef?.current?.getEchartsInstance().getOption());
chartRef?.current?.getEchartsInstance().setOption({
series: [
{
lable: {
fontSize: size
}
}
]
});
};
return (
<Card className="my-2" ref={cardRef}>
<FalconCardHeader
title={
<div>
{title}
<HelpTooltip html={crawlTooltip.crawlerLinkGraph.tree} />
</div>
}
titleTag="h6"
className="py-3"
light
endEl={<CardChartDropDown cardRef={cardRef} chartRef={chartRef} />}
/>
<Card.Body className="py-2 my-2 position-relative">
<ReactEChartsCore
ref={chartRef}
echarts={echarts}
option={getOption(data)}
style={{ height: '800px' }}
/>
{/* دکمه های نمودار */}
<div className="position-absolute d-flex flex-column top-0 mt-3">
<div className="rounded-3 bg-body-tertiary border-400 w-100
border">
<Button
variant="link"
size="sm"
className="bg-100 d-flex align-items-center
justify-content-center rounded-bottom-0 p-2 text-700"
onClick={handleZoomIn}
>
<FontAwesomeIcon icon="plus" className="fs--1" />
</Button>
<hr className="m-0 text-300" />
<Button
variant="link"
size="sm"
className="bg-100 d-flex align-items-center
justify-content-center rounded-top-0 p-2 text-700"
onClick={handleZoomReset}
>
<FontAwesomeIcon icon="undo-alt" className="fs--1" />
</Button>
<hr className="m-0 text-300" />
<Button
variant="link"
size="sm"
className="bg-100 d-flex align-items-center
justify-content-center rounded-top-0 p-2 text-700"
onClick={handleZoomOut}
>
<FontAwesomeIcon icon="minus" className="fs--1" />
</Button>
</div>
<div className="bg-body-tertiary mt-3">
<div className="bg-body-tertiary mt-1 ">
<Button
variant="link"
size="sm"
// تمام صفحه کردن نمودار
onClick={() => {
if (!document.fullscreenElement) {
cardRef.current.requestFullscreen();
} else {
document.exitFullscreen();
}
}}
className="bg-100 d-flex align-items-center
justify-content-center rounded-3 border border-400 w-100 p-2 text-700"
>
<FontAwesomeIcon
icon={
document.fullscreenElement
? 'compress-arrows-alt'
: 'expand-arrows-alt'
}
className="fs--1"
/>
</Button>
</div>
</div>
{/* تغییر دهنده اندازه نمودار */}
<OverlayTrigger
trigger="click"
rootClose
placement="bottom"
overlay={
<Popover id="popover-basic" style={{ width: '350px' }}>
<Popover.Header
as="h3"
className="d-flex justify-content-between
align-items-center"
>
تغییر اندازه فونت
<span className="fs--1" style={{ direction: 'ltr' }}>
{fontSize} px
</span>
</Popover.Header>
<Popover.Body className="p-0">
<div
className="p-2 d-flex align-items-center"
style={{ direction: 'ltr' }}
>
<Form.Range
max={50}
min={0}
defaultValue={8}
// value={fontSize}
variant="primary"
onChange={e =>
handleFontChange(Number(e.target.value))}
/>
</div>
</Popover.Body>
</Popover>
}
>
<div className="bg-body-tertiary mt-1 ">
<Button
variant="link"
size="sm"
className="bg-100 d-flex align-items-center
justify-content-center rounded-3 border border-400 w-100 p-2 text-700"
>
<FontAwesomeIcon icon="text-height" className="fs--1" />
</Button>
</div>
</OverlayTrigger>
<div className="bg-body-tertiary mt-1 ">
<Button
onClick={() => {
// ذخیره کننده عکس نمودار
const dataURL = chartRef.current
.getEchartsInstance()
.getDataURL({
type: 'png',
pixelRatio: 1,
backgroundColor: isDark ? '#121e2d' : '#fff'
});
const link = document.createElement('a');
link.href = dataURL;
link.setAttribute('download', 'chart-from-Mizfa-Tools.png');
link.style.display = 'none';
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
}}
variant="link"
size="sm"
className="bg-100 d-flex align-items-center
justify-content-center rounded-3 border border-400 w-100 p-2 text-700"
>
<FontAwesomeIcon icon="save" className="fs--1" />
</Button>
</div>
</div>
</Card.Body>
</Card>
);
};
export default Tree;
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: [email protected]
For queries about this service, please contact Infrastructure at:
[email protected]
---------------------------------------------------------------------
To unsubscribe, e-mail: [email protected]
For additional commands, e-mail: [email protected]
