I have an optional feature for a chart that adds a renderer.text text object. When the chart is exported I would like this to be added only in that case. Below I have source code on how I have been accessing the renderer and the exporter. In the commented section Insert Here is where I was thinking it might go but I am unsure of the syntax. Thank you
myChart.renderer.text('Filtered', 5, 10)
.attr({rotation: 0})
.css({color: '#4572A7', fontSize: '8px', fontStyle:'italic'})
.add();
myChart.exportChart(null,
{chart:
{backgroundColor: '#FFFFFF', width: 972, height:480 /*Insert Here*/
}
}
);
You are right - there you should use load event to add extra text for exported image: http://jsfiddle.net/3bQne/88/
chart.exportChart(null, {
chart: {
backgroundColor: '#FFFFFF',
width: 972,
height: 480,
events: {
load: function () {
this.renderer.text('Filtered', 5, 10)
.attr({
rotation: 0
})
.css({
color: '#4572A7',
fontSize: '8px',
fontStyle: 'italic'
})
.add();
}
}
}
});
Related
I'm attempting a theme type system, where i can create themes as json files, and then style my app based on it. For the most part all of it works except 2 parts for some reason,
Text Color
Background Colors
So everything else is styled correctly, but the backgroundColor and text colors just wont for some reason. I have checked multiple times over that the theme's values are available, console.log prints them fine too. There's no error message, and other styling from the theme works fine.
Here's where i load in the themes
const themes = {
DEFAULT: require('./../assets/themes/default.json')
};
let theme = {};
function loadDefaultTheme() {
parseTheme(themes.DEFAULT);
}
function parseTheme(json) {
theme.name = json.name;
theme.backgroundColor = json.backgroundColor;
theme.navBackgroundColor = json.navBackgroundColor;
theme.blueColor = json.blueColor;
theme.redColor = json.redColor;
theme.darkBlueColor = json.darkBlueColor;
theme.placeholderColor = json.placeholderColor;
theme.buttonTextColor = json.buttonTextColor;
theme.textColor = json.textColor;
theme.iconColor = json.iconColor;
theme.iconActiveColor = json.iconActiveColor;
theme.navTextColor = json.navTextColor;
theme.navActiveTextColor = json.navActiveTextColor;
}
module.exports = {
themes: themes,
theme: theme,
loadDefaultTheme: loadDefaultTheme,
parseTheme: parseTheme
};
Here's my styling
const welcomeStyles = StyleSheet.create({
background: {
flex: 1,
width: Info.WINDOW_WIDTH,
height: Info.WINDOW_HEIGHT
},
logo: {
width: '50%',
height: '50%',
alignSelf: 'center'
},
text: {
color: ThemeParser.theme.textColor,
alignSelf: 'center',
fontFamily: 'Arial',
},
appNameText: {
fontWeight: 'bold',
fontSize: 30,
marginTop: -60
},
descText: {
fontSize: 22
},
loginView: {
width: Info.WINDOW_WIDTH,
height: Info.WINDOW_HEIGHT * 0.6,
backgroundColor: ThemeParser.theme.backgroundColor,
borderTopColor: '#FE5656', borderTopWidth: 4,
paddingTop: 25
}
});
Finally, my theme:
{
"name": "Default",
"backgroundColor": "#1D1D1D",
"navBackgroundColor": "#343434",
"blueColor": "#05b7ed",
"redColor": "#FF5757",
"darkBlueColor": "#047A9E",
"placeholderColor": "#545454",
"buttonTextColor": "white",
"textColor": "white",
"iconColor": "#047A9E",
"iconActiveColor": "#05B7ED",
"navTextColor": "#C1C1C1",
"navActiveTextColor": "white"
}
I have this bit elsewhere but this works for some reason...
<TouchableOpacity style={[global.globalStyles.halfButton, {backgroundColor: ThemeParser.theme.redColor}]} />
Edit: Components which the styles are not being applied. They work fine when i statically type a color like 'white' or '#1d1d1d'
<View style={styles.loginStyles.loginView}>
<Input
placeholder='Token'
placeholderTextColor={ThemeParser.theme.placeholderColor}
returnKeyType='done'
inputStyle={styles.loginStyles.token}
leftIcon={<Ionicons name='md-key' size={32} color={ThemeParser.theme.blueColor} />}
onChangeText={text => this.setState({token: text})}
/>
<View style={{flex: 1, justifyContent: 'flex-end'}}>
<View style={{flexDirection: 'row'}}>
<TouchableOpacity style={[global.globalStyles.halfButton, {backgroundColor: ThemeParser.theme.blueColor, borderRightColor: 'black', borderRightWidth: 4}]} onPress={() => AniListAuth.getALCode()}>
<Text style={global.globalStyles.buttonText}>Get Code</Text>
</TouchableOpacity>
<TouchableOpacity style={[global.globalStyles.halfButton, {backgroundColor: ThemeParser.theme.redColor}]} onPress={() => AniListAuth.login(this.state.token)}>
<Text style={global.globalStyles.buttonText}>Sign In</Text>
</TouchableOpacity>
</View>
</View>
The background color for the TouchableOpacity seems to work fine, but not for the View background color or Text color
Edit2: Here's a snack of the project thus far if my code above isn't as clear... http://snack.expo.io/Hk1_2AOtr
Check out the working snack.
This is because you are exporting the theme object before you are parsing it.
Your theme object is empty when you are exporting but you are parsing and adding properties to your object after it is exported which means you are calling themeParser.loadDefaultTheme() later in your code, by the time the empty theme object has already been exported.
It would be better if you use your themes object in your ThemeParser.js file:
const themes = {
DEFAULT: require('./../assets/themes/default.json')
};
module.exports = {
themes: themes,
theme: theme,
loadDefaultTheme: loadDefaultTheme,
parseTheme: parseTheme
};
and use it in GlobalStyles like so:
buttonText: {
color: ThemeParser.themes.DEFAULT.textColor,
fontWeight: 'bold',
fontSize: 20
}
And in WelcomeStyles like so:
text: {
color: ThemeParser.themes.DEFAULT.textColor,
alignSelf: 'center',
fontFamily: 'Arial',
},
loginView: {
width: Info.WINDOW_WIDTH,
height: Info.WINDOW_HEIGHT * 0.6,
backgroundColor: ThemeParser.themes.DEFAULT.backgroundColor,
borderTopColor: '#FE5656', borderTopWidth: 4,
paddingTop: 25
},
You can make the checks according to your needs when you want to load the themes object or theme object.
I have the following render function:
render() {
return (
<View style={styles.container}>
<View style={styles.header}>
<Text> Header
</Text>
</View>
<View style={styles.services}>
<Text>Services</Text>
</View>
<View style={styles.chart}>
<VictoryChart>
<VictoryLine
style={{
data: {stroke: "#c43a31"},
parent: {border: "1px solid #ccc"}
}}
data={[
{x: 1, y: 2},
{x: 2, y: 3},
{x: 3, y: 5},
{x: 4, y: 4},
{x: 5, y: 7}
]}
/>
</VictoryChart>
</View>
</View>
);
}
I have some sort of chart in the bottom section of page, But I cannot force the chart to fill the its parent, It kind of overflows from its dedicated section, How can I achieve this?(I tried to use flexWrap but it is no help !)
Here is the preview of what it looks like now:
And here is my style sheet for this simple design:
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#F5FCFF',
},
header: {
flex: 1,
backgroundColor: '#e7fe52'
},
services: {
flex: 4,
backgroundColor: '#20fe23'
},
chart: {
flex: 2,
flexWrap: 'wrap',
backgroundColor: '#4fccb0'
}
});
VictoryChart seems to have a default height of 300 and it doesn't adapt to its parent height. So, one way to solve this would be to remove the flex: 2 attribute from the chart style and add manually calculated dimensions. Something like this:
const chartHeight = Dimensions.get("window").height * 0.3;
const chartWidth = Dimensions.get("window").width;
<VictoryChart height={chartHeight} width={chartWidth} >
<VictoryLine
style={{
data: {stroke: "#c43a31"},
parent: {border: "1px solid #ccc"}
}}
data={[
{x: 1, y: 2},
{x: 2, y: 3},
{x: 3, y: 5},
{x: 4, y: 4},
{x: 5, y: 7}
]}
/>
</VictoryChart>
// styles
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#F5FCFF',
},
header: {
flex: 1,
backgroundColor: '#e7fe52'
},
services: {
flex: 4,
backgroundColor: '#20fe23'
},
chart: {
//remove flex from here
backgroundColor: '#4fccb0'
}
});
Although this is not perfect it works, but I would set a minimum height for the chart. I mean if the available space is too small, it won't look nice.
In this case you could wrap your screen inside a ScrollView.
each flex container is one flex try to divide your component into 1
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#F5FCFF',
},
header: {
flex: 0.15,
backgroundColor: '#e7fe52'
},
services: {
flex: 0.5,
backgroundColor: '#20fe23'
},
chart: {
flex: 0.35,
flexWrap: 'wrap',
backgroundColor: '#4fccb0'
}
});
0.15 + 0.5 + 0.35 = 1
I'm trying to get results such as this in my MUI Button -
http://jsfiddle.net/bcGdJ/3160/
I ended up with this, but it seems that both before and after css selectors doesn't work.
import React from "react";
import Button from "#material-ui/core/Button";
import Notifications from "#material-ui/icons/Notifications";
import "./box.css";
const styles = {
color: 'purple',
backgroundColor: 'gray',
minWidth: '40px',
minHeight: '40px',
borderRadius: 1,
position: "relative",
"&:before,&:after": {
content: '',
position: "absolute",
bottom: 0,
left: 0,
borderColor: "transparent",
borderStyle: "solid"
},
"&:before": {
borderWidth: "8px",
borderLeftColor: "#efefef",
borderBottomColor: "#efefef",
},
"&:after": {
borderRadius: "3px",
borderWidth: "5px",
borderLeftColor: "#fff", /* color of the triangle */
borderBottomColor: "#fff" /* color of the triangle */
}
};
function CustomizedInputs(props) {
return (
<div id="container">
<Button color="primary" style={styles}>
<Notifications />
</Button>
</div>
);
}
export default CustomizedInputs;
```
https://codesandbox.io/s/72jyr75461
Any help would be appreciated
Your code is nice but you missed some simple points.
You need to use content: "''" instead of content: "".
You need to use :: instead of : for before and after.
cssRoot: {
color: theme.palette.getContrastText(purple[500]),
backgroundColor: purple[200],
minWidth: "40px",
minHeight: "40px",
borderRadius: 1,
position: "relative",
"&::before,&::after": {
content: "''",
position: "absolute",
bottom: 0,
left: 0,
borderColor: "transparent",
borderStyle: "solid"
},
"&::before": {
borderWidth: "8px",
borderLeftColor: "#efefef",
borderBottomColor: "#efefef"
},
"&::after": {
borderRadius: "3px",
borderWidth: "5px",
borderLeftColor: "#fffff" /* color of the triangle */,
borderBottomColor: "#fffff" /* color of the triangle */
}
}
https://codesandbox.io/s/541v247qlp
I was able to create a custom element utilizing answers from this question:
Using predefined SVG file for creating a custom JointJS shape with ports
After reviewing the tutorials for JointJS I don't see how to move the ports to different locations on the element.
Thanks
Example code:
http://jsfiddle.net/jshubert/9a8brrun/
var el1 = new joint.shapes.devs.Model({
markup: '<g class="rotatable"><g class="scalable"><image class="body"/></g><text class="label"/><g class="inPorts"/><g class="outPorts"/></g>',
size: {
width: 100,
height: 100
},
position: {
x: 50,
y: 75
},
attrs: {
'.label': { text: 'SW_1', 'ref-x': .1, 'ref-y': .01},
'.body': {
width: 1024,
height: 768,
'xlink:href': 'data:image/svg+xml;utf8,' + encodeURIComponent(svgFile),
preserveAspectRatio: 'none'
}
},
inPorts: ['1'],
outPorts: ['2']
});
ref-x, ref-y applied on appropriate selector can do the trick eg.
'.inPorts .port0 .port-body' : {'ref-x': -20, 'ref-y': -20}
http://jsfiddle.net/9a8brrun/1/
I m new to jointJS, I need to create custom shapes using JointJS, I have tried creating the diamond shape using the Rectangle, making its height and width same, and then rotate by 45 degrees as follows,
var diamond = new joint.shapes.basic.Rect({
position: { x: 100, y: 100 },
size: { width: 100, height: 100 },
attrs: { diamond: { width: 100, height: 30 } }
});
diamond.attr({
rect: { fill: '#cccccc', 'stroke-width': 2, stroke: 'black' },
text: {
text: 'Diamond', fill: '#3498DB',
'font-size': 18, 'font-weight': 'bold',
'font-variant': 'small-caps',
'text-transform': 'capitalize'
}
});
diamond.rotate(45);
However, the text present inside the rectangle also gets rotated, Any Ideas how can i proceed.... Also I need to create hexagon with a label... Any help will be much appreciated ....
Thanks In Advance,
Mayuri
There is no need to rotate the whole element. Try to add a transform attribute to joint.dia.basic.Rect model.
rect: { transform: 'rotate(45)' }
The other option would be to use joint.dia.basic.Path model.
var diamond = new joint.shapes.basic.Path({
size: { width: 100, height: 100 },
attrs: {
path: { d: 'M 30 0 L 60 30 30 60 0 30 z' },
text: {
text: 'Diamond',
'ref-y': .5 // basic.Path text is originally positioned under the element
}
}
});
In order to achieve a hexagon shape, use the joint.dia.basic.Path model again, but this time use the following path data.
path: { d: 'M 50 0 L 0 20 0 80 50 100 100 80 100 20 z'}
Last but least you can create a custom shape with SVG Polygon in its markup.
Thanks a lot Roman, I followed first solution for diamond and it worked liked a charm!!
here is this for any one looking to make diamond shape using joint.js, I have added the following in joint.js
joint.shapes.basic.Diamond = joint.shapes.basic.Generic.extend({
markup: '<g class="rotatable"><g class="scalable"><rect/></g><text/></g>',
defaults: joint.util.deepSupplement({
type: 'basic.Rect',
attrs: {
'rect': { fill: '#FFFFFF', stroke: 'black', width: 1, height: 1,transform: 'rotate(45)' },
'text': { 'font-size': 14, text: '', 'ref-x': .5, 'ref-y': .5, ref: 'rect', 'y-alignment': 'middle', 'x-alignment': 'middle', fill: 'black', 'font-family': 'Arial, helvetica, sans-serif' }
}
}, joint.shapes.basic.Generic.prototype.defaults)
});
And for its implementation as follows,
var diamond = new joint.shapes.basic.Diamond({
position: { x: 100, y: 100 },
size: { width: 100, height: 100 },
attrs: { diamond: { width: 100, height: 30 } }
});
diamond.attr({
rect: { fill: '#cccccc', 'stroke-width': 2, stroke: 'black' },
text: {
text: 'Diamond', fill: '#3498DB',
'font-size': 18, 'font-weight': 'bold',
'font-variant': 'small-caps',
'text-transform': 'capitalize'
}
});