I learns Reactjs and trying to get images height and widths in this file to calculate the Ratio.
I havet this file albumData.js that looks like this:
// WEEK 1
import photo11 from '../images/weeks/1/DlGoaxEX0AAjY-7.jpg'
import photo12 from '../images/weeks/1/4olpqsvfte5rubn47j936z7c5vn9lff.jpeg'
import photo13 from '../images/weeks/1/9tlnx2sudu05jqxwij2evyvaifkrvbc.jpeg'
// WEEK 2
import photo21 from '../images/weeks/2/2.jpg'
import photo23 from '../images/weeks/2/original.jpg'
import photo22 from '../images/weeks/2/1_vtY9uCjeKSa1jIXm504jlg.jpeg.jpg'
export const albums = [
{
route: "1",
id: "album1",
data: [
{ id: "week 1-1", key: "1", backgroundImage: photo11, ratio: 768/1024, background: "rgb(56, 230, 236)", title: "week 1", description: "some desc" },
{ id: "week 1-2", key: "2", backgroundImage: photo12, ratio: 0.66771819137, background: "rgb(56, 230, 236)", title: "week 1", description: "some desc" },
{ id: "week 1-3", key: "3", backgroundImage: photo13, ratio: 0.74973711882, background: "rgb(56, 230, 236)", title: "week 1", description: "some desc" },
]
},
{
route: "2",
id: "album2",
data: [
{ id: "week 2-1", key: "1", backgroundImage: photo21, ratio: 0.75, background: "rgb(56, 230, 236)", title: "week 2", description: "some desc" },
{ id: "week 2-2", key: "2", backgroundImage: photo22, ratio: 0.75, background: "rgb(56, 230, 236)", title: "week 2", description: "some desc" },
{ id: "week 2-3", key: "3", backgroundImage: photo23, ratio: 0.56145833333, background: "rgb(56, 230, 236)", title: "week 2", description: "some desc" },
]
}
]
I call it from different locations like this
import { albums } from '../albumData'
My problem that I can't solve is that I need to input the images ratio inside the export const albums
Before I call and use the import { albums } from '../albumData' the array data in albums must have the ratio filled in from the actual images imports. I do that manually now but there will be 10.000 images.
The image Ratio is the width divided by the height!
I tried using React hooks but think that require a function something. Is there some static way in React to run this before using the albums?
Please advice
Related
If data is very lower than others, it's almost like zero, and the user can't click or hover because it's too small.
How can I set a minimum height or width for very small numbers?
I have this problem with ApexCharts too.
const chartConfigs = {
type: "column2d",
width: "100%",
height: 500,
dataFormat: "json",
dataSource: {
chart: {
caption: "Countries With Most Oil Reserves [2017-18]",
subCaption: "In MMbbl = One Million barrels",
xAxisName: "Country",
yAxisName: "Reserves (MMbbl)",
numberSuffix: "K",
theme: "fusion",
},
data: [
{
label: "Venezuela",
value: "290",
},
{
label: "Saudi",
value: "260",
},
{
label: "Canada",
value: "180",
},
{
label: "Iran",
value: "140",
},
{
label: "Russia",
value: "115",
},
{
label: "UAE",
value: "100",
},
{
label: "US",
value: "3000000",
},
{
label: "China",
value: "30",
},
],
},
};
This is normal since your y-axis scale is linear if one of your plots has a very large value & the other plot values are very low compared to the large plot value then the plot area of the smaller value plot will be very minimum.
To overcome this you can use logarithmic y-axis, here is an example -
FusionCharts.ready(function() {
var footfallChart = new FusionCharts({
type: 'logmscolumn2d',
renderAt: 'chart-container',
width: '500',
height: '300',
dataFormat: 'json',
dataSource: {
"chart": {
"theme": "fusion",
"caption": "Store footfall vs Online visitors ",
"subCaption": "Last Year",
"xAxisName": "Quarter",
"yAxisName": "No of visitors",
"showXAxisLine": "1",
"axisLineAlpha": "10"
},
"categories": [{
"category": [{
"label": "Q1"
},
{
"label": "Q2"
},
{
"label": "Q3"
},
{
"label": "Q4"
}
]
}],
"dataset": [{
"seriesname": "Total footfalls",
"data": [{
"value": "126734"
},
{
"value": "64"
},
{
"value": "34"
},
{
"value": "56"
},
{
"value": "78"
}
]
}]
}
}).render();
});
<script src="https://cdn.fusioncharts.com/fusioncharts/latest/fusioncharts.js"></script>
<script src="https://cdn.fusioncharts.com/fusioncharts/latest/themes/fusioncharts.theme.fusion.js"></script>
<div id="chart-container">FusionCharts will render here</div>
image screen shot I am trying to implement multiple Bar chart for the below requirement of chart in ReactJS using recharts or react-chartjs-2 library.
I was unable to find any direct solution available. Any suggestions how to create a similar type of chart
const data = [ { type: "Sample 1", data: [600, 400, 200, 800] }, { type: "Sampel 2", data: [700, 300, 600, 600] }, { type: "Total", data: [1300, 700, 800, 1400] } ];
The main requirement can be met by defining two xAxes, one for the individual values ('x1'), the other one for the total bar ('x2').
For further details, please consult the chapter "Creating Multiple Axes" from Chart.js documentation
Please take a look at below code sample and see how it works. While this is a pure JavaScript solution, the concept should also work for react-chartjs-2.
const data = [{
type: "Sample 1",
data: [600, 400, 200, 800]
}, {
type: "Sampel 2",
data: [700, 300, 600, 600]
}, {
type: "Total",
data: [1300, 700, 800, 1400]
}];
new Chart('myChart', {
type: "bar",
data: {
labels: ["A", "B", "C", "D"],
datasets: [{
label: data[0].type,
xAxisID: 'x1',
data: data[0].data,
backgroundColor: 'rgb(54, 162, 235)',
barPercentage: 1
},
{
label: data[1].type,
xAxisID: 'x1',
data: data[1].data,
backgroundColor: 'rgb(255, 159, 64)',
barPercentage: 1
},
{
label: data[2].type,
xAxisID: 'x2',
data: data[2].data,
backgroundColor: 'rgb(172, 215, 250)',
barPercentage: 1
}
]
},
options: {
legend: {
labels: {
filter: item => item.text != 'Total'
}
},
scales: {
yAxes: [{
ticks: {
min: 0,
stepSize: 200
}
}],
xAxes: [{
id: 'x1'
},
{
id: 'x2',
display: false,
offset: true
}
]
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js"></script>
<canvas id="myChart" height="90"></canvas>
Im using my react type script project for ant design table
i want to know how to do that following image like as table, im search any tutorial but not seen anything, any one know how to do that correctly.
code sand box here
Thanks
image here
code here
class App extends React.Component {
columns: any = [
{
title: "Name",
dataIndex: "name",
key: "name"
},
{
title: "Age",
dataIndex: "age",
key: "age"
},
{
title: "Address",
dataIndex: "address",
key: "address"
},
{
title: "Tags",
key: "tags",
dataIndex: "tags"
},
{
title: "Action",
key: "action"
}
];
data: any = [
{
key: "1",
name: "John Brown",
age: 32,
address: "New York No. 1 Lake Park",
tags: ["nice", "developer"]
},
{
key: "2",
name: "Jim Green",
age: 42,
address: "London No. 1 Lake Park",
tags: ["loser"]
},
{
key: "3",
name: "Joe Black",
age: 32,
address: "Sidney No. 1 Lake Park",
tags: ["cool", "teacher"]
}
];
render() {
return <Table columns={this.columns} dataSource={this.data} />;
}
}
You want to create 2 sub rows in each row, but only for some columns. you can use rowspan for this.
you can duplicate your rows (row1-row1-row2-row2-row3-row3-...), and put the subrow values in them (row1_subrow1-row1_subrow2-row2_subrow1-row2_subrow2-...), then use rowspan for the columns you want to expand (like Section and Name in your image), and expand the odd rows and collapse the even rows for this columns.
the full code : (Codesandbox Demo)
import React from "react";
import ReactDOM from "react-dom";
import "antd/dist/antd.css";
import "./index.css";
import { Table } from "antd";
let multiRowRender = (value, row, index) => {
const obj = {
children: value,
props: {}
};
if (index % 2 === 0) {
obj.props.rowSpan = 2;
}
if (index % 2 === 1) {
obj.props.rowSpan = 0;
}
return obj;
};
const columns = [
{
title: "Number",
dataIndex: "number"
},
{
title: "Issue",
dataIndex: "issue"
},
{
title: "Name",
dataIndex: "name",
render: multiRowRender
},
{
title: "Section",
dataIndex: "section",
render: multiRowRender
}
];
let data = [
{
key: "1",
name: "John Brown",
issues: [32, 100],
numbers: [18889898989, 545054],
section: "sec 1"
},
{
key: "2",
name: "Jim Green",
issues: [42, 50],
numbers: [18889898888, 1420054],
section: "sec 2"
}
];
let data2 = [];
data.forEach(d => {
data2.push({ ...d, issue: d.issues[0], number: d.numbers[0] });
data2.push({
...d,
issue: d.issues[1],
number: d.numbers[1],
key: d.key + "-row2"
});
});
data = data2;
ReactDOM.render(
<Table columns={columns} dataSource={data} bordered />,
document.getElementById("container")
);
Codesandbox Demo
I am new at ReactJs and try to complete a task from the youtube channel.
I created array "products" in "SchoolProduct.js" then using props I passed the value in Product.js.
Now in App.js, I used map function to get data
(Maybe I understand something wrong about props or map function)
Here is SchoolProduct.js:
const products = [
{
id: "1",
name: "pencil",
price: 1,
description: "this is pencil"
},
{
id: "2",
name: "rubber",
price: 10,
description: "this is rubber"
}
]
this is my Product.js
import React from "react"
function Product(props)
{
return
(
<div>
<h2>{props.product.name}</h2>
<p>{props.product.price.toLocaleString("en-US", {style: "currency",
currency: "USD"})}
- {props.product.description}</p>
</div>
)
}
export default Product
and this my App.js
import React, { Component } from 'react';
import Product from "./Product"
import productsData from "./SchoolProduct"
function App(){
const productsComponents = productsData.map(item => <Product product=
{item}/>)
return (
<div>
{productsComponents}
</div>
)
}
export default App;
The Error is:
TypeError: _SchoolProduct__WEBPACK_IMPORTED_MODULE_2___default.a.map is not a function
its shows error in App.js line no 8, which is "const productsComponents"
I know I create a silly mistake, but I am trying to improve it
I have to export my error in default way,
const products = [
{
id: "1",
name: "pencil",
price: 1,
description: "this is pencil"
},
{
id: "2",
name: "rubber",
price: 10,
description: "this is rubber"
}
]
export default products
export default [
{
id: "1",
name: "Pencil",
price: 1,
description: "Perfect for those who can't remember things! 5/5 Highly recommend."
},
{
id: "2",
name: "Housing",
price: 0,
description: "Housing provided for out-of-state students or those who can't commute"
},
{
id: "3",
name: "Computer Rental",
price: 300,
description: "Don't have a computer? No problem!"
},
{
id: "4",
name: "Coffee",
price: 2,
description: "Wake up!"
},
{
id: "5",
name: "Snacks",
price: 0,
description: "Free snacks!"
},
{
id: "6",
name: "Rubber Duckies",
price: 3.50,
description: "To help you solve your hardest coding problems."
},
{
id: "7",
name: "Fidget Spinner",
price: 21.99,
description: "Because we like to pretend we're in high school."
},
{
id: "8",
name: "Sticker Set",
price: 14.99,
description: "To prove to other devs you know a lot."
}
]
We are using Anychart Version 7.13 to create a PERT Chart in our application. Our data has a series of tasks with predecessors that require the chart to scroll horizontally. Our chart is getting truncated and we have tried to adjust chart.width in both % and PX but not able to enable horizontal scroll.
Any help will be most appreciated.
Thanks
VikasScreenshot showing truncation on right
Also, you should adjust spacing between milestones and milestones size in %. This will allow the pert chart fitting into the stage width. I prepared a sample for you below, the chart is scrollable. Please, pay attention to CSS style, stage settings and size/spacing settings. Probably, you should try other values in % exactly for your pert chart.
anychart.onDocumentReady(function () {
// create data
var data = [
{id: "1", duration: 1, name: "Task A"},
{id: "2", duration: 3, name: "Task B", dependsOn:["1"]},
{id: "3", duration: 4, name: "Task C", dependsOn:["2"]},
{id: "4", duration: 1, name: "Task D", dependsOn:["3"]},
{id: "5", duration: 2, name: "Task E", dependsOn: ["4"]},
{id: "6", duration: 2, name: "Task F", dependsOn: ["5"]},
{id: "7", duration: 1, name: "Task G", dependsOn: ["6"]},
{id: "8", duration: 2, name: "Task H", dependsOn: ["7"]},
{id: "9", duration: 3, name: "Task I", dependsOn: ["8"]},
{id: "10", duration: 2, name: "Task J", dependsOn: ["9"]}
];
// create a chart
var chart = anychart.pert();
//create stage
var stage = anychart.graphics.create("container");
//set stage width
stage.width(2000);
// adjsut milestones size in %
chart.milestones().size('5%');
//adjust spacing in %
chart.horizontalSpacing("9%");
// set chart data
chart.data(data, "as-table");
//render chart
chart.container(stage).draw();
});
html, body, #container {
position: relative;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
overflow-x: scroll;
}
<script src="https://cdn.anychart.com/releases/8.1.0/js/anychart-base.min.js"></script>
<script src="https://cdn.anychart.com/releases/8.1.0/js/anychart-pert.min.js"></script>
<script src="https://cdn.anychart.com/releases/8.1.0/js/anychart-exports.min.js"></script>
<script src="https://cdn.anychart.com/releases/8.1.0/js/anychart-ui.min.js"></script>
<link href="https://cdn.anychart.com/releases/8.1.0/css/anychart-ui.min.css" rel="stylesheet"/>
<div id="container"></div>