We Keep Coding

I am not sure how to make a filter in a sidebar, using Vuejs, that can search and make comparisons to a table (using Tabulator) not within the sidebar

For our school project, we are working with a client to develop a front-end website in Vue JS. As the work has been split up, I am not quite sure how I can use the filter tool he has recommended to our group: http://tabulator.info/examples/4.0?#filter
From the Tabulator site, we are to use setFilter(), preferably. I believe the client would like us to figure out how the filter parameters bar can be placed into the sidebar on our website (seen in the website image below).
Our Website showing the table and sidebar
I am fairly new to Vue and JS, so the difficulty I am having is taking the example from Tabulator, which is shown in HTML and JS, and converting it into VueJS. Here is some of the code I have tried to set up the sidebar and an image of the structure we have set up in Vue's framework. The ClusterExpansion.vue contains the code for the sidebar, and the MatchList.vue contains the code for the tabulator table.
Overview of our Vue Structure
I am wondering if anyone has any tips on how I can alter the ClusterExpansion.vue code to add the filter parameters bar that will pop up when I have accessed the page with the MatchList.vue code?
I can't wrap my head around how I would take what was done in the function updateFilter() from the Tabulator example and apply it to my code and client's code.
Thank you for any suggestions and advice!
MatchList.vue snippet:
export default {
name: 'TabulatorView',
data() {
return {
example: null,
image: false,
preview: null,
file: null,
tabulator: null,
tabledata: [],
columns: [],
};
},
props: {
dnaMatches: Object,
dnaTest: Object,
groupBy: String,
clusteringId: Number,
matchListHeight: Number,
matchListWidth: Number,
},
created() {
},
methods: {... /*the data below is part of the methods*/...
createTabulatorColumns() {
const test = this.dnaTest;
const that = this;
const printIcon = function (cell, formatterParams) { // plain text value
return "<i style='color:red' class='fa-solid fa-trash-can'></i>";
};
this.columns = [
{
formatter: 'rowSelection',
title: 'Select',
titleFormatter: 'rowSelection',
// width: 30,
headerHozAlign: 'center',
hozAlign: 'center',
headerSort: false,
cellClick(e, cell) {
cell.getRow().toggleSelect();
},
},
{
title: 'Active',
field: 'active',
// width: 95,
headerHozAlign: 'center',
hozAlign: 'center',
formatter: 'tickCross',
cellClick(e, cell) {
// eslint-disable-next-line no-unused-expressions
cell.getValue() ? cell.setValue(false) : cell.setValue(true);
console.log(cell.getRow().getData());
console.log(cell.getValue());
that.updateMatch(cell.getRow().getData());
},
},
{
title: 'Name',
// width: 230,
field: 'name',
formatter: 'link',
headerHozAlign: 'center',
hozAlign: 'center',
headerFilter: true,
headerFilterPlaceholder: 'Search',
// editor: 'input',
formatterParams:
{
// labelField: 'storeId',
// label: this.dnaTest.name,
labelField: 'name',
// url - a string representing the url, or a function which
// must return the string for the url, the function is passed the Cell Component as its first argument
url(cell) {
// cell - the cell component
return `/dnatest/${test.index}/match/${cell.getValue()}`; // return the contents of the cell;
},
},
},
{
title: 'cM',
field: 'cM',
headerHozAlign: 'center',
hozAlign: 'center',
// width: 100,
sorter: 'number',
headerFilter: 'number',
headerFilterPlaceholder: 'Min cM',
headerFilterFunc: '>=',
},...
ClusterExpansion.vue snippet:
<template>
<div class="sidebar">
<v-list-item
prepend-avatar="https://randomuser.me/api/portraits/men/85.jpg"
title="Evert-Jan Blom"
>
<template v-slot:append>
<v-btn
variant="text"
icon="mdi-chevron-left"
#click="rail = !rail"
></v-btn
>
</template>
</v-list-item>
<v-divider></v-divider>
<v-expansion-panels>
test
<v-expansion-panel> test 2 </v-expansion-panel>
test 3
</v-expansion-panels>
<div class="menu-items">
<router-link to="/" active-class="active" tag="button">
<div class="link-container">
Home
</div>
</router-link>
<router-link to="/" active-class="active" tag="button">
<div class="link-container">
About
</div>
</router-link>
<router-link to="/" active-class="active" tag="button">
<div class="link-container">
Tests
</div>
</router-link>
<router-link to="/" active-class="active" tag="button">
<div class="link-container">
Matches
</div>
</router-link>
<router-link to="/" active-class="active" tag="button">
<div class="link-container">
Clustering
</div>
</router-link>
</div>
</div>
</template>
<script>
export default {
methods: {
clicked() {
console.log('i was clicked!');
},
},
mounted() {
},
};
</script>
<style scoped>
.sidebar {
font-family: 'Fira Sans', sans-serif;
/* font-family: 'Roboto', sans-serif; */
font-size: larger;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
}
</style>

How to set background color of marker label in AGM Angular 7?

<agm-map style="text-shadow: 0px 0px 8.2px yellow; color: red;" [latitude]='latitude'
[longitude]='longitude' (mapClick)="onChoseLocation($event)" [zoom]=15 [usePanning]="true">
<agm-marker *ngFor="let vehicle of data1;" [agmFitBounds]="true"
[latitude]='vehicle.lat' [longitude]='vehicle.lng'
[iconUrl]="{ url: './assets/images/cars.png', scaledSize: { width: 45, height: 45, rotation: vehicle.angle, anchor : {x:19, y:19} }}"
[label]="{color: 'blue', fontWeight: 'bold', fontSize: '12px', backgroundColor:'red', text: vehicle.name}">
<agm-polyline *ngFor="let initialdata of vehicleDetail">
<agm-polyline-point [latitude]="initialdata.lat" [longitude]="initialdata.lng">
</agm-polyline-point>
<agm-polyline-point *ngIf="(vehicle.id == id)" [latitude]="vehicle.lat" [longitude]="vehicle.lng">
</agm-polyline-point>
</agm-polyline>
<agm-info-window [disableAutoPan]="true" #infoWindow [isOpen]="true">
<small>
Name: <small>{{vehicle.name}}</small> <br>
Speed: <small>{{vehicle.speed}} km/h </small><br>
<!-- Lng: <small>{{vehicle.lng}}</small> <br> -->
Status: <small>{{vehicle.status}}</small>
</small>
<div>
<a (click)="onClickInfoView({id:m.id})" class="btn btn-attention pull-right"></a>
</div>
</agm-info-window>
</agm-marker>
</agm-map>
I use background color property like that but its not work....
[label]="{color: 'blue', fontWeight: 'bold', fontSize: '12px', backgroundColor:'red', text: vehicle.name}"
and I also want to set marginttop but its not working.
Name show above the picture.... but I want name blow the picture and background color red.

You can use labelOrigin:{x:12,y:27} property for [iconUrl] to change the label position.
like this:
[iconUrl]="{ url: './assets/images/cars.png', scaledSize: { width: 45, height: 45, rotation: vehicle.angle, anchor : {x:19, y:19} }, labelOrigin:{x:12,y:27}}

add following style in your styles.css for change background color.
.gm-style div[aria-hidden="true"]{
background-color: white !important;
padding: 5px;
border-radius: 5px;
}

How do I make Highcharts half-donut appear in angular application?

I am working on an angular.js application that displays various widgets in a dashboard. One of these widgets uses a Highcharts half-doughnut. I have created a prototype in straight HTML and it works as expected. I am now porting things over to my angular.js application using highcharts-NG. Everything in my widget is displaying EXCEPT the half-doughnut. Here is the code from my partial:
<div class="row container">
<div class="col-md-2 greyBack loanWidget">
<div class="calendarContainer">
<div class="calendarTitle">{{myLoan.LoanStatus.Month}}</div>
<div class="calendarDay">{{myLoan.LoanStatus.Day}}</div>
<div class="calendarYear">{{myLoan.LoanStatus.Year}}</div>
</div>
</div>
<div class="col-md-4 greyBack loanWidget" style="min-width: 200px; margin: 0; max-width: 200px; max-height: 300px; vertical-align: top;">
<div ng-controller="LoanStatusChart">
<highchart id="chart1" config="highchartsNG"></highchart>
</div>
</div>
<!--<div id="container" class="col-md-4 greyBack loanWidget" style="min-width: 200px; margin: 0; max-width: 200px; max-height: 300px; vertical-align: top;"></div>-->
<div class="col-md-3 greyBack loanWidget balance">
<span class="balanceText">{{myLoan.LoanStatus.OriginalPrincipalBalance}}</span><br />
<span class="balanceTextLabel">Outstanding Balance</span><br />
<span class="borrowedText">{{myLoan.LoanStatus.BorrowedAmt}}</span><br />
<span class="borrowedTextLabel">Borrowed</span>
</div>
<div class="col-md-3 loanWidget"><img src="../images/c4l/cfl-banner.png" /></div>
</div>
Here is the code in my controller:
cflApp.controller('LoanStatusChart', function ($scope) {
$scope.options = {
type: 'pie',
colors: ['#971a31', '#ffffff']
}
$scope.swapChartType = function () {
if (this.highchartsNG.options.chart.type === 'line') {
this.highchartsNG.options.chart.type = 'bar'
} else {
this.highchartsNG.options.chart.type = 'line'
}
}
$scope.highchartsNG = {
options: {
plotOptions: {
pie: {
borderColor: '#000000',
size: 115,
dataLabels: {
enabled: false,
distance: -50,
style: {
fontWeight: 'bold',
color: 'white',
textShadow: '0px 1px 2px black',
}
},
startAngle: -90,
endAngle: 90,
center: ['30%', '75%']
}
},
colors: ['#971a31', '#ffffff'],
chart: {
type: 'pie',
backgroundColor: '#f1f1f2',
height: 150
}
},
series: [{
data: [10, 15, 12, 8, 7]
}],
chart: {
plotBackgroundColor: null,
plotBorderWidth: 0,
plotShadow: false
},
title: {
text: 'Hello',
style: {
color: '#971a31',
fontWEight: 'bold',
fontSize: '15px'
},
verticvalAlign: 'middle',
y: 20,
x: -24
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
series: [{
type: 'pie',
name: 'Loan',
innerSize: '50%',
data: [
['85% paid', 85],
['15% owed', 15]
]
}],
loading: false
}
});
My two questions are:
Why won't this display?
Currently the data is "hard-coded" in these lines:
series: [{
type: 'pie',
name: 'Loan',
innerSize: '50%',
data: [
['85% paid', 85],
['15% owed', 15]
]
}],
How can I set this up so I can pass in the percentages? These come from another controller as you can see in the code in my partial.
UPDATE: I have managed to get the chart area to populate with something by adding Jquery prior to the Highcharts.js. However, it is ignoring every single option I pass to it and simply displaying "Chart Title" and a very tall div where the chart should be. Ideas?

I tried your code its running fine. Might be you have some javascript file ordering or CSS issue. Be sure to follow the correct order
jquery
Highcharts.js
AngularJS
Highchart-ng.js
Secondly you declared series:[{}]object twice in your chart configuration.
Here's the fiddle you can check your code here http://jsfiddle.net/Hjdnw/1018/

Styling Google Charts Table

I am trying to add CSS style to a Google Charts Table. I tried this:
https://developers.google.com/chart/interactive/docs/gallery/table#customproperties
on the first cell (Mike) but it didn't work. I set allowHtml to true in the options variable. How can I change the background, text color, etc. of the individual cells? Thank you.
<script type="text/javascript">
google.load('visualization', '1', {packages:['table']});
google.setOnLoadCallback(drawTable);
function drawTable() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Employee Name');
data.addColumn('date', 'Start Date');
data.addRows(3);
data.setCell(0, 0, 'Mike', {style: 'background-color:red;'});
data.setCell(0, 1, new Date(2008, 1, 28));
data.setCell(1, 0, 'Bob');
data.setCell(1, 1, new Date(2007, 5, 1));
data.setCell(2, 0, 'Alice');
data.setCell(2, 1, new Date(2006, 7, 16));
var options = {
allowHtml: true
};
// Create a formatter.
// This example uses object literal notation to define the options.
var formatter = new google.visualization.DateFormat({formatType: 'long'});
// Reformat our data.
formatter.format(data, 1);
// Draw our data
var table = new google.visualization.Table(document.getElementById('dateformat_div'));
table.draw(data, options);
}
</script>

How can I change the background, text color, etc. of the individual cells? Thank you.
Per #Bondye's comment, the answer is found in the developers guide.
https://developers.google.com/chart/interactive/docs/examples#custom_table_example
Define style rules that match your criteria:
<style>
.orange-background {
background-color: orange;
}
.orchid-background {
background-color: orchid;
}
.beige-background {
background-color: beige;
}
</style>
Apply them to the table when drawn.
var cssClassNames = {
'headerRow': 'italic-darkblue-font large-font bold-font',
'tableRow': '',
'oddTableRow': 'beige-background',
'selectedTableRow': 'orange-background large-font',
'hoverTableRow': '',
'headerCell': 'gold-border',
'tableCell': '',
'rowNumberCell': 'underline-blue-font'};
var options = {'showRowNumber': true, 'allowHtml': true, 'cssClassNames': cssClassNames};
var data = new google.visualization.DataTable();
//... add data here ...
var table = new google.visualization.Table(container);
table.draw(data, options);

Custom table formatting for google-charts was tricky for me:
It worked from the style: .tableRow { background-color:rgb(246, 253, 253); }
It also worked from standart css: tr:hover {background-color: ...;}
It sometimes worked only with !important css key: background-color: rgba(141, 186, 238, 0.76) !important;
Here's my working sample:
// Load the Visualization API and the controls package.
google.load('visualization', '1.0', { packages: ['table'] });
// Set a callback to run when the Google Visualization API is loaded.
google.setOnLoadCallback(drawDashboard);
// Callback that creates and populates a data table,
// instantiates a dashboard, a range slider and a pie chart,
// passes in the data and draws it.
function drawDashboard() {
// Create our data table.
var data = google.visualization.arrayToDataTable([
['Sex', 'Name', 'Donuts eaten', 'Html'],
['Male', 'Michael', 5, '<input type="checkbox" id="1" name="check">'],
['Female', 'Elisa', 7, '<input type="checkbox" id="2" name="check">'],
['Male', 'Robert', 3, '<input type="checkbox" id="3" name="check">'],
['Male', 'John', 2, '<input type="checkbox" id="4" name="check">'],
['Female', 'Jessica', 6, '<input type="checkbox" id="5" name="check">'],
['Male', 'Aaron', 1, '<input type="checkbox" id="6" name="check">'],
['Female', 'Margareth', 8, '<input type="checkbox" id="7" name="check">'],
]);
var table = new google.visualization.Table(document.getElementById('table'));
var options =
{
allowHtml: true,
showRowNumber: true,
width: '100%',
height: '100%'
,
cssClassNames: {
headerRow: 'headerRow',
tableRow: 'tableRow',
oddTableRow: 'oddTableRow',
selectedTableRow: 'selectedTableRow',
// hoverTableRow: 'hoverTableRow',
headerCell: 'headerCell',
tableCell: 'tableCell',
rowNumberCell: 'rowNumberCell'
}
};
table.draw(data, options);
}
body
{
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
/* Tables */
th {
padding-top: 12px;
padding-bottom: 12px;
text-align: left;
background-color: rgb(83, 133, 180);
border-color: rgb(151, 150, 168) !important;
color: white;
}
.oddTableRow {
background-color:rgb(232, 246, 247);
}
.tableRow { background-color:rgb(246, 253, 253); }
tr:hover {background-color: rgba(233, 235, 154, 0.76) !important;}
.selectedTableRow {
background-color: rgba(141, 186, 238, 0.76) !important;
}
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script src="script.js"></script>
</head>
<body>
<h1>Google Charts. Custom HTML & CSS in table</h1>
<div id="table"></div>
</body>
</html>

For more modern widgets and charts you can apply custom css to Google Charts see this repo for already implemented styles
https://github.com/weekdone/GoogleChartStyles

links in labels

I am using this code to place a link for each label:
chart2.addAxis("y", {
vertical: true,
fixLower: "none",
fixUpper: "none",
natural: true,
majorTick: { length: 3 },
labels: [{value: 1, text: Link text }, ...]
});
Apparently this code didn't work. So, i am thinking:
I have this html in the rendered chart:
<div id="chart2" style="height: 100px;">
<div style="margin: 0px; padding: 0px; ...">
<div style="margin: 0px; padding: 0px; ... ">Link text</div> //label
</div>
...
And this change should result:
Link text
to something like:
Link text
How can i do this change with jquery or dojo ? Basically add before and after the text.