Chart.js V2.1.4 does working, with backbone view - backbone.js

I want to use a upgraded version of Chart.js v2.1.4 with Backbone View(working fine with v1.0.2) as because of additional features.But it not working with upgraded version v 2.1.4.
Code snippet are:
define([
'underscore',
'jquery',
'backbone',
'Chart',
'text!templates/dashboard/graph-view-template.html'
], function(_, $, Backbone, Chart, GraphViewTemplate) {
var GraphView = Backbone.View.extend({
template: GraphViewTemplate,
events: {
},
elements: {
},
initialize: function(options){
this.options = options;
},
render: function(){
this.$el.html(this.template);
this.renderTempGraph();
return this;
},
renderTempGraph: function(){
var ctx = this.$el.find("#myChart").get(0).getContext("2d");
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ["Red", "Blue", "Yellow"],
datasets: [{
label: '# of Votes',
data: [12, 19, 3],
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 159, 64, 0.2)'
],
borderColor: [
'rgba(255,99,132,1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 159, 64, 1)'
],
borderWidth: 1
}]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero:true
}
}]
}
}
});
}
return GraphView;
});
<canvas id="myChart" width="400" height="400"></canvas>
after render, canvas element properties look like as
<iframe class="chartjs-hidden-iframe" style="width: 100%; display: block; border: 0px; height: 0px; margin: 0px; position: absolute; left: 0px; right: 0px; top: 0px; bottom: 0px;">
</iframe>
<canvas id="myChart" width="0" height="0" style="width: 0px; height: 0px;"></canvas>

Related

custom node of #ant-design/flowchart

import { Flowchart } from '#ant-design/flowchart';
import "#ant-design/flowchart/dist/index.css";
const IndicatorNode = (props:any) => {
const { size = { width: 120, height: 50 }, data } = props;
const { width, height } = size;
const { label = 'john', stroke = '#ccc', fill = '#fff', fontFill, fontSize } = data;
return (
<div
className="indicator-container"
style={{
position: 'relative',
display: 'block',
background: '#fff',
border: '1px solid #84b2e8',
borderRadius: '2px',
padding: '10px 12px',
overflow: 'hidden',
boxShadow: '0 1px 4px 0 rgba(0,0,0,0.20)',
width,
height,
borderColor: stroke,
backgroundColor: fill,
color: fontFill,
fontSize,
}}
>
<div style={{ color: fontFill }}>{label}</div>
</div>
);
};
export designer = () => {
return (
<div style={{ height: 600 }}>
<Flowchart
onSave={(d) => {
console.log(d);
}}
toolbarPanelProps={{
position: {
top: 0,
left: 0,
right: 0,
},
}}
scaleToolbarPanelProps={{
layout: 'horizontal',
position: {
right: 0,
top: -40,
},
style: {
width: 150,
height: 39,
left: 'auto',
background: 'transparent',
},
}}
canvasProps={{
position: {
top: 40,
left: 0,
right: 0,
bottom: 0,
},
}}
nodePanelProps={{
position: { width: 160, top: 40, bottom: 0, left: 0 },
defaultActiveKey: ['custom'], // ['custom', 'official']
registerNode: {
title: 'abc',
key:"abc",
nodes: [
{
component: IndicatorNode,
popover: () => <div>abcs</div>,
name: 'custom-node-indicator',
width: 120,
height: 50,
label: 'abc',
},
],
},
}}
detailPanelProps={{
position: { width: 200, top: 40, bottom: 0, right: 0 },
}}
/>
</div>
);
}
I want to create new custom code with api configurations and once I click on that node it shows the editable custom properties on right panel.
in custom node of #ant-design/flowchart can I add my custom editable properties? that are showing on right panel once I clink on node.. Can someone provide me any reference for that?

Why Material UI Theme overrides doesn't work?

I use the material UI "createTheme" function. When ı write overrides for button and switch it's doesn't work. Material UI's None of the overrides features work but the theme palette, font-size working. Why it doesn't work? Thanks in advance.
// My overrides
overrides: {
MuiButton: {
primary: {
background: "pink",
},
sizeSmall: {
height: 22.5,
fontSize: 10,
padding: "0 15px",
},
sizeLarge: {
height: 37,
padding: "0 30px",
fontSize: 16,
},
text: {
background: "#1AD971",
borderRadius: 4,
border: 0,
color: "white",
padding: "0 22px",
height: 30,
textAlign: "center",
lineHeight: 1,
fontSize: 14,
fontWeight: 400,
"&:hover": {
backgroundColor: "#0BBF5D",
},
},
contained: {
backgroundColor: "#FFFFFF",
color: "#000000",
borderRadius: 30,
},
outlined: {
color: "#1AD971",
border: "1px solid #1AD971",
borderRadius: "15px",
},
},
MuiSwitch: {
switchBase: {
color: "#73889D",
},
colorSecondary: {
"&$checked": {
color: "#FFFFFF",
},
},
track: {
opacity: 1,
backgroundColor: "#213348",
"$checked$checked + &": {
opacity: 1,
backgroundColor: "#FFC231",
},
},
},
},
If you are working on MUI version 5, as mentioned in the comment above, you should be using the below code
const theme = createTheme({
components: {
MuiButton: {
styleOverrides: {
root: {
border: '1px solid #ff4742',
background: 'white',
borderRadius: 12,
border: 0,
color: 'black',
height: 48,
padding: '0 30px',
fontWeight: 'bold',
boxShadow: '1px 2px 4px rgb(0 0 0 / 10%)',
}
}
},
}});

Google StreetView in extjs 6

I'm new to extjs and cant find a way to put a google StreetView inside a panel. Can someone point me in the right direction?. I have tried from interpreting an html inside a panel to the old GMapPanel but I doesn't work.
Currently I have this function where the panel shows up but doesn't show the street view
function () {
alert("mostrar street view");
new Ext.Panel({
id: "streetView",
xtype: "map",
constrain: true,
floating: true,
resize: true,
width: 600,
height: 400,
closable: true,
style: {
backgroundColor: "#fff",
//backgroundColor: '#000',
border: "1px solid black",
},
listeners: {
click: Ext.Window({
layout: "fit",
closeAction: "hide",
title: "GPanorama Window",
width: 400,
height: 300,
x: 480,
y: 60,
items: {
xtype: "gmappanel",
gmapType: "panorama",
setCenter: {
lat: 42.345573,
long: -71.098326,
},
},
}),
},
draggable: {
delegate: "div",
},
}).show();
I have also tried placing the property html as follows html:'CODE-BELOW'
<head>
<title>Street View split-map-panes</title>
<script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
<style type="text/css">
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
#map,
#pano {
float: left;
height: 100%;
width: 50%;
}
</style>
<script>
function initialize() {
const fenway = { lat: 42.345573, lng: -71.098326 };
const map = new google.maps.Map(document.getElementById("map"), {
center: fenway,
zoom: 14,
});
const panorama = new google.maps.StreetViewPanorama(
document.getElementById("pano"),
{ position: fenway, pov: { heading: 34, pitch: 10 } }
);
map.setStreetView(panorama);
}
</script>
</head>
<body>
<div id="map"></div>
<div id="pano"></div>
<script
src="https://maps.googleapis.com/maps/api/js?key=API-KEY&callback=initialize&libraries=&v=weekly"
async></script>
</body>

$apply already in progress error occurs when reset other select box

Please check my snippet. I am using the custom select box. And try to reset on other select box selection. To change got an error. Please help where I am wrong and what is the correct way. Thanks in advance.
$(document).on("click focus", ".sbSelector, .sbToggle", function() {
$(this).closest(".sbHolder").prev("select").trigger("click");
});
var app = angular.module('app', []);
app.controller('appController', ['$scope', function($scope) {
$scope.allTheme = [{
"theme_id": 2,
"productData": [{
"store_id": 1,
"product_id": 3,
"style_id": 1,
"size_id": 3,
"theme_id": 2,
"name": "Boy - FD",
}, {
"store_id": 1,
"product_id": 4,
"style_id": 1,
"size_id": 3,
"theme_id": 2,
"name": "Boy - FE"
}, {
"store_id": 1,
"product_id": 8,
"style_id": 1,
"size_id": 3,
"theme_id": 2,
"name": "Boy - QS",
}]
}, {
"theme_id": 5,
"productData": [{
"store_id": 1,
"product_id": 99,
"style_id": 1,
"size_id": 3,
"theme_id": 5,
"name": "Blank - FD"
}, {
"store_id": 1,
"product_id": 100,
"style_id": 1,
"size_id": 3,
"theme_id": 5,
"name": "Blank - FE"
}, {
"store_id": 1,
"product_id": 101,
"style_id": 1,
"size_id": 3,
"theme_id": 5,
"name": "Blank - QS"
}]
}, {
"theme_id": 7,
"productData": [{
"store_id": 1,
"product_id": 129,
"style_id": 1,
"size_id": 3,
"theme_id": 7,
"name": "Nautical"
}]
}, {
"theme_id": 10,
"productData": [{
"store_id": 1,
"product_id": 12,
"style_id": 1,
"size_id": 3,
"theme_id": 10,
"name": "Girl - FD"
}, {
"store_id": 1,
"product_id": 13,
"style_id": 1,
"size_id": 3,
"theme_id": 10,
"name": "Girl - FE"
}, {
"store_id": 1,
"product_id": 17,
"style_id": 1,
"size_id": 3,
"theme_id": 10,
"name": "Girl - QS"
}]
}];
$scope.targetField = null;
$scope.selectBoxClick = function($event) {
if ($event.target === null) {
return;
}
$scope.targetField = $event.target;
}
$scope.changeTheme = function(theme, selectedProducts) {
$scope.activeTheme = theme;
if (selectedProducts) {
$scope.isSizedAndThemeSelected = true;
$($scope.targetField).closest(".owl-item").siblings().each(function() {
if ($(this).find("select").length) {
var option = $(this).find("select option").eq(0);
$(this).find("select").selectbox("change", option.attr('value'), option.html());
}
})
} else {
$scope.isSizedAndThemeSelected = false;
$scope.activeTheme = {};
}
}
}]);
app.directive('customSelect', ['$timeout', function($timeout) {
return {
restrict: 'C',
transclude: false,
link: function(scope, element) {
scope.initSelectbox = function(element) {
$timeout(function() {
element.selectbox();
}, 0)
}
}
};
}]).directive('customSelectItem', [function() {
return {
restrict: 'A',
transclude: false,
link: function(scope, element) {
if (scope.$last) {
scope.initSelectbox(element.parent());
}
}
};
}]);
.sbHolder {
font-size: 14px;
position: relative;
height: 50px;
}
.sbSelector>a {
color: #fff;
text-decoration: none;
display: block;
}
.sbSelector {
display: block;
height: 31px;
left: 0;
line-height: 19px;
overflow: hidden;
position: absolute;
text-indent: -22px;
top: 0;
width: 100%;
cursor: pointer;
color: #fff;
background: #fdb400;
display: inline-table;
text-indent: 0;
cursor: pointer;
}
.sbToggle {
display: block;
height: 30px;
outline: none;
position: absolute;
right: 0;
top: 2px;
width: 30px;
background-size: 16px;
z-index: 9;
cursor: pointer;
}
.sbOptions {
background: #fff;
border: solid 1px #dfdfdf;
list-style: none;
left: 0;
margin: 0;
padding: 4px 14px 10px 12px;
position: absolute;
width: 100%;
z-index: 1;
overflow-y: auto;
top: auto;
text-align: left;
}
.sbOptions li {
padding: 0px 0px;
}
.sbOptions li img {
display: inline-block;
float: left;
padding-top: 7px;
padding-left: 3px;
}
.sbOptions a {
border-bottom: solid 1px #e9e9e9;
display: block;
outline: none;
padding: 7px 0 1px 0;
color: #545454;
font-family: 'Source Sans Pro', sans-serif;
font-weight: 400;
}
.sbOptions a:link,
.sbOptions a:visited {
color: #696969;
font-size: 12px;
background: #fff;
text-decoration: none;
transition: all 0.2s ease-in-out;
font-weight: 300;
display: block;
padding-left: 0;
}
.sbOptions a:hover,
.sbOptions a:focus,
.sbOptions a.sbFocus {
color: #545454;
font-weight: 600;
}
.sbOptions li.last a {
border-bottom: none;
}
.sbOptions .sbDisabled {
border-bottom: dotted 1px #515151;
color: #999;
display: block;
padding: 7px 0 7px 3px;
}
.sbOptions .sbGroup {
border-bottom: dotted 1px #515151;
color: #EBB52D;
display: block;
font-weight: bold;
padding: 7px 0 7px 3px;
}
.sbOptions .sbSub {
padding-left: 17px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://project-progress.net/projects/kodak-express-local-angular/js/jquery.selectbox-0.2.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<div data-ng-app="app">
<div data-ng-controller="appController">
<div data-ng-repeat="theme in allTheme" style="width:500px;" class="owl-item">
<div class="select-box" data-ng-if="theme.productData.length > 1">
<select class="customSelect" data-ng-model="theme.SelectedProduct" data-ng-click="selectBoxClick($event)" data-ng-change="changeTheme(theme, theme.SelectedProduct)">
<option value="">Select an option</option>
<option data-custom-select-item data-ng-repeat="product in theme.productData" data-ng-value="{{product}}">{{product.name}}</option>
</select>
</div>
</div>
</div>
</div>
Do not use any variables with $$ at their beginning since they are regarded as strictly internal and private variables.
If you need to trigger a digest loop from jQuery callbacks for example, use this pattern:
scope.$applyAsync(function () {
// the code updating any other scope stuff
});
The advantage of giving it a callback function is that it will provide you a full stack trace if any error inside the function occurs.

How to create doughnut highchart using angular JS

I want to create a doughnut highchart using angular js.
javascript is-
$(function () {
$('#container').highcharts({
chart: {
plotBackgroundColor: null,
plotBorderWidth: 0,
plotShadow: false
},
title: {
text: 'Browser<br>shares<br>2015',
align: 'center',
verticalAlign: 'middle',
y: 40
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
plotOptions: {
pie: {
dataLabels: {
enabled: true,
distance: -50,
style: {
fontWeight: 'bold',
color: 'white',
textShadow: '0px 1px 2px black'
}
},
startAngle: -180,
endAngle: 180,
center: ['50%', '55%']
}
},
series: [{
type: 'pie',
name: 'Browser share',
innerSize: '50%',
data: [
['Firefox', 10.38],
['IE', 56.33],
['Chrome', 24.03],
['Safari', 4.77],
['Opera', 0.91],
{
name: 'Proprietary or Undetectable',
y: 0.9,
dataLabels: {
enabled: false
}
}
]
}]
});
});
html is-
<div id="container" style="min-width: 310px; height: 400px; max-width: 600px; margin: 0 auto"></div>
and I am including these scripts files -
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
How would I convert the above script in angular js. Can anyone help me on this?
I think some directive function needs to be created.I am new to custom directives in angular, can anybody help how we do this in angular for the doughnut highchart?
No need to convert the highcharts in angular as its already exists. No need to inject the dependencies. You can use it directly. Just inject the highcharts
files
<script src="script/chart/highcharts.js"></script>
<script src="script/chart/highcharts-more.js"></script>
<script src="script/chart/drilldown.js"></script>
<script src="script/chart/highcharts-3d.js"></script>
<script src="script/chart/exporting.js"></script>
as per need. and in controller use directly the Highcharts.chart({//code goes here}). Here is the link for donut highchart

Resources