I want to implement a trading view widget but its not taking the whole space of the wrapper div
I am embedding the chart from this website https://www.tradingview.com/widget/advanced-chart/ and I have selected Autosze
My website: https://finfin.sk/uniswap-recenzia/#uni
Screenshot
CSS
.trading-wrapper {
width: 100%;
height: 500px;
}
This is the code:
<!-- TradingView Widget BEGIN -->
<div class="tradingview-widget-container">
<div id="tradingview_98062"></div>
<div class="tradingview-widget-copyright"><span class="blue-text">UNIUSD Chart</span> by TradingView</div>
<script type="text/javascript" src="https://s3.tradingview.com/tv.js"></script>
<script type="text/javascript">
new TradingView.widget(
{
"autosize": true,
"symbol": "BINANCEUS:UNIUSD",
"interval": "D",
"timezone": "Etc/UTC",
"theme": "dark",
"style": "1",
"locale": "en",
"toolbar_bg": "#f1f3f6",
"enable_publishing": false,
"hide_top_toolbar": true,
"hide_legend": true,
"save_image": false,
"container_id": "tradingview_98062"
}
);
</script>
</div>
<!-- TradingView Widget END -->
I also found the same problem, but after searching I found that the code must add width and height to 100% like this:
new TradingView.widget(
{
"autosize": true,
"width": "100%",
"height": "100%",
"symbol": "OANDA:XAUUSD",
"interval": "D",
"timezone": "America/Argentina/Buenos_Aires",
"theme": "dark",
"style": "1",
"locale": "es",
"toolbar_bg": "#f1f3f6",
"enable_publishing": false,
"allow_symbol_change": true,
"container_id": "tradingview_91540"
}
Related
I am using dash_table.DataTable() with cell value of date string. I use editable=True so I can delete and change whole cell's value. I am wondering if I can edit part of string value? For example, below the cell value is a date string of 2021-10-31 18:00. How can I just change month or hour data or whatever without changing whole string? Typically, we just double click the location to highlight the part which need to be changed. But this double-click doesn't work for DataTable. Thanks
from dash_table import DataTable
mytable=DataTable(
id="date-table",
columns=columns,
data=data,
editable=True,
active_cell={"row": 0, "column": 0},
fixed_rows={"headers": True},
sort_action="native",
derived_virtual_data=data,
style_table={
"minHeight": "85vh",
"height": "85vh",
"overflowY": "scroll",
"borderRadius": "0px 0px 10px 10px",
},
style_cell={
"whiteSpace": "normal",
"height": "auto",
"font-family": "verdana",
},
style_header={
"textAlign": "center",
"fontSize": 14,
},
style_data={
"fontSize": 12,
},
style_data_conditional=[
{
"if": {"column_id": 'Well'},
"width": "30%",
"textAlign": "center",
"textDecoration": "underline",
"cursor": "pointer",
},
{
"if": {"column_id": 'Type'},
"width": "50%",
"textAlign": "center",
},
{
"if": {"column_id": 'Pad'},
"width": "20%",
"textAlign": "center",
},
{"if": {"row_index": "odd"}, "backgroundColor": "#fafbfb"},
],
)
It appears this is possible by double clicking THEN moving the arrow keys. Requires hitting enter to save changes. If you lose focus, they're gone.
I'm using dash 2.0.0 and dash-datatable 5.0.0.
When I try to run backstopjs on certain sites (they all must have some dynamic rendering thing in common, though I don't know what), the screenshots generated by backstopjs only include the first piece of content, centered in the screen. Here's the URL to a screenshot: https://user-images.githubusercontent.com/41495147/63806833-1612b680-c8e2-11e9-9932-680864b470b7.png
I've already tried setting the delay to 5 seconds. I've tried waiting until the footer class is available before screenshot. No dice. What is going on? Here's my config file:
"id": "backstop_default",
"viewports": [
{
"label": "phone",
"width": 320,
"height": 480
},
{
"label": "tablet",
"width": 1024,
"height": 768
},
{
"label": "desktop",
"width": 1280,
"height": 1024
}
],
"onBeforeScript": "puppet/onBefore.js",
"onReadyScript": "puppet/onReady.js",
"scenarios": [
{
"label": "VMLYR Home",
"cookiePath": "backstop_data/engine_scripts/cookies.json",
"url": "https://www.vmlyr.com",
"referenceUrl": "",
"readyEvent": "",
"readySelector": ".region-footer",
"delay": 5000,
"hideSelectors": [],
"removeSelectors": [],
"hoverSelector": "",
"clickSelector": "",
"postInteractionWait": 0,
"selectors": [],
"selectorExpansion": true,
"expect": 0,
"misMatchThreshold" : 0.1,
"requireSameDimensions": true
}
],
"paths": {
"bitmaps_reference": "backstop_data/bitmaps_reference",
"bitmaps_test": "backstop_data/bitmaps_test",
"engine_scripts": "backstop_data/engine_scripts",
"html_report": "backstop_data/html_report",
"ci_report": "backstop_data/ci_report"
},
"report": ["browser"],
"engine": "puppeteer",
"engineOptions": {
"args": ["--no-sandbox"]
},
"asyncCaptureLimit": 5,
"asyncCompareLimit": 50,
"debug": false,
"debugWindow": false
}```
I have been trying to create forms with json schema using various libraries like json form by Josh factory and alpaca and so far I can produce the forms I want. However, the forms are all arranged in a vertical manner and one cannot easily change where the individual form fields are rendered.
I have tried alpaca templates to arrange my form fields but does not work for some fields like textarea.
Is there a library in bootstrap that I can use to generate forms from json and have them styled and arranged via bootstrap css?.
Why not use the strength of both libraries? Bootstrap rocks at laying out responsive grids & alpaca is awesome at turning JSON into forms.
Knock up a bootstrap layout and use Alpaca's layout binding abilities to set where the fields should be rendered.
$(document).ready(function () {
$("#CustomFormLayout").alpaca({
"data": {
"Picture": "http://www.alpacajs.org/assets/themes/dbyll/images/alpaca-icon.png"
},
"schema": {
"type": "object",
"properties": {
"Love": {
"required": true,
"enum": ["I like goat", "I like lama", "I like alpaca"]
},
"LoveFactor": {
"required": true,
"type": "number",
"minimum": 1,
"maximum": 10
},
"Picture": {
"type": "string"
}
},
"dependencies": {
"LoveFactor": ["Love"]
}
},
"options": {
"type": "object",
"fields": {
"Love": {
"type": "select",
"label": "Which animal do you love?",
"noneLabel": "-- Please Select an Animal --",
"removeDefaultNone": false
},
"LoveFactor": {
"label": "How much love does this animal get?",
},
"Picture": {
"type": "image",
"view": "bootstrap-display"
}
}
},
"view": {
"parent": "bootstrap-create",
"layout": {
"template": `
<div class='row'>
<div class ="col-xs-12">
<div data-alpaca-layout-binding='Love' class ='col-xs-6'></div>
<div data-alpaca-layout-binding='LoveFactor' class ='col-xs-6'></div>
</div>
<div class ="col-xs-12">
<div data-alpaca-layout-binding='Picture' class ='col-xs-2 col-xs-offset-5'></div>
</div>
</div>
`
}
}
})
})
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.10/handlebars.js"></script>
<script src="https://code.cloudcms.com/alpaca/1.5.23/bootstrap/alpaca.min.js"></script>
<link href="https://code.cloudcms.com/alpaca/1.5.23/bootstrap/alpaca.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div id="CustomFormLayout">
</div>
I am using AngularJS to read image data from a JSON file, which works for other data except images.
ng-src is not fetching any image?
I need to load all the images to the div and populate the src, alt, and title attributes of the image data I read in using ng-repeat, however it does not work. What happen?
Then, I am not sure the way the code is setup works?
These are my code-
<!DOCTYPE html>
<html ng-app="store">
<head>
<link rel="stylesheet" type="text/css" href="bootstrap.min.css">
</head>
<body ng-controller = "storeController">
<script type="text/javascript" src="angular.min.js"></script>
<script type="text/javascript" src="app.js"></script>
<!--<button class="btn btn-primary" ng-click="showMessage = !showMessage">Toggle Message</button>
<h2 ng-show="showMessage == true">Secret Message</h2>
<input type="text" placeholder="Leave a Message" ng-model="message">
<h2>{{ message }}</h2>-->
<div class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">ngPlaces</a>
</div>
</div>
</div>
<div class="container">
<div class="col-sm-4" ng-repeat = "place in places">
<div class="thumbnail">
<img ng-src="images/{{cribs.image}}.jpg" alt="">
<div class="caption">
<h3>{{place.address}}</h3>
<p><strong>Type:</strong>{{place.type}}</p>
<p><strong>Description:</strong>{{place.description}}</p>
<p><strong>Price:</strong>{{place.price | currency}}</p>
</div>
</div>
</div>
</div>
</body>
</html>
my json data
[
{
"id": 1,
"type": "Condo",
"price": 220000,
"address": "213 Grove Street",
"description": "Excellent place, really nice view!",
"details": {
"bedrooms": 2,
"bathrooms": 1.5,
"area": 921
},
"image":"crib-1"
},
{
"id": 2,
"type": "House",
"price": 410500,
"address": "7823 Winding Way",
"description": "Beautiful home with lots of space for a large family.",
"details": {
"bedrooms": 4,
"bathrooms": 3,
"area": 2145
},
"image":"crib-2"
},
{
"id": 3,
"type": "Duplex",
"price": 395000,
"address": "834 River Lane",
"description": "Great neighbourhood and lot's of nice green space.",
"details": {
"bedrooms": 3,
"bathrooms": 2.5,
"area": 1500
},
"image":"crib-3"
},
{
"id": 4,
"type": "House",
"price": 755990,
"address": "7807 Forest Avenue",
"description": "Best house on the block!",
"details": {
"bedrooms": 6,
"bathrooms": 4.5,
"area": 3230
},
"image":"crib-4"
},
{
"id": 5,
"type": "Condo",
"price": 210500,
"address": "1857 Andover Court",
"description": "Nice little condo with room to grow.",
"details": {
"bedrooms": 2,
"bathrooms": 1.5,
"area": 1023
},
"image":"crib-5"
},
{
"id": 6,
"type": "House",
"price": 334900,
"address": "7398 East Avenue",
"description": "You'll love the view!",
"details": {
"bedrooms": 4,
"bathrooms": 2.5,
"area": 1788
},
"image":"crib-6"
}
]
app.js
(function(){
var app = angular.module('store', []);
app.controller('storeController', function($scope, placesFactory){
$scope.places;
placesFactory.getPlaces().then(function(response){
$scope.places = response.data;
});
$scope.sayHello = function(){
console.log("Hello");
}
});
app.factory('placesFactory', function($http){
function getPlaces(){
return $http.get('data.json');
}
return {
getPlaces: getPlaces
}
});
})();
Change
From
<img ng-src="images/{{cribs.image}}.jpg" alt="">
To
<img ng-src="images/{{place.image}}.jpg" alt="">
I am building a stock picking application. I found this chart template that is really great, it comes with a html script:
<!-- TradingView Widget BEGIN -->
<div id="tv-medium-widget-b3840"></div>
<script type="text/javascript" src="https://d33t3vvu2t2yu5.cloudfront.net/tv.js"></script>
<script type="text/javascript">
new TradingView.Widget({
"container_id": "tv-medium-widget-b3840",
"symbols": [
[
"Apple",
"AAPL "
],
[
"Google",
"GOOGL"
],
[
"Yahoo!",
"YHOO"
]
],
"gridLineColor": "#e9e9ea",
"fontColor": "#83888D",
"underLineColor": "#dbeffb",
"trendLineColor": "#4bafe9",
"width": 1000,
"height": 350,
"tradeItWidget": false,
"locale": "en"
});
</script>
<!-- TradingView Widget END -->
My question is how would I put it inside of a react component on a react-router route? I just left the script tags in the html and tried calling the constructor inside of a component but it is being rendered on all pages as canvas instead of the one the router points to.
const TradingViews = React.createClass({
componentDidMount:
new TradingView.widget({
"width": 980,
"height": 610,
"symbol": "QUANDL:YAHOO/FUND_FUSEX",
"interval": "M",
"timezone": "Etc/UTC",
"theme": "White",
"style": "1",
"locale": "en",
"toolbar_bg": "#f1f3f6",
"enable_publishing": false,
"allow_symbol_change": true,
"hideideas": true,
"show_popup_button": true,
"popup_width": "1000",
"popup_height": "650"
}),
render:function(){
return(
null
)
}
});
export default TradingViews;