Can't disable sunburst default animation
Chưa có ai nhận issue này.
Đánh giá
- Độ khó
- 3/5
- Thời gian dự kiến
- 1-2 ngày
- Mức phù hợp với người mới
- 35/100
- Loại issue
- Lỗi
- Độ rõ ràng
- Khá rõ ràng
- Mức độ hoạt động
- Đình trệ
- Công nghệ
- javascript, nextjs, react
- Lĩnh vực
- data-visualization, frontend
Hướng nghiên cứu
Bắt đầu với việc xử lý onSunburstClick của component Plot và hành vi nhấp vào sunburst của Plotly. So sánh với callback onClick đang hoạt động và xác định một bài kiểm thử hồi quy tập trung vào việc ngăn zoom mặc định. Hoàn tất khi callback có thể ngăn hành vi sunburst mặc định mà vẫn tiếp tục nhận event.
Do mô hình lập chỉ mục viết ra từ nội dung của issue.
Mô tả
Using NextJS 13, passing onSunburstClick={() => false} to the Plot component does not disable the default behaviour of clicking in a sunburst node and zooming in to that node.
The component I'm creating:
import {
Content,
ContextualHelp,
Flex,
Heading,
Slider,
} from '@adobe/react-spectrum';
import plotly, { Font, PlotData } from 'plotly.js';
import { useState } from 'react';
import createPlotComponent from 'react-plotly.js/factory';
const Plot = createPlotComponent(plotly);
interface SunburstPlotData extends Partial<PlotData> {
outsidetextfont?: Partial<Font>;
leaf?: { opacity?: number };
maxdepth?: number;
}
// NOTE: to access the taxon id:
// e.points[0].customdata
export default function TaxonSunburst() {
const [maxDepthValue, setMaxDepthValue] = useState<number>(3);
const data: SunburstPlotData[] = [
{
type: 'sunburst',
// NOTE: this is for the taxon names
labels: [
'Eve',
'Cain',
'Seth',
'Enos',
'Noam',
'Abel',
'Awan',
'Enoch',
'Azura',
],
// NOTE: this is going to be used for the taxids
customdata: [1, 2, 3, 4, 5, 6, 7, 8, 9],
// NOTE: parent of each taxon
parents: ['', 'Eve', 'Eve', 'Seth', 'Seth', 'Eve', 'Eve', 'Awan', 'Eve'],
// NOTE: paper counts per taxon
values: [10, 14, 12, 10, 2, 6, 6, 4, 4],
outsidetextfont: { size: 20, color: '#377eb8' },
leaf: { opacity: 0.4 },
marker: { line: { width: 2 } },
maxdepth: maxDepthValue,
},
];
return (
<Flex
direction="column"
alignItems="center"
marginY="size-200"
maxWidth="100%"
>
<Slider
label="Depth"
minValue={1}
maxValue={3}
value={maxDepthValue}
onChange={setMaxDepthValue}
isFilled
contextualHelp={
<ContextualHelp>
<Heading>What is depth?</Heading>
<Content>
Depth controls the maximum taxonomic level that is shown in the
plot.
</Content>
</ContextualHelp>
}
/>
<Plot
data={data}
style={{ width: '100%' }}
layout={{ autosize: true }}
useResizeHandler
onSunburstClick={() => false}
/>
</Flex>
);
}
In order for SSR to work properly, I'm loading the component like so (from my pages/index.tsx):
// ...
import dynamic from 'next/dynamic';
// ...
const TaxonSunburst = dynamic(import('../components/TaxonSunburst'), {
ssr: false,
loading: () => (
<Flex
justifyContent="center"
marginY="size-200"
>
<ProgressCircle
aria-label="Loading sunburst plot"
isIndeterminate
/>
</Flex>
),
});
The onClick event works properly. Also, modifying onSunburstClick with something like onSunburstClick={() => alert("test")} also works. I would like to disable the default behaviour of the sunburst plots.
- Ngôn ngữ chính
- JavaScript
- Star
- 1.1k
- Fork
- 138
- Merge trung bình
- 3 ngày 2 giờ
- Pull request đã merge (30 ngày)
- 4
Hướng dẫn đóng góp
Chưa lập chỉ mục được hướng dẫn đóng góp cho kho mã nguồn này
Bắt đầu từ đâu
- Đọc hết issue, rồi đọc hướng dẫn đóng góp của dự án.
- Bình luận trên issue rằng bạn sẽ nhận — tránh hai người làm cùng một việc.
- Fork repository và làm thay đổi trên một nhánh.
- Mở pull request có tham chiếu số hiệu của issue.
Issue khác của plotly/react-plotly.js
-
P3 plotly-internal size: 1 task
Độ khó 3/5 1-2 ngày Mức phù hợp với người mới 45/100
plotly/react-plotly.js#386 ·
-
enhancement P3 size: 1
Độ khó 3/5 1-2 ngày Mức phù hợp với người mới 65/100
plotly/react-plotly.js#380 · 7 bình luận ·
-
Độ khó 4/5 3-5 ngày Mức phù hợp với người mới 48/100
plotly/react-plotly.js#358 · 1 bình luận ·
-
Độ khó 4/5 3-5 ngày Mức phù hợp với người mới 35/100
plotly/react-plotly.js#354 ·
-
Độ khó 3/5 1-2 ngày Mức phù hợp với người mới 30/100
plotly/react-plotly.js#353 · 1 bình luận ·
Tất cả issue của plotly/react-plotly.js
Issue tương tự
-
bug
Độ khó 2/5 1-3 giờ Mức phù hợp với người mới 76/100
avniproject/avni-client#2135 ·
-
automated broken-link
Độ khó 1/5 Dưới một giờ Mức phù hợp với người mới 85/100
-
agent/security hive/hosted-available-lke648397-260827-5n31 security
Độ khó 2/5 1-3 giờ Mức phù hợp với người mới 84/100
-
enhancement
Độ khó 2/5 1-3 giờ Mức phù hợp với người mới 70/100
babalae/bettergi-scripts-list#3674 ·
-
A-Release-Notes C-Editing D-Modest S-Ready-For-Implementation
Độ khó 2/5 1-3 giờ Mức phù hợp với người mới 72/100
bevyengine/bevy-website#2595 ·