The smaller my screen size is, the more columns will not have values. As soon as I adjust the width of my screen manually (by dragging it larger or smaller), all the values will show up. This seems like a bug. I've attached 2 photos showing how the html shows up on adjacent cells with a value and without a value showing.
One cell showing value the next not showing value |
Before I drag the window size
getGridProps: ->
{ budgets } = #props.profile
rowHeight = headerHeight = 35
extraHeightToPreventScrollBar = 10
rowsCount = budgets?.length ? 0
columns: #getColumns()
rowGetter: (i) =>
budgetRows = #getBudgetRows()
budgetRows[i]
rowsCount: rowsCount
minHeight: rowsCount * rowHeight + headerHeight + extraHeightToPreventScrollBar
enableCellSelect: not #state.tableDisabled
onGridRowsUpdated: #handleGridRowsUpdated
getColumns: ->
cols = [{ key: 'year', name: 'Year', editable: false, width: 70 }]
for month in MONTHS
cols.push
key: month
name: month
editable: not #state.tableDisabled
formatter: FormattedCell
cols.push
key: 'total'
name: 'Total'
editable: false
formatter: FormattedCell
cols.push
key: 'trash'
name: ''
editable: false
formatter: getTrashCan #removeBudget, #state.tableDisabled
width: 50
cols
getBudgetRows: ->
{ budgets } = #props.profile
_.map budgets, (monthlyBudgets) ->
row = { year: monthlyBudgets.year }
for month, monthIdx in MONTHS
row[month] = monthlyBudgets.budgets[monthIdx] ? '' # ReactDataGrid cannot take null, convert to ''
row.total = Util.getBudgetsTotal monthlyBudgets ? ''
row.trash = monthlyBudgets.year
row
A solution we found is to add minColumnWidth: 10 to the gridProps
Related
my code runs perfectly but the nested function (my_upd) does not run inside the report function. Only the function def (report): runs.
How can the nested function (my_upd) run together with the outer function (report) inside a class?.
What I want to achieve is when I click the "Report_But", the my_win window inside the report function should be displayed and when I select a date from the tkcalendar, my_upd function should run.
See the code bellow
from tkinter import *
class Main:
def __init__(self):
self.mainw = Tk()
self.mainw.title("Daily sales report")
width = 1000
height = 700
screen_width = self.mainw.winfo_screenwidth()
screen_height = self.mainw.winfo_screenheight()
x = (screen_width / 2) - (width / 2)
y = (screen_height / 2) - (height / 2)
self.mainw.geometry("%dx%d+%d+%d" % (width, height, x, y))
self.mainw.resizable(0, 0)
self.frame = Frame(self.mainw, width=1000, height=700, bg="#FFFFFF")
self.frame.place(x=0, y=0)
self.frameinfo = self.frame.place_info()
self.reportbut = Button(self.frame, text="Report_But", font="roboto 14", bd=5, width=8, bg="#FFFFFF",
command=self.report)
self.reportbut.place(x=10, y=5, height=40, width = 200)
def report(self):
import tkinter as tk
from tkinter import ttk
from tkcalendar import DateEntry
import sqlite3
self.my_win = tk.Tk()
self.my_win.geometry("1350x800") # Size of the window
self.my_win.title("Christ the light limitd") # Adding a title
self.sel = tk.StringVar()
self.cal = DateEntry(self.my_win, selectmode='day', textvariable=self.sel)
self.cal.grid(row=0, column=0, padx=20, pady=30)
def my_upd(*args):
if (len(self.sel.get()) > 4):
date = self.cal.get_date() # get selected date object from calendar
date1 = date.strftime('%y-%m-%d') # format for MySQL date column
date2 = date.strftime("%d-%B-%Y") # format to display at label
self.le1.config(text=date2) # display date at Label
conn = sqlite3.connect(r'E:\report.db')
c = conn.cursor()
query = ("select * from sales where Date = :d")
c.execute(query, (date1,))
saleslist = c.fetchall()
for item in self.trv.get_children(): # delete all previous listings
self.trv.delete(item)
total = 0 # to store total sale of the selected date
for data in saleslist:
self.trv.insert("", 'end', iid=data[0], text=data[0],
values=(data[0], data[1], data[2], data[3], data[4], data[5], data[6]))
total = round(total + (data[5]), 2)
self.le2.config(text="Total: " + str(total) + "ssp") # show total value
self.le1 = tk.Label(self.my_win, font=('Times', 22, 'bold'), fg='blue')
self.le1.grid(row=0, column=1)
self.trv = ttk.Treeview(self.my_win, selectmode='browse')
self.trv.grid(row=1, column=1, padx=20, pady=20)
# number of columns
self.trv["columns"] = ("1", "2", "3", "4", "5", "6", "7")
self.trv['height'] = 20
# Defining heading
self.trv['show'] = 'headings'
# width of columns and alignment
self.trv.column("1", width=100, anchor='c')
self.trv.column("2", width=100, anchor='c')
self.trv.column("3", width=100, anchor='c')
self.trv.column("4", width=100, anchor='c')
self.trv.column("5", width=100, anchor='c')
self.trv.column("6", width=100, anchor='c')
self.trv.column("7", width=100, anchor='c')
# respective columns
self.trv.heading("1", text="Transaction ID")
self.trv.heading("2", text="Invoice No.")
self.trv.heading("3", text="Product ID")
self.trv.heading("4", text="Description")
self.trv.heading("5", text="Quantity")
self.trv.heading("6", text="Total Price")
self.trv.heading("7", text="Date")
self.sel.trace('w', my_upd)
self.le2 = tk.Label(self.my_win, font=('Times', 22, 'bold'), fg='red')
self.le2.grid(row=1, column=2, sticky='ne', pady=20)
self.my_win.mainloop()
w=Main()
w.mainw.mainloop()
I keep track of trading data in a private spreadsheet and, once a trade is closed, I push a button to run some AppsScript to copy the data across to a publicly visible spreadsheet. It all works well except the following point. I put the dates and times a trade is opened in two different columns and the same with the dates and times trades are closed. When I copy the dates across to the target spreadsheet, instead of "10 Jul 2022" it is showing as "10/07/2022 02:00:00". When I sort the spreadsheet on these date and time columns, this can often produce unwated results. What I want is for the date column to just display as "10 Jul 2022" and for that data to recognized as a date for sorting purposes. Is that possible?
function updatePublicSheet(){
var coinBought;
var dateBought;
var timeBought;
var priceBought;
var dateSold;
var timeSold;
var priceSold;
var sLrIndex;
var tLrIndex;
var sss = SpreadsheetApp.openByUrl("https://docs.google.com/spreadsheets/d/1cBGpD0nUqCGtQqq78svw4fxA4ZgwBqV2yzIbgY1tY2o/edit#gid=1107419239");
var sSheet = sss.getSheetByName('SS Open Trades');
var sRng = sSheet.getRange("H3:J").getValues();
// Find last entry in columns H, I or J in the Open Trades sheet
for (var i = sRng.length-1;i>=0;i--){
var sLrIndex = i;
if (!sRng[i].every(function(c){return c == "";})){
break;
}
}
Logger.log("Last source row is %s", sLrIndex + 3);
// Check that the closed information has been added to all columns
// index 8 = 8th column = H = dateSold
// index 9 = 9th column = I = timeSold
// index 10 = 10th column = J = priceSold
if ((sSheet.getRange((sLrIndex + 3),8).getValue().length) == 0 ||
(sSheet.getRange((sLrIndex + 3),9).getValue().length) == 0 ||
(sSheet.getRange((sLrIndex + 3),10).getValue().length) == 0){
SpreadsheetApp.getUi().alert("You cannot process partially completed entries");
return;
}
// If there is a complete closed entry, copy the values to the variables
if (sLrIndex > 0)
{
coinBought = sSheet.getRange((sLrIndex + 3),2).getValue();
dateBought = toUtcString(sSheet.getRange((sLrIndex + 3),4).getValue());
timeBought = sSheet.getRange((sLrIndex + 3),5).getValue();
priceBought = sSheet.getRange((sLrIndex + 3),6).getValue();
dateSold = toUtcString(sSheet.getRange((sLrIndex + 3),8).getValue());
timeSold = sSheet.getRange((sLrIndex + 3),9).getValue();
priceSold = sSheet.getRange((sLrIndex + 3),10).getValue();
//Logger.log(priceSold);
}
else
{
SpreadsheetApp.getUi().alert("There are no completed entries to process");
return;
}
var tss = SpreadsheetApp.openByUrl("https://docs.google.com/spreadsheets/d/1umkTCr95FZUrZzv0e_ZDD9QZYiiYuH1fJohPYQzNE9Q/edit#gid=1644116137");
var tSheet = tss.getSheetByName('Trade Tracker');
var tRng = tSheet.getRange("B3:J").getValues();
// Create a new row at Row 5 on the Trades Tracker Sheet
tSheet.insertRows(5, 1);//shift all rows down by one from row 5
// Copy values from row 4 to row 5, including the formulae
var tRange = tSheet.getRange(4, 1, 1, 26);
tRange.copyTo(tSheet.getRange(5, 1, 1, 26), {contentsOnly:false});
// Populate row 4, first 7 table columns, from the variables
//Logger.log(coinBought);
tSheet.getRange(4,2).setValue(coinBought);
tSheet.getRange(4,3).setValue(dateBought);
tSheet.getRange(4,4).setValue(timeBought);
tSheet.getRange(4,5).setValue(priceBought);
tSheet.getRange(4,6).setValue(dateSold);
tSheet.getRange(4,7).setValue(timeSold);
tSheet.getRange(4,8).setValue(priceSold);
// Format the cells with dates and times
tSheet.getRange(4,3).setNumberFormat("dd MMM yyyy"); // Short Date
tSheet.getRange(4,4).setNumberFormat("HH:mm"); // Short Time
tSheet.getRange(4,6).setNumberFormat("dd MMM yyyy"); // Short Date
tSheet.getRange(4,7).setNumberFormat("HH:mm"); // Short Time
// Sort the sheet by date/time closed
// Find last entry in Trade Tracker sheet
for (var i = tRng.length-1;i>=0;i--){
var tLrIndex = i;
if (!tRng[i].every(function(c){return c == "";})){
break;
}
}
Logger.log("Last target row is %s", tLrIndex + 4);
var tRange = tSheet.getRange(4, 2, tLrIndex + 4, 8)
tRange.sort([{column: 6, ascending: false}, {column: 7, ascending: false}]);
// On the source sheet, delete the row just copied and add another blank row at the bottom of the table
sSheet.deleteRows(sLrIndex + 3, 1);
var rowLast = sSheet.getLastRow();
sSheet.insertRowAfter(rowLast - 1);
// Copy values from the new last row to the new previous to last row, including the formulae
var sRange = sSheet.getRange(rowLast + 1, 1, 1, 10);
sRange.copyTo(sSheet.getRange(rowLast - 1, 1, 1, 10), {contentsOnly:false});
SpreadsheetApp.getUi().alert("One completed entry processed");
}
I have an area chart and on the vAxis I'd like the labels to read # hrs. For the data below, the Total Time Spent column is an integer of total minutes. I'd like the vAxis label to show as # hrs. So for example, the first row would read 31.3 hrs. I'm not finding a way to create a custom formatter for that where I can convert the minutes into decimal hours and append the "hrs" suffix. Any ideas? Thanks.
var data = google.visualization.arrayToDataTable([
['Date', 'Deals Processed', 'Total Time Spent'],
[ '12/17/2020', 4, 1878],
[ '12/18/2020', 3, 290],
[ '12/21/2020', 8, 2772],
[ '12/22/2020', 6, 1084],
[ '12/23/2020', 4, 1175]
]);
we can customize the y-axis labels by providing our own ticks.
for each tick, we can use object notation, and provide the value (v:) and formatted value (f:)
{v: 1878, f: '31.3 hrs'}
we can also customize the tooltip when hovering the point by using the same approach,
in the data table.
['12/17/2020', 4, {v: 1878, f: '31.3 hrs'}],
or we can set the formatted value after the data table has been created.
data.setFormattedValue(0, 2, (1878 / 60).toFixed(1) + ' hrs');
to build the ticks, we can use data table method --> getColumnRange(columnIndex)
this will return an object with properties for min & max
which we can use to build our ticks array.
// build y-axis labels
var range = data.getColumnRange(2);
var max = Math.ceil(range.max / 100) * 100;
var ticks = [];
for (var i = 0; i <= max + 600; i = i + 600) {
ticks.push({
v: i,
f: (i / 60).toFixed(0) + ' hrs'
});
}
see following working snippet...
google.charts.load('current', {
packages: ['corechart']
}).then(function () {
var data = google.visualization.arrayToDataTable([
['Date', 'Deals Processed', 'Total Time Spent'],
[ '12/17/2020', 4, 1878],
[ '12/18/2020', 3, 290],
[ '12/21/2020', 8, 2772],
[ '12/22/2020', 6, 1084],
[ '12/23/2020', 4, 1175]
]);
// format tooltip
for (var i = 0; i < data.getNumberOfRows(); i++) {
var minutes = data.getValue(i, 2);
data.setFormattedValue(i, 2, (minutes / 60).toFixed(1) + ' hrs');
}
// build y-axis labels
var range = data.getColumnRange(2);
var max = Math.ceil(range.max / 100) * 100;
var ticks = [];
for (var i = 0; i <= max + 600; i = i + 600) {
ticks.push({
v: i,
f: (i / 60).toFixed(0) + ' hrs'
});
}
var options = {
height: 400,
vAxis: {
ticks: ticks
}
};
var chart = new google.visualization.AreaChart(document.getElementById('chart_div'));
chart.draw(data, options);
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
I am building a chart with dates as the x-axis and we use Baidu echarts to build them.
For a range of 10-15 days, I just plot them via xAxis.data and it works. But when I have a bigger range, say of 2-3 months, the dates come up stacked or too crunched for space as there are many of them. After looking at some ideas on the web, I was thinking of formating them as below(The days are grouped by months and seperated at a uniform gap of 8-10 days):
2 12 22 2 12 22 2 12 22
Dec Jan Feb
I am aware of the xAxis.axisLabel.formatter but that seems to be helpful when I want to format individual entry, not what I want. Is it possible in echarts to have a multi-level x-axis where top is individual entries & bottom row basically represents group for them?
Hope it made sense.
Here's an example: https://gallery.echartsjs.com/editor.html?c=xBk7TY_hWx
Generally speaking, you need to create an extra entry in xAxis (or yAxis in the example's case) and another series like:
{
type: 'bar',
data:['-', '-', '-', '-', '-'],
yAxisIndex: 2
}
For more general implementation of the grouped category axis, hope this example is helpful to you.
https://jsfiddle.net/borguenon/kyj2pxhz/13/
xAxis: [
{
position: "bottom",
data: ["shirt","cardign","chiffon shirt","pants","heels","socks"]
},
{
position: "bottom",
data: ["group1", "", "", "group2", "", ""],
interval: 1,
axisLine: {
show: false
},
axisTick: {
alignWithLabel: false,
length: 40,
align: "left",
interval: function(index, value) {
return value ? true : false;
}
},
axisLabel: {
margin: 30
},
splitLine: {
show: true,
interval: function(index, value) {
return value ? true : false;
}
}
}
]
Grouped category axis
I am trying to get the y-axis of my stacked Google column chart proportional. I have tweaked the settings and am not able to get it to work. If the max column value is 1, there should only be 1 horizontal grid line. There should not be three with the value of 1. That doesn't make sense.
Here are my chart options:
var options = {
colors: ['#ba1f1f', '#306b34', '#255f85', '#e28413', '#f24333'],
bar: { groupWidth: "90%" },
chartArea: { left: 50, top: 10, width: '100%', height: '75%' },
legend: { position: 'bottom' },
animation: { startup: true, duration: 250, easing: 'linear' },
isStacked: true,
hAxis: {
slantedText: true
},
vAxis: {
format: '#'
},
height: 350
};
And here is a picture of my problem:
Does anyone have any suggestions on how to fix this? Thanks!
Update with #WhiteHat's suggestions:
I tried your suggestion. It didn't really work. Here is my result if I set explicitly and not based on the column range max.
The total count for the 8 AM column is 7. 7 AM is 4 and 6 AM is 1.
I could have to do some other data manipulation to count the total number per column in the stacked column chart and find the max to not explicitly set the gridlines count. But that is after I can get it working correctly.
you can add following option when max column value is 1
vAxis: {
gridlines: {
count: 2 //<-- default is 5
}
},
or add decimals to format : '#,##0.00' to avoid repeating 1
you can use data table method to check max column value
data.getColumnRange(columnIndex).max