I cannot seem to be able to change the style of a node on click. I need to do this programatically to keep track of two nodes in the graph, basically to have two nodes 'selected' at same time, with each being a different type I define. There are examples such at the one here (http://js.cytoscape.org/#eles.addClass) that 'drops' a new style in the sheet for certain nodes. I don't understand how these classes work, where they are defined in the stylesheet and on what event they can be used.
The docs for the library does not provide an actual explanation of classes, where to define them and what they can be used for. Any help is much appreciated.
I think of the classes as like css classes. When you first initialised cytoscape you can have an optional style parameter like ...
var cy = cytoscape({
style: [
{
selector: '.myFirstClass',
style: {
'background-color': 'red',
'shape': 'rectangle'
...
},
{
selector: '.mySecondClass',
style: {
'background-color': 'blue',
'shape': 'triangle'
...
}
});
Now when you change the style of a node it will reflect what you set in the stylesheet. So...
cy.$('#nodeA').classes('mySecondClass');, where #nodeA is the id of your node. This will turn your first node into a blue triangle.
Hope that helped.
Related
So my question really isn't should I, but rather can I.
If I opt to use styled components for my more common components then I style them once and export.
const MyBlueButton = styled('button')({
backgroundColor: 'blue'
})
Great export that and I have a blue button.
I can also use sx
const MyBlueButton = (props) => {
return <button sx={{backgroundColor: 'blue'}}>{props.children}</button>
}
My question is can I have both, one where I've already made my common component but then want to customize it just a bit unique for one use.
'components/buttons.jsx':
export const MyBlueButton = styled('button')({
backgroundColor: 'blue'
})
--------
'FooBar.jsx':
import {MyBlueButton} from 'components/buttons'
const FooBar = (props) => {
return (
<div>
<p>Some text</p>
<MyBlueButton sx={{fontSize: '20px'}}>Large Blue Button</MyBlueButton>
</div>
)
}
I didn't find anything stating that you couldn't do it. I'm sure you quite possibly can, but can you, and what would be the expected order of css properties?
If I have a styled component with a matching css property in the sx prop would sx win since it's closer to the render? Should I have to worry about injection order with the StyledEngineProvider?
I'm really just hoping I can use a healthy mix of both styled components and one off sx modifications.
I went ahead and made a codesand box to test my idea and it does work to combine both styled wrappers and sx props.
Again probably not for everyday use, but it's nice to know it is possible.
CodeSandbox: https://codesandbox.io/s/keen-roman-s6i7l?file=/src/App.tsx
I have been into such issue;
the way I had to implement the sx props to be passed before passing the component to styled engine was neglecting the props:
const AutoComplete = withThemeProvider(styled(Autocomplete)(autoCompleteStyles));
and when to use it, it gets neglected
<Autocomplete sx={neglectedProps}>
How can I change a style of a component easy? I just want limit a text-field height in a sanity user inerface.
It is uncomfortable to scroll all the text every time. Where can I write something like that:
{
overflow-y: auto;
height: 200px;
}
From the screenshot provided in the question, it seems you're using rexxars markdown plugin for Sanity. When defining the markdown field in your schema, you have some options to choose from. I'm guessing what you want is a low minimum number of rows and to disable auto grow? E.g.:
export default {
name: 'blogPost',
title: 'Blog Post',
type: 'document',
fields: [
// ... other blogPost fields
{
name: 'body',
title: 'Body',
type: 'markdown',
options: {
minRows: 10,
autoGrow: false
}
}
]
}
If the options you need aren't available, try creating an issue or submit a pull request, proposing the change you need?
I've tried patch-package. Just followed instructions in the package.
Using vue-chartjs is it possible to change to color of the bar?
This is similar to this question which is based on chart.js
chart.js bar chart color change based on value, and the jsfiddle provided in the answer is exactly what I'm looking for, except within vue-chartjs.
Any help appreciated
So this should be your chart calling (in my case, I named it bar-chart)
<bar-chart
:chart-data="barData"
:options="barChartOptions">
</bar-chart>
:chart-data and :options are 2 props defined when I create my bar component:
Vue.component('bar-chart', {
extends: VueChartJs.Bar,
props: ['chartData', 'options'],
So your barData, should be an object like this:
{datasets: [...], labels: [...]}
Your dataset is an array with the charts you want to show. So if you want to show only 1 data, than your array only has one position. So let's assume that by now. We'll use dataset = dataset[0]
Your dataset accepts some properties, 2 of them are a must:
Data (an array with the data you want to show)
Label (the name of the label when you hover on the bardata. It should display "Label: value"
It also accepts some other properties like:
fill
hoverBackgroundColor
backgroundColor
check more here: https://www.chartjs.org/docs/latest/charts/bar.html
so now, your backgroundColor property is either a color value (e.g. red, #FF0000), or an array.
If it is an array, then this should be true dataset.bgColors.length === dataset.data.length
and each dataset.bgColors array position is the color of the respective value in the dataset.data array.
dataset: {
data: [1,2,-3,-4,2,1]
backgroundColor: ['green', 'green', 'red', 'red', 'green', 'green']
...
}
So now, you can just build a bgColors array with the color you want, based on your data.
------------- UPDATING THE DATA -----------------
To anybody else who is looking for a way to UPDATE your chart data after it was rendered. It's a different question, but to help the community:
When you set your chart component, you can define a watch for the chartData prop, so when the chartData changes, the method is called and you re-render the chart:
Vue.component('bar-chart', {
extends: VueChartJs.Bar,
props: ['chartData', 'options'],
methods: {
renderLineChart () {
this.renderChart(this.chartData, this.options)
}
},
mounted () {
this.renderLineChart()
},
watch: {
chartData: function () {
this.$data._chart.destroy()
this.renderLineChart()
}
}
})
IMPORTANT: Make sure you make a new copy of the new chartData object info because the watch will only check if the object itself changed, not its inner properties.
However, if you really want to change ONLY the dataset.data or dataset.backgroundColor or any other, than the watcher will not know it changed. You can use the property deep: true in the watcher for this, as it will check changes deep inside the chartData object:
watch:
chartData: {
handler: function () {
this.$data._chart.destroy()
this.renderLineChart()
},
deep: true
}
}
I hope the answer was clear for everyone.
Best regards
There was an issue requesting documentation for theming which the author subsequently closed. The author found their answer. A non-programmer will probably not. At least, the non-programmer designer I'm helping doesn't even know where to start (and I still don't have a working different colored slider). This kind of documentation would be great. Even if it's just a link to the code #jdelafon found with some explanation that would suffice to answer the following specific example.
Ultimately, we want a set of sliders with each one a different color. It seems like the appropriate way to do this is with per-element inline styles.
I made a simple example here. Can you change the color of the slider? (We started down the path of breaking out to CSS, but the widget is so dynamic that this approach ends up being quite ugly.)
Slider has two different slots for theming, neither of which seems to respond to an embedded object with a selectionColor key.
Should be simple. Probably it is, but it appears to be undocumented. Otherwise it's a rad UI toolkit, thanks devs!
Take a look at this line of getMuiTheme.js. You can find there that slider can have those styles overridden:
{
trackSize: 2,
trackColor: palette.primary3Color,
trackColorSelected: palette.accent3Color,
handleSize: 12,
handleSizeDisabled: 8,
handleSizeActive: 18,
handleColorZero: palette.primary3Color,
handleFillColor: palette.alternateTextColor,
selectionColor: palette.primary1Color,
rippleColor: palette.primary1Color,
}
In material-ui you need to use MuiThemeProvider in order to use your custom theme. Taking your example:
...
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import getMuiTheme from 'material-ui/styles/getMuiTheme';
import { Slider } from 'material-ui';
const theme1 = getMuiTheme({
slider: {
selectionColor: "red",
trackSize: 20
}
})
const theme2 = getMuiTheme({
slider: {
selectionColor: "green",
trackSize: 30
}
})
const HelloWorld = () => (
<div>
...
<MuiThemeProvider muiTheme={theme1}>
<Slider defaultValue={0.5}/>
</MuiThemeProvider>
<MuiThemeProvider muiTheme={theme2}>
<Slider defaultValue={0.5}/>
</MuiThemeProvider>
</div>
);
export default HelloWorld;
Your modified webpackbin: http://www.webpackbin.com/EyEPnZ_8M
The sliderStyle you tried to use is for different styles :-) Like marginTop / marginBottom, a full list can be found here.
I use primefaces 4.0 barchart, but i want to modify some default proprieties. This is my xhtml page
<p:barChart id="chart" value="#{marchebean.model}" legendPosition="ne" xaxisLabel="Année" yaxisLabel="Montant en DT" title="Factures payés par années" />
What i want to do
1.I want to separate between hundreds , thousands and millions in y axis by a space i.e changing the format of my numbers , i use NumberFormat.getNumberInstance(Locale.FRANCE).format(mynumber); in java but i don't know how to achieve this with charts in primefaces.
I want to display on the top of every bar the value setted in backing bean and change it's size.
Edit
Separation between thousand done, but i still don't know how display values above every bar or change their size. this is my new code
<p:barChart id="chart" value="#{marchebean.model}" extender="ext" style="height:600px;" legendPosition="ne" xaxisLabel="Année" yaxisLabel="Montant en DT" title="Factures payés par années" />
<script type="text/javascript">
function ext() {
this.cfg.axes.yaxis.tickOptions = {
formatString: "%'i"
};
this.cfg.seriesDefaults={
renderer: $.jqplot.BarRenderer,
pointLabels:{show:true}
},
$.jqplot.sprintf.thousandsSeparator = ' ';
}
</script>
First question
You can fulfill your need #1 using an extender.
Here's the related excerpt from Primefaces' manual regarding extenders:
3.14.15 Extender Chart API provide high level access to commonly used jqplot options however there are many more customization options
available in jqplot. Extender feature provide access to low level apis
to do advanced customization by enhancing the configuration object,
here is an example to increase shadow depth of the line series where
model's extender property is set to "ext".
<p:chart type="line" model="#{bean.model}" />
function ext() {
//this = chart widget instance
//this.cfg = options
this.cfg.seriesDefaults = {
shadowDepth: 5
};
}
Refer to jqPlot docs for available options.
Note: in Primefaces 4.0, the extender function name is provided as an attribute of the component tag, eg. <p:barChart extender="ext" .../>
To use whitespaces as thousands separator, use the following extender:
function ext() {
this.cfg.axes.yaxis.tickOptions = {
formatString: "%'i"
};
$.jqplot.sprintf.thousandsSeparator = ' ';
}
Second question
You will also manage to do it making some tweaking in your extender.
For example, the following piece of configuration will display values above every bar:
seriesDefaults: {
renderer: $.jqplot.BarRenderer,
pointLabels:{show:true}
},
And just use some CSS to change the size!
--
Zim