2f:T529,function prepareIngredientsView(ingredients, maxIngredientsNumber = 5) { const compareIngredients = (a, b) => { return b.ingredientFootprintCO2 - a.ingredientFootprintCO2; }; ingredients = ingredients.map((d) => ({ ...d, ingredientFootprintCO2: +d.ingredientFootprintCO2 })); ingredients.sort(compareIngredients); let filteredIngredients = ingredients.slice(0, maxIngredientsNumber); if (ingredients.length > maxIngredientsNumber) { const lastIngredient = { off_id: null, off_name: "Others", agb_ciqual_id: null, agb_name: null, perKgIngredientFootprintCO2: 0, percent: 0, quantity: 0, ingredientFootprintCO2: 0 }; filteredIngredients[maxIngredientsNumber - 1] = lastIngredient; for (let i = maxIngredientsNumber - 1; i < ingredients.length; i++) { const currentIngredient = ingredients[i]; (lastIngredient.perKgIngredientFootprintCO2 += +currentIngredient.perKgIngredientFootprintCO2 || 0), (lastIngredient.percent += +lastIngredient.percent || 0); lastIngredient.quantity += +lastIngredient.quantity || 0; lastIngredient.ingredientFootprintCO2 += +lastIngredient.ingredientFootprintCO2 || 0; lastIngredient.quantity += +lastIngredient.quantity || 0; } } return filteredIngredients; }30:T47f,function renderDonutLegends (productInfo) { const { code, quantity, name, footprintCO2, productFootprintCO2Off } = productInfo; const ingredients=prepareIngredientsView(productInfo.ingredients) const formatNumber=(number)=>{ const formatedNumber= new Intl.NumberFormat("fr-FR", { maximumSignificantDigits: 2 }).format((number)*100); return `${formatedNumber} g` } const ingredientName=(ingredient)=>ingredient.off_name?ingredient.off_name:ingredient.off_id const content=htl.html`

` const wrapper=htl.html`

${content}

`; const legend=ingredients.forEach((ingredient,index)=>{ content.appendChild(htl.html`

${ingredientName(ingredient)}

${formatNumber(ingredient.ingredientFootprintCO2)}

`) }) return wrapper }31:T7b5,function renderProductView(productInfo) { if (!productInfo) return htl.html`Please search a product before`; const { code, quantity, name, productFootprintCO2, productFootprintCO2Off, ingredients } = productInfo; const ingredientsTable = Inputs.table(ingredients,{ header:{ off_id: "id", off_name: "off name", agb_ciqual_id: "id agribalyse", agb_name: "off name", perKgIngredientFootprintCO2: "co2e per kg", percent: "%", quantity: "mass (g)", ingredientFootprintCO2: "co2e ingredient" } }); const formatNumber = (number) => { const formatedNumber = new Intl.NumberFormat("fr-FR", { maximumSignificantDigits: 2 }).format(number * 100); return `${formatedNumber} g`; }; const width = 400; const height = 300; const donutData = prepareIngredientsView(ingredients); console.log({ donutData }); const co2DonutChart = DonutChart( donutData, //.filter((d) => d.ingredientFootprintCO2 > 0), { name: (d) => d.off_id, value: (d) => d.perKgIngredientFootprintCO2, width, title: (d) => "", colors: donutColors, height } ); const co2DonutLegends = renderDonutLegends(selectedProduct); const bigNumber = formatNumber(productFootprintCO2); return htl.html`

[${code}] ${name}

Quantity: ${quantity} g
Footprint CO₂e: ${formatNumber(productFootprintCO2)}
Footprint CO₂e in OpenFoodFact: ${formatNumber( productFootprintCO2Off )}

${ingredientsTable}

${co2DonutChart}

${bigNumber}

${co2DonutLegends}

`; }32:T5aa,function renderSearchBar({ term = "", suggestions = [] }) { { const input = htl.html``; //Inputs.text({ label: "Search product: ", submit: true }); input.addEventListener("input", (event) => { event.preventDefault(); event.stopPropagation(); }); let result; const onSubmit = (event) => { console.log(">>", event); event.preventDefault(); event.stopPropagation(); event.target.dispatchEvent(new CustomEvent("input", { bubbles: true })); }; const submit = htl.html``; const newClickListener = (name) => (ev) => { ev.preventDefault(); ev.stopPropagation(); input.value = name; // submit.disabled = false; }; const suggestionsList = suggestions.map( (name) => htl.html`${name}` ); result = htl.html`

${input} ${submit}

Suggestions: ${suggestionsList}

`; Object.defineProperty(result, "value", { get() { return input.value; }, set(value) { input.value = value; } }); return result; } }33:T7a4,function renderResultsTable(products) { let selectedProduct = products[0]; const numberFormatter = new Intl.NumberFormat("fr-FR", { maximumSignificantDigits: 2 }); const formatNumber = (v) => htl.html`

${numberFormatter.format( +v || 0 )}

`; const formatRow = (d) => { let view; const onClick = (e) => { e.preventDefault(); e.stopPropagation(); selectedProduct = d; e.target.dispatchEvent( new CustomEvent("input", { bubbles: true }) ); }; const code = htl.html`${d.code}`; const name = htl.html`${d.name}`; const quantity = formatNumber(d.quantity); const productFootprintCO2 = formatNumber(d.productFootprintCO2); const perKgFootprintCO2 = formatNumber(d.perKgFootprintCO2); const productFootprintCO2Off = formatNumber(d.productFootprintCO2Off); const perKgproductFootprintCO2Off = formatNumber( d.perKgproductFootprintCO2Off ); view = htl.html` ${code} ${name} ${quantity} ${productFootprintCO2} ${perKgFootprintCO2} ${productFootprintCO2Off} ${perKgproductFootprintCO2Off} `; return view; }; const rows = products.map(formatRow); const table = htl.html` ${rows}

ID	Product Name	Quantity (g)	CO₂e Footprint Greenly		CO₂e Footprint Open Food Facts
ID	Product Name	Quantity (g)	Per Product	Per Kg	Per Product	Per Kg

`; Object.defineProperty(table, "value", { get: () => selectedProduct }); return table; // return Inputs.table(products); }34:T732,function loadProductInfo(product) { const ingredients = []; let { code, product_name, abbreviated_product_name_fr, product_quantity = 1000, carbon_footprint_percent_of_known_ingredients, ecoscore_data = {} } = product; if (!product_name) product_name = abbreviated_product_name_fr; //console.log("--", product); if (!code) return null; const co2data = ecoscore_data.agribalyse || {}; const productAgribalyseInfo = getAgribalyseInfo(); let productFootprintCO2 = 0; for (let ingredient of product.ingredients || []) { let { id, percent_estimate, percent_max, percent_min } = ingredient; const percent = percent_estimate || 0; const { off_name, agb_ciqual_id, agb_name, agb_score_co2 = 0 } = getAgribalyseInfo(id); const ingredientQuantity = (percent * product_quantity) / 100; const perKgIngredientFootprintCO2 = agb_score_co2; const ingredientFootprintCO2 = (perKgIngredientFootprintCO2 * ingredientQuantity) / 1000; productFootprintCO2 += ingredientFootprintCO2; const ingredientInfo = { off_id: id, off_name, agb_ciqual_id, agb_name, percent, quantity: ingredientQuantity, ingredientFootprintCO2, perKgIngredientFootprintCO2, }; ingredients.push(ingredientInfo); } // console.log(">>", co2data, co2data.co2_total); const productFootprintCO2Off=co2data.co2_total*product_quantity/1000; const perKgFootprintCO2=productFootprintCO2*1000/product_quantity; return { code, quantity: product_quantity, name: product_name, productFootprintCO2, perKgFootprintCO2, productFootprintCO2Off, perKgproductFootprintCO2Off: co2data.co2_total, ingredients }; function getAgribalyseInfo(id) { return indexOffAgribalyse[id] || {}; } }35:T456,// function buildProductTable(data) { // return Inputs.table(data, { // columns: [ // "product_name", // "brands", // "co2_total", // "co2_agriculture", // "co2_consumption", // "co2_distribution", // "co2_packaging", // "co2_processing", // "co2_transportation" // ], // width: { // product_name: "15em" // }, // header: { // product_name: "Name", // brands: "Brand", // co2_agriculture: "Agri", // co2_consumption: "Consum", // co2_distribution: "Distrib", // co2_packaging: "Pack", // co2_processing: "Process", // co2_transportation: "Transport", // co2_total: "Total" // }, // format: { // product_name: (name, idx, data) => { // const url = data[idx].url; // return htl.html`${name}`; // } // // image: (url) => { // // const img = new Image(); // // img.crossOrigin = "Anonymous"; // // img.src = url; // // return img; // // } // } // }); // }36:T43d,function applyTemplate(template, mapping = {}) { const div = htl.html({ raw: [template] }); for (let [key, value] of Object.entries(mapping)) { const elm = div.querySelector(`[data-cell="${key}"]`); if (!elm) { console.warn(`Cell [data-cell="${key}"] was not found`); continue; } const node = toDomNode(value); elm.appendChild(node); } return div; function toDomNode(value, doc = document, containerElm = "span") { if (value === undefined) return; if (value === null) value = ""; if (typeof value === "number" || typeof value === "boolean") value = String(value); if (typeof value === "object" && !(value instanceof Node)) { if (value !== null && value[Symbol.iterator]) { const elm = doc.createElement(containerElm); for (let val of value) { elm.appendChild(toDomNode(val, doc)); } value = elm; } else { value = Object.prototype.toString.call(value); } } if (typeof value === "string") value = doc.createTextNode(value); return value; } }37:[{"id":"fc8b7f60fd64aca57475f8bfd113ed222b70ad1da7b113abe46f38677053db266e5656d6ab54b9277692460dc58712fc95bcd841423e179df34064b8c532fd90","href":"https://static.observableusercontent.com/files/fc8b7f60fd64aca57475f8bfd113ed222b70ad1da7b113abe46f38677053db266e5656d6ab54b9277692460dc58712fc95bcd841423e179df34064b8c532fd90","name":"2023-01-25@1.Matching ingredients OFF-Agribalyse - Updated data.csv","type":"text/csv","lastModified":1676388950248.79,"size":3360696}] 2d:{"title":"Greenly Calculator API","cells":[{"id":0,"value":"# Greenly Calculator API\n\nTODO: explore the Sankey Diagrams to represent the ingredients quantity vs their impact CO2. See https://observablehq.com/@d3/sankey?collection=@d3/charts\n\nSuggestions:\n* Add weight to the list of found products. Ex: Nutella - there are many of them. With the weight column it would be more clear.","pinned":false,"hidden":false,"mode":"md"},{"id":227,"value":"## UI","pinned":false,"hidden":false,"mode":"md"},{"id":7,"value":"viewof terms = renderSearchBar({\n term: \"\",\n suggestions: [\"Doritos\", \"Nutella\"]\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":259,"value":"viewof selectedProduct = searchResults && searchResults.length\n ? renderResultsTable(searchResults)\n : htl.html`

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":448,"value":"uiStyles = `\n.welow-table {\n width: 100%;\n max-width: 100%;\n border-collapse: collapse;\n}\n.welow-table thead {}\n.welow-table tbody {\n max-height: 15em;\n overflow: auto;\n}\n.welow-table tr td,\n.welow-table tr th {\n padding: 0.8em;\n border: 2px solid #C3CFD9;\n font-size: 1rem;\n}\n.welow-table thead tr th {\n text-align: center;\n}\n`","pinned":true,"hidden":false,"mode":"ojs"},{"id":9,"value":"searchResultsView = renderProductView(selectedProduct)","pinned":true,"hidden":false,"mode":"ojs"},{"id":318,"value":"searchResults = searchProducts(terms)","pinned":true,"hidden":false,"mode":"ojs"},{"id":256,"value":"testResults = searchProducts(\"pomme\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":186,"value":"downloadButton = newDownloadButton(matchingOffAgribalyse, \"matching-off-argibalyse.json\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":309,"value":"## Rendering Methods","pinned":false,"hidden":false,"mode":"md"},{"id":232,"value":"donutColors=['#3FBFF5','#6098EA','#616BEC','#7C63D0','#B85CE4','#CB65D8'];","pinned":false,"hidden":false,"mode":"ojs"},{"id":431,"value":"formatColumns(\"Hello\", \"Wonderful\", \"World\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":428,"value":"function formatColumns(...cells) {\n const [first, ...others] = cells;\n return htl.html`

${first}

${others}

`;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":392,"value":"prepareIngredientsView(testResults[0].ingredients)","pinned":true,"hidden":false,"mode":"ojs"},{"id":386,"value":"$2f","pinned":true,"hidden":false,"mode":"ojs"},{"id":347,"value":"$30","pinned":true,"hidden":false,"mode":"ojs"},{"id":311,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":292,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":242,"value":"$33","pinned":true,"hidden":false,"mode":"ojs"},{"id":307,"value":"## Data Loading","pinned":false,"hidden":false,"mode":"md"},{"id":76,"value":"$34","pinned":true,"hidden":false,"mode":"ojs"},{"id":248,"value":"async function searchProducts(query) {\n if (!query) return [];\n let results = [];\n if (query.match(/^\\d+$/)) {\n const url = `https://world.openfoodfacts.org/api/v0/product/${query}.json`;\n const request = await fetch(url);\n const json = await request.json();\n results = json.product ? [json.product] : [];\n } else {\n const url = `https://world.openfoodfacts.org/cgi/search.pl?search_terms=${query}&search_simple=1&action=process&json=1`;\n const request = await fetch(url);\n const json = await request.json();\n results = json.products || [];\n }\n return results.map(loadProductInfo);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":60,"value":"indexOffAgribalyse = matchingOffAgribalyse.reduce((index, d) => {\n index[d.off_code] = { ...d };\n return index;\n}, {})","pinned":false,"hidden":false,"mode":"ojs"},{"id":195,"value":"matchingOffAgribalyse = {\n const rawData = await (\n await FileAttachment(\n \"2023-01-25@1.Matching ingredients OFF-Agribalyse - Updated data.csv\"\n )\n ).csv();\n const filtered = rawData.filter((d) => d.match === \"TRUE\");\n const transform = ({\n off_code,\n off_name,\n agb_ciqual_id,\n agb_name,\n agb_score_co2\n }) => {\n return { off_code, off_name, agb_ciqual_id, agb_name, agb_score_co2 };\n };\n return filtered.map(transform);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":13,"value":"$35","pinned":true,"hidden":false,"mode":"ojs"},{"id":326,"value":"## Application Export","pinned":false,"hidden":false,"mode":"md"},{"id":478,"value":"\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n

First	Second	Third	Fourth
Cell 1.1	Cell 1.2	Cell 1.3	Cell 1.4
Cell 2.1	Cell 2.2	Cell 2.3	Cell 2.4
Cell 3.1	Cell 3.2	Cell 3.3	Cell 3.4

","pinned":false,"hidden":false,"mode":"html"},{"id":475,"value":"","pinned":false,"hidden":false,"mode":"html"},{"id":188,"value":"$$application = ({\n template: `\n \n

\n \n`\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":459,"value":"// applyTemplate($application.template, {\n// \"viewof terms\": viewof terms,\n// \"viewof selectedProduct\": viewof selectedProduct,\n// searchResultsView: searchResultsView\n// })","pinned":true,"hidden":false,"mode":"ojs"},{"id":454,"value":"$36","pinned":true,"hidden":false,"mode":"ojs"},{"id":324,"value":"## Imports","pinned":false,"hidden":false,"mode":"md"},{"id":118,"value":"import { DonutChart } from \"@d3/donut-chart\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":178,"value":"async function newDownloadButton(data, filename = \"export.json\") {\n if (!data) throw new Error(\"Array of data required as first argument\");\n const json = JSON.stringify(data, null, 2);\n let downloadData = new Blob([json], { type: \"text/json\" });\n const size = (downloadData.size / 1024).toFixed(0);\n const button = DOM.download(\n downloadData,\n filename,\n `Download ${filename} (~${size} KB)`\n );\n return button;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":184,"value":"## Attik","pinned":false,"hidden":false,"mode":"md"}],"files":"$W37","stdlib":"1","titling":"auto"}