I have a website that is using the reactjs react-timeseries-charts component for displaying graphs.
For some reason, when using any other browser besides safari, it works as intended with no errors. When i try and open with Safari, the bar charts and line graphs come up blank and through an error in react-dom.development.js saying "unable to parse: d=12345NaN, 45678NaN". I don't quite understand how to troubleshoot errors logged in react-dom.development.js. Clearly the "NaNs" are the problem, but I dont know where they are coming from. When I examine the DOM elements, on Safari, the tag has x="NaN" that is not present in chrome, so the actual width of the bars is not being properly set. The X-axis is also not rendering.
[Chrome][1] [1]: .png
Here is the relevant snippet from render():
render(){
return(<div className="chart" id="chart" onTouchMove={this.handleTouchMove} onTouchStart={this.handleTouchStart} onTouchEnd={this.handleTouchEnd}>
<ChartContainer
timeRange={this.state.timerange}
width={this.state.width}
utc={true}
format={this.formatTime}
onBackgroundClick={() => this.setState({ selection: null })}
onTimeRangeChanged={this.handleTimeRangeChange}
timeAxisAngledLabels={false}
timeAxisTickCount={this.state.tickCount}
enablePanZoom={true}
minDuration={this.state.minDuration}
minTime={this.state.window_min}
maxTime={this.state.window_max}
paddingTop={this.state.paddingTop}
paddingLeft={this.state.paddingLeft}
paddingBottom={this.state.paddingBottom}
paddingRight={this.state.paddingRight}
timeAxisStyle={{
ticks: {
stroke: "#000000",
opacity: 1
},
values: {
fill: "#000000",
"font-size": "1.75vw",
},
axis: {
stroke: "#000000"
}
}}
>
<ChartRow height={this.state.height}>
<YAxis
id="axis"
label=""
min={0}
max={this.state.y_max > this.state.rate ? this.state.y_max : (this.state.rate*1.1)}
width="80" //changed
type="linear"
labelOffset={2}
style={{
label: {
fill:"#000000"
},
values: {
fill: "#000000",
"font-size": "1.75vw",
},
ticks: {
opacity: 1,
stroke:"#000000"
},
axis: {
stroke: "#000000"
}
}}
format={function (n){ return Number(n).toFixed(1)}}
/>
<Charts>
<BarChart
axis="axis"
style={column_style}
spacing={this.state.spacing}
columns={this.state.active_columns}
offset={3}
series={this.state.Series}
infoTimeFormat={(index) =>
(<tspan style={{ fill: "black", fontSize: "0.8rem", fontWeight: "bold" }}>Hour: {moment(index.begin()).utc().format("HHmm")}</tspan>)} //Info box time display and format
info={infoValues} //Info box on hover
infoWidth={130}
infoHeight={40}
infoStyle={{
label: {
fill: "#000000",
"font-size": "0.8rem",
},
values: {
fill: "#000000"
},
box: {
stroke: "#000000",
opacity: 0.4,
}
}}
infoOffsetY={150} //Info box stem height
stemStyle={{
stroke: "#000000",
cursor: "crosshair"
}}
markerStyle={{ fill: "#000000" }}
highlighted={ this.state.highlight }
onHighlightChange={highlight => this.setState({ highlight })}
/>
</Charts>
</ChartRow>
</ChartContainer>
</div>);
}
Here is the relevant function for setting the timeseries:
let points = [];
let one = 0, two = 0, three = 0, four = 0;
for(let i in data){
if(some condition){
one++;
}else if (some other condition){
two++;
}else if (some other condition){
three++;
}else{
four++;
}
}
points.push({
"index": time,
"one": one,
"two": two,
"three": three,
"four": four
});
for (let i in data) {
const d = new Date(data[i].index);
const index = Index.getIndexString(interval, d);
points.push([index, data[i].one, data[i].two, data[i].three, data[i].four]);
if (points.length > 0) {
const series = new TimeSeries({
name: "BarChart",
columns: ["index", "one", "two", "three", "four"],
points: points
});
I made some changes to mask the nature of the code and what it is for, so there may be some typos with regards to that.
I do know that react-timeseries-charts is throwing errors for NaN height and y values when the data points contains a value of 0 for one of the four values (one, two, three, four), but it still renders in chrome.
Any help would be appreciated.
I have a website that is using the reactjs react-timeseries-charts component for displaying graphs.
For some reason, when using any other browser besides safari, it works as intended with no errors. When i try and open with Safari, the bar charts and line graphs come up blank and through an error in react-dom.development.js saying "unable to parse: d=12345NaN, 45678NaN". I don't quite understand how to troubleshoot errors logged in react-dom.development.js. Clearly the "NaNs" are the problem, but I dont know where they are coming from. When I examine the DOM elements, on Safari, the tag has x="NaN" that is not present in chrome, so the actual width of the bars is not being properly set. The X-axis is also not rendering.
[Chrome][1] [1]: https://i.sstatic/MB3Q6NAp.png
Here is the relevant snippet from render():
render(){
return(<div className="chart" id="chart" onTouchMove={this.handleTouchMove} onTouchStart={this.handleTouchStart} onTouchEnd={this.handleTouchEnd}>
<ChartContainer
timeRange={this.state.timerange}
width={this.state.width}
utc={true}
format={this.formatTime}
onBackgroundClick={() => this.setState({ selection: null })}
onTimeRangeChanged={this.handleTimeRangeChange}
timeAxisAngledLabels={false}
timeAxisTickCount={this.state.tickCount}
enablePanZoom={true}
minDuration={this.state.minDuration}
minTime={this.state.window_min}
maxTime={this.state.window_max}
paddingTop={this.state.paddingTop}
paddingLeft={this.state.paddingLeft}
paddingBottom={this.state.paddingBottom}
paddingRight={this.state.paddingRight}
timeAxisStyle={{
ticks: {
stroke: "#000000",
opacity: 1
},
values: {
fill: "#000000",
"font-size": "1.75vw",
},
axis: {
stroke: "#000000"
}
}}
>
<ChartRow height={this.state.height}>
<YAxis
id="axis"
label=""
min={0}
max={this.state.y_max > this.state.rate ? this.state.y_max : (this.state.rate*1.1)}
width="80" //changed
type="linear"
labelOffset={2}
style={{
label: {
fill:"#000000"
},
values: {
fill: "#000000",
"font-size": "1.75vw",
},
ticks: {
opacity: 1,
stroke:"#000000"
},
axis: {
stroke: "#000000"
}
}}
format={function (n){ return Number(n).toFixed(1)}}
/>
<Charts>
<BarChart
axis="axis"
style={column_style}
spacing={this.state.spacing}
columns={this.state.active_columns}
offset={3}
series={this.state.Series}
infoTimeFormat={(index) =>
(<tspan style={{ fill: "black", fontSize: "0.8rem", fontWeight: "bold" }}>Hour: {moment(index.begin()).utc().format("HHmm")}</tspan>)} //Info box time display and format
info={infoValues} //Info box on hover
infoWidth={130}
infoHeight={40}
infoStyle={{
label: {
fill: "#000000",
"font-size": "0.8rem",
},
values: {
fill: "#000000"
},
box: {
stroke: "#000000",
opacity: 0.4,
}
}}
infoOffsetY={150} //Info box stem height
stemStyle={{
stroke: "#000000",
cursor: "crosshair"
}}
markerStyle={{ fill: "#000000" }}
highlighted={ this.state.highlight }
onHighlightChange={highlight => this.setState({ highlight })}
/>
</Charts>
</ChartRow>
</ChartContainer>
</div>);
}
Here is the relevant function for setting the timeseries:
let points = [];
let one = 0, two = 0, three = 0, four = 0;
for(let i in data){
if(some condition){
one++;
}else if (some other condition){
two++;
}else if (some other condition){
three++;
}else{
four++;
}
}
points.push({
"index": time,
"one": one,
"two": two,
"three": three,
"four": four
});
for (let i in data) {
const d = new Date(data[i].index);
const index = Index.getIndexString(interval, d);
points.push([index, data[i].one, data[i].two, data[i].three, data[i].four]);
if (points.length > 0) {
const series = new TimeSeries({
name: "BarChart",
columns: ["index", "one", "two", "three", "four"],
points: points
});
I made some changes to mask the nature of the code and what it is for, so there may be some typos with regards to that.
I do know that react-timeseries-charts is throwing errors for NaN height and y values when the data points contains a value of 0 for one of the four values (one, two, three, four), but it still renders in chrome.
Any help would be appreciated.
Closing this. the documentation says react-timeseries-charts does not support safari.
Ended up migrating to ChartJS instead.