Hello,
I'm using reflow after opening/closing a drawer so that the map is resized accordingly but, whenever this happens, the performance is really bad.
Any ideas?
Thanks.
Code: Select all
import React, { useState, useRef, useEffect } from "react";
import { connect } from "react-redux";
import * as actions from "src/actions/index";
import Highcharts from "highcharts/highmaps";
import HighchartsReact from "highcharts-react-official";
import Card from "@material-ui/core/Card";
import map from "src/data/locations.json";
interface PROPS {
open: boolean;
filtersReducer: FilterProps;
}
interface FilterProps {
locations: {
values: Array<string>;
selected: string;
};
}
interface ChartProps {
chart: any;
chartOptions: object;
}
const AppDrawer = (
{ open, filtersReducer }: PROPS,
highchartReactProps: HighchartsReact.Props
) => {
const {
locations: { values, selected: selectedLocation },
} = filtersReducer;
// Chart config
const [chartState, setChartState] = useState<ChartProps>({
chartOptions: {
chart: {
map,
height: "600px",
// reflow: true,
// colorCount: 5,
},
mapNavigation: {
enabled: false,
},
legend: {
title: {
style: {
fontWeight: "200",
fontSize: "0.8rem",
fontFamily: "Arial, Helvetica, sans-serif",
},
text: "Κρούσματα",
},
itemStyle: {
fontSize: "0.7rem",
fontWeight: "normal",
},
align: "left",
verticalAlign: "top",
layout: "vertical",
symbolRadius: 0,
symbolHeight: 15,
valueDecimals: 0,
y: 100,
},
colorAxis: {
dataClasses: [
{
from: 0,
to: 20,
color: "#e4f5f9",
},
{
from: 20,
to: 40,
color: "#9fdbeb",
},
{
from: 40,
to: 60,
color: "#66c6e0",
},
{
from: 60,
to: 80,
color: "#34b4d6",
},
{
from: 80,
to: 100,
color: "#2495b3",
},
],
},
title: {
text: "Λοιμώδη Νοσήματα",
align: "left",
floating: true,
y: 20,
style: {
fontFamily: "Arial, Helvetica, sans-serif",
fontSize: "1rem",
},
},
subtitle: {
text: "Kρούσματα τοξοπλάσματος σε άνθρωπο",
align: "left",
floating: true,
y: 40,
style: {
fontFamily: "Arial, Helvetica, sans-serif",
},
},
tooltip: {
className: "map-tooltip-container",
formatter: function (this: any) {
console.log(this);
return `<div class="map-tooltip-container">
<div class="map-tooltip-header">
<div class="map-tooltip-pointName">
<span>${this.point.name}</span>
</div>
</div>
<div class="map-tooltip-body">
<div class="map-tooltip-pointValue">
<span>${this.point.value}</span>
</div>
<div class="map-tooltip-pointText">
<span>Kρούσματα τοξοπλάσματος σε άνθρωπο</span>
</div>
</div>
</div>`;
},
followPointer: false,
borderWidth: 0,
padding: 0,
useHTML: true,
},
series: [
{
name: "Random data",
states: {
hover: {
borderColor: "#ff7141",
brightness: 0,
},
},
cursor: "pointer",
dataLabels: {
enabled: false,
format: "{point.name}",
},
allAreas: false,
data: [
["0", 0],
["1", 1],
["2", 2],
["3", 3],
["4", 4],
["5", 5],
["6", 6],
["7", 7],
["8", 8],
["9", 9],
["10", 10],
["11", 11],
["12", 12],
["13", 13],
["14", 14],
["15", 15],
["16", 16],
["17", 17],
["18", 18],
["19", 19],
["20", 20],
["21", 21],
["22", 22],
["23", 23],
["24", 24],
["25", 25],
["26", 26],
["27", 27],
["28", 28],
["29", 29],
["30", 30],
["31", 31],
["32", 32],
["33", 33],
["34", 34],
["35", 35],
["36", 36],
["37", 37],
["38", 38],
["39", 39],
["40", 40],
["41", 41],
["42", 42],
["43", 43],
["44", 44],
["45", 45],
["46", 46],
["47", 47],
["48", 48],
["49", 49],
["50", 50],
["51", 51],
["52", 52],
["53", 53],
["54", 54],
],
},
],
},
chart: {},
});
const { chartOptions, chart } = chartState;
// Get chart instance from callback and store it
const afterChartCreated = (chart: any) => {
setChartState({
...chartState,
chart,
});
};
// Compare prev with new props, then change state accordingly
const usePrevious = <T extends unknown>(value: T): T | undefined => {
const ref = useRef<T>();
useEffect(() => {
ref.current = value;
});
return ref.current;
};
const prevOpen = usePrevious(open);
useEffect(() => {
if (prevOpen !== open && prevOpen !== undefined) {
chart.redraw();
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [open]);
return (
<div className="mapchart-container">
<div className="highcharts-wrapper">
<HighchartsReact
highcharts={Highcharts}
constructorType={"mapChart"}
options={chartOptions}
callback={afterChartCreated}
{...highchartReactProps}
/>
</div>
<div className="map-card-container">
<Card className="total-card-container">
<span className="total-card-text">ΠΑΝΕΛΛΑΔΙΚΑ</span>
<span className="total-card-count">232</span>
</Card>
<Card className="point-card-container">
<span className="point-card-text">{selectedLocation}</span>
<span className="point-card-count">32</span>
</Card>
</div>
</div>
);
};
const mapStateToProps = (state: { filtersReducer: FilterProps }) => {
return {
filtersReducer: state.filtersReducer,
};
};
export default connect(mapStateToProps, actions)(AppDrawer);