We Keep Coding

To resize and make the Violin chart of PotlyJS responsive

I want the violin chart (I'm using plotlyjs library) to be responsive. But also don't want it to compress so much (it is compressing according to the div it is kept in).
I have tried to turn the autosize property of violin to be false and then set the height and width. In this case the chart does not compress (stays the way I want it to be), but it loses its responsiveness. Is there a way to make this chart responsive yet no so compressed?
Here is my code:
<Plot
config = {{ displayModeBar: false }}
data={[
{
type: 'violin',
y: this.props.data,
points: 'none',
box: {
visible: true
},
boxpoints: false,
line: {
color: 'red'
},
opacity: 0.6,
meanline: {
visible: true
},
x0: "OEE"
}
]}
layout={{
title: "Comparison",
yaxis: {
zeroline: false
},
// autosize: false,
// height: 300,
// width: 500,
// responsive: true
}}
useResizeHandler= {true}
style= {{width: "100%", height: "100%"}}
/>
The div inside which violin is kept:
<div className="chart-wrapper" style={{ height: "35vh" }}>
<ViolinChart data={this.state.violinChartData} />
</div>

I got the solution to the above question.
PlotlyJS also provides a "margin" property for its charts. So providing margins will let you adjust the chart the way you want it to be
var layout = {
margin: {
l: 25,
r: 25,
b: 25,
t: 25
}
};
This is what i added to my code. Setting automargin = true will automatically increase the margin size.
More about this can be found here.

Migrating from Cytoscape JS 3.2.22 to 3.3.0: Graph doesn't render and browser window crashes

I have a node js application that visualises a graph using Cytoscape JS. I wanted to use the new feature of taxi edge style in 3.5.2, but everytime I render the graph the page freezes and crashes after a while with version 3.5.2. Also the CPU usage spikes to ~100%. I use the Cytoscape instance as part of a class.
I have traced it back to the migration from Cytoscape JS 3.2.22 to 3.3.0. But that is all I could find. I examined the changelogs in the Cytoscape JS repo, but couldn't find anything that seemed relevant, except: https://github.com/cytoscape/cytoscape.js/issues/2311. This leads to #2295, the fix there didn't help either. So I guess that was not related either.
this.renderedGraph = Cytoscape({
container: $(`#${graphID}`),
style: Cytoscape.stylesheet()
.selector("node")
.css({
"content": "data(graphAbbrev)",
"text-wrap": "wrap",
"padding": "4px",
"width": "label",
"height": "label",
"text-valign": "center",
"text-halign": "center",
"shape": "roundrectangle",
"background-color": `mapData(weight, 0, ${
this.maxNodeWeight
}, #1cb5e0, #000046)`,
"color": "white"
})
.selector("edge")
.css({
"line-fill": "linear-gradient",
"text-margin-x": "20px",
"text-rotation": "autorotate",
"label": "data(weight)",
// "curve-style": "taxi",
// "taxi-direction": "downward",
// "taxi-turn": 20,
// "taxi-turn-min-distance": 5,
"target-arrow-shape": "triangle",
"target-arrow-color": `mapData(weight, 0, ${
this.maxEdgeWeight
}, #E6DADA, #274046)`,
"line-color": `mapData(weight, 0, ${
this.maxEdgeWeight
}, #E6DADA, #274046)`
}),
layout: {
name: "preset",
fit: true,
padding: 30
},
elements: {
nodes: this.nodes,
edges: this.edges
}
});
I would expect this to render the usual graph as it does in 3.2.22, but no luck with anything from 3.3.0 and above.

Breakpoints using SkelJS - Adjustments for widescreen monitor?

I'm working with a responsive site with a SkelJS framework. Overall, I'm happy with the site, but I'm having an issue widening a jquery slideshow on the home page for wide monitors. It looks fine on mobile, tablet and my laptop screen, but when I push it over to my large monitor, I don't like the space between the left and right of the slide show and the edge of the screen.
The config.js file is setup as follows:
window._skel_config = {
prefix: 'css/style',
resetCSS: true,
boxModel: 'border',
grid: {
gutters: 50
},
breakpoints: {
'mobile': {
range: '-480',
lockViewport: true,
containers: 'fluid',
grid: {
collapse: true,
gutters: 10
}
},
'desktop': {
range: '481-',
containers: 1200
},
'1000px': {
range: '481-1200',
containers: 960
}
}
};
I'm learning the js side as I go, so if anyone wanted to give me a layman's response, I'd be sincerely grateful.
I'm trying to understand why the "desktop" breakpoint would range from '481-_' and have a container size of 1200 and the "1000px" breakpoint would go from '481-1200' with a 960 container.
I've played around with adjusting the '1000px' parameters to include larger sizes (up to 1900) and adjusting the container size, but it destroys all of my CSS formatting.
The site in question is www.rmcabinetry.com.
Thanks in advance for any help!!! This community has been an awesome resource. I'm trying not to abuse it.

Per their docs,
"Note: Since breakpoint ranges are allowed to overlap, more than one can be active at any given time. When this happens, the options of each are combined in order with those defined last taking precedence."
This would suggest the containers will equal 1200 if the screen width is 481 and above but not when it is lower than 1200.
In the template you are using from HTML5UP, the slideshow is wrapped in a parentDiv which has a banner background image that is scaling to avoid the gaps on the left and right.

Your settings look a little muddled. Try adjusting them so that your defaults come first (i.e. are loaded first, which is why "range: '*'," is first below) and are followed by breakpoints breaking down the range that will then override them (via order of precedence). Also, state ranges as shown below, with the - before the number (I think this will solve your problem). I would also vary your gutters and change them across ranges for better effects. Try these:
{
prefix: 'css/style',
resetCSS: true,
boxModel: 'border',
containers: 1200,
useOrientation: true,
breakpoints: {
'widest': { range: '*', containers: 1360, grid: { gutters: 50 }, hasStyleSheet: false },
'wide': { range: '-1680', containers: 1200, grid: { gutters: 40 } },
'normal': { range: '-1280', containers: 960, grid: { gutters: 30 }, lockViewport: true },
'narrow': { range: '-1000', containers: '100%', grid: { gutters: 25, collapse: true }, lockViewport: true },
'mobile': { range: '-640', containers: '100%', grid: { gutters: 10, collapse: true }, lockViewport: true }
}
You then need to make a css page for each of these breakpoints (except 'widest', as stated above) to adjust their individual styles (i.e. 'css/style-wide.css', 'css/style-normal.css', 'css/style-narrow.css', 'css/style-mobile.css'). The prefix setting will find them so long as you link them via 'css/style' as the beginning part of your link href. Adjusting styles in these sheets will only affect the style at the size you desire, giving you the freedom to make the adjustments you seek.

jsPlumb Endpoint offset

First of all let me say I'm kind of new to jQuery and I'm definately new to jsPlumb altough I have checked the official documentation I've not been able to get a solution to this problem.
I have 2 draggable div elements that each have an endpoint so I can connect them to each other. The problem is when I make the connection and then drag any of the div elements around the arrow image I'm using isn't properly placed where it should be (I'm using ["RightMiddle", "LeftMiddle"] for the anchors).
Is there a way to make the images stick at the middle-right (or left) side of the div elements and not get out of place?
Here's the jsFiddle link for what I have so far, and here's the code:
$(document).ready(function () {
jsPlumb.draggable($('.table'), {
containment: '#schema'
});
var endpointOptions = {
isSource: true,
isTarget: true,
endpoint: ["Image", {
url: "http://i43.tinypic.com/1z31ac2.gif"
}],
style: {
fillStyle: 'gray'
},
maxConnections: -1,
connector: ["Flowchart", {
curviness: 5
}],
connectorStyle: {
lineWidth: 3,
strokeStyle: 'gray'
},
anchors: ["RightMiddle", "LeftMiddle"],
scope: "gray"
};
var ep01 = jsPlumb.addEndpoint("container0", endpointOptions);
var ep02 = jsPlumb.addEndpoint("container1", endpointOptions);
jsPlumb.connect({
source: ep01,
target: ep02
});
});

To make the images stick at the middle-right (or left) side of the div elements, instead of specifying both RightMiddle and LeftMiddle you can simply specify any one.
anchors: "RightMiddle", // For your image Right position suits the best

jquery bookshelf Slider modifications

I am creating book shelf using jquery bookshelf Slider. Its Working good but i need some modifications in my book self.
Our Book self demo link
Book shelf demo
Our modifications are given below :
Default load time title and icons are hide.
if we need to click title or icons. show the title or icon.
Our Script is given below
<script type="text/javascript">
jQuery(document).ready(function() {
//define custom parameters
$.bookshelfSlider('#bookshelf_slider', {
'item_width': '100%', //responsive design > resize window to see working
'item_height': 320,
'products_box_margin_left': 30,
'product_title_textcolor': '#ffffff',
'product_title_bgcolor': '#c33b4e',
'product_margin': 20,
'product_show_title': true,
'show_title_in_popup': true,
'show_selected_title': true,
'show_icons': true,
'buttons_margin': 15,
'buttons_align': 'center', // left, center, right
'slide_duration': 800,
'slide_easing': 'easeOutQuart',
'arrow_duration': 800,
'arrow_easing': 'easeInOutQuart',
'video_width_height': [500,290],
'iframe_width_height': [500,330]
}
);
});//ready
</script>
We are already try to change the 'product_show_title': true, to
'product_show_title': false,
But its not working for me. so please advise..

Set the opacity of the title and icons properly after plugin initialization.
//define custom parameters
$.bookshelfSlider('#bookshelf_slider', {
'item_width': 605,
'item_height': 720,
'products_box_margin_left': 30,
'product_title_textcolor': '#ffffff',
'product_title_bgcolor': '#c33b4e',
'product_margin': 30,
'product_show_title': true,
'show_title_in_popup': true,
'show_selected_title': true,
'show_icons': true,
'buttons_margin': 15,
'buttons_align': 'center', // left, center, right
'slide_duration': 800,
'slide_easing': 'easeInOutExpo',
'arrow_duration': 800,
'arrow_easing': 'easeInOutExpo',
'video_width_height': [600,600],
'iframe_width_height': [600,600]
}
);
$(".show_hide_titles, .show_hide_icons").css('opacity','0.5');
$(".product_title, .icons_sprite").css('opacity','0');
DEMO