2d:null 2e:["$","title",null,{"children":"Design system metrics | Arseny Smoogly | Observable"}] 33:T4da,window.location.hostname.includes('observable') ? md` # Sample [Radius Tracker](https://rangle.github.io/radius-tracker) report This report tracks the adoption of [Grafana UI](https://developers.grafana.com/ui/latest) in [Grafana](https://grafana.com/) main project & its plugin ecosystem. Grafana is an open-source project with a long history and has many open-source plugins — giving us a public example of a design system adoption history. Stats below are collected using Radius Tracker. [Run Tracker](https://rangle.github.io/radius-tracker/quick_start) on your codebase to get this report for your projects. [Watch React Summit talk](https://www.youtube.com/watch?v=IW21KASz4K8) for details about the stats and the approach to parsing the code. To better understand how the Tracker can help you measure design system adoption, pretend that Grafana ecosystem is your organization when looking at the report below, that the projects are frontend projects in your company, and that \`grafana\` source represents your design system. ` : md` [Radius Tracker](https://rangle.github.io/radius-tracker) report by [Rangle.io](https://rangle.io/?utm_source=tracker_report) ` // Hide the description for reports hosted outside of observable34:T2626,{ const labelHeight = 10; // px const chartHeight = Math.min(400, width / 1.5); const chartWidth = width - Math.min(100, width / 10); const curve = "step-before"; const timeScale = d => { // Snapshots are taken each Saturday, except for the latest commit // https://github.com/rangle/radius-tracker/blob/46fb00879bbf752904d6dcf723687d67bff6f342/src/lib/cli/timelines/getTimelineForOneRepo.ts#L75 if (d.weeksAgo === 0) { return collectedAt; } const date = new Date(collectedAt.toISOString().split("T")[0] + "T00:00:00.000Z"); date.setDate(date.getDate() - 7 * d.weeksAgo - (date.getDay() + 1) % 7); return date; }; switch (selectedMetric) { case MetricSelector.Metrics.share: case MetricSelector.Metrics.absolute: { const isShareChart = selectedMetric === MetricSelector.Metrics.share; const lastWeekData = filteredUsageCountBySource.filter(x => x.weeksAgo === 0); const sourceBySize = lastWeekData .sort((a, b) => d3.ascending(a.usages, b.usages)) .map(x => x.source); const usagesLastWeek = lastWeekData.reduce((tot, x) => tot + x.usages, 0); const proportionSize = lastWeekData.reduce((set, x) => { set[x.source] = x.usages / usagesLastWeek; return set; }, {}); const channel = Plot.stackY({ offset: isShareChart ? "expand" : undefined, x: timeScale, y: "usages", z: "source", fill: d => !isShareChart && d.source === homebrewSourceId.id ? colorScales.homebrewColor : colorScales.chart(d.source), order: d => d.source === homebrewSourceId.id ? Infinity : sourceBySize.indexOf(d.source), curve, }); return Plot.plot({ caption: isShareChart ? 'Share of selected components over time' : 'Usages of selected components over time', style: "overflow: visible", grid: true, width: chartWidth, height: chartHeight, y: isShareChart ? { domain: [0, 1], tickFormat: "%", label: "↑ Design System share" } : { label: "↑ Usages" }, marks: [ Plot.ruleY([0]), !isSingleSnapshot ? Plot.areaY(filteredUsageCountBySource, channel) : null, isSingleSnapshot ? Plot.barY(filteredUsageCountBySource, channel) : null, Plot.text(filteredUsageCountBySource, Plot.selectFirst({ ...channel, fill: "black", text: d => { const name = allSources.find(s => s.id === d.source)?.name; if (!name) { throw new Error(`Can not find souce with id ${ d.source }`); } if (isSingleSource) { return name; } return chartHeight * proportionSize[d.source] >= labelHeight ? name : undefined; }, textAnchor: isSingleSnapshot ? "center" : "start", dx: isSingleSnapshot ? 0 : 3 })) ] }); } case MetricSelector.Metrics.reuse: { const lastPointPerSource = Object.values( filteredReuseBySource.reduce((set, one) => { if (!(one.source in set) || set[one.source].weeksAgo > one.weeksAgo) { set[one.source] = one; } return set; }, {}) ); // Some lines end in the past - when component stopped being used. // To render this appropriately, we add a point to the set at `weeksAgo: 0` at 0 value const extendedReuseBySource = [ ...lastPointPerSource.filter(x => x.weeksAgo !== 0).flatMap(x => [ // At week 0 the value is 0 { ...x, weeksAgo: 0, reuse: 0 }, // Point following the last point is 0 so that the line would step-down correctly { ...x, weeksAgo: x.weeksAgo - 1, reuse: 0 }, ]), ...filteredReuseBySource, ]; const updatedLastPoints = extendedReuseBySource.filter(x => x.weeksAgo === 0); const yExtent = [0, Math.max(...extendedReuseBySource.map(d => d.reuse), 0)]; const verticalScale = d3.scaleLinear() // Approximate scale of the chart .domain(yExtent) .range([0, chartHeight]) .nice(); const positionedLabels = positionSegments(updatedLastPoints.map(item => ({ ...item, center: verticalScale(item.reuse), width: labelHeight, }))); const channel = { x: timeScale, y: "reuse", z: "source", stroke: d => colorScales.standalone(d.source), curve, }; return Plot.plot({ caption: "Average component reuse by source", style: "overflow: visible", grid: true, width: chartWidth, height: chartHeight, y: { domain: yExtent, label: "↑ Average reuse" }, x: isSingleSnapshot ? { interval: d3.utcDay } : undefined, marks: [ Plot.ruleY([0]), !isSingleSnapshot ? Plot.line(extendedReuseBySource, channel) : null, isSingleSnapshot ? Plot.dotY(extendedReuseBySource, Plot.dodgeX({ ...channel, fill: channel.stroke, anchor: "middle" })) : null, Plot.text(extendedReuseBySource, Plot.selectFirst({ ...channel, stroke: undefined, fill: "black", text: (d) => { const name = allSources.find(s => s.id === d.source)?.name; if (!name) { throw new Error(`Can not find souce with id ${ d.source }`); } return name; }, textAnchor: "start", dx: isSingleSnapshot ? 5 : 3, dy: labelHeight / 2, y: d => { const point = positionedLabels.find(x => x.ref.source === d.source); if (!point) { throw new Error(`Can not find a positioned label for source ${ d.source }`) }; return verticalScale.invert(point.end); } })) ] }); } case MetricSelector.Metrics.components: const lastPointPerComponent = Object.values( filteredUsageCountByComponent.usages.reduce((set, one) => { if (!(one.component in set) || set[one.component].weeksAgo > one.weeksAgo) { set[one.component] = one; } return set; }, {}) ); // Some lines end in the past - when component stopped being used. // To render this appropriately, we add a point to the set at `weeksAgo: 0` at 0 value const extendedReuseByComponent = [ ...lastPointPerComponent.filter(x => x.weeksAgo !== 0).flatMap(x => [ // At week 0 the value is 0 { ...x, weeksAgo: 0, usages: 0 }, // Point following the last point is 0 so that the line would step-down correctly { ...x, weeksAgo: x.weeksAgo - 1, usages: 0 }, ]), ...filteredUsageCountByComponent.usages, ]; const yExtent = [0, Math.max(d3.max(extendedReuseByComponent, x => x.usages), 0)]; const verticalScale = d3.scaleLinear() // Approximate scale of the chart .domain(yExtent) .range([0, chartHeight]) .nice(); const updatedLastPoints = extendedReuseByComponent .filter(x => x.weeksAgo === 0) .map(item => ({ ...item, center: verticalScale(item.usages), width: labelHeight, })) .sort((a, b) => d3.descending(a.center, b.center)); let _labelPositions = []; let i = updatedLastPoints.length; const maxGroupedItems = 5; while (i--) { const nextPositions = positionSegments(updatedLastPoints.slice(0, updatedLastPoints.length - i).map(item => ({ ...item }))); const nextlabelGroups = d3.rollup(nextPositions, g => g.length, x => x.group); if ([...nextlabelGroups.values()].some(x => x > maxGroupedItems)) { break; } _labelPositions = nextPositions; } const positionedLabels = d3.index(_labelPositions, x => x.ref.component); const componentsById = d3.index(allComponents, x => x.id); const channel = { x: timeScale, y: "usages", z: "component", stroke: d => colorScales.standalone(d.source), opacity: d => positionedLabels.has(d.component) ? 1 : filteredUsageCountByComponent.exact_components ? 0.5 : 0.1, curve, }; return Plot.plot({ caption: `Individual component usages over time ${!filteredUsageCountByComponent.exact_components ? `(showing top ${ maxComponentsForPerComponentUsage } components by usage at the last snapshot)` : ''}`, style: "overflow: visible", grid: true, width: chartWidth, height: chartHeight, x: isSingleSnapshot ? { interval: d3.utcDay } : undefined, marks: [ Plot.ruleY([0]), !isSingleSnapshot ? Plot.lineY(extendedReuseByComponent, channel) : null, isSingleSnapshot ? Plot.dotY(filteredUsageCountByComponent.usages, Plot.dodgeX({ ...channel, fill: channel.stroke, anchor: "middle" })) : null, Plot.text(extendedReuseByComponent, Plot.selectFirst({ ...channel, stroke: undefined, fill: "black", text: (d) => { const point = positionedLabels.get(d.component); if (!point) { return undefined; } return componentsById.get(d.component).name; }, textAnchor: "start", dx: isSingleSnapshot ? 5 : 3, dy: labelHeight / 2, y: d => { const point = positionedLabels.get(d.component); return point ? verticalScale.invert(point.end) : 0; } })) ] }) default: throw new Error(`Unhandled metric ${ selectedMetric }`); } }35:T106c,{ if (debouncedSelectedFilters.selectedProjects.length !== 1) { return md`Select a single project to view usages across project files`; } const title = `## Selected component usages across the files in ${ allProjects.find(p => p.id === debouncedSelectedFilters.selectedProjects[0]).name }`; if (latest_usages_by_file.length === 0) { return md` ${ title } No usages found for selected components `; } const filetree = d3.hierarchy(d3.stratify().path(d => d.file)(latest_usages_by_file)) .sum(node => node.data?.usages ?? 0) .sort((a, b) => b.value - a.value) .each(node => { node.label = node.data.id.split("/").pop() || "/" }); filetree.each(node => node.open = false); filetree.open = true; // Root node open const rowHeight = 20; const textBottomOffset = 5; const levelOffset = 10; const textToBarOffset = 3; const maxBarWidth = 100; const numberCellWidth = filetree.value.toString().length * 10; const valueScale = d3.scaleLinear() .domain([0, filetree.value]) .range([maxBarWidth, 0]); const render = (subtree, position) => { const children = subtree.open ? (subtree.children ?? []).map((c, idx) => render(c, position + 1)) : []; const scaledValue = valueScale(subtree.value) const bar = d3.create("svg:rect") .attr("x", scaledValue) .attr("width", maxBarWidth - scaledValue) .attr("y", 0) .attr("height", rowHeight - 1) .attr("style", "font-family: monospace;") .attr("fill", "#D44527"); const valueText = d3.create("svg:text"); valueText .text(subtree.value) .attr("text-anchor", "end") .attr("x", maxBarWidth + numberCellWidth + textToBarOffset) .attr("y", rowHeight - textBottomOffset) .attr("fill", "black"); const dots = d3.create("svg:line"); dots .attr("class", "dots") .attr("x1", maxBarWidth + numberCellWidth + 2 * textToBarOffset) .attr("x2", maxBarWidth + numberCellWidth + 1 * textToBarOffset + levelOffset * position) .attr("y1", rowHeight / 2) .attr("y2", rowHeight / 2) .attr("stroke-dasharray", "1 1") .attr("stroke", "#ccc") .attr("style", "display: none;"); const label = d3.create("svg:text") label .text(`${ subtree.open ? "– " : (subtree.children?.length ?? 0) > 0 ? "+ " : "" }${ subtree.label }`) .attr("x", maxBarWidth + numberCellWidth + 2 * textToBarOffset + levelOffset * position) .attr("y", rowHeight - textBottomOffset) .attr("fill", "black"); const group = d3.create("svg:g") .attr("class", "row") .attr("style", `cursor: ${ subtree.children?.length ? "pointer" : "default" };`); group.node().append(valueText.node()); group.node().append(label.node()); group.node().append(dots.node()); group.node().append(bar.node()); group.on("click", event => { event.stopPropagation(); if ((subtree.children?.length ?? 0) < 1) { return; } subtree.open = !subtree.open; if (!subtree.open) { subtree.each(x => x.open = false); } rerender(); }); let runningOffset = rowHeight; children.forEach(({ size, element }) => { group.append("svg:g") .attr("transform", `translate(0, ${ runningOffset })`) .node().append(element); runningOffset += size; }); return { size: children.reduce((tot, c) => tot + c.size, rowHeight), element: group.node(), content: { self: subtree.data.id, children: children.map(c => c.content) } }; }; const wrapper = d3.create("div"); function rerender() { const rendered = render(filetree, 0); const svg = d3.create("svg") .attr("width", width) .attr("height", rendered.size) .attr("viewBox", [0, 0, width, rendered.size]) .attr("style", "max-width: 100%; height: auto; height: intrinsic;"); svg.node().append(d3.create("svg:style").text(".row:hover > .dots { display: block !important; }").node()); svg.node().append(rendered.element); wrapper.node().innerHTML = ""; wrapper.node().append(svg.node()); } rerender(); return htl.html` ${ md`${ title }`} ${ wrapper.node() } `; }36:T68a,Generators.observe(notify => { const startHeading = "Dashboard Intro"; const endHeading = "Appendix"; let prevHeadings = []; function observed() { const headings = Array.from(document.querySelectorAll("h1, h2, h3")); if (headings.length !== prevHeadings.length || headings.some((h, i) => prevHeadings[i] !== h)) { prevHeadings = headings; const startIdx = headings.findIndex(h => h.textContent === startHeading); const endIdx = headings.findIndex(h => h.textContent === endHeading); const headingContents = headings .slice(startIdx + 1, endIdx) .map(h => ({ level: Number(h.tagName.replace(/^H/i, "")), el: h, })); const minLevel = Math.min(...headingContents.map(h => h.level)); notify(html`

${DOM.text(h.el.textContent)}

`); } } const observer = new MutationObserver(observed); observer.observe(document.body, {childList: true, subtree: true}); observed(); return () => observer.disconnect(); });37:T8e0,## Usages This report tracks _individual usages_ of components in an ecosystem. Developers use the UI components by referencing them in code to build the products. Every such usage is introduced in a particular place in code by a particular author in a particular commit at a certain point in time and references a particular component from a particular source. ```js import { Component } from "@enterprise/design-system"; // ^^^ Component ^^^ Source export const ProductThing = () => ; // ^^^ Usage ``` ## Projects and Sources An ecosystem within the enterprise is all the projects with customer-facing UI. Those projects use a mix of component sources: design system, other in-house and third-party component libraries, and custom components implemented directly in the codebases of these projects. The team defines projects and sources in the [tracker configuration](https://rangle.github.io/radius-tracker/configuration_file) before analyzing the codebase. ### Homebrew source Homebrew is a special source tracking low-level components implemented directly in the project codebase. Developers routinely compose product UI out of low-level components, so not every component in the project codebase is considered 'homebrew'. Tracker ignores components built entirely using _other components,_ and only includes components outputting raw markup as 'homebrew'. [comment]: <> (TODO: fix highlighting for JSX tags) ``` const HomebrewButton = ({ children }) => ; // ^^^ Homebrew component ^^^ Uses low-level HTML markup const CompositionalComponent = () => Click me // ^^^ Not homebrew, because it only uses other components ``` ## Components When the Tracker analyzes a project, it almost never has access to the definition of a component. That is why Tracker uses imports as a starting point for finding usages. It relies on the component name and source to determine if the same component is used across different projects. This way, the imports shown below result in two 'Button' components in the component list, each with different source. ```js import { Button } from "lib" import { Button } from "another-lib" ```38:T815,{ const sources = [ { id: 'ds', name: 'Design System', overallMetric: '', metricBreakdown: [], disabled: false }, { id: 'homebrew', name: 'Homebrew', overallMetric: '', metricBreakdown: [], disabled: false }, ] const projects = [ { id: 'dashboard', name: 'Dashboard', overallMetric: '', metricBreakdown: [], disabled: false }, { id: 'profile', name: 'Profile', overallMetric: '', metricBreakdown: [], disabled: false }, { id: 'authentication', name: 'Authentication', overallMetric: '', metricBreakdown: [], disabled: true }, { id: 'billing', name: 'Billing', overallMetric: '', metricBreakdown: [], disabled: true }, ]; const columnGap = 40; return render(() => { const [selectedSources, setSelectedSources] = useState([sources[0].id]); const [selectedProjects, setSelectedProjects] = useState(projects.map(i => i.id)); return jsx`

<${ SelectableItemList } name="Sources" filterPlaceholder="" onSelectionChange=${ setSelectedSources } initialSelection=${ selectedSources } items=${ sources }/>

<${ SelectableItemList } name="Projects" filterPlaceholder="" onSelectionChange=${ setSelectedProjects } items=${ projects }/>

`; }); }39:T6f7,{ const homebrewColor = colorScales.standalone(homebrewSourceId.id); const targetColor = colorScales.standalone(homebrewSourceId.id + 1); const otherColor = colorScales.standalone(homebrewSourceId.id + 2); const items = [ { id: 'dashboard', name: 'Dashboard', overallMetric: '1337', metricBreakdown: [ { type: 'homebrew', color: homebrewColor, percentage: 30 }, { type: 'target', color: targetColor, percentage: 50 }, { type: 'other', color: otherColor, percentage: 20 }, ], disabled: false }, { id: 'profile', name: 'Profile', overallMetric: '1137', metricBreakdown: [ { type: 'homebrew', color: homebrewColor, percentage: 25 }, { type: 'target', color: targetColor, percentage: 20 }, { type: 'other', color: otherColor, percentage: 40 }, ], disabled: false }, { id: 'authentication', name: 'Authentication', overallMetric: '936', metricBreakdown: [ { type: 'homebrew', color: homebrewColor, percentage: 40 }, { type: 'target', color: targetColor, percentage: 20 }, { type: 'other', color: otherColor, percentage: 10 }, ], disabled: false }, { id: 'billing', name: 'Billing', overallMetric: '468', metricBreakdown: [ { type: 'homebrew', color: homebrewColor, percentage: 15 }, { type: 'target', color: targetColor, percentage: 20 }, ], disabled: false }, ]; return render(() => { const [selected, setSelected] = useState(items.map(i => i.id)); return jsx`

<${ SelectableItemList } name="Projects" filterPlaceholder="All" onSelectionChange=${ setSelected } items=${ items }/>

`; }); }3a:T63b,{ const homebrewColor = colorScales.standalone(homebrewSourceId.id); const targetColor = colorScales.standalone(homebrewSourceId.id + 1); const otherColor = colorScales.standalone(homebrewSourceId.id + 2); const items = [ { id: 'big', name: 'Big project', overallMetric: '1000', metricBreakdown: [ { type: 'homebrew', color: homebrewColor, percentage: 30 }, { type: 'target', color: targetColor, percentage: 50 }, { type: 'other', color: otherColor, percentage: 20 }, ], disabled: false }, { id: 'tiny1', name: 'Tiny project', overallMetric: '50', metricBreakdown: [ { type: 'homebrew', color: homebrewColor, percentage: minPercentageTarget }, ], disabled: false }, { id: 'tiny2', name: 'Tinier project', overallMetric: '30', metricBreakdown: [ { type: 'homebrew', color: homebrewColor, percentage: minPercentageTarget }, { type: 'target', color: targetColor, percentage: minPercentageTarget }, ], disabled: false }, { id: 'tiny3', name: 'Extra tiny', overallMetric: '1', metricBreakdown: [ { type: 'other', color: otherColor, percentage: minPercentageTarget }, ], disabled: false }, ]; return render(() => { const [selected, setSelected] = useState(items.map(i => i.id)); return jsx`

<${ SelectableItemList } name="Projects" filterPlaceholder="All" onSelectionChange=${ setSelected } items=${ items }/>

`; }); }3b:T60d,{ const homebrewColor = colorScales.standalone(homebrewSourceId.id); const targetColor = colorScales.standalone(homebrewSourceId.id + 1); const otherColor = colorScales.standalone(homebrewSourceId.id + 2); const items = [ { id: 'button1', name: 'Button', overallMetric: '1337', metricBreakdown: [ { type: 'target', color: targetColor, percentage: 100 }, ], disabled: false }, { id: 'button2', name: 'Button', overallMetric: '1137', metricBreakdown: [ { type: 'homebrew', color: homebrewColor, percentage: 85 }, ], disabled: false }, { id: 'button3', name: 'Button', overallMetric: '936', metricBreakdown: [ { type: 'other', color: otherColor, percentage: 70 }, ], disabled: false }, { id: 'card', name: 'Card', overallMetric: '468', metricBreakdown: [ { type: 'target', color: targetColor, percentage: 35 }, ], disabled: false }, { id: 'tooltip', name: 'Tooltip', overallMetric: '138', metricBreakdown: [ { type: 'homebrew', color: homebrewColor, percentage: 10 }, ], disabled: false }, ]; return render(() => { const [selected, setSelected] = useState(items.map(i => i.id)); return jsx`

<${ SelectableItemList } name="Projects" filterPlaceholder="All" isFiltered onSelectionChange=${ setSelected } initialFilterStr="Button" items=${ items }/>

`; }); }3c:T400,knownExternalResources = [ // Observable stdlib "https://cdn.jsdelivr.net/npm/@observablehq/plot@0.6.14/dist/plot.umd.min.js", "https://cdn.jsdelivr.net/npm/d3@7.9.0/dist/d3.min.js", "https://cdn.jsdelivr.net/npm/lodash@4.17.21/lodash.min.js", "https://cdn.jsdelivr.net/npm/marked@0.3.12/marked.min.js", "https://cdn.jsdelivr.net/npm/htl@0.3.1/dist/htl.min.js", "https://cdn.jsdelivr.net/npm/sql.js@1.8.0/dist/sql-wasm.js", "https://cdn.jsdelivr.net/npm/sql.js@1.8.0/dist/sql-wasm.wasm", "https://cdn.jsdelivr.net/npm/@observablehq/highlight.js@2.0.0/highlight.min.js", // React related "https://cdn.jsdelivr.net/npm/classnames@2.3.2/index.js", "https://cdn.jsdelivr.net/npm/htm@2.2.1/dist/htm.umd.js", "https://cdn.jsdelivr.net/npm/@observablehq/inspector@5.0.0/dist/inspector.js", "https://unpkg.com/react@18.2.0/umd/react.production.min.js", "https://unpkg.com/react-dom@18.2.0/umd/react-dom.production.min.js", "https://cdn.jsdelivr.net/npm/react-window@1.8.8/dist/index-prod.umd.js", ];3d:Tc8c,FilterInputComponent = component(({ value, onChange, placeholder }) => { const hasContent = value.trim().length > 0; const onChangeHandler = useCallback(e => onChange(e.target.value), [onChange]); const onClearHandler = useCallback(() => onChange(''), [onChange]); return jsx`

${ hasContent ? jsx`<${ClearIcon} onClick=${ onClearHandler }/>` : null } <${SearchIcon}/> ${ !hasContent ? jsx`${ placeholder }` : null }

`; })3e:T102b,CheckboxComponent = { const State = { 'checked': 'checked', 'unchecked': 'unchecked', 'mixed': 'mixed', }; const Checkbox = component(({ children, disabled, state, onChange }) => { const resolvedState = typeof state === "boolean" ? (state ? State.checked : State.unchecked) : state; const changeHandler = useMemo(() => { if (!onChange) { return undefined; }; return (e) => onChange(e.target.checked ? State.unchecked : State.checked); }, [onChange]); return jsx`

<${NBSP}/>

${ children }

`; }); Checkbox.State = State; return Checkbox; }3f:T1f40,SelectableItemList = { const Grid = reactWindow.VariableSizeGrid; const scrollbarWidth = (() => { const div = document.createElement("div"); div.style.cssText = "overflow:scroll; visibility:hidden; position:absolute; width:100px"; document.body.appendChild(div); const width = div.offsetWidth - div.clientWidth; div.remove(); return Math.ceil(Math.max(width, 0)); })(); const ItemWrapper = component(({ style, id, name, onToggle, disabled, children }) => { const toggle = useCallback(() => { if (!onToggle) { return; } onToggle(id) }, [onToggle, id]); const adjustedStyle = useMemo(() => ({ ...style, lineHeight: `${style.height}px`, opacity: onToggle && disabled ? .33 : 1, cursor: 'pointer', overflow: 'hidden', }), [style, onToggle, disabled]); return jsx`

${ children }

`; }); const ItemCheckbox = component(({ id, isSelected, onToggle }) => { const toggle = useCallback(() => onToggle(id), [onToggle, id]); return jsx`<${CheckboxComponent} state=${ isSelected } onChange=${ toggle }/>`; }); const ItemName = component(({ name }) => jsx`${ name }`); const ItemMetric = component(({ overallMetric }) => jsx`

${ overallMetric }

`); const ItemBreakdown = component(({ metricBreakdown }) => jsx`<${SparklineBars} items=${ metricBreakdown }/>`); return ({ name, filterPlaceholder, items, isFiltered, onSelectionChange, initialSelection, initialFilterStr }) => { const [selected, setSelected] = useState(initialSelection ?? items.map(i => i.id)); const [filterStr, setFilterStr] = useState(initialFilterStr ?? ''); const filteredItems = useMemo(() => { const filter = filterStr.trim().toLowerCase(); if (!filter) { return items; } return items.filter(({ name }) => name.toLowerCase().includes(filter)); }, [items, filterStr]); const visibleSelectedItems = useMemo(() => filteredItems.filter(i => selected.includes(i.id)), [selected, filteredItems]); useEffect(() => onSelectionChange(visibleSelectedItems.map(i => i.id)), [visibleSelectedItems]); const numTotal = items.length; const numSelected = selected.length; const overallSelectionState = useMemo(() => { if (filteredItems.length === visibleSelectedItems.length) { return CheckboxComponent.State.checked; } if (visibleSelectedItems.length === 0) { return CheckboxComponent.State.unchecked; } return CheckboxComponent.State.mixed; }, [filteredItems, visibleSelectedItems]); const onToggleOverallSelection = useCallback(() => { if (overallSelectionState === CheckboxComponent.State.checked) { // Was checked — unselect all return setSelected([]); } // Was unchecked or mixed — select all filtered setSelected(filteredItems.map(i => i.id)); }, [overallSelectionState, filteredItems, setSelected]); const onItemToggled = useCallback(id => { const idx = selected.indexOf(id); if (idx === -1) { return setSelected([...selected, id]); } // Remove the item from selected setSelected([...selected.slice(0, idx), ...selected.slice(idx + 1)]); }, [selected, setSelected]); const wrapperRef = useRef(null); const [width, setWidth] = useState(0); useEffect(() => { if (!wrapperRef.current) { return; } setWidth(Math.max(0, wrapperRef.current.clientWidth - scrollbarWidth)); const observer = new ResizeObserver((observerEntry) => { const { width } = observerEntry[0].contentRect; setWidth(Math.max(0, Math.round(width) - scrollbarWidth)); }); observer.observe(wrapperRef.current); return () => observer.disconnect(); }, [wrapperRef.current, setWidth]); const rowHeight = 20; const getRowHeight = useCallback(() => rowHeight, [rowHeight]); const checkboxWidth = 24; const metricToNameOffset = 8; const longestOverallMetricChars = Math.max(...items.map(i => i.overallMetric.length), 0); const metricWidth = metricToNameOffset + longestOverallMetricChars * 10; const chartsWidth = Math.round(width / 4); const columnWidths = useMemo(() => [ checkboxWidth, width - chartsWidth - checkboxWidth - metricWidth, metricWidth, chartsWidth, ], [width, metricWidth, chartsWidth, checkboxWidth]); const getColumnWidth = useCallback(index => columnWidths[index], [columnWidths]); const overallSelectionCheckboxWidth = useMemo(() => ({ width: `${ columnWidths[0] }px` }), [columnWidths]); const listNameWidth = useMemo(() => ({ width: `${ columnWidths[1] }px` }), [columnWidths]); const filterWidth = useMemo(() => ({ width: `${ columnWidths[3] + columnWidths[2] }px` }), [columnWidths]); const Cell = useMemo(() => { const getContent = (colIndex, rowIndex) => { const item = filteredItems[rowIndex]; switch (colIndex) { case 0: return jsx`<${ ItemCheckbox } ...${item} isSelected=${ selected.includes(item.id) } onToggle=${onItemToggled}/>`; case 1: return jsx`<${ ItemName } ...${item}/>`; case 2: return jsx`<${ ItemMetric } ...${item}/>`; case 3: return jsx`<${ ItemBreakdown } ...${item}/>`; default: throw new Error(`Unhandled column index ${ colIndex }`); } } return ({ columnIndex, rowIndex, style }) => { const item = filteredItems[rowIndex]; return jsx`<${ ItemWrapper } style=${ style } ...${item} onToggle=${ columnIndex > 0 ? onItemToggled : undefined }> ${ getContent(columnIndex, rowIndex) } `; }; }, [filteredItems, selected, onItemToggled]); const cellHorizontalOffset = '16px'; const rowVerticalOffset = '0px'; return jsx`

<${CheckboxComponent} state=${ overallSelectionState } onChange=${ onToggleOverallSelection }/> ${ name } (${ visibleSelectedItems.filter(x => !x.disabled).length }) ${ isFiltered ? jsx`<${ FilterInputComponent } value=${ filterStr } onChange=${ setFilterStr } placeholder=${ filterPlaceholder } />` : null }

<${Grid} key=${ columnWidths.join('-') } columnCount=${4} columnWidth=${getColumnWidth} rowCount=${filteredItems.length} rowHeight=${getRowHeight} width=${ width + scrollbarWidth } height=${ Math.min(items.length * rowHeight, 200) } >${Cell}

`; } }40:T6c2,FiltersComponent = component(({ useSetter, sources, projects, components }) => { const [selectedSources, setSelectedSources] = useState(sources.map(s => s.id)); const [selectedProjects, setSelectedProjects] = useState(projects.map(s => s.id)); const [selectedComponents, setSelectedComponents] = useState(components.map(s => s.id)); useSetter({ selectedSources, selectedProjects, selectedComponents, }); const columnGap = 48; return jsx`

<${ SelectableItemList } name="Sources" filterPlaceholder="" isFiltered=${ false } onSelectionChange=${ setSelectedSources } items=${ sources }/>

<${ SelectableItemList } name="Projects" filterPlaceholder="All" isFiltered onSelectionChange=${ setSelectedProjects } items=${ projects }/>

<${ SelectableItemList } name="Components" filterPlaceholder="All" isFiltered onSelectionChange=${ setSelectedComponents } items=${ components }/>

`; });41:T662,RadioToggler = component(({ children, disabled, name, value, checked, onChange }) => { return jsx`

${ children }

`; });42:T6d5,MetricSelector = { const Metrics = { share: "share", absolute: "absolute", components: "components", reuse: "reuse", } const Selector = component(({ useSetter, isSingleSource, name = "selected-metric" }) => { const metrics = { [Metrics.share]: { label: "Share", disabled: isSingleSource, ifDisabled: Metrics.absolute, }, [Metrics.absolute]: { label: "Absolute", disabled: false, get ifDisabled() { throw new Error("No ifDisabled set on absolute metric"); } }, [Metrics.components]: { label: "Components", disabled: false, get ifDisabled() { throw new Error("No ifDisabled set on components metric"); } }, [Metrics.reuse]: { label: "Reuse", disabled: false, get ifDisabled() { throw new Error("No ifDisabled set on reuse metric"); } }, }; const [desiredMetric, setDesiredMetric] = useState(Metrics.share); const selectedMetric = metrics[desiredMetric].disabled ? metrics[desiredMetric].ifDisabled : desiredMetric; useSetter(selectedMetric); const callbacks = useMemo(() => Object.keys(Metrics).reduce((_cb, metric) => { _cb[metric] = () => setDesiredMetric(metric); return _cb; }, {}), [setDesiredMetric]); return jsx`${ Object.keys(metrics).map(metric => { return jsx`<${ RadioToggler } key=${ metric } name=${ name } value=${ metric } checked=${ selectedMetric === metric } disabled=${ metrics[metric].disabled } onChange=${ callbacks[metric] } >${ metrics[metric].label }` }) }`; }); Selector.Metrics = Metrics; return Selector; }43:T4d1,usagesDB = { const getDB = async () => { // Unzip the attachment const dbData = await new Response((await FileAttachment("usages.sqlite.gz").stream()) .pipeThrough(new window.DecompressionStream("gzip"))).blob(); const db = await SQLiteDatabaseClient.open(dbData); if (!debugDatabaseTimings) { return db; } const wrap = (fn) => async (sql, ...args) => { const explain = await fn.call(db, `EXPLAIN QUERY PLAN ${ sql }`, ...args); const explainStr = explain.length ? explain.map(x => x.detail).join("\n") : sql; const start = Date.now(); const res = await fn.call(db, sql, ...args); console.log(Date.now() - start, explainStr); return res; } return { query: wrap(db.query), queryRow: wrap(db.queryRow), }; }; const db = await getDB(); // Create the search indices to use with the queries below await db.query(`CREATE INDEX IF NOT EXISTS usages_historical_data ON usages ("weeksAgo", source, project, component)`); await db.query(`CREATE INDEX IF NOT EXISTS components_per_week ON usages (component, "weeksAgo")`); await db.query(`CREATE INDEX IF NOT EXISTS sources_per_week ON usages (source, "weeksAgo")`); return db; }44:T471,allProjects = { const getWebUrl = (url) => { try { return new URL(url); } catch (e) { // Not an URL, e.g. `user@server:project.git` is a valid git URL, but not a web url, // or a relative URL — those don't work without a base. return null; } }; const projects = (await usagesDB.query(`SELECT id, name, url FROM projects`)).map(project => ({ ...project, webUrl: getWebUrl(project.url), })); const hostnames = projects .map(({ webUrl }) => webUrl) .filter(url => url !== null) .filter(url => url.hostname) .map(url => url.hostname); const commonHostname = hostnames.length > 0 && hostnames.every(h => h === hostnames[0]) ? hostnames[0] : null; return projects.map(({ id, name, url, webUrl}) => { const resolvedName = name.startsWith(url) && webUrl && webUrl.hostname === commonHostname // For url on a common host, replace full url with path + query. ? name.replace(url, `${ webUrl.pathname }${ webUrl.search }`.replace(/\.git$/, "")) : name; return { id, name: resolvedName, url, }; }); }45:T59b,breakdownBySource = { const conditions = `${ filterConditions.project } AND ${ filterConditions.component }`; const res = await usagesDB.query(` SELECT source, COUNT(*) as usages FROM usages WHERE weeksAgo = 0 AND ${ conditions } GROUP BY usages.source `); const maxUsages = Math.max(...d3.rollup(res, values => values.reduce((tot, x) => tot + x.usages, 0), x => x.source).values()) return d3.rollup(res, values => { const overallMetricValue = values.reduce((tot, x) => tot + x.usages, 0); // Percentages are adjusted so that no item in the breakdown is too small to see. const percentages = values.map(val => Math.max(100 * val.usages / maxUsages, minPercentageTarget)); const totalPercentages = percentages.reduce((tot, x) => tot + x, 0); const adjustedPercentages = percentages.map(x => totalPercentages > 100 ? x * 100 / totalPercentages : x); return ({ breakdown: values .map((val, i) => ({ type: val.source, percentage: adjustedPercentages[i], color: colorScales.standalone(val.source) })) .sort((a, b) => { if (a.type === "homebrew") { return 1; } if (b.type === "homebrew") { return -1; } return d3.descending(a.percentage, b.percentage) }), overallMetric: overallMetricValue.toFixed(0), overallMetricValue, }); }, x => x.source); }46:T58b,breakdownByProject = { const conditions = `${ filterConditions.source } AND ${ filterConditions.component }` const res = await usagesDB.query(` SELECT project, source, COUNT(*) as usages FROM usages WHERE weeksAgo = 0 AND ${ conditions } GROUP BY project, source `); const maxUsages = Math.max(...d3.rollup(res, values => values.reduce((tot, x) => tot + x.usages, 0), x => x.project).values()); return d3.rollup(res, values => { const overallMetricValue = values.reduce((tot, x) => tot + x.usages, 0); // Percentages are adjusted so that no item in the breakdown is too small to see. const percentages = values.map(val => Math.max(100 * val.usages / maxUsages, minPercentageTarget)); const totalPercentages = percentages.reduce((tot, x) => tot + x, 0); const adjustedPercentages = percentages.map(x => totalPercentages > 100 ? x * 100 / totalPercentages : x); return ({ breakdown: values .map((val, i) => ({ type: val.source, percentage: adjustedPercentages[i], color: colorScales.standalone(val.source) })) .sort((a, b) => { if (a.type === "homebrew") { return 1; } if (b.type === "homebrew") { return -1; } return d3.descending(a.percentage, b.percentage) }), overallMetric: overallMetricValue.toFixed(0), overallMetricValue, }); }, x => x.project); };47:T593,breakdownByComponent = { const conditions = `${ filterConditions.source } AND ${ filterConditions.project }` const res = await usagesDB.query(` SELECT component, source, COUNT(*) as usages FROM usages WHERE weeksAgo = 0 AND ${ conditions } GROUP BY component, source `); const maxUsages = Math.max(...d3.rollup(res, values => values.reduce((tot, x) => tot + x.usages, 0), x => x.component).values()); return d3.rollup(res, values => { const overallMetricValue = values.reduce((tot, x) => tot + x.usages, 0); // Percentages are adjusted so that no item in the breakdown is too small to see. const percentages = values.map(val => Math.max(100 * val.usages / maxUsages, minPercentageTarget)); const totalPercentages = percentages.reduce((tot, x) => tot + x, 0); const adjustedPercentages = percentages.map(x => totalPercentages > 100 ? x * 100 / totalPercentages : x); return ({ breakdown: values .map((val, i) => ({ type: val.source, percentage: adjustedPercentages[i], color: colorScales.standalone(val.source) })) .sort((a, b) => { if (a.type === "homebrew") { return 1; } if (b.type === "homebrew") { return -1; } return d3.descending(a.percentage, b.percentage) }), overallMetric: overallMetricValue.toFixed(0), overallMetricValue, }); }, x => x.component); };48:T50b,filteredUsageCountByComponent = { if (selectedMetric !== MetricSelector.Metrics.components) { return { exact_components: true, usages: [] }; } const matchingComponents = await usagesDB.query(` SELECT DISTINCT component FROM usages WHERE ${ filterConditions.source } AND ${ filterConditions.project } AND ${ filterConditions.component } `); const useExactComponents = matchingComponents.length <= maxComponentsForPerComponentUsage; return { exact_components: useExactComponents, usages: await usagesDB.query(` WITH prominent_components AS ( SELECT DISTINCT component FROM usages WHERE component in (${ matchingComponents.map(x => x.component) }) AND weeksAgo = 0 GROUP BY component ORDER BY COUNT(*) DESC LIMIT ${ maxComponentsForPerComponentUsage } ) SELECT weeksAgo, component, source, COUNT(*) as usages FROM usages WHERE component in (${ useExactComponents ? matchingComponents.map(x => x.component) : `SELECT component FROM prominent_components` }) AND ${ filterConditions.source } AND ${ filterConditions.project } AND ${ filterConditions.component } GROUP BY weeksAgo, component ORDER BY component, weeksAgo ASC `) } }49:T820,// Position line segments as close as possible to desired centers without overlapping. // @param { width: number, center: number }[] segments // @returns { start: number, end: number: ref: }[] positionSegments = { const sum = (arr, k) => arr.map(x => x[k]).reduce((tot, x) => tot + x, 0); const merge = (s1, s2) => { const all = [...s1.contains, ...s2.contains]; return { center: sum(all, "center") / all.length, width: sum(all, "width"), contains: all, }; }; const mergeAll = (segments) => { if (segments.length === 0) { return []; } if (segments.length === 1) { return [...segments]; } const merged = [...segments]; for (let i = 1; i < merged.length;) { const segment = merged[i]; const prev = merged[i - 1]; if ((prev.center + prev.width / 2) <= (segment.center - segment.width / 2)) { i++; // Not overlapping — move index & continue continue; } // Merge the 2 overlapping segments. // Don't move the index. Cycle advances because a total of 1 item was removed. merged.splice(i - 1, 2, merge(prev, segment)); } return merged; } return (segments) => { // Wrap & sort const sortedSegments = segments .map(segment => ({ center: segment.center, width: segment.width, contains: [segment], })) .sort((a, b) => a.center - b.center); // Merge overlapping const merged = mergeAll(sortedSegments); // Unwrap return merged.flatMap((segment, i) => { let position = segment.center - segment.width / 2; return segment.contains.map(item => { const start = position; const end = start + item.width; position = end; return { ref: item, group: i, start, end, }; }); }); }; }4a:[{"id":"764aea5ce8ec0a1917e795c9303542f1a83e8ad236613f1d376b14ad9f6effad16d68b949b3c57ada8edf9b5fa3a58bcdce38d943b5d8f96357e832ddef3a6d5","href":"https://static.observableusercontent.com/files/764aea5ce8ec0a1917e795c9303542f1a83e8ad236613f1d376b14ad9f6effad16d68b949b3c57ada8edf9b5fa3a58bcdce38d943b5d8f96357e832ddef3a6d5","name":"usages.sqlite.gz","type":"application/gzip","lastModified":1686211090427.27,"size":11844538},{"id":"a465f369db924b5d74ec3b48112191666d33be497b94ef17b5701ae81f6eb7cbc3a919d26419aa562f00ffbb51092441e28238128ea23322187d420dc71538dd","href":"https://static.observableusercontent.com/files/a465f369db924b5d74ec3b48112191666d33be497b94ef17b5701ae81f6eb7cbc3a919d26419aa562f00ffbb51092441e28238128ea23322187d420dc71538dd","name":"usages@2.sqlite","type":"application/x-sqlite3","lastModified":1681462064721.301,"size":49614848}] 31:{"id":"be4ab61eae23e575","slug":"design-system-metrics","title":"Design system metrics","thumbnail":"099fb9fd6db7fc9c55ea9a0c8471d3714a377f49af74266a7e5baac0a9879e10","access_level":"public","create_time":"$D2022-06-21T14:21:47.169Z","update_time":"$D2024-05-23T15:51:09.529Z","view_time":null,"first_public_time":"$D2022-06-21T14:51:53.524Z","has_unpublished_edits":null,"fork":false,"stars":3,"starred":false,"owner":{"type":"team","id":"8eccbf9e36e0f8d3","login":"smoogly","name":"Arseny Smoogly","avatar_url":"https://avatars-next.observableusercontent.com/88acd182f1a5446542f4cc229f29ecac72ff1a21b110764076ca2fc36d78a114","tier":"starter_2024"},"version":454,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"0da04014c2a8fed6","login":"smoogly","name":"Arseny Smoogly","avatar_url":"https://avatars-next.observableusercontent.com/88acd182f1a5446542f4cc229f29ecac72ff1a21b110764076ca2fc36d78a114","tier":null}],"members":[{"type":"individual","id":"0da04014c2a8fed6","login":"smoogly","name":"Arseny Smoogly","avatar_url":"https://avatars-next.observableusercontent.com/88acd182f1a5446542f4cc229f29ecac72ff1a21b110764076ca2fc36d78a114","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":38,"collection":null,"type":"notebook","body":{"title":"Design system metrics","cells":[{"id":332,"value":"# Design system metrics\n\nTrack adoption of your design system using the detailed statistics collected by Radius Tracker, and integrated into an interactive dashboard. See all usages of all components in all your company projects from all sources.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":0,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":358,"value":"schemaVersion === expectedSchemaVersion ? md`` : md`\n# ${ htl.html`Database schema version mismatch` }\n\nThis likely means that you're attaching a database of an old format to an updated report. Please update Radius Tracker package to latest version, or use an older version of the report.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":307,"value":"# Component usages as of ${ collectedAt.toLocaleString(undefined, { day: \"numeric\", month: \"short\", year: \"numeric\" }) }\n\nIf you're not sure how to use this report, see the ${ htl.html` document.querySelector(\"#dashboard-intro\").scrollIntoView() }>Dashboard Intro` } below.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":404,"value":"viewof selectedMetric = render(({ useSetter }) => jsx`<${ MetricSelector } useSetter=${ useSetter } isSingleSource=${ isSingleSource }/>`);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":306,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":305,"value":"viewof selectedFilters = render(({ useSetter }) => {\n return jsx`<${ FiltersComponent } useSetter=${ useSetter } sources=${ sourcesData } projects=${ projectData } components=${ componentData }/>`;\n});","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":304,"value":"

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":94,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":302,"value":"

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":301,"value":"# Dashboard Intro","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":300,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":299,"value":"$37","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":298,"value":"## Working with filters\n\nYou can filter the stats by choosing which sources, projects, and components to include.\n\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":297,"value":"{ \n const items = [\n { id: 'dashboard', name: 'Dashboard', overallMetric: '', metricBreakdown: [], disabled: false },\n { id: 'profile', name: 'Profile', overallMetric: '', metricBreakdown: [], disabled: false },\n { id: 'authentication', name: 'Authentication', overallMetric: '', metricBreakdown: [], disabled: false },\n { id: 'billing', name: 'Billing', overallMetric: '', metricBreakdown: [], disabled: false },\n ];\n \n return render(() => {\n const [selected, setSelected] = useState(items.map(i => i.id));\n return jsx`\n \n

\n <${ SelectableItemList }\n name=\"Projects\"\n filterPlaceholder=\"Filter projects...\"\n onSelectionChange=${ setSelected }\n items=${ items }/>\n

\n `;\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":296,"value":"### Greyed-out items\n\nFilters affect other filters, so some choices might be greyed out. For example, components outside of selected sources will not appear in the stats, so choosing them has no impact on the displayed data. Choice of greyed-out components, however, impacts other filters.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":295,"value":"{ \n const items = [\n { id: 'dashboard', name: 'Dashboard', overallMetric: '', metricBreakdown: [], disabled: false },\n { id: 'profile', name: 'Profile', overallMetric: '', metricBreakdown: [], disabled: false },\n { id: 'authentication', name: 'Authentication', overallMetric: '', metricBreakdown: [], disabled: true },\n { id: 'billing', name: 'Billing', overallMetric: '', metricBreakdown: [], disabled: true },\n ];\n \n return render(() => {\n const [selected, setSelected] = useState(items.map(i => i.id));\n return jsx`\n \n

\n <${ SelectableItemList }\n name=\"Projects\"\n filterPlaceholder=\"Filter projects...\"\n onSelectionChange=${ setSelected }\n items=${ items }/>\n

\n `;\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":294,"value":"### Active item count\n\nThe number at the top of a list shows how many items are currently selected and active. This is useful, for example, to quickly check how many projects are using a particular source. In the list below only the 'Design System' source is selected, and so only the projects utilizing that source are highlighted. The rest are disabled, and excluded from the total count.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":293,"value":"$38","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":292,"value":"### Item stats\n\nFilters also give a brief overview of individual impact of each source, project, and component.\n\nNumbers in each line represent the total number of component usages matching the criteria, as of the latest snapshot (rightmost tick on the chart).\n* For a source — a total number of usages of all components from that source.\n* For a project — a number of usages of selected components in that project.\n* For a component — a number of times that component is used.\n\nChart on the right shows comparative impact of each source on the item. The values are scaled in proportion to the biggest number of usages of a single item.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":291,"value":"$39","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":290,"value":"The bars have a minimum width to prioritize showing a composition of an item over the proportions. On the lower end of the scale you might see an unexpected artifact, it is there to let you know which sources are represented in an item:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":289,"value":"$3a","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":288,"value":"### Filtering by name\n\nFinally, you can narrow down projects and components filtering by name. Filtering the list affects the selection. This is useful, for example, to find all 'Button' components in the list from all sources.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":287,"value":"$3b","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":286,"value":"

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":7,"value":"# Appendix\n\nCells below are implementation details of the report.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":357,"value":"expectedSchemaVersion = \"3\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":382,"value":"## Strict require calls\n\nForcing strict enumeration of resources required using stdlib.require.\nThis helps make the report self-contained when generating the report locally.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":381,"value":"$3c","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":380,"value":"// Removed in locally generated report\nimport { d3Require } from \"@smoogly/d3-require\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":379,"value":"isUrl = (str) => {\n let url;\n try {\n url = new URL(str);\n } catch(e) {\n return false; // Couldn't construct url\n }\n\n return url.href === str;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":378,"value":"// Removed in locally generated report\nrequire = d3Require.requireFrom(async (name, base) => {\n const resolved = isUrl(name) ? name : await d3Require.require.resolve(name, base);\n if (!knownExternalResources.includes(resolved)) {\n throw new Error(`Unknown require resource. Please add it to knownExternalResources list, so that they can be statically resolved for report archival: ${ resolved }`);\n }\n\n return resolved;\n});","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":284,"value":"## UI components","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":283,"value":"reactDevMode = false","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":282,"value":"reactVersion = \"18.2.0\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":281,"value":"import {jsx, component, Fragment, render, useState, useCallback, useMemo, useRef, useEffect, React }\nwith { require, reactDevMode as dev, reactVersion as versionRange }\nfrom \"@j-f1/react\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":280,"value":"reactWindow = {\n const presetRequire = require.alias({\n \"react\": React,\n });\n \n return presetRequire('react-window@1.8.8/dist/index-prod.umd.js')\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":279,"value":"classnames = require('classnames@2.3.2/index.js')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":278,"value":"Collapsible = component(({ children, label }) => {\n const [open, setOpen] = useState(false);\n const toggle = useCallback(() => setOpen(x => !x), [setOpen]);\n return jsx`\n \n

\n ${ open ? jsx`

` : null }\n ${ open ? children : jsx`${ label ?? \"Show\" }` }\n

\n `;\n});","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":277,"value":"NBSP = component(() => jsx`${ ' ' /* nbsp literal */ }`);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":276,"value":"SearchIcon = component(() => jsx``);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":275,"value":"render(() => jsx`<${ SearchIcon }/>`)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":274,"value":"ClearIcon = component(({ onClick }) => jsx``)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":273,"value":"render(() => jsx`<${ ClearIcon }/>`)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":272,"value":"$3d","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":271,"value":"render(() => {\n const [val, setVal] = useState(''); \n return jsx`\n <${ Collapsible } label=\"Show filter input\">\n <${ FilterInputComponent } \n value=${ val }\n onChange=${ setVal }\n placeholder=\"Type something in here\"\n />\n \n `;\n});","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":270,"value":"$3e","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":269,"value":"viewof checked = {\n const nextState = (currentState) => {\n switch (currentState) {\n case CheckboxComponent.State.unchecked: return CheckboxComponent.State.checked;\n case CheckboxComponent.State.checked: return CheckboxComponent.State.mixed;\n case CheckboxComponent.State.mixed: return CheckboxComponent.State.unchecked;\n default:\n throw new Error(\"Unknown current state: \" + currentState);\n }\n };\n \n return render(({ useSetter }) => {\n const [checked, setChecked] = useState(CheckboxComponent.State.unchecked); \n useSetter(checked);\n \n const toggle = useCallback(() => setChecked(nextState(checked)), [checked, setChecked]);\n return jsx`<${CheckboxComponent} state=${checked} onChange=${toggle}>whop`\n })\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":268,"value":"SparklineBars = component(({ items }) => {\n return jsx`\n \n

\n ${ items.map(({ color, percentage, type }) => {\n return jsx`

\n <${NBSP} />\n

`;\n }) }\n

\n `;\n});","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":267,"value":"$3f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":266,"value":"{ \n const items = [\n { id: 'one', name: 'One', overallMetric: '46%', metricBreakdown: [\n { type: 'homebrew', color: '#ccc', percentage: 30 },\n { type: 'target', color: '#C39999', percentage: 50 },\n { type: 'other', color: '#335AE3', percentage: 20 },\n ], disabled: false },\n { id: 'two', name: 'Two', overallMetric: '33%', metricBreakdown: [\n { type: 'homebrew', color: '#ccc', percentage: 15 },\n { type: 'target', color: '#C39999', percentage: 20 },\n { type: 'other', color: '#335AE3', percentage: 33 },\n ], disabled: true },\n ];\n \n return render(() => {\n const [_, setSelected] = useState(items.map(i => i.id));\n return jsx`<${ Collapsible } label=\"Show selectable list demo\">\n <${ SelectableItemList }\n name=\"Projects\"\n filterPlaceholder=\"Filter projects...\"\n isFiltered\n onSelectionChange=${ setSelected }\n items=${ items }/>\n `;\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":265,"value":"$40","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":402,"value":"$41","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":401,"value":"render(() => jsx`\n <${ RadioToggler } name=\"radio-test\" value=1>One\n <${ RadioToggler } name=\"radio-test\" value=2>Another\n <${ RadioToggler } name=\"radio-test\" value=3 disabled>Disabled\n`)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":400,"value":"$42","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":399,"value":"render(({ useSetter }) => jsx`<${ MetricSelector } name=\"selected-metric-test\" useSetter=${ useSetter } isSingleSource />`);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":264,"value":"## Database\n\nEstablish connection to the database, along with search index.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":427,"value":"debugDatabaseTimings = false;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"$43","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":262,"value":"## Data about all avilable sources, projects and components","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":261,"value":"allSources = (await usagesDB.query(`\n WITH used_sources AS (SELECT DISTINCT source FROM usages)\n SELECT id, sources.source, usages.source is not null as isUsed\n FROM sources\n LEFT JOIN (SELECT * FROM used_sources) usages ON (usages.source = sources.id)\n`)).map(s => ({ id: s.id, name: s.source, isUsed: Boolean(s.isUsed) }));","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":260,"value":"$44","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":259,"value":"allComponents = (await usagesDB.query(`SELECT id, component FROM components`))\n .map(({ id, component }) => ({ id, name: component }));","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":258,"value":"## Debounce filters\n\nChanging filters triggers heavy updates, so changes are debounced to avoid at least some freezes.\n\n`selectedFilters` are defined as the output of the dashboard filters cell.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":257,"value":"debounceInterval = 500;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":256,"value":"filtersDebouncer = _.debounce((serializedFilters, current) => {\n if (current === serializedFilters) { return; }\n mutable debouncedSerializedSelectedFilters = serializedFilters; \n}, debounceInterval, { leading: false, trailing: true })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":255,"value":"mutable debouncedSerializedSelectedFilters = JSON.stringify({selectedSources: [], selectedProjects: [], selectedComponents: []});","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":254,"value":"debouncedSelectedFilters = JSON.parse(debouncedSerializedSelectedFilters)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":253,"value":"{\n const sortSelectedIds = filters => Object.keys(filters).reduce((_f, k) => {\n _f[k] = [...filters[k]].sort(d3.ascending);\n return _f;\n }, {});\n \n filtersDebouncer(JSON.stringify(sortSelectedIds(selectedFilters)), debouncedSerializedSelectedFilters)\n return \"Invoke filtersDebouncer when selectedFilters change\";\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":252,"value":"filterConditions = {\n const condition = (field, selected, all) => {\n if (selected.length === all.length) { return 'TRUE'; }\n if (selected.length === 0) { return 'FALSE'; }\n if (selected.length === 1) { return `${ field } = ${ selected[0] }` }\n\n if (selected.length > all.length / 2) {\n const unselected = all.filter(x => !selected.includes(x));\n return `${ field } NOT IN (${ unselected.join(\", \") })`;\n }\n\n return `${ field } IN (${ selected.join(\", \") })`;\n };\n\n return {\n source: condition('usages.source', debouncedSelectedFilters.selectedSources, allSources.map(x => x.id)),\n project: condition('usages.project', debouncedSelectedFilters.selectedProjects, allProjects.map(x => x.id)),\n component: condition('usages.component', debouncedSelectedFilters.selectedComponents, allComponents.map(x => x.id)),\n };\n};","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":251,"value":"## Filter data enriched with stats & enable conditions","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":250,"value":"minPercentageTarget = 7;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":249,"value":"$45","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":248,"value":"sourcesData = allSources\n .map(s => {\n const data = breakdownBySource.get(s.id);\n const overallMetricValue = data?.overallMetricValue ?? 0;\n return ({ \n ...s, \n overallMetric: data?.overallMetric ?? \"\", \n overallMetricValue, \n metricBreakdown: data?.breakdown ?? [], \n disabled: overallMetricValue === 0,\n });\n })\n .sort((a, b) => d3.descending(a.overallMetricValue, b.overallMetricValue))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":247,"value":"$46","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":246,"value":"projectData = allProjects\n .map(s => {\n const data = breakdownByProject.get(s.id);\n const overallMetricValue = data?.overallMetricValue ?? 0;\n return ({ \n ...s, \n overallMetric: data?.overallMetric ?? \"\", \n overallMetricValue, \n metricBreakdown: data?.breakdown ?? [], \n disabled: overallMetricValue === 0, \n });\n })\n .sort((a, b) => d3.descending(a.overallMetricValue, b.overallMetricValue))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":245,"value":"componentData = allComponents\n .map(s => {\n const data = breakdownByComponent.get(s.id);\n const overallMetricValue = data?.overallMetricValue ?? 0;\n return ({ \n ...s, \n overallMetric: data?.overallMetric ?? \"\", \n overallMetricValue, \n metricBreakdown: data?.breakdown ?? [], \n disabled: overallMetricValue === 0, \n });\n })\n .sort((a, b) => d3.descending(a.overallMetricValue, b.overallMetricValue))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":244,"value":"$47","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":243,"value":"## Color scheme","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":242,"value":"homebrewColor = \"#C2C2C2\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":241,"value":"homebrewSourceId = usagesDB.queryRow(`SELECT id FROM sources WHERE source = \"homebrew\"`);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":240,"value":"colorScales = {\n const targetColor = \"#D44527\";\n\n const homebrewColor = \"#C2C2C2\";\n const chartHomebrewColor = homebrewColor + \"77\";\n\n const usedSources = allSources.filter(s => s.isUsed);\n const restOfSchema = usedSources.length < 3 ? [targetColor] : d3.schemeTableau10;\n \n const chart = d3.scaleOrdinal([chartHomebrewColor, ...restOfSchema]);\n const standalone = d3.scaleOrdinal([homebrewColor, ...restOfSchema]);\n\n if (!homebrewSourceId?.id) {\n throw new Error('Did not find homebrew source id');\n }\n\n const preset = (source) => {\n chart(source); \n standalone(source); \n };\n\n // Pre-set the homebrew color on the scales\n preset(homebrewSourceId.id);\n\n // Pre-set all used sources on the scale\n usedSources.forEach(s => preset(s.id));\n\n return { chart, standalone, homebrewColor };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":239,"value":"## Data queries","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":238,"value":"collectedAt = new Date((await usagesDB.queryRow(`SELECT value FROM meta WHERE key = 'collectedAt'`)).value)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":356,"value":"schemaVersion = (await usagesDB.queryRow(`SELECT value FROM meta WHERE key = 'schemaVersion'`)).value","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":237,"value":"isSingleSource = {\n const res = await usagesDB.query(`\n SELECT DISTINCT source\n FROM usages \n WHERE ${ filterConditions.source } AND ${ filterConditions.project } AND ${ filterConditions.component }\n LIMIT 2\n `);\n\n return res.length < 2;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":236,"value":"isSingleSnapshot = {\n const res = await usagesDB.query(`\n SELECT DISTINCT weeksAgo\n FROM usages \n WHERE ${ filterConditions.source } AND ${ filterConditions.project } AND ${ filterConditions.component }\n LIMIT 2\n `);\n\n return res.length < 2;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":235,"value":"filteredUsageCountBySource = [MetricSelector.Metrics.share, MetricSelector.Metrics.absolute].includes(selectedMetric) ? usagesDB.query(`SELECT weeksAgo, source, COUNT(*) as usages\n FROM usages \n WHERE ${ filterConditions.source } AND ${ filterConditions.project } AND ${ filterConditions.component }\n GROUP BY weeksAgo, source \n`) : []","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":423,"value":"maxComponentsForPerComponentUsage = 50","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":422,"value":"$48","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":234,"value":"latest_usages_by_file = debouncedSelectedFilters.selectedProjects.length === 1 ? usagesDB.query(`\n SELECT file, COUNT(*) as usages\n FROM usages\n JOIN projects ON (projects.id = usages.project)\n JOIN files ON (files.id = usages.usageFile)\n WHERE weeksAgo = 0\n AND ${ filterConditions.source }\n AND ${ filterConditions.project }\n AND ${ filterConditions.component }\n GROUP BY file, source\n`) : []","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":405,"value":"filteredReuseBySource = selectedMetric === MetricSelector.Metrics.reuse ? usagesDB.query(`\n SELECT weeksAgo, source, ((usages * 1.0) / (components * 1.0)) as reuse\n FROM (\n SELECT weeksAgo, source, COUNT(*) as usages, COUNT(DISTINCT component) as components\n FROM usages \n WHERE ${ filterConditions.source } AND ${ filterConditions.project } AND ${ filterConditions.component }\n GROUP BY weeksAgo, source \n )\n`) : []","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":415,"value":"## Charting helpers","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":414,"value":"$49","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":342,"value":"## Metadata styling\n\nSneaky rules visually hiding the first cell, that contains the report title & metadata.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":344,"value":"","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"}],"files":"$W4a","stdlib":"1","titling":"auto"}} 32:"$31:body"