height = 600
margin = ({top: 25, right: 20, bottom: 35, left: 40})
group_by_item = d3.groups(Briggs_items, d=> d.ITEM).sort((a, b) => d3.ascending(a[0], b[0]))
function parse_repeated_items(arr){
let groupByItem = d3.group(arr, d=> d.Item)
return mapToArr2(groupByItem).filter(t=> t!=null)
}
// Martens_parse = parse_repeated_items(Martens_items_select)
Martens_receipts = parse_repeated_items(Martens_items_select)
Goldson_receipts = parse_repeated_items(Goldson_items_select)
function sparkbar(max) {
return x => htl.html`<div style="
background: #ffeeee;
width: ${100 * x / max}%;
float: right;
padding-right: 3px;
box-sizing: border-box;
overflow: visible;
display: flex;
justify-content: end;">${x.toLocaleString("en")}`
}
Inputs.table(Martens_receipts, {
format: {
STORE: x => x,
ITEM: x => x,
// MOUNT_21: x=> x,
// AMOUNT_22: x=> x,
PRICE_21: x=> '$'+x,
PRICE_22: x=> '$'+x,
PRICE_CHANGE: sparkbar(100),
},
rows: 18,
})
Inputs.table(Goldson_receipts, {
format: {
STORE: x => x,
ITEM: x => x,
// MOUNT_21: x=> x,
// AMOUNT_22: x=> x,
PRICE_21: x=> '$'+x,
PRICE_22: x=> '$'+x,
PRICE_CHANGE: sparkbar(100),
},
rows: 25,
})
Inputs.table(repeated_items_parsed_group_by_item_arr, {
format: {
STORE: x => x,
ITEM: x => x,
// MOUNT_21: x=> x,
// AMOUNT_22: x=> x,
PRICE_21: x=> '$'+x,
PRICE_22: x=> '$'+x,
PRICE_CHANGE: sparkbar(100),
},
rows: 25,
})
repeated_items_parsed_group_by_item = d3.group(repeated_items_parsed, d=> d.ITEM)
repeated_items_parsed_group_by_item_arr = mapToArr(repeated_items_parsed_group_by_item)
function mapToArr2(myMap){
const arr=[];
for (const [key, value] of myMap.entries()) {
arr.push(value)
}
const arr_parsed = arr.map(a=>{
if(a.length<2){
return null
}
return {
'STORE': a[0]['Store'],
'ITEM': a[0]['Item'],
'PRICE_21': a[0]['Price'],
'PRICE_22': a[1]['Price'],
'PRICE_CHANGE': +((a[1]['Price']/a[0]['Price']-1)*100).toFixed(1),
// 'AMOUNT_21':a[0]['Amount'],
// 'AMOUNT_22': a[1]['Amount'],
}
})
return arr_parsed
}
function mapToArr(myMap){
const arr=[];
for (const [key, value] of myMap.entries()) {
arr.push(value)
}
const arr_parsed = arr.map(a=>{
return {
'STORE': a[0]['STORE'],
'ITEM': a[0]['ITEM'],
'PRICE_21': a[0]['PRICE'],
'PRICE_22': a[1]['PRICE'],
'PRICE_CHANGE': +((a[1]['PRICE']/a[0]['PRICE']-1)*100).toFixed(1),
// 'AMOUNT_21':a[0]['AMOUNT'],
// 'AMOUNT_22': a[1]['AMOUNT'],
}
})
return arr_parsed
}
repeated_items_parsed = repeated_items.map(a=> ((['GV Whipped Topping', 'GV Mozzarella', 'Prairie Farms Cottage Cheese'].indexOf(a[0])> -1)?[ a[1][1], a[1][ (a[1]).length-1 ] ]: [ a[1][0], a[1][ (a[1]).length-1 ] ]) )
.flat()
function mapToArr_store(myMap, year=2021){
let arr=[];
for (const [key, value] of myMap.entries()) {
let value_arr=[]
for (const [vk, vv] of value.entries()){
arr.push({'year': year, 'type': key, 'store': vk, 'total':+(vv.toFixed(2)) })
}
}
return arr
}
async function sheet_data_fn (new_url){
let sheet_data =[];
const spreadsheet = await d3.tsv(new_url)
.then(data => data.forEach(d => sheet_data.push(d))); // d3.tsv returns a Promise
return sheet_data;
}
Martens_items_select=sheet_data_fn('https://docs.google.com/spreadsheets/d/e/2PACX-1vQB4Pf6V3yasBVlSkL2bnlRE8V2e1tRefXCREuGjNw_U0NANdf7GelDkgaJmAH2El6ZDoeSOsmfeAAo/pub?gid=909564551&single=true&output=tsv')
Goldson_items_select=sheet_data_fn('https://docs.google.com/spreadsheets/d/e/2PACX-1vTBI7ypDdbeSjGgpnQthJH0ASZDcwcRmNKk6Q6Rjf5qHR-lnsW6l22IrF62Pth0mBlaqqeDqJZyXU7X/pub?gid=1113772211&single=true&output=tsv')
Briggs_items_select=sheet_data_fn('https://docs.google.com/spreadsheets/d/e/2PACX-1vT_sX7tjSbIK7YdazBjbC8OvpSb6EvK6FCG_pKz9SJcCezKovOUITaklnBCFgstJWtiaNLQxMYHmqB8/pub?gid=594202001&single=true&output=tsv')
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
