mattrguerra.comHouston area
Matt Guerra
  1. 01AI & Automation
  2. 02Photography
  3. 03Design
  4. 04About
  5. 05Notes
  6. 06Contact
Back to the systems

mattrguerra/meridian-skillsmainPrivate on GitHub, published here in full

widget-template.html

HTML7.1 KB99 lines

skills/bitrix-pipeline-board/references/widget-template.html

  1. Scaffold for the pipeline board widget passed to visualize:show_widget.
  2. Replace the D array with the parsed leads. The script computes the
  3. per-owner stacked bar and builds the filterable, linked table.
  5. Each lead object: {id, n: "title", o: "Owner Full Name", s: "Stage Name", g: "intake|active|parked"}
  7. Metric card numbers (Total / Active / Parked / Intake) and the owner filter
  8. pill counts are hardcoded in the markup below. Recompute them from D before
  9. emitting, or generate the cards/pills from D in the script. Owner pills must
  10. list every owner present in D, highest count first.
  12. ----------------------------------------------------------------------
  14. <div style="padding: 1rem 0;">
  15. <h2 class="sr-only">Interactive board of open Meridian Display Co. leads grouped by owner and pipeline stage, each linking to its Bitrix record.</h2>
  17. <div style="display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); gap:12px; margin-bottom:1.25rem;">
  18. <div style="background:var(--color-background-secondary); border-radius:var(--border-radius-md); padding:1rem;">
  19. <div style="font-size:13px; color:var(--color-text-secondary);">Total open</div>
  20. <div style="font-size:24px; font-weight:500;" id="m-total">0</div>
  21. </div>
  22. <div style="background:var(--color-background-secondary); border-radius:var(--border-radius-md); padding:1rem;">
  23. <div style="font-size:13px; color:var(--color-text-secondary);">Active</div>
  24. <div style="font-size:24px; font-weight:500;" id="m-active">0</div>
  25. </div>
  26. <div style="background:var(--color-background-secondary); border-radius:var(--border-radius-md); padding:1rem;">
  27. <div style="font-size:13px; color:var(--color-text-secondary);">Parked</div>
  28. <div style="font-size:24px; font-weight:500;" id="m-parked">0</div>
  29. </div>
  30. <div style="background:var(--color-background-secondary); border-radius:var(--border-radius-md); padding:1rem;">
  31. <div style="font-size:13px; color:var(--color-text-secondary);">Intake / new</div>
  32. <div style="font-size:24px; font-weight:500;" id="m-intake">0</div>
  33. </div>
  34. </div>
  36. <div style="display:flex; flex-wrap:wrap; gap:16px; margin-bottom:8px; font-size:12px; color:var(--color-text-secondary);">
  37. <span style="display:flex; align-items:center; gap:4px;"><span style="width:10px;height:10px;border-radius:2px;background:#888780;"></span>Intake</span>
  38. <span style="display:flex; align-items:center; gap:4px;"><span style="width:10px;height:10px;border-radius:2px;background:#1D9E75;"></span>Active</span>
  39. <span style="display:flex; align-items:center; gap:4px;"><span style="width:10px;height:10px;border-radius:2px;background:#BA7517;"></span>Parked</span>
  40. </div>
  41. <div style="position:relative; width:100%; height:260px; margin-bottom:1.5rem;">
  42. <canvas id="ownerChart" role="img" aria-label="Stacked bar chart of open leads by owner, split into intake, active and parked.">Open leads by owner.</canvas>
  43. </div>
  45. <div id="pills" style="display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-bottom:12px;">
  46. <select id="stageSel" style="margin-left:auto; width:auto; min-width:160px;"></select>
  47. </div>
  49. <div id="tableWrap" style="border:0.5px solid var(--color-border-tertiary); border-radius:var(--border-radius-md); overflow:hidden;"></div>
  51. <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.4.1/chart.umd.js"></script>
  52. <script>
  53. const D=[ /* parsed leads go here */ ];
  54. const BASE="https://meridian.bitrix24.example/crm/lead/details/";
  55. const gColor={intake:"#888780",active:"#1D9E75",parked:"#BA7517"};
  57. document.getElementById('m-total').textContent=D.length;
  58. ['intake','active','parked'].forEach(g=>{const e=document.getElementById('m-'+g);if(e)e.textContent=D.filter(d=>d.g===g).length;});
  60. const owners=[...new Set(D.map(d=>d.o))].sort((a,b)=>D.filter(d=>d.o===b).length-D.filter(d=>d.o===a).length);
  61. const stack={intake:[],active:[],parked:[]};
  62. owners.forEach(o=>{["intake","active","parked"].forEach(g=>{stack[g].push(D.filter(d=>d.o===o&&d.g===g).length);});});
  63. new Chart(document.getElementById('ownerChart'),{
  64. type:'bar',
  65. data:{labels:owners.map(o=>o.split(' ')[0]),datasets:[
  66. {label:'Intake',data:stack.intake,backgroundColor:gColor.intake},
  67. {label:'Active',data:stack.active,backgroundColor:gColor.active},
  68. {label:'Parked',data:stack.parked,backgroundColor:gColor.parked}
  69. ]},
  70. options:{indexAxis:'y',responsive:true,maintainAspectRatio:false,
  71. scales:{x:{stacked:true,ticks:{precision:0}},y:{stacked:true}},
  72. plugins:{legend:{display:false}}}
  73. });
  75. const pills=document.getElementById('pills');
  76. const stageSel=document.getElementById('stageSel');
  77. const mkPill=(label,o)=>{const s=document.createElement('span');s.className='owner-f';s.dataset.o=o;s.textContent=label;s.style.cssText='cursor:pointer;font-size:13px;padding:5px 12px;border:0.5px solid var(--color-border-secondary);border-radius:var(--border-radius-md);';return s;};
  78. const allPill=mkPill('All ('+D.length+')','all');allPill.style.background='var(--color-background-secondary)';
  79. pills.insertBefore(allPill,stageSel);
  80. owners.forEach(o=>{const c=D.filter(d=>d.o===o).length;pills.insertBefore(mkPill(o.split(' ')[0]+' ('+c+')',o),stageSel);});
  82. const stages=[...new Set(D.map(d=>d.s))];
  83. stageSel.innerHTML='<option value="all">All stages</option>'+stages.map(s=>`<option value="${s}">${s} (${D.filter(d=>d.s===s).length})</option>`).join('');
  85. let curO="all",curS="all";
  86. function badge(g){return `<span style="font-size:11px;padding:2px 8px;border-radius:var(--border-radius-md);background:${g==='parked'?'#FAEEDA':g==='intake'?'#F1EFE8':'#E1F5EE'};color:${g==='parked'?'#633806':g==='intake'?'#444441':'#0F6E56'};">`;}
  87. function render(){
  88. const rows=D.filter(d=>(curO==="all"||d.o===curO)&&(curS==="all"||d.s===curS));
  89. let h='<table style="width:100%;border-collapse:collapse;font-size:13px;table-layout:fixed;"><thead><tr style="background:var(--color-background-secondary);text-align:left;"><th style="padding:8px 10px;width:62px;">ID</th><th style="padding:8px 10px;">Lead</th><th style="padding:8px 10px;width:150px;">Stage</th><th style="padding:8px 10px;width:90px;">Owner</th></tr></thead><tbody>';
  90. rows.forEach(d=>{h+=`<tr style="border-top:0.5px solid var(--color-border-tertiary);"><td style="padding:7px 10px;"><a href="${BASE}${d.id}/" style="color:var(--color-text-info);text-decoration:none;">${d.id}<i class="ti ti-external-link" style="font-size:13px;vertical-align:-1px;margin-left:3px;" aria-hidden="true"></i></a></td><td style="padding:7px 10px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;">${d.n}</td><td style="padding:7px 10px;">${badge(d.g)}${d.s}</span></td><td style="padding:7px 10px;color:var(--color-text-secondary);">${d.o.split(' ')[0]}</td></tr>`;});
  91. h+='</tbody></table>';
  92. if(!rows.length)h='<div style="padding:1rem;color:var(--color-text-secondary);">No leads match.</div>';
  93. document.getElementById('tableWrap').innerHTML=h;
  94. }
  95. document.querySelectorAll('.owner-f').forEach(el=>el.addEventListener('click',()=>{curO=el.dataset.o;document.querySelectorAll('.owner-f').forEach(x=>x.style.background='');el.style.background='var(--color-background-secondary)';render();}));
  96. stageSel.addEventListener('change',()=>{curS=stageSel.value;render();});
  97. render();
  98. </script>
  99. </div>