is there any way of using custom icons in primereact tree? I've tried importing them in css file and using them like that but it did not work.
Here is a sample of json file with primereact icon usage.
"key": "0-0",
"label": "Work",
"data": "Work Folder",
"icon": "pi pi-fw pi-cog"
Icon usage in css
.myIcon {
background-image: url('imgpath');
}
Here is a sample of json file with custom icon usage
"key": "0-0",
"label": "Work",
"data": "Work Folder",
"icon": "myIcon"
Would really appreciate help with this one
EDIT:
So I've managed to solve this problem by replacing background-image with content.
Css below:
.m-icon {
content: url("../images/module.png");
}
I've managed to solve this problem by replacing background-image with content.
Css below:
.m-icon {
content: url("../images/module.png");
}
Related
After building the project with create-react-app, and hosting it on a webserver, when you visit your website using your smartphone, and click on the "Add to home screen" button in the browser, a shortcut of your website (pwa?) gets created on your smartphone home screen,
When you open this shortcut, a loading page shows up, this loading page comes from the "./public/manifest.json" file which is in your React project,
The manifest.json file includes some options, such as changing the starter screen background color, and the title which shows down in the bottom, ex:
the following file results in the following output:
{
"short_name": "Catering",
"name": "Catering and logistics",
"icons": [
{
"src": "favicon.ico",
"sizes": "100x100 64x64 32x32 24x24 16x16",
"type": "image/x-icon"
},
{
"src": "icon.png",
"type": "image/png",
"sizes": "100x100"
}
],
"start_url": ".",
"display": "standalone",
"theme_color": "#000000",
"background_color": "orange"
}
You see, there aren't many options, I want to design something which looks as follows:
So in order to do so, I should be able to write some code,
for example some CSS, some Jsx or HTML or whatever.
How to do that? where I can write the code for this loader page? and what is its name?
Is it possible to have multi-level dropdown using react json schema forms?
I accomplish to get a simple dropdown using a schema like:
{
"title": "A registration form",
"description": "A simple form example.",
"type": "object",
"properties": {
"Dropdown Label": {
"type": "object",
"enum": [
"Dropdown Option One",
"Dropdown Option One"
]
}
}
}
But I want something like in the image:
I tried to use nested objects in enums it didn't work and didn't find any example in their documentation as well.
Any help would be great! Thanks
I need to integrate map chart using fusion chart library in my react application. after install fusion chart library through yarn configured component including fusion chart library, but when i render the map chart it shows me below error
After having error i just watch the node modules and check the existence of file, but seems like its not there, but my fusion chart installed successfully with no error then how this happened?
Here is my code
import React, { Component } from 'react';
import { Link } from 'react-router-dom';
import FusionCharts from 'fusioncharts';
import Maps from 'fusioncharts/fusioncharts.maps';
import World from 'fusioncharts/maps/fusioncharts.worldwithcountries';
import ReactFC from 'react-fusioncharts';
import FusionTheme from 'fusioncharts/themes/fusioncharts.theme.fusion';
ReactFC.fcRoot(FusionCharts, Maps, World, FusionTheme);
class MapChart extends Component {
state = {
dataSource: {
"chart": {
showCanvasBorder: true,
canvasBorderColor: "#000000",
canvasBorderThickness: 1,
showBorder: true,
borderColor: "#000000",
fillColor: "#f1f1f1",
caption: "* USA traffic not displayed on Heat Map",
includevalueinlabels: "1",
showHoverEffect: false,
showEntityHoverEffect: false,
theme: "fusion",
},
data: [
{
"id": "27",
"value": "8",
"color" : "#f65122"
},
{
"id": "159",
"value": "3",
"color" : "#fcc50b"
},
{
"id": "142",
"value": "3",
"color" : "#f65122"
},
{
"id": "141",
"value": "9",
"color" : "#f3172d"
},
{
"id": "173",
"value": "9",
"color" : "#f3172d"
},
{
"id": "113",
"value": "5",
"color" : "#f65122"
},
{
"id": "193",
"value": "5",
"color" : "#f65122"
},
{
"id": "122",
"value": "9",
"color" : "#f65122"
}
]
}
}
render() {
return (
<React.Fragment>
<div style={{ width: '100%', margin: '20px', textAlign: 'center' }}><button><Link to="/">Back to home</Link></button></div>
<div style={{ textAlign: 'center' }}>
<ReactFC
type="worldwithcountries"
width="80%"
height="500"
dataFormat="JSON"
dataSource={this.state.dataSource} />
</div>
</React.Fragment>);
}
}
export default MapChart;
Any help on this issue would be greatly appreciated. Thanks!
Fusion Maps XT offers interactive maps to plot geographical data like revenue by regions, population by state, survey and election results effectively. You can also drop markers on the map to pinpoint places like office locations and flight routes. It has over 1000 maps including all continents, major countries and all the US states.
Fusion chart library initially not provided any collection of maps. Whenever you install fusion chart library on initial base it has only few maps file in map folder of package. Due to that reason you're file is not available in the whole package. They provided the link on their official page for download all the map related to fusion map chart.
To render these maps, you need to download the map definition files from here and copy-paste the maps folder within your fusion charts directory.
Please follow the steps
open link https://www.fusioncharts.com/download/map-definition-files
click on Download Map Definition Files(https://cdn.fusioncharts.com/downloads/addons/fusionmaps-xt-definition.zip) which contains collection of all the maps available in Fusion Maps XTall the maps available in Fusion Maps XT
after download copy the /maps folder from this download package and paste it in your fusion charts folder.
now run you're existing application the file will be found and your react application will work as expected.
Every information already defined on it official site of fusion chart but not in proper way so with the help of link which earlier defined you'll be directly redirect to that instruction page.
On GitHub i created one repository with map chart using fusionchart library, so you can download that repository and check exact functionality of map chart.
GitHub Repository
Since you are rendering the world with countries map in your app, you need to import fusioncharts.worldwithcounties.js, however, if you install FusionCharts via npm it does not have worldwithcountries file in the map folder, to get the file you need to install fusionmaps, here is the link - https://www.npmjs.com/package/fusionmaps
This will install all the map definition files, then you can use the following command:
import World from 'fusionmaps/maps/fusioncharts.worldwithcountries';
I have developed an app and it is functioning properly, however when it comes to designing, i am unable to achieve what is given in the example despite of doing the same code in the example. I want to achieve this design where image is in the center with title above and description down but what I am getting is this, side image, side title and description down. Please let me know how to achieve that. Here is my sample of my code
"response" : {
"outputSpeech" : {
"type" : "SSML",
"ssml" : "<speak>Hello,welcome!</speak>"
},
"card": {
"type": "Standard",
"title": "My Title",
"text": "My description",
"image": {
"smallImageUrl": "small image with the width 720 and height 480",
"largeImageUrl": "large image with the width 1200 and height=800"
}
},
"reprompt": {
"outputSpeech": {
"type": "SSML",
"ssml": "<speak>I am waiting for your command!!</speak>"
}
},
"shouldEndSession" : false
}
It looks like Amazon has changed the Standard Card layout. Images are now shrinked and pushed to the left. The examples shown in current documentation on Cards have the new layout. The blog post you are referring is more than one and half years old
I am trying to use the react-select component (https://github.com/JedWatson/react-select) and confused with this sentence while reading the documentation, see below:
Be sure to include styles at some point, probably during your bootstrapping
import 'react-select/dist/react-select.css';
When I import this line in the React JSX file where I am using the Select component I am getting the following error:
...node_modules/react-select/dist/react-select.css:8\n.Select
{\n^\nParseError: Unexpected token\n>",
"traces": {
"Application Trace": [
{
"id": 39,
"trace": "app/views/layouts/application.html.erb:7:in
`_app_views_layouts_application_html_erb___377503645297909977_70313107001300'"
}
],
"Framework Trace": [
{
"id": 0,
"trace": "browserify-rails (3.3.0) lib/browserify-rails/browserify_processor.rb:220:in `run_browserify'"
},
{
"id": 1,
"trace": "browserify-rails (3.3.0) lib/browserify-rails/browserify_processor.rb:51:in `call'"
},
{
....
}
Can someone provide some hints on this issue?
It looks like I found an answer towards this question.
Basically what I did is I manually copy the css file from node_modules/react-select/dist/react-select.css into /assets/javascript/stylesheets folder in my rails project.
For more infomation please look into: https://stackoverflow.com/a/10291177/5761338