Printer card chips

frontend/src/components/dashboardCards.js

@@ -89,11 +89,34 @@ export function overflowCount(card) {
   return Math.max(0, rows(card).length - MAXROWS)
 }
 
+// Chips are the row's own small facts, each carrying a tooltip: a depleted
+// cartridge shows "Black 4%" and reveals the part number to order on hover.
+// The percentage says something is wrong; the tooltip says what to do about
+// it, which otherwise means opening the printer's page to find out.
+export function mapChips(card, item) {
+  const key = card.map && card.map.chips
+  const list = key ? item[key] : null
+  if (!Array.isArray(list)) return []
+  return list
+    .filter((chip) => chip && chip.text)
+    .map((chip) => ({ text: chip.text, title: chip.title || '', level: chip.level || '' }))
+}
+
+// A tooltip on the row title, for context that would clutter the line - a
+// printer's location, say. Never load-bearing: hover is not discoverable and
+// does not exist on touch, so nothing essential goes here.
+export function mapTitleTip(card, item) {
+  const key = card.map && card.map.titletooltip
+  return key ? (item[key] || '') : ''
+}
+
 export function cardRows(card) {
   return rows(card).map((item) => ({
     title: mapTitle(card, item),
+    titletip: mapTitleTip(card, item),
     detail: mapDetail(card, item),
     meta: mapMeta(card, item),
+    chips: mapChips(card, item),
     link: mapLink(card, item),
     timestamp: card.map && card.map.timestamp ? item[card.map.timestamp] : null,
   }))