I have an echart with a serie type:'custom' and I have a rendering issues on the labels.
I return this
return {
type: 'group',
children: [
{
type: 'rect',
ignore: !rectNormal,
shape: rectNormal,
style: { stroke: '#707070' }
},
{
type: 'rect',
ignore: !rectText,
shape: rectText,
strokeLinejoin: "round",
stroke: 'trasparent',
strokeWidth: 0,
style: api.style({
fill: 'transparent',
fontWeight: bigText? 600 : 100,
fontSize: bigText? 15 : 10,
textStroke: '#707070',
strokeLinejoin: "round",
strokeLinecap: "round",
textStrokeWidth: 3,
text: text,
textFill: '#ffffff'
})
}
]
And it' rendered like this
As you can see the text stroke have problem in rendering the M letters and the strokeLinejoin and strokeLinecap did not solve the problem.
Do someone know how to fix this?
I solved it this way
{
type: 'rect',
ignore: !rectText,
shape: rectText,
strokeLinejoin: "round",
stroke: 'trasparent',
strokeWidth: 0,
style: api.style({
fill: 'transparent',
fontWeight: bigText? 600 : 100,
fontSize: bigText? 15 : 10,
textStroke: '#707070',
lineJoin: "bevel",
textStrokeWidth: 3,
text: text,
textFill: '#ffffff'
})
}
Related
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 basically want to change the color of a JointJS shape in their RAPPID environment I'm trialing.
Here is some background on what I have so far and what I want to achieve:
I have a JointJS shape called ChristmasTree that extends joint.dia.Element.
Basically the svg string that builds this ChristmasTree object is a path of the tree (svg path element), and multiple ornaments on it (4 svg circles/ellipses which have id's and classes that I would assume I can use to modify the colors).
I set some initial values for the ornaments via the style attr inside the svg string.
Once I place that in the left RAPPID menu, the user can drag that one Christmas Tree with red balls on it, yay.
Question ###1:
But I would like to place a 2nd ChristmasTree shape in the left menu without creating another main object that has Green balls... How would I achieve this?
In my below code, christmas_tree_style_2 should override the .ornament class with
'fill': "#00ff00", but doesn't (in the left menu, its still red)?
In fact, christmas_tree_style_1, i also tried to override with a Blue ball 'fill': "#0000ff", but its still red.
How can I achieve a left-nav override of the shape?
Question ###2:
Pretend you help me resolve previous issue. You can drag and drop 2 multiple color ChristmasTree's from the left-menu nav into the main RAPPID content area.
I'd like to now change the colors dynamically through the inspector.
I added a color inspector that shows up in the RAPPID right-nav menu for every element with:
'ornament_fill': { label: 'Color of christmas-tree-ornament's fill', type: 'color', group: 'generalinfo', index: 2 }
But not sure how to create an event to dynamically change the color of the ornaments. Any idea? Thanks!
Here is the important part's of the code below.
And also here is an actual working example (but the left-nav initial override and right-nav Inspector color override dont work, hence my 2 questions):
http://armyofda12mnkeys.kissr.com/rappid_christmastree/index.html
(sorry i couldnt find a CDN for rappid.js to add to JSFiddle so it was easier to upload the folder to a site). The applicable files to my question are app.js and rappid-custom-shapes.js.
#
//svg for Christmas Tree + its ornaments... will be added to ChristmasTree shape/obj below
var ChristmasTreeSVGstr = "<g class="rotatable"><g class="scalable">
...
<path id="christmastreestrokeid" class="christmastreestroke" ... />
<circle id="ornament1" class="ornament" r="24" cy="350" cx="120"
style="fill:#ff0000;fill-rule:evenodd;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1">...</circle>
<ellipse id="ornament2" class="ornament" rx="30" ry="25" cy="83" cx="231"
style="fill:#ff0000;fill-rule:evenodd;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1">...</circle>
<ellipse id="ornament3" class="ornament" rx="28" ry="38" cy="343" cx="331"
style="fill:#ff0000;fill-rule:evenodd;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1">...</circle>
<ellipse id="ornament4" class="ornament" rx="63" ry="54" cy="238" cx="230"
style="fill:#ff0000;fill-rule:evenodd;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1">...</circle>
</g></g>";
#
//default Christmas Tree
joint.shapes.basic.ChristmasTree = joint.dia.Element.extend({
markup: ChristmasTreeSVGstr,
defaults: joint.util.deepSupplement({
type: "basic",
name: 'Initial Christmas Tree label text',
size: {
width: 20,
height: 20
},
attrs: {
".christmastreestroke": {
stroke: 'green',
'stroke-width': '100px',
'fill-opacity': 1,
width: 10,
height: 15
},
".ornament": {
'fill': "#00ff00",
'fill-opacity': 1
},
"#ornament3": {
'fill': "#0000FF",
'stroke': "green",
'stroke-width': '5px',
'fill-opacity': .5
}
}
}, joint.dia.Element.prototype.defaults)
});
#
//RAPPID left menu christmas trees (2 variations of the initial ChristmasTree object, so I need to override some of the colors)
var christmas_tree_style_1 = new joint.shapes.basic.ChristmasTree({
position: { x: 0, y: 0 },
size: {
width: 40,
height: 50
},
attr: {
".christmastreestroke": {
stroke: 'green',
'stroke-width': '100px',
'fill-opacity': 1,
},
".ornament": {
'fill': "#0000ff",
'fill-opacity': 1
},
"#ornament3": {
'fill': "#0000FF",
'stroke': "green",
'stroke-width': '5px',
'fill-opacity': .5
}
}
});
var christmas_tree_style_2 = new joint.shapes.basic.ChristmasTree({
position: { x: 0, y: 0 },
size: {
width: 40,
height: 50
},
attr: {
".christmastreestroke": {
stroke: 'blue',
'stroke-width': '100px',
'fill-opacity': 1,
},
".ornament": {
'fill': "#00ff00",
'fill-opacity': 1
},
"#ornament3": {
'fill': "yellow",
'stroke': "yellow",
'stroke-width': '5px',
'fill-opacity': 1
}
}
});
//add to left menu
stencil.load([christmas_tree_style_1, christmas_tree_style_2], 'customchristmastrees');
#
//add it to the inspector
function createInspector(cellView) {
if (!inspector || inspector.options.cellView !== cellView) {
if (inspector) {
// Set unsaved changes to the model and clean up the old inspector if there was one.
inspector.updateCell();
inspector.remove();
}
//if(cellView.$el.hasClass('class')) // certain element should get certain things more in inspector?
//how to determine different shapes?
inspector = new joint.ui.Inspector({
inputs: {
'name': { label: 'Name of Christmas Tree', type: 'text', group: 'generalinfo', index: 1 },
'ornament_fill': { label: 'Color of christmas-tree-ornaments fill', type: 'color', group: 'generalinfo', index: 2 },
},
groups: {
generalinfo: { label: 'General Info', index: 1 },
},
cellView: cellView
});
$('.inspector-container').html(inspector.render().el);
}
}
Question #1: you need to remove style properties from the markup if you want to change them through the attr property on the element. I removed the fill, stroke, stroke-width from the markup:
var ChristmasTreeSVGstr = "<g class="rotatable"><g class="scalable">
...
<path id="christmastreestrokeid" class="christmastreestroke" ... />
<circle id="ornament1" class="ornament" r="24" cy="350" cx="120"
style="fill-rule:evenodd;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1">...</circle>
<ellipse id="ornament2" class="ornament" rx="30" ry="25" cy="83" cx="231"
style="fill-rule:evenodd;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1">...</circle>
<ellipse id="ornament3" class="ornament" rx="28" ry="38" cy="343" cx="331"
style="fill-rule:evenodd;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1">...</circle>
<ellipse id="ornament4" class="ornament" rx="63" ry="54" cy="238" cx="230"
style="fill-rule:evenodd;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1">...</circle>
</g></g>";
then you can customize the shape as follows:
var rb = new joint.shapes.basic.ChristmasTree({
position: { x: 50, y: 50 },
size: { width: 100, height: 150 },
attrs: {
".ornament": {
'fill-opacity': 1,
stroke: 'pink',
'stroke-width': 5,
fill: 'blue'
}
}
});
Question #2:
in case you sorted out the issue #1 you can simply sync the values directly with the attrs:
inspector = new joint.ui.Inspector({
inputs: {
'name': { label: 'Name of Christmas Tree', type: 'text', group: 'generalinfo', index: 1 },
attrs: {
'.ornament': {
fill: {
label: 'Color of christmas-tree-ornaments fill',
type: 'color',
group: 'generalinfo',
index: 2
}
}
},
},
groups: {
generalinfo: { label: 'General Info', index: 1 },
},
cellView: cellView
});
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'
}
});
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();
}
}
}
});