I have no react, typscript or d3 experience prior to this.
I am trying to build a horizontal bar chart where I can customize the colours of the bar depending on the value of the bar
I have gotten this far. See this chart:
I need to change the conditional formatting customization so the color is not entered from a drop down and is a text area where I can enter the hex code.
This is what I need to change and the condiditional formating I am talking about. It is on the table chart:
I have traced it back to the following code in controlPanel.tsx
{
label: t('Options'),
expanded: true,
controlSetRows: [
[
{
name: 'conditional_formatting',
config: {
type: 'ConditionalFormattingControl',
renderTrigger: true,
label: t('Conditional formatting'),
description: t(
'Apply conditional color formatting to numeric columns',
The actual pop up where you enter the field and color you want to associate the colour appears to be in
/superset/superset-frontend/src/explore/components/controls/ConditionalFormatingcontrol folder. So what I was hoping to do was to copy that, make my changes and call it. However I have no idea how I need to compile it and no idea how to call it
My guess was I could change the type below to the name of the copy of the component I created if I had compiled things correctly
name: 'conditional_formatting',
config: {
type: 'ConditionalFormattingControl',
Can anyone help me?
The available chart customization controls for a chart in superset set appear to be located in
/superset/superset-frontend/src/expore/components/controls
The list of chart customization controls exported that are available for list is in
/superset/superset-frontend/src/expore/components/controls/index.js
To customize one or to create a new component for customizing a custom chart in superset copy put in the directory listed above that you have copied and changed from the directory above or created and change the index.js file so that it is exported for use
I am learning React, and I observe some people made the color of Component tags different from normal HTML tags under JSX format. However I am not really able to find extensions that do this (tried prettier and react snippets etc.). I wonder what enables that behavior?
In "settings.json":
"textMateRules": [
{
"name": "component tags",
"scope": [
"entity.name.tag", // HTML tags
"support.class.component", // JSX/TSX Component tags
],
"settings": {
"foreground": "red",
}
}
Turns out it is a built-in Visual Studio Dark+ default dark theme.
Color the tag name proposed by Alex also works, just different colors.
Add Babel JavaScript extension
Whenever I Save the index.js in react.js#17.0.1 version file in vscode, code is reformatted in ugly way and shows the error as in this picture:
I have tried all the possible solutions available on Google, but no results.
From uninstalling and reinstalling vscode to prettier uninstall, restart vscode, install again and restart vscode again, create-react-app again and again and all that. How can I get on the right track?
The reason for it is using a formatting extension.
Steps to solve the issue
Disable the formatting extension.
Remove the extra spaces from the code.
Save it
That should solve the problem!
Changing the file from index.js to index.jsx and re-writing the tags as well as the "hello world" worked for me.
Then, I changed back the index.jsx to index.js and the error didn't come up again.. Not sure why...
On Visual Studio Code look for a wheel icon , that lies under the account icon [ which is like a human figure ] and is on lower left side in my case.
If you hover over the wheel => Manage label appears.
Click on the wheel and a menu pops ups where you'll see Extensions . Click on Extensions . Now look for JS-CSS-HTML-formatter among your extensions . Right next to JS-CSS-HTML-formatter you'll see again the wheel icon ; click it and choose from the pop up menu Disable or Uninstall
For further documentation ,consult :
https://marketplace.visualstudio.com/items?itemName=lonefy.vscode-JS-CSS-HTML-formatter
To use HTML syntax you need to specify .jsx or .tsx file extension.
If you wish to make React elements without JSX syntax use createElement(...)
Creating React Elements
We recommend using JSX to describe what your UI should look like. Each JSX element is just syntactic sugar for calling React.createElement(). You will not typically invoke the following methods directly if you are using JSX.
createElement()
createFactory()
source: https://reactjs.org/docs/react-api.html
First, you have to rename your file from ".js" to ".jsx"
Then, you can try this syntax :
const element = <h1>this is something written in js</h1>;
ReactDOM.render(element, document.getElementById('root'));
=> JSX tags (<Component />) are not standard javascript and have no special meaning if you put them inside a .js file
=> if you want to create element in a .js file, take a look to https://developer.mozilla.org/fr/docs/Web/API/Document/createElement or https://reactjs.org/docs/react-api.html
Rename your file extension from .js file to .jsx
At the bottom of the screen, you'll see the language mode (currently set to Javascript).
-> Click on 'Set Language Mode'
-> Then set your Language Mode to 'JavaScript React'
maybe it is because of your vscode's formatter extension .be sure to format your code with js code formatter.
I have the default Reactify Material UI DataTable that looks like this image
I need to heavily customise it including removing the download and print functionality and add icons into the columns for status and a drop-down added into the actions column. I have been thrown in the deep end with this project and would like to know where to start. I am using Reactify and I am slowly getting used to React so just need direction on what to research and what to learn.
Do I duplicate the mui-datatables node module and start modifying that?
Thanks
You can customized it, just read the docs very carefully.
https://www.npmjs.com/package/mui-datatables
This is the link where you can find its docs and make your data tables customize, for example if you want to remove the download and print functionality you just give false values to download and print option like this
const options = {
print: false,
download: false,
};
You can add icons in the status just change the value in data array. for example
let icon = <i className="ti-close" />
const data = [
["UserName_Value", "Title_Value", icon , "Date_Value", "Action_Value"],
];
Similarly you can add dropdowns to the action columns as well, just read the docs carefully and you will get the answer.
I've the following snippet in my index.js
class App extends Component {
render() {
return ( <div style = { styles.app } >
Welcome to React!
</div>
)
}
}
The code works, but every time I save (ctrl+s) visual studio format the jsx like that:
class App extends Component {
render() {
return ( < div style = { styles.app } >
Welcome to React!
<
/div>
)
}
}
How can I solve this? thanks
In the end what did the trick was changing the file format from JavaScript to JavaScript React on the bottom toolbar.
I'm publishing it here for future reference since I didn't find any documentation on this topic.
In addition to the above. If you click 'Configure File Association for .js' you can set all .js files to Javascript React
change vscode preferences settings > user settings below:
"files.associations": {
"*.js":"javascriptreact"
}
You can prevent VSC from incorrectly formatting your JSX by adding an association in your settings.json
Code > Preferences > Settings
In the settings window search for associations, click edit in settings.json and then add:
"files.associations": {
"*.js": "javascriptreact"
}
Alternatively, saving the file with a .jsx extension resolves this in vscode.
I had the same challenge and I am hoping to discover a better way of handling this issue in vscode.
I noticed your suggested work-around has to be done each time you open the react file with an extension of .js
Open the Visual Studio Code Settings. Refer the image below to see how to navigate to the settings.
Once the settings tab is open. If you want to make the settings changes for all the projects then select the User sub tab, if only for current project then select the Workspace sub tab.
type "file associations" in the search text box and press Enter.
Click on add item.
set Item : *.js
set Value : javascriptreact
Above changes will start associating all *js files in the project as javascript React files.
Next open any .js file in your project and right click and select Format Document. If you have multiple formatters then associate your favorite formatter. I have used Prettier to handle my formatting.
Install Prettier (if not installed by default) and try to add this to your user or workplace settings:
"prettier.jsxBracketSameLine": true
Do not put linebreak between return and the returned JSX expression.
Trigger autoformat (Alt+Shift+F) and check if works.
I struggled with this but finally found a solution. This is my settings.json
{
"terminal.integrated.shell.windows": "C:\\Program Files\\Git\\bin\\bash.exe",
"workbench.startupEditor": "welcomePage",
"window.zoomLevel": 1,
"emmet.includeLanguages": {
"javascript": "javascriptreact",
"vue-html": "html"
},
"editor.formatOnSave": true,
"javascript.updateImportsOnFileMove.enabled": "always",
"editor.wordWrap": "on",
"editor.tabSize": 2,
"editor.minimap.enabled": false,
"workbench.iconTheme": "vscode-icons",
"eslint.autoFixOnSave": true,
"eslint.alwaysShowStatus": true,
"beautify.ignore": [
"**/*.js",
"**/*.jsx"
],
"prettier.jsxSingleQuote": true,
"prettier.singleQuote": true
}
I added
"beautify.ignore": ["**/*.js","**/*.jsx"]
Make sure you dont have multiple javascript formatters enabled in your current workspace. (You have to disable the rest of them for your current workspace).
react-beautify mostly does the magic but fails if you have some other JS formatter/beautifier already installed.
In my case, I had react-beautify and JS-CSS-HTML Formatter extension installed. I had to disable the JS-CSS-HTML Formatter for my current workspace.
Here is what worked for me-
I clicked on the Language mode (Javascript React) at the bottom of the screen
Then chose the Configure React Javascript Language based setting option
Then changed the javascript react default formatter to prettier as shown in the pic.
That pretty much did it for me after I saved the React file.
I just added all the combinations mentioned above.
added this
"files.associations": {
"*.js": "javascriptreact"
}
added this also
"beautify.ignore": ["**/*.js","**/*.jsx"]
Deleted additional js formatting
installed prettier
turn ON prettier and formatting
You can install an extension like react-beautify that helps you format your jsx code.
It is found here
This extension wraps prettydiff/esformatter to format your javascript, JSX, typescript, TSX file.
I had to disable the JS-CSS-HTML Formatter extension in VSC. only solution to this problem
Prettier is an opinionated code formatter. It enforces a consistent style by parsing your code and re-printing it with its own rules that take the maximum line length into account, wrapping code when necessary.
include :
JavaScript
TypeScript
Flow
JSX
JSON
CSS
SCSS
Less
HTML
Vue
Angular
GraphQL
Markdown
YAML
https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode
I had similar problem, then I found out it was caused by 'beautify' extension. After I uninstalled the extension, everything is working fine.
After reading many great suggestions and workarounds, I discovered that I could simply place my mouse arrow down over the bright blue horizontal bar at the bottom of VSCode editor window - right click - which opens a popup list window - and deselected = "Editor Indentation".
You can double click JavaScript in the Status Bar at the bottom of VSCode, and then change the format from JavaScript to React (Choose React in the Select language mode to associate with '.jsx')
add this in your .js code,
/* prettier-ignore */