Calling Component
<SparkLine currentColor={"blue"} id="line-sparkline" type="Line" height="80px" width="250px" data={SparklineAreaData} color={"blue"} />
actuall Component
import React from 'react'
import {SparklineComponent,Inject,SparklineTooltip} from '#syncfusion/ej2-react-charts'
import {SparklineAreaData} from '../../data/dummy'
const SparkLine = ({id,height,width,color,data,type,currentColor}) => {
return (
<SparklineComponent
id={"line-sparkline"}
height={"80px"}
width={"250px"}
lineWidth={1}
valueType="Numeric"
fill={"blue"}
border={{ color:"blue", width: 2 }}
dataSource={SparklineAreaData}
xName='x'
yName='y'
type={"Line"}
>
<Inject services={[SparklineTooltip]} />
</SparklineComponent>
)
}
export default SparkLine
Learning About syncfusion creating a simple Sparkline chart but it displays nothing on front-end to error also but when i inspect there is actually some elements tag but it shows nothing
This problem is arise due to wrong formatting of data. Your x-axes variable name and y-axes variable name must be same as props xName and yName. If your dummy data look like this:
const dummyData = [{
{ xval: 1, yval: 6 },
{ xval: 2, yval: 7 },
{ xval: 3, yval: 4 },
{ xval: 4, yval: 8 },
{ xval: 5, yval: 10 },
}]
Props xName="xval" and yName="yval"
see Full example https://ej2.syncfusion.com/react/documentation/sparkline/getting-started/
I also experienced this problem. You can fix this by looking at the syncfusion documentation.
Correct the following.
change
xName='x' to xName = 'xval'
change
yName='y' to yName = 'yval'
Now it should work fine.
The value of your xName and yName props must be the same as your data Object property name
For example
if your data object is
const dummyData = [{
{ xvalue: 1, yvalue: 6 },
{ xvalue: 2, yvalue: 7 },
{ xvalue: 3, yvalue: 4 },
{ xvalue: 4, yvalue: 8 },
{ xvalue: 5, yvalue: 10 },
}]
the xName and yName props value will be
xName='xvalue'
yName='yvalue'
like this:
<SparklineComponent
id={"line-sparkline"}
height={"80px"}
width={"250px"}
lineWidth={1}
valueType="Numeric"
fill={"blue"}
border={{ color:"blue", width: 2 }}
dataSource={SparklineAreaData}
xName='xvalue'
yName='yvalue'
type={"Line"}
>
Related
I have been working all day for this but I can't still solve it. So I'm using tmdb and I have their array of genre objects which is laid out like this:
{
id: 28,
name: "Action",
},
{
id: 12,
name: "Adventure",
}, ....
And I'm looking to compare it to the movie I pass on to a movie component which has an object "genre_ids" that is an array of genre ids and it is laid out like this
genre_ids: [14, 28, 12]
I have this in my return :
(genre, index) =>
genre.id === showModal?.genre_ids[index] && (
<li className="border-2 2xl:border-4 inline rounded-xl px-2">
{genre.name}
</li>
)
)}
But it doesn't work as I want it to. I'm hoping to render/return the genre names of each movie. If anyone could help me that'd be awesome. I'm using JSX components, react
You can probably try something like this using array.filter()
const genre_ids = [14 , 20];
const genre = [{id: 14, name: "action"}, {id: 20, name: "drama"}, {id: 25,name: "sci-fi"}]
// Will store [{id: 14, name: "action"}, {id: 20, name: "drama"}] in filteredGenre
const filteredGenre = genre.filter(element => genre_ids.includes(element.id))
You can then map over filteredGenre
I want to display the findMax() output in a div but im facing this problem :
'findMax' is not defined no-undef
, 'dataset' is not defined no-undef
Someone suggested that I need to use useState but I'm not sure how to make it work , I would appreciate any help !
const pricedata = {
datasets: [
{
backgroundColor: "#0000",
barPercentage: 2,
barThickness: 5,
data: [1, 10, 30, 7, 42, 12],
label: "Update in prices",
maxBarThickness: 10
},
{
backgroundColor: "#0000",
barPercentage: 2,
barThickness: 5,
data: [11, 70, 18, 17, 24, 12],
label: "Update in prices",
maxBarThickness: 10
}
]
};
function findMax(PRICES) {
if (!PRICES) {
return 0;
}
return Math.max(...PRICES);
}
pricedata.datasets.forEach((dataset) => {
dataset.maxPrice = findMax(dataset.data);
});
pricedata.datasets.forEach((dataset) => {
console.log('max price is', dataset.maxPrice);
});
return (
<div>{findMax(dataset.data)}</div>
There is no 'dataset' variable at the root level of the code. The pricedata variable contains an array called datasets. In your code when you call map, it loops over all the datasets - calling each individual one dataset. That variable name is only "scoped" to be within the map() function.
You can build the DIVs inside a map like this:
// call your findMax() on each element
const divs = pricedata.datasets.forEach((dataset,i) => (<div key={i}>{findMax(dataset.data)}</div>))
// using React, you'll need to surround the divs in a parent div
return <>{divs}</>
I want make pie chart using state value in react with '#toast-ui/react-chart'.
I tried this and that after looking at the examples, but it's hard to me.
This is a example.
//chart data
var data = {
categories: ['June, 2015'],
series: [
{
name: 'Budget',
data: [5000]
},
{
name: 'Income',
data: [8000]
},
{
name: 'Expenses',
data: [4000]
},
{
name: 'Debt',
data: [6000]
}
]
};
var options = {
chart: {
width: 660,
height: 560,
title: 'Today's Channel & Value.'
}
tooltip: {
suffix: 'value'
}
},
};
var theme = {
series: {
colors: [
'#83b14e', '#458a3f', '#295ba0', '#2a4175', '#289399',
'#289399', '#617178', '#8a9a9a', '#516f7d', '#dddddd'
]
}
};
//render part
render()
{
return(
<div>
<PieChart
data={data}
options={options}
/>
</div>
}
and document is here.
https://github.com/nhn/toast-ui.react-chart#props
https://nhn.github.io/tui.chart/latest/tutorial-example07-01-pie-chart-basic
What's in the document is how to make a chart with a fixed number, but I want to change it using the state.
So, How can I mapping series data like this and how to add data length flexible?
I have list of object like ...
this.state.list =[{"channel_name":"A","channel_number":17,"VALUE":3,"num":1},
{"channel_name":"B","channel_number":23,"VALUE":1,"num":2},
{"channel_name":"C","channel_number":20,"VALUE":1,"num":3},
{"channel_name":"D","channel_number":1,"VALUE":1,"num":4}]
The length of the list is between 1 and 7 depending on the results of the query.
I want to do like this.
series:[
{
name: this.state.list[0].channel_name+this.state.list[0].channel_num
data: this.state.list[0].VALUE
},
{
name: this.state.list[1].channel_name+this.state.list[1].channel_num
data: this.state.list[1].VALUE
},
{
name: this.state.list[2].channel_name+this.state.list[2].channel_num
data: this.state.list[2].VALUE
},
{
name: this.state.list[3].channel_name+this.state.list[3].channel_num
data: this.state.list[3].VALUE
}
]
How can I implement it however I want?
Since this.state.list is a list of objects, so you can simply use map method to loop through each object https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map. Then create new object with custom value.
let new_series = [];
this.state.list.map((obj) => {
let info = {
name: obj.channel_name + obj.channel_number, //from your code
data: obj.VALUE //from your code
}
new_series.push(info)
});
Then assign new list to your chart.
//chart data
var data = {
categories: ['June, 2015'],
series: new_series
]
};
i am mapping multiple area on an image for a web app in react, i want to target their id's onClick
let targetArea = myMap.find(targetArea => targetArea.id === 10)
let MAP = {
id: 'map', name: 'my-map',
areas: [
{id: 7, name: 'kitchen', shape: 'rect', coords: [804,1001,1019,1135], preFillColor: 'clear'},
{id: 9, name: 'bar pendant', shape: 'rect', coords: [516,1294,732,1428], preFillColor: 'clear'},
{id: 10, name: 'entry', href: 'entry', shape: 'rect', coords: [1034,1292,1246,1428], preFillColor: 'clear'}
]
};
i was getting an array of objects back with console.log(MAP.areas)
but i'm not sure how to dynamically set an id
so far i've got
const myMap = MAP.areas
let targetArea = myMap.find(targetArea => targetArea.id === 10)
areaCheck = (event) => {
console.log(targetArea.name)
}
i'm getting the correct name of the hard set id in my targetArea variable, i feel like i might need a loop idk??
first i passed area as an argument in the onClick event handler
onClick={(area)=> this.areaCheck(area)}
then passed it around my handler
areaCheck = (area) => {
console.log(area.id)
this.setState({ areaClicked: area.id })
}
then it suddenly knew what area i was talking about :)
I have an array of objects, like this:
myArray: [{
name: "First",
price: 10,
rebate: 5,
listPrice: 15,
outcome: 0
},{
name: "Second",
price: 11,
rebate: 5,
listPrice: 16,
outcome: 0
}
I want to recalculate the outcome-value whenever any of the other values in the same object change.
I already have a setup like this, but it looks for changes in any object and then recalculates the whole array. I've managed to set this up by using a combination of computed and watch functions. However they watch the whole array for changes and then recalculate the outcome-value for all objects in the array.
How can I watch for changes and then recalculate only the changed object?
Below is my current functions for recalculating the whole array (watching another property), but what I'm looking for could be completely different.
computed:
myArrayWasChanged() {
return [this.myArray.reduce((a, {vendors}) => a + vendors, 0), this.myArray.filter(item => item.discounted == false).length]
watch:
myArrayWasChanged: {
handler: function (val, oldVal) {
this.recalculateIsVendor();
Given the outcome is completely dependent on the other properties, it isn't really part of the component's state. Thus, in the component's data you could store the array without the outcome, and then calculate a new version of the array with the outcome as a computed property.
data: function () {
return {
myArrayWithoutOutcome: [
{
name: "First",
price: 10,
rebate: 5,
listPrice: 15
},
{
name: "Second",
price: 11,
rebate: 5,
listPrice: 16
}]
}
},
computed: {
myArrayWithOutcome: function () {
return this.myArrayWithoutOutcome.map(x => {
return {...x, outcome: this.calculateOutcome(x)}
})
}
},
methods: {
calculateOutcome(item) {
// Logic to calculate outcome from item goes here
return 0
}
}