Related
I would like some help to create a chart component with APEXCHARTS, I tried here in several ways to create a component so that I can use it anywhere else, just passing the data to populate it, but I couldn't, how can I do it?
I was wanting this chart
https://apexcharts.com/vue-chart-demos/bar-charts/stacked/
i tried to do it this way
<template>
<div class="example">
<apexchart
width="800"
height="500"
type="bar"
:options="chartOptions"
:series="series"
></apexchart>
</div>
</template>
<script setup>
/* eslint-disable */
import { computed} from "vue";
const props = defineProps({
width: {
type: [Number, String],
default: "auto",
},
height: {
type: [Number, String],
default: "auto",
}
});
const data = computed(() => {
return {
series: [{
name: 'Marine Sprite',
data: [44, 55, 41, 37, 22, 43, 21]
}, {
name: 'Striking Calf',
data: [53, 32, 33, 52, 13, 43, 32]
}, {
name: 'Tank Picture',
data: [12, 17, 11, 9, 15, 11, 20]
}, {
name: 'Bucket Slope',
data: [9, 7, 5, 8, 6, 9, 4]
}, {
name: 'Reborn Kid',
data: [25, 12, 19, 32, 25, 24, 10]
}],
chartOptions: {
chart: {
type: 'bar',
height: 350,
stacked: true,
},
plotOptions: {
bar: {
horizontal: true,
dataLabels: {
total: {
enabled: true,
offsetX: 0,
style: {
fontSize: '13px',
fontWeight: 900
}
}
}
},
},
stroke: {
width: 1,
colors: ['#fff']
},
title: {
text: 'Fiction Books Sales'
},
xaxis: {
categories: [2008, 2009, 2010, 2011, 2012, 2013, 2014],
labels: {
formatter: function (val) {
return val + "K"
}
}
},
yaxis: {
title: {
text: undefined
},
},
tooltip: {
y: {
formatter: function (val) {
return val + "K"
}
}
},
fill: {
opacity: 1
},
legend: {
position: 'top',
horizontalAlign: 'left',
offsetX: 40
}
},
};
});
</script>
<template>
<StackedBarChart />
</template>
<script setup>
import StackedBarChart from "#/components/apex-charts/StackedBarChart.vue";
.....
</script>
but when I call it it gives errors
apexcharts.common.js:6 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'type')
at t2.value (apexcharts.common.js:6:80897)
at t2.value (apexcharts.common.js:6:88989)
at new t2 (apexcharts.common.js:14:21270)
at init (vue3-apexcharts.common.js:353:21)
Is it possible to make the Material UI Datagrid Header sticky? Seems this is possible with the Material UI Tables. I am not able to find an option to do it with a data grid.
As mentioned in comments, it is a default behavior.
However few mistakes can be made to prevent this default functionality. In my case it was property that I've missed:
autoHeight={true}, it should be false or just remove it.
Here is an extensive code example and bellow there is link to SandBox:
import { DataGrid, GridToolbar } from "#mui/x-data-grid";
import React from "react";
export default function AdvanceTable() {
const [pageSize, setPageSize] = React.useState(5);
const [editRowsModel, setEditRowsModel] = React.useState({});
const handleEditRowsModelChange = React.useCallback((model) => {
// Set current edited cell
setEditRowsModel(model);
});
return (
<div>
<div style={{ width: "100%", height: "80vh" }}>
<DataGrid
components={{
Toolbar: GridToolbar
}}
rows={rows}
columns={columns}
disableSelectionOnClick
checkboxSelection
onEditRowsModelChange={handleEditRowsModelChange}
pagination
pageSize={pageSize}
onPageSizeChange={(newPageSize) => setPageSize(newPageSize)}
rowsPerPageOptions={[5, 10, 15]}
/>
</div>
<div style={{ marginBottom: 8 }}>
<code>Edited table values: {JSON.stringify(editRowsModel)}</code>
</div>
</div>
);
// mock data:
const columns = [
{ field: "id", headerName: "ID", width: 70 },
{
field: "firstName",
headerName: "First name",
editable: true,
width: 180
},
{ field: "lastName", headerName: "Last name", editable: true, width: 180 },
{
field: "age",
headerName: "Age",
type: "number",
editable: true,
width: 150
}
];
const rows = [
{ id: 1, lastName: "Snow", firstName: "Jon", age: 35 },
{ id: 2, lastName: "Lannister", firstName: "Cersei", age: 42 },
{ id: 3, lastName: "Lannister", firstName: "Jaime", age: 45 },
{ id: 4, lastName: "Stark", firstName: "Arya", age: 16 },
{ id: 5, lastName: "Targaryen", firstName: "Daenerys", age: null },
{ id: 6, lastName: "Melisandre", firstName: null, age: 150 },
{ id: 7, lastName: "Clifford", firstName: "Ferrara", age: 44 },
{ id: 8, lastName: "Frances", firstName: "Rossini", age: 36 },
{ id: 9, lastName: "Roxie", firstName: "Harvey", age: 65 },
{ id: 41, lastName: "Stark", firstName: "Arya", age: 16 },
{ id: 51, lastName: "Targaryen", firstName: "Daenerys", age: null },
{ id: 61, lastName: "Melisandre", firstName: null, age: 150 },
{ id: 71, lastName: "Clifford", firstName: "Ferrara", age: 44 },
{ id: 81, lastName: "Frances", firstName: "Rossini", age: 36 },
{ id: 91, lastName: "Roxie", firstName: "Harvey", age: 65 }
];
}
SandBox example
It seems like the official solution is to either specify a fixed-height, or to place the table inside a flex container.
Neither of these are great options if you want to place the table part-way down a scrollable page/container, as you'll likely end up with a nested scrollbar.
Typically in this case you want to use autoHeight to display the full grid, and have a true position: "sticky" header like you would with a regular HTML <table>.
DataGrid doesn't support this out-the-box at time of writing, but you can still achieve it by tweaking the internal .css classes. I do want to add a disclaimer that this solution overwrites a few internal layout properties, so there's a risk this could break in future versions.
export const StickyDataGrid = styled(DataGrid)(({theme}) => ({
'& .MuiDataGrid-columnHeaders': {
position: "sticky",
// Replace background colour if necessary
backgroundColor: theme.palette.background.paper,
// Display header above grid data, but below any popups
zIndex: theme.zIndex.mobileStepper - 1,
},
'& .MuiDataGrid-virtualScroller': {
// Undo the margins that were added to push the rows below the previously fixed header
marginTop: "0 !important"
},
'& .MuiDataGrid-main': {
// Not sure why it is hidden by default, but it prevented the header from sticking
overflow: "visible"
}
}))
I'm creating an App that feeds with Woo commerce. By now I can show the products list and access to a product , but I'm not able to create an order.
This is the function that creates and POST's the order :
this.order = function(products, address, tax, total){
var dfd = $q.defer();
var clientId = 2;
var items =[];
for(var i = 0 ; i<products.length ; i++){
var item = {product_id: products[i].id,
quantity: products[i].qty,
price: products[i].price,
};
items.push(item);
}
$http({
method: 'POST',
url: appConfig.DOMAIN_URL + '/wp-json/wc/v1/orders' ,
headers: {'Content-Type': 'application/x-www-form-urlencoded'},
paramSerializer: '$httpParamSerializerJQLike',
params: {
consumer_key: appConfig.KEY,
consumer_secret: appConfig.SECRET_KEY,
line_items: items,
customer_id: 1,
total: total,
status: 'completed',
shipping: {
first_name: address.full_name,
address_1: address.street,
city: address.city,
postcode: address.postal_code,
state: address.state
},
shipping_lines: [
{
method_id: 'flat_rate',
method_title: 'Flat Rate',
total: tax
}
]
}
})
.then(function(res){
dfd.resolve(res);
}, function(error){
dfd.reject(error);
})
return dfd.promise;
}
Response is :
{
"code": "woocommerce_rest_required_product_reference",
"message": "Product ID or SKU is required",
"data": {
"status": 400
}
}
Params seems to be there when I inspect with browser :
Name Value
consumer_key ck_XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
consumer_secret cs_XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
customer_id 1
line_items[][price] 24490
line_items[][product_id] 27
line_items[][quantity] 1
shipping_lines[][method_id] flat_rate
shipping_lines[][method_title] Flat Rate
shipping_lines[][total] 0
status completed
total 24490
I tried hardcoding and using the same data from Woocommerce documentation but the result is the same.
With some combinations throws "product id required" , "quantity required" or "SKU required".
Tried with POSTMAN and order is created with no products.
Any help is appreciated
UPDATE
I tried commenting this line :
paramSerializer: '$httpParamSerializerJQLike',
And now order is created but with no products data, only "non array" params were assigned, so im almost sure is a formatting problem...
Example object :
var data = {
payment_method: 'bacs',
payment_method_title: 'Direct Bank Transfer',
set_paid: true,
billing: {
first_name: 'John',
last_name: 'Doe',
address_1: '969 Market',
address_2: '',
city: 'San Francisco',
state: 'CA',
postcode: '94103',
country: 'US',
email: 'john.doe#example.com',
phone: '(555) 555-5555'
},
shipping: {
first_name: 'John',
last_name: 'Doe',
address_1: '969 Market',
address_2: '',
city: 'San Francisco',
state: 'CA',
postcode: '94103',
country: 'US'
},
line_items: [
{
product_id: 93,
quantity: 2
},
{
product_id: 22,
variation_id: 23,
quantity: 1
}
],
shipping_lines: [
{
method_id: 'flat_rate',
method_title: 'Flat Rate',
total: 10
}
]
};
This was my workaround :
$http({
method: 'POST',
url: appConfig.DOMAIN_URL + '/wp-json/wc/v1/orders' ,
//headers: {'Content-Type': 'application/x-www-form-urlencoded'},
headers: {'Content-Type': 'application/json'},
//paramSerializer: '$httpParamSerializerJQLike',
params: {
consumer_key: appConfig.KEY,
consumer_secret: appConfig.SECRET_KEY
},
data: {
line_items: items,
customer_id: 1,
status: 'pending',
shipping: {
first_name: address.full_name,
address_1: address.street,
city: address.city,
postcode: address.postal_code,
state: address.state
},
shipping_lines: [
{
method_id: 'flat_rate',
method_title: 'Flat Rate',
total: tax
}
]
}
})
.then(function(res){
dfd.resolve(res);
}, function(error){
dfd.reject(error);
})
return dfd.promise;
}
})
;
Not sure if this is the cleanest way to pass the parameters but I could not understand why paramserializer was not working. I took some code from another sources.
Hope it helps
I'm trying to do the autoform books example using Meteor. How exactly should I do the Books.insert ?
I see the example:
Books.insert({title: "Ulysses", author: "James Joyce"}, function(error, result) {
//The insert will fail, error will be set,
//and result will be undefined or false because "copies" is required.
//
//The list of errors is available on
//`error.invalidKeys` or by calling
Books.simpleSchema().namedContext().invalidKeys()
});
I'm not entirely sure how I should hook this up with the rest of my code:
if (Meteor.isClient) {
Books = new Meteor.Collection("books");
var Schemas = {};
Schemas.Book = new SimpleSchema({
title: {
type: String,
label: "Title",
max: 200,
optional: true
},
author: {
type: String,
label: "Author",
optional: true
},
copies: {
type: Number,
label: "Number of copies",
min: 0,
optional: true
},
lastCheckedOut: {
type: Date,
label: "Last date this book was checked out",
optional: true
},
summary: {
type: String,
label: "Brief summary",
optional: true,
max: 1000
}
});
Books.attachSchema(Schemas.Book);
}
Can anyone give me any advice on this?
I'm thinking that I would need something like this:
Template.bookform.events({
'click btn.submit': function () {
var form = document.getElementById("formID").value;
Books.insert(form);
}
});
Thanks in advance! :)
I have never used autoform but in the documentation it says that it already gives you "automatic insert and update events, and automatic reactive validation".
So there should be no need to specify your own event handler.
In the docs you will also find the books example. I am just copying from there:
JS
Books = new Meteor.Collection("books", {
schema: {
title: {
type: String,
label: "Title",
max: 200
},
author: {
type: String,
label: "Author"
},
copies: {
type: Number,
label: "Number of copies",
min: 0
},
lastCheckedOut: {
type: Date,
label: "Last date this book was checked out",
optional: true
},
summary: {
type: String,
label: "Brief summary",
optional: true,
max: 1000
}
}
});
if (Meteor.isClient) {
Meteor.subscribe("books");
}
if (Meteor.isServer) {
Meteor.publish("books", function () {
return Books.find();
});
}
HTML
<head>
<title>Book example</title>
</head>
<body>
{{> insertBookForm}}
</body>
<template name="insertBookForm">
{{> quickForm collection="Books" id="insertBookForm" type="insert"}}
</template>
I have tried various ways to refresh the grid but everything I try doesn't work. Do I refresh the Grid or do I load the store??? You can see that the paging tool bar is still showing 50 pages after the filtering. If there are no dates on a given pag and it is empty then it will disable the tool bar and paging doesn't work after that page un less you refresh the browser and skip over the empty page. So, in my case page 15 has no rows so it breaks when u hit next and get that page. If you type in the page number 16 then all is good until you hit another's empty page.
My datepicker is in my viewport below and I have tried refreshing the gird and loading the store as well as other things which mostly result in undefined error. Not sure where to start with this one so I will show my code and screen shots below:
BEFORE DATE SELECTION:
AFTER DATE SELECTION:
STORE:
Ext.define('AM.store.Users', {
extend: 'Ext.data.Store',
model: 'AM.model.User',
autoLoad: true,
autoSync:true,
pageSize:50,
proxy:
{
type: 'ajax',
//extraParams :{limit:1000},
api:
{
read: 'http://192.168.0.103/testit/dao_2.cfc?method=getContent',
update: 'http://192.168.0.103/testit/dao_2-post.cfc?method=postContent'
},
reader:
{
type: 'json',
root: 'data',
successProperty: 'success',
totalProperty : 'dataset',
remoteFilter : true
},
listeners:
{
// stuff goes here maybe??
}
}
});
GRID PANEL:
Ext.define('AM.view.user.List' ,{
extend: 'Ext.grid.Panel',
alias: 'widget.userlist',
title: 'All Users',
store: 'Users',
//buffered: true,
plugins:[Ext.create('Ext.grid.plugin.RowEditing', {clicksToEdit: 2})],
dockedItems: [{ xtype: 'pagingtoolbar',
store: 'Users',
dock: 'bottom',
displayMsg: 'Displaying Records {0} - {1} of {2}',
displayInfo: true}],
initComponent: function() {
this.columns = [
Ext.create('Ext.grid.RowNumberer',
{
resizable: true,
resizeHandles:'all',
align: 'center',
minWidth: 35,
maxWidth:50
}),
{
header: 'Name',
dataIndex: 'message_id',
flex: 1,
editor:'textfield',
allowBlank: false,
menuDisabled:true
},
{
header: 'Email',
dataIndex: 'recip_email',
flex: 1,
editor:'textfield',
allowBlank: false,
menuDisabled:true
},
{
header: 'Date Time',
dataIndex: 'unix_time_stamp',
width: 120,
menuDisabled:true,
// submitFormat: 'd/m/Y',
renderer: Ext.util.Format.dateRenderer('m/d/Y'),
field:{ xtype:'datefield',
autoSync:true,
allowBlank:false,
editor: new Ext.form.DateField(
{format: 'm/d/y'}) }
}];
this.callParent(arguments);
},
});
VIEWPORT:
Ext.Loader.setConfig({enabled:true});
Ext.application({
requires: ['Ext.container.Viewport'],
name: 'AM',
appFolder: 'app',
controllers: ['Users'],
launch: function() {
Ext.create('Ext.container.Viewport', {
layout: 'border',
items:[{
region: 'center',
itemId:'centerPanelRegion',
title:'The Title',
xtype: 'tabpanel',
hidden: true,
activeTab: 0,
items:[{
xtype: 'userlist',
listeners:
{
select: function(selModel, record, index, options)
{
// do something with the selected date
console.log('select');
},
add: function(selModel)
{
// do something with the selected date
console.log('add - init2.js');
},
afterrender:function(selModel)
{
// do something with the selected date
console.log('afterrender - userlist(init2.js)');
},
beforerender:function(selModel)
{
// do something with the selected date
console.log('beforerender - userlist(init2.js)');
}
}
}]
},
{
region: 'west',
itemId:'westPanelRegion',
hidden: true,
layout:'fit',
xtype: 'tabpanel',
activetab:0,
collapsible:false,
split: false,
title: 'The Title',
width:178,
maxWidth:400,
height: 100,
minHeight: 100,
items:[{
title: 'Tab 1',
xtype:'panel',
items:
[{
xtype: 'datepicker',
itemId:'datePickerFld',
listeners:{
beforerender: function(){
console.log('datepicker - beforerender(init2.js)');
var store = Ext.getStore('dates');
store.load({callback: function(){
console.log('datepicker - callback(init2.js');
console.log(store.data.items[999].data.recip_email);
console.log(store.data.items[999].data.unix_time_stamp);
}
})
}
},
handler: function(picker, date)
{
// do something with the selected date
console.log('date picker example in init2.js' + Ext.Date.format(date,'m/d/Y'));
// get store by unique storeId
var store = Ext.getStore('Users');
// clear current filters
store.clearFilter(true);
// filter store
Ext.encode(store.filter("unix_time_stamp", Ext.Date.format(date,'m/d/Y')));
//store.load();
//store.sync();
}
}]
},
{
title: 'Tab 2',
html: 'ers may be added dynamically - Others may be added dynamically',
}]
}]
});
}
});
CONTROLLER:
Ext.define('AM.controller.Users', {
extend: 'Ext.app.Controller',
stores:['Users', 'dates'],
models:['User', 'date'],
views: ['user.List','user.Edit'],
init: function() {
Ext.getStore('dates').addListener('load',this.ondatesStoreLoad, this);
this.control(
{
'viewport > userlist':
{
itemdblclick: this.editUser,
},
'useredit button[action=save]':
{
click: this.updateUser
}
});
},
// ---------- handler Function declarations -------------
ondatesStoreLoad: function(me,records,success)
{
// ------ Gets the dates from dates store and loads an array
var store = this.getStore('dates');
sendDataArray = [];
store.each(function(record){
var recordArray = [record.get("unix_time_stamp")];
sendDataArray.push(recordArray);
});
// ------ Set DatePicker Bullshit right fucking here --------//
var dtFld = Ext.ComponentQuery.query('#datePickerFld')[0];
dtFld.setDisabledDates(["^(?!"+sendDataArray.join("|")+").*$"]);
dtFld.setMaxDate(new Date());
dtFld.setMinDate(new Date('05/01/2013'));
var wstPnlReg = Ext.ComponentQuery.query('#westPanelRegion')[0];
wstPnlReg.show();
var ctrPnlReg = Ext.ComponentQuery.query('#centerPanelRegion')[0];
ctrPnlReg.show();
// var grid = Ext.widget('userlist');
},
onUsersStoreDataChange: function(me)
{
//console.log('Hey the store data just changed!');
},
editUser: function(grid, record)
{
var view = Ext.widget('useredit');
view.down('form').loadRecord(record);
},
updateUser: function(button)
{
var win = button.up('window'),
form = win.down('form'),
record = form.getRecord(),
values = form.getValues();
record.set(values);
win.close();
this.getUsersStore().sync();
},
});
UPDATED VIEWPORT: Changes made only in datepicker handler
Ext.Loader.setConfig({enabled:true});
Ext.application({
requires: ['Ext.container.Viewport'],
name: 'AM',
appFolder: 'app',
controllers: ['Users'],
launch: function() {
Ext.create('Ext.container.Viewport', {
layout: 'border',
items:[{
region: 'center',
itemId:'centerPanelRegion',
title:'The Title',
xtype: 'tabpanel',
hidden: true,
activeTab: 0,
items:[{
xtype: 'userlist',
listeners:
{
select: function(selModel, record, index, options)
{
// do something with the selected date
console.log('select');
},
add: function(selModel)
{
// do something with the selected date
console.log('add - init2.js');
},
afterrender:function(selModel)
{
// do something with the selected date
console.log('afterrender - userlist(init2.js)');
},
beforerender:function(selModel)
{
// do something with the selected date
console.log('beforerender - userlist(init2.js)');
}
}
}]
},
{
region: 'west',
itemId:'westPanelRegion',
hidden: true,
layout:'fit',
xtype: 'tabpanel',
activetab:0,
collapsible:false,
split: false,
title: 'The Title',
width:178,
maxWidth:400,
height: 100,
minHeight: 100,
items:[{
title: 'Tab 1',
xtype:'panel',
items:
[{
xtype: 'datepicker',
itemId:'datePickerFld',
listeners:{
beforerender: function(){
console.log('datepicker - beforerender(init2.js)');
var store = Ext.getStore('dates');
store.load({callback: function(){
console.log('datepicker - callback(init2.js');
console.log(store.data.items[999].data.recip_email);
console.log(store.data.items[999].data.unix_time_stamp);
}
})
}
},
handler: function(picker, date)
{
// do something with the selected date
console.log('date picker example in init2.js' + Ext.Date.format(date,'m/d/Y'));
// get store by unique storeId
var store = Ext.getStore('Users');
// clear current filters
store.clearFilter(true);
// filter store
store.filter("unix_time_stamp", Ext.Date.format(date,'m/d/Y'));
// Load the store
store.load();
}
}]
},
{
title: 'Tab 2',
html: 'ers may be added dynamically - Others may be added dynamically',
}]
}]
});
}
});
This line is likely causing the issues.
Ext.encode(store.filter("unix_time_stamp", Ext.Date.format(date,'m/d/Y')));
I'm not sure why you are calling Ext.encode on whatever store.filter returns, but I don't think you want to do that (and it is likely causing the undefined errors).
As for the paging toolbar not updating the current count, it is likely you just aren't returning the correct information in your server response when updating the store. The server response should include the total number of records. According to the docs for Ext.toolbar.Paging, http://docs.sencha.com/extjs/4.2.2/#!/api/Ext.toolbar.Paging:
The packet sent back from the server would have this form:
{
"success": true,
"results": 2000,
"rows": [ // ***Note:** this must be an Array
{ "id": 1, "name": "Bill", "occupation": "Gardener" },
{ "id": 2, "name": "Ben", "occupation": "Horticulturalist" },
...
{ "id": 25, "name": "Sue", "occupation": "Botanist" }
]
}