Related
I have a project in react, and I have a long column and I would like to know how to break and repeat the first 3 columns.
The table is dynamic, it does not have a fixed size.
Image Table
doc.autoTable({
head: [this.state.headerRelatorio.map(element => element)],
headerStyles: {
lineWidth: 1,
lineColor: [0, 0, 0]
},body : this.state.body.map(element=> this.state.headerRelatorio.map(elem => {if(element[elem] === undefined){
return 0
}else{
return element[elem];
}
}
)),
overflow: 'linebreak',
styles: {
font: 'arial',
fontsize:8,
minCellWidth: 70,
minCellHeight: 20,
maxCellwidth:30,
halign: 'center',
valign:'middle',
border: 1,
lineWidth: 1,
lineColor: [0, 0, 0],
overflow: 'linebreak'
},
theme:'grid',
startY: 150,
})
(Solved): Solution was compatibility issues between chart.js and the react version. The recent update to the react version solved it.
I was having trouble finding the solution to this, maybe someone will know why this error is happening:
I am passing an object array via props, but I'm getting an error when it comes to using the prop:
Object array sample (The data for score is fed in through an API and is working):
var teamData = [
{
teamName: "Cowboys",
score: 0,
color: "rgba(0, 34, 68, 0.9)",
},
{
teamName: "Cardinals",
score: 0,
color: "rgba(135, 0, 39, 0.9)",
},
{
teamName: "Patriots",
score: 0,
color: "rgba(0, 21, 50, 0.9)",
},
{
teamName: "49ers",
score: 0,
color: "rgba(170, 0, 0.9)",
},
App.js example
const App = () => {
getData();
return (
<div>
<Header />
<BarChart teamData={teamData} />
<Calculator teamData={teamData} />
<Footer />
</div>
);
};
export default App;
And here is where I pass the props to insert one by one into a chart.js component({props[0].score} is where the error is, it says: SyntaxError C:\Users\name\Documents\Websites\React Based\madden-ranker\src\components\BarChart.js: Unexpected token, expected "," (14:37):
import React from "react";
import { Bar, HorizontalBar } from "react-chartjs-2";
const BarChart = (props) => {
return (
<HorizontalBar
// prettier-ignore
data={{
labels: ['Team1' ],
datasets: [
{
label: 'Cumulative Score',
data: [{props[0].score}, 19, 3, 5, 2, 3, 100, 19, 3, 5, 2, 3, 5, 2, 3, 100, 19, 3, 5, 2, 3, 100, 19, 3, 5, 2, 3, 5, 2, 3, 10, 20],
backgroundColor: []
},
],
}}
height={500}
width={600}
options={{
maintainAspectRatio: false,
scales: {
y: {
beginAtZero: true,
},
},
}}
/>
);
};
export default BarChart;
Interestingly, I tried console logging it inside the teamData component and got this:
line5: console.log(props);
line6: console.log(props.teamData[0].score);
.
Just add a condition to check if props[0] exists before rendering, cause the first time the props is empty, and when you setstate after getting data from API the component rerenders. Hopefully this helps.
I think you had a few commas in places that they shouldn't be
Try this
const BarChart = (props) => {
return (
<HorizontalBar
// prettier-ignore
data={{
labels: ['Team1' ],
datasets: [
{
label: 'Cumulative Score',
data: [{props[0].score}, 19, 3, 5, 2, 3, 100, 19, 3, 5, 2, 3, 5, 2, 3, 100, 19, 3, 5, 2, 3, 100, 19, 3, 5, 2, 3, 5, 2, 3, 10, 20],
backgroundColor: []
}
]
}}
height={500}
width={600}
options={{
maintainAspectRatio: false,
scales: {
y: {
beginAtZero: true,
}
}
}}
/>
);
};
const user1 = [
{
id: 1,
orderDetails: [
{
id: 1,
custFN: 'Jon',
custLN: 'Smith',
serverDetails:
[{
id: 123,
sFN: 'Barack',
sLN: 'Obama',
}],
orderFinish: false,
}
],
shopF: [
{
maxPX: 10,
maxPY: 10,
}
],
furniture: [
{
id: 1,
type: 'table',
pX: 2,
pY: 0,
label: 'VIP Table',
color: 'green',
},
{
id: 2,
type: 'table',
pX: 2,
pY: 1,
label: 'VIP Table',
color: 'green',
},
{
id: 3,
type: 'chair',
pX: 1,
pY: 0,
label: 'VIP Chair',
color: 'brown',
},
{
id: 4,
type: 'chair',
pX: 1,
pY: 1,
label: 'VIP Chair',
color: 'pink',
},
],
}
];
My app is like a dining area where there are tables, chairs, plants etc. Think of it as tiles. So anyway,
Above is my sample data. shopF determines the maximum tiles that will be made(more like x and y coordinates). furniture consists of its position, type of furniture etc.
My problem is that I want to render an element that will serve as tiles and while looping it, determine if a furniture exists in x and y coordinates. I'm thinking of nested for loop.
return (
<React.Fragment>
{
// For loop y
// If furniture is equal to y then render also furniture else just render empty tiles
// For loop x
// If furniture is equal to x then render also furniture else just render empty tiles
}
</React.Fragment>
);
I've tried using map functionality but I don't know how to exactly do it.
Below image is the layout for the 'tiles' and its x and y coordinates.
Here's how I would do it, first create a Tilemap using this method:
const BuildTilesMap = (data, sizeX, sizeY) => {
let arr = new Array(sizeY).fill(null).map(() =>
new Array(sizeX).fill(null).map(() => ({
type: "empty" // chnage this to fit your need
}))
);
for (const item of data) {
console.log(item);
arr[item.posY][item.posX] = item;
}
return arr;
};
Then render a Row which would have a simple div which style set display: flex inside with an map of items like so:
const RenderRow = ({ data }) => {
return (
<div style={{ display: "flex" }}>
{data.map(e => (
<Tiles data={e} />
))}
</div>
);
};
const Tiles = ({ data }) => {
return (
<div style={{ height: 80, width: 80, border: "1px solid #555" }}>
{data.type}
</div>
);
};
Here's the codesandbox
I had a working 3d chart using version 2107-10-1 that used images for the y axis.
I'm now trying to use the version 5 libraries but I'm getting an error:
"Cannot read property 'getContext' of null at new RGraph.Drawing.Image (RGraph.drawing.image.js:64)
Which is:
"context = this.canvas.getContext('2d');"
I change the line in the library to 3d to match the chart variant setting of 3d and the error is resolved. However I then get the following errors:
"Cannot set property 'shadowColor' of null
at Object.RG.noShadow.RG.NoShadow (RGraph.common.core.js:5155)
at RGraph.Drawing.Image.draw.Draw (RGraph.drawing.image.js:490)"
I've been going through the API to try and find any differences to the property names but my skill and understanding is not great.
Any help or advice would be greatly appreciated.
:-)
new RGraph.Bar({
id: 'cvs',
data: [ [0,5,5],[0,5,5],[0,5,5] ],
options: {
/******/
variant: '3d',
variantThreedAngle: 0,
hmarginGrouped: 2,
/*****/
textFont: '"Courier New", Courier, monospace',
titleFont: '"Courier New", Courier, monospace',
labels:['Monday', 'Saturday', 'Sunday'] ,
colors: [ '#3cb44b','#5484ed','#fbd75b' ],
textSize: 11,
title: 'Test Learner1: T1C1 W/B 22nd April 2019',
titleSize: 11,
titleColor:'#338833',
titleX: 50,
titleY: 25,
titleHalign: 'Left',
textAccessible: false,
key: ['LabelOne','LabelTwo','LabelThree'], //['One','Two','Three','Four','Five'],
keyPositionY: 470,
keyPositionX: 0,
gutterBottom: 65,
gutterRight: 10,
gutterTop: 40,
gutterLeft: 70,
keyPosition: 'gutter',
keyTextSize: 9,
numyticks: 2,
ylabelsCount: 2,
ymax: 10,
ymin: 0,
backgroundColor: 'white',
labelsColor: 'green'
// end options
}
}).draw().exec(function (obj)
{
var images = [
'smileyimages/graphimages/smiley5.png','smileyimages/graphimages/smiley10.png','smileyimages/graphimages/smiley1.png',
];
var index = 0;
obj.coordsText.forEach(function (val, key, arr)
{
if (val.tag === 'scale') {
var x = val.x,
y = val.y,
text = val.text;
var img = new RGraph.Drawing.Image({
id: 'cvs',
x: x,
y: y,
src: images[index],
options: {
halign: 'right',
valign: 'center'
}
}).draw();
index++;
}
});
obj.set({
ylabels: true
});
RGraph.redraw();
}).on('beforedraw', function (obj)
{
RGraph.clear(obj.canvas, 'white');
});
I've adjusted your code for the new property names. With this code remember to update the paths to the images.
<script src="/libraries/RGraph.drawing.image.js"></script>
<script src="/libraries/RGraph.common.core.js"></script>
<script src="/libraries/RGraph.common.key.js"></script>
<script src="/libraries/RGraph.bar.js"></script>
And the code that makes the chart:
new RGraph.Bar({
id: 'cvs',
data: [ [1,5,5],[1,5,5],[1,5,5] ],
options: {
variant: '3d',
hmargin: 20,
hmarginGrouped: 2,
textFont: '"Courier New", Courier, monospace',
titleFont: '"Courier New", Courier, monospace',
xaxis: false,
xaxisLabels:['Monday', 'Saturday', 'Sunday'] ,
colors: [ '#3cb44b','#5484ed','#fbd75b' ],
title: 'Test Learner1: T1C1 W/B 22nd April 2019',
titleX: 120,
titleY: 25,
titleHalign: 'Left',
textAccessible: false,
key: ['LabelOne','LabelTwo','LabelThree'], //['One','Two','Three','Four','Five'],
keyPositionY: 435,
keyPositionX: 100,
marginBottom: 95,
marginRight: 10,
marginTop: 40,
marginLeft: 100,
keyPosition: 'margin',
keyLabelsSize: 9,
yaxis: false,
yaxisLabelsCount: 2,
yaxisScaleMax: 10,
yaxisScaleMin: 0,
backgroundColor: 'white',
xaxisLabelsColor: 'green'
}
}).draw().exec(function (obj)
{
var images = [
'/images/alex.png',
'/images/alert.png',
'/images/facebook.png'
];
var index = 0;
obj.coordsText.forEach(function (val, key, arr)
{
if (val.tag === 'scale') {
var x = val.x,
y = val.y,
text = val.text;
var img = new RGraph.Drawing.Image({
id: 'cvs',
x: x,
y: y + 10,
src: images[index++],
options: {
halign: 'right',
valign: 'center'
}
}).draw();
}
});
});
https://www.highcharts.com/demo/gauge-speedometer
Need this chart in React. Implemented Solid Gauge but was not able to implement this Gauge Series.
Here is the Sandbox for reference where the Solid Gauge is working but not series graph. Uncommenting the GaugeSeries leads to tooltip of null error.
https://codesandbox.io/s/38rk6wvnrq
Your plotOptions should be part of chart options in
<HighchartsChart
chart=
I suggest changing the name of the variable, so it will not be misleading - e.g. to chartOptions.
Second, and the most important problem is caused by a typo - series type is gauge and not guage the:
<Series id="series" name="Value" data={[80]} type="guage" />
Based on the code:
import React, { Component } from "react";
import Highcharts from "highcharts";
require("highcharts/highcharts-more")(Highcharts);
require("highcharts/modules/exporting")(Highcharts);
import {
HighchartsChart,
withHighcharts,
Series,
XAxis,
YAxis,
Tooltip
} from "react-jsx-highcharts";
const plotOptions = {
plotBackgroundColor: null,
plotBackgroundImage: null,
plotBorderWidth: 0,
plotShadow: false
};
const paneOptions = {
startAngle: -120,
endAngle: 120,
background: [
{
backgroundColor: {
linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
stops: [[0, "#FFF"], [1, "#333"]]
},
borderWidth: 0,
outerRadius: "109%"
},
{
backgroundColor: {
linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
stops: [[0, "#333"], [1, "#FFF"]]
},
borderWidth: 1,
outerRadius: "107%"
},
{
backgroundColor: "#DDD",
borderWidth: 0,
outerRadius: "105%",
innerRadius: "103%"
}
]
};
const GraphRender = ({ data }) => {
return (
<div className="gauge-empty">
<div className="no-data">Data Unavaialble</div>
<HighchartsChart
chart={{ type: "gauge" }}
plotOptions={plotOptions}
pane={paneOptions}
>
<Tooltip padding={10} hideDelay={250} shape="square" />
<XAxis />
<YAxis
id="myAxis"
min={0}
max={100}
minorTickInterval="auto"
minorTickWidth={1}
minorTickLength={10}
minorTickPosition="inside"
minorTickColor="#666"
tickPixelInterval={30}
tickWidth={2}
tickPosition="inside"
tickLength={10}
tickColor="#666"
labels={{
step: 2,
rotation: "auto"
}}
title={{
text: ""
}}
plotBands={[
{
from: 0,
to: 60,
color: "#55BF3B" // green
},
{
from: 60,
to: 80,
color: "#DDDF0D" // yellow
},
{
from: 80,
to: 100,
color: "#DF5353" // red
}
]}
>
<Series id="series" name="Value" data={[80]} type="guage" />
</YAxis>
</HighchartsChart>
</div>
);
};
const Gauge = ({ data }) => <GraphRender data={data} />;
export default withHighcharts(Gauge, Highcharts);
(I have not resolved the problem with the chart option - you can move the options into the correct place if you want them to work. I'm not sure if you want them or if those were set only for the demo purpose)