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
Related
I am really struggling to find out how to set these colorization for syntax highlighting in Visual Studio Code and was hoping someone might know. As I have come to understand this is the "standard" for react.
i.e. green return statements, red jsx/html elements etc
This is a screenshot of my current text editor "font color theme" and the theme I am looking to change to.
The image as I said contains two sections,
The top section is how my VSCode looks right now
And the bottom section is how I want it to look.
I have looked for too many hours and I cannot figure it out.. Thanks in advance
You can customize your theme. First open the token inspector by executing the Developer: Inspect Editor Tokens and Scopes command from the command palette:
It looks something like this:
You can then use the textmate scopes at the bottom of the window to change their look in your JSON configuration:
"editor.tokenColorCustomizations": {
"textMateRules": [
{
"scope": [
"entity.name.function.ts",
],
"settings": {
"foreground": "#FF0000",
}
},
],
}
The above code would change the color of typescript functions to red.
Use the scope inspector in your react file to find the token names for the type of word you want to change the style of. For each token add a scope/settings pair to the config.
recently for my anycharts graph i used period and kept image in it
then in its click event i wrote some business logic and later i found that after click and executing business logic the Period is Highlighted as Orange How to get rid of this and its staying in the screen and its going after we click somewhere on the screen
do any one faced the same issue
here is the snap shapshot
of event code
private createChopPeriodObject(id: string, eventTime: Date, eventTimeMinuteValue: number,
noteText: string, userName: string): NoteEventPeriod {
return {
id: id,
start: eventTimeMinuteValue - 30000,
end: eventTimeMinuteValue + 30000,
label: { format: ''},
fill: {
src: 'assets/img/chop.png',
mode: 'fit'
},
stroke: 'none',
noteText: noteText,
userName: userName,
eventTime: eventTime,
eventTimeMinuteValue: eventTimeMinuteValue
} as ChopEventPeriod;
}
the Chop image is coming as orange upon clicking on it to invoke function
Chart elements support two states: normal and selected. You applied individual settings via data and it works well for a normal state. When a user clicks a period it switches to selected state appearance. In your case. the orange color is the default setting of the selected state.
Using the library API you can easily adjust state appearances. For details, check the sample.
The idea is to add only image source to the data and the rest of logic implement in a custom fill function that applies in normal and selected states.
This guide describes the idea of states. It's based on a Cartesian chart, but the idea is absolutely the same for Gantt charts.
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 use ant design bar chart in my react project.
https://codesandbox.io/s/9qmjm0k7yw
Doc: https://pro.ant.design/components/Charts
I want to show the data with x-axis as date format (29/09/2018 for example). If I show like 30 days, it would not have enough space for all the label so it looks weird.
I want to hide the label of bar chart. Like this
if (more than 15 days) chart shows label
else hide label
Or is there any way that I show the chart for 30 days but only show the label for let's say 10 days?
How can I hide the label?
Unfortunately what you want to do is not supported by Antd-Pro Charts. It is stated in the docs that they designed the charts components with focus on ease-of-use over customization.
However Antd-Pro Charts are just a simplified subset of BizCharts (which itself is a port of G2) with reduced api options. If you need complicated chart options consider using the parent BizCharts library instead. You can do what you want by adjusting the < Axis > object in BizCharts.
In my example below, I have used a Column chart with x field of "week" and y field of "views". I did not want to display the label on the x field.
render() {
// console.log(this.state.data)
const config = {
data: this.state.data,
title: {
visible: true,
text: 'Your Stats',
},
xField: 'week',
yField: 'views',
meta: {
week: {
alias: " "
}
}
};
return (
<React.Fragment>
<Column {...config} />
</React.Fragment>
);
}
The data used is as follows:
Which yielded this outcome:
In order to develop your own project, I strongly recommend that you keep all of your software business in your own project, and use third party libraries just for their own business, rather than manipulating your software business because they simply change these libraries and To apply these changes, you may need to do a lot of work.
it does not only give you more performance but also increases your ability to develop.
for your topic, you can simply get an array and handle whatever you want and pass your processed array to component
I've been trying to use the ng-grid 3.0 (ui-grid). I have managed to populate my grid and it's been very responsive and it's features are really amazing. But I'm trying to customize my column headers, as I need more info there.
I can create a custom header cell template, as indicated in the docs, but I don't seem able to use a Bootstrap Dropdown there, it gets cropped and I can't use it at all. Some googling got me thinking it is probably some issue with the overflow attributes, but still I can't solve it. My grid options is as follows:
$scope.columnDefs = [
{ name:'name', displayName: 'Vdd', headerCellTemplate: 'headerTemplate.html' },
{ name:'gender', headerCellTemplate: 'headerTemplate.html' },
{ name:'company' }
]
$scope.gridOptions = {
columnDefs: $scope.columnDefs,
rowTemplate: 'rowTemplate.html',
data: 'data'
};
I have forked an example in plunkr and managed to reproduce my issue:
http://plnkr.co/edit/qdrFiifiz18fxB8w6Aja?p=preview
I want to replace the built-in dropdown menu (since it doesn't seem to allow nesting and sub-menus) and add another one (so in the end, I'd have two dropdown menus in each header cell)
Any help is appreciated =)
I am proud to say I think I've figured it out. I've been digging through ui-grid's source code and narrowed it down to this block (lines: 2847 - 2852).
function syncHorizontalHeader(scrollEvent){
var newScrollLeft = scrollEvent.getNewScrollLeft(colContainer, containerCtrl.viewport);
if (containerCtrl.headerViewport) {
containerCtrl.headerViewport.scrollLeft = gridUtil.denormalizeScrollLeft(containerCtrl.viewport,newScrollLeft, grid);
}
}
I noticed that containerCtrl.headerViewport.scrollLeft was never getting set to newScrollLeft. A quick google search led me to this StackOverflow thread which says that you can't set the scrollLeft property of an element if it's overflow is set to visible.
My solution was to replace containerCtrl.headerViewport.scrollLeft = gridUtil.denormalizeScrollLeft(containerCtrl.viewport,newScrollLeft, grid); with containerCtrl.headerViewport.style.marginLeft = -gridUtil.denormalizeScrollLeft(containerCtrl.viewport,newScrollLeft, grid) + 'px'; which just sets a negative margin on the header. Then add an overflow:hidden; style to .ui-grid-render-container-body to hide headers that extend beyond the main grid viewport.
Doing this messed up the placement of column menus, but there is an easy fix. On line 514 replace var containerScrollLeft = renderContainerElm.querySelectorAll('.ui-grid-viewport')[0].scrollLeft; with var containerScrollLeft = renderContainerElm.querySelectorAll('.ui-grid-viewport')[0].style.marginLeft; to use the margin instead of the scroll value in the menu placement calculation.