Skip to content
GitLab
Menu
Projects
Groups
Snippets
Loading...
Help
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Contribute to GitLab
Sign in
Toggle navigation
Menu
Open sidebar
public
Mímir
Commits
24d829c3
Commit
24d829c3
authored
Aug 13, 2020
by
Aron Fiechter
Browse files
When clicking on selected year, go back to full year range
parent
22727f36
Pipeline
#878
canceled with stage
Changes
1
Pipelines
1
Hide whitespace changes
Inline
Side-by-side
client/src/components/yearrange/YearRange.js
View file @
24d829c3
import
React
,
{
useEffect
,
useRef
}
from
'
react
'
;
import
{
useDispatch
,
useSelector
}
from
'
react-redux
'
;
import
{
setRange
,
setYears
,
selectYears
}
from
'
./yearRangeSlice
'
;
import
{
setRange
,
setYears
,
selectYears
,
selectRange
}
from
'
./yearRangeSlice
'
;
import
ReactEcharts
from
'
echarts-for-react
'
;
import
{
selectNodes
,
selectResultsById
}
from
'
../navbar/querySlice
'
;
import
{
useDebouncedCallback
}
from
'
use-debounce
'
;
...
...
@@ -15,6 +15,7 @@ export default function YearRange() {
const
nodes
=
useSelector
(
selectNodes
);
const
resultsById
=
useSelector
(
selectResultsById
);
const
years
=
useSelector
(
selectYears
);
const
yearRange
=
useSelector
(
selectRange
);
const
chartRef
=
useRef
(
null
);
...
...
@@ -40,6 +41,8 @@ export default function YearRange() {
useEffect
(()
=>
{
logger
.
debug
(
'
YearRange: registering chart handlers
'
);
const
chart
=
chartRef
.
current
.
getEchartsInstance
();
chart
.
off
(
'
datazoom
'
);
chart
.
off
(
'
click
'
);
chart
.
on
(
'
datazoom
'
,
(
e
)
=>
{
const
axis
=
chart
.
getModel
().
option
.
xAxis
[
0
];
const
start
=
axis
.
data
[
axis
.
rangeStart
]
||
config
.
YEARS
.
MIN
;
...
...
@@ -47,11 +50,22 @@ export default function YearRange() {
debouncedDispatch
(
setRange
({
start
,
end
}));
});
chart
.
on
(
'
click
'
,
(
e
)
=>
{
logger
.
debug
(
'
Click on chart
'
);
const
y
=
parseInt
(
e
.
name
,
10
);
chart
.
dispatchAction
({
type
:
'
dataZoom
'
,
startValue
:
e
.
name
,
endValue
:
e
.
name
});
debouncedDispatch
(
setRange
({
start
:
y
,
end
:
y
}));
const
{
start
,
end
}
=
yearRange
;
if
(
start
===
end
)
{
// Go back to overview
logger
.
debug
(
'
\t
-> back to overview
'
);
chart
.
dispatchAction
({
type
:
'
dataZoom
'
,
start
:
0
,
end
:
100
});
debouncedDispatch
(
setRange
({
start
:
config
.
YEARS
.
MIN
,
end
:
config
.
YEARS
.
MAX
}));
}
else
{
// Zoom on clicked year
logger
.
debug
(
'
\t
-> zoom on clicked year
'
);
chart
.
dispatchAction
({
type
:
'
dataZoom
'
,
startValue
:
e
.
name
,
endValue
:
e
.
name
});
debouncedDispatch
(
setRange
({
start
:
y
,
end
:
y
}));
}
});
},
[
debouncedDispatch
]);
},
[
debouncedDispatch
,
yearRange
]);
const
options
=
{
tooltip
:
{
...
...
@@ -98,7 +112,7 @@ export default function YearRange() {
};
return
(
<
Container
id
=
'
timeline
'
>
<
Container
id
=
"
timeline
"
>
<
ReactEcharts
ref
=
{
chartRef
}
option
=
{
options
}
...
...
Aron Fiechter
@AronFiechter
mentioned in issue
#7 (closed)
·
Aug 13, 2020
mentioned in issue
#7 (closed)
mentioned in issue #7
Toggle commit list
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
.
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment