31:T474,

${visibleComponents.map((c) => { return !filesById[c.file_key] ? `` : `

$${filesById[c.file_key].name}: ${c.name}$

` })}

32:T6cf,tableData = { return { Projects: projects.map((project) => { return { Project: project.id, "File count": (project.files || []).length, Files: project.files }; }), Files: (files || []).map((file) => { // const flows = getFileFlows(fullFileDataById[file.key]); return { Thumbnail: file.thumbnail_url, File: file.key, // Flows: flows.length ? flows.length : "-", // Required full file data to have been fetched Project: file.project_id, Modified: file.last_modified // ID: file.key }; }), Components: components.map((component) => { return { // ID: component.key, Thumbnail: component.thumbnail_url, File: component.file_key, Name: component.name, Description: component.description, User: component.user, // Created: component.created_at, Modified: component.updated_at }; }), "Component leaderboard": _.orderBy( componentUsers.map((user) => { const userComponents = componentsByUser[user.id]; const userComponentFiles = _.uniq(_.map(userComponents, "file_key")); const oldestComponent = _.minBy(userComponents, "created_at"); const oldestComponentFile = filesById[oldestComponent.file_key]; return { User: user, Components: userComponents.length, "Published files": userComponentFiles.length, "Oldest component": oldestComponentFile ? `${oldestComponentFile.name} / ${oldestComponent.name}` : "", "Oldest component date": oldestComponent.created_at }; }), "Components", "desc" ) }; }33:T5c6,tableFormattingRules = { const renderUser = (user) => { return !user ? undefined : html`${ user.img_url ? html`

` : `` } ${user.handle}`; }; return { Project(id) { return html`${ projectsById[id].name }`; }, Files(files) { return html`${files.map((file) => { return html`

`; })}`; }, File(id) { return html`${ filesById[id] ? filesById[id].name : "File" }`; }, Thumbnail(url) { return url ? html`

` : undefined; }, User: renderUser, Reactions(reactions) { return html`${reactions .map((reaction) => { return ` ${reaction.user.handle} ${reaction.emoji}

`; }) .join("")}`; }, Modified: renderDate, Created: renderDate, Resolved: renderDate, "Oldest component date": renderDate }; }34:[] 2f:{"title":"Figma dashboard","cells":[{"id":0,"value":"# Figma dashboard ${icon(\"figma-color\")}","pinned":false,"hidden":false,"mode":"md"},{"id":204,"value":"Get an overview of the projects, files and components in your Figma space. Enter your [Figma team ID](https://help.lingoapp.com/en/articles/5403605-setting-up-the-figma-integration#h_521866f299) and your personal [Figma API access token](https://www.figma.com/developers/api#access-tokens) to get started:","pinned":false,"hidden":false,"mode":"md"},{"id":33,"value":"viewof teamId = Inputs.text({ label: \"Figma team ID\", value: urlStrings.teamId })","pinned":false,"hidden":false,"mode":"ojs"},{"id":27,"value":"viewof accessToken = Inputs.text({ label: \"Figma access token\", value: urlParams.accessToken })","pinned":false,"hidden":false,"mode":"ojs"},{"id":777,"value":"[Permalink](${liveUrl})","pinned":false,"hidden":false,"mode":"md"},{"id":866,"value":"You don't have to duplicate this notebook. Enter your credentials above and wait for the data to load (this might take a while).","pinned":false,"hidden":false,"mode":"md"},{"id":31,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":248,"value":"## Team summary ${loader(isFetchingTeamProjects || isFetchingProjectFiles || isFetchingTeamComponents)}","pinned":false,"hidden":false,"mode":"md"},{"id":46,"value":"md`${\n isFetchingTeamProjects || isFetchingProjectFiles || isFetchingTeamComponents\n ? \"Loading...\"\n : waitingInput\n ? \"Enter team ID and access token above to get started.\"\n : `${teamName} has ${formatNumber(projects.length)} projects (folders) with ${formatNumber(files.length)} files and ${formatNumber(components.length)} published components. Recently edited files:`\n}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1981,"value":"summaryCovers = html`

\n ${recentFiles.map((file) => {\n return html` $\"${\n$ `;\n })}\n

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":448,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":459,"value":"## Browse team space ${loader(teamProjectsFetchCount, teamComponentsFetchCount)}","pinned":false,"hidden":false,"mode":"md"},{"id":272,"value":"viewof tableTab = Inputs.radio(_.keys(tableData), {value: _.keys(tableData)[0]})","pinned":false,"hidden":false,"mode":"ojs"},{"id":627,"value":"viewof tableTabData = Inputs.search(tableData[tableTab])","pinned":false,"hidden":false,"mode":"ojs"},{"id":217,"value":"table = Inputs.table(tableTabData, {\n rows: 24,\n width: tableFormattingWidths,\n format: tableFormattingRules,\n align: tableFormattingAlignments\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":2047,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":2098,"value":"## Browse components","pinned":false,"hidden":false,"mode":"md"},{"id":2181,"value":"viewof componentsFiltered = Inputs.search(components)","pinned":false,"hidden":false,"mode":"ojs"},{"id":2099,"value":"$31","pinned":false,"hidden":false,"mode":"md"},{"id":2102,"value":"viewof componentPage = Inputs.range(\n [1, Math.ceil(components.length / perPage)],\n {\n label: `Page (out of ${Math.ceil(components.length / perPage)})`,\n step: 1,\n value: 1\n }\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":2111,"value":"viewof perPage = Inputs.select(\n [16, ...[1, 2, 4, 8, 16, 20].map((x) => x * 40)],\n {\n label: \"Per page\",\n value: 40\n }\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":510,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":511,"value":"## Inspect a file [🔗](${liveUrl}) ${loader(isFetchingFile)}","pinned":false,"hidden":false,"mode":"md"},{"id":1219,"value":"viewof selectedFileId = Inputs.select(\n new Map(\n _.map(files, ({ project_id, name, key }) => [\n `${projectsById[project_id].name}: ${name}`,\n key\n ])\n ),\n {\n value: urlParams.fileId\n }\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":2025,"value":"viewof coverOrEmbed = Inputs.radio([\"Cover\", \"Embed\"], { value: \"Cover\" })","pinned":false,"hidden":false,"mode":"ojs"},{"id":2028,"value":"coverOrEmbed === \"Embed\" ? figma(selectedFileId) : html`${selectedFileCover}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1247,"value":"selectedFile\n ? html`Open in ${\n selectedFile.editorType === \"figjam\" ? \"FigJam\" : \"Figma\"\n }`\n : md``","pinned":false,"hidden":false,"mode":"ojs"},{"id":660,"value":"!selectedFile\n ? md``\n : md`- Last modified on ${renderDate(selectedFile.lastModified)}\n- ${selectedFile.document.children.length} pages\n- ${\n _.filter(selectedFile.components, (x) => !x.remote).length || \"No\"\n } components\n- ${_.filter(selectedFile.styles, (x) => !x.remote).length || \"No\"} styles\n- ${selectedFileFlows.length || \"No\"} prototype flows\n- ${selectedFile.comments.length || \"No\"} comments${\n selectedFile.comments.length ? \" (see below)\" : \"\"\n }`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2458,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":2452,"value":"selectedFileFlows && selectedFileFlows.length\n ? html`

Prototypes:

${f.name}

`\n : html`No prototype flows.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":523,"value":"selectedFileCommentsTable = !selectedFile\n ? md``\n : !selectedFile.comments.length\n ? md`No comments in this file.`\n : Inputs.table(\n selectedFile.comments.map((comment) => {\n return {\n Created: comment.created_at,\n User: comment.user,\n // Resolved: comment.resolved_at,\n Message: comment.message,\n Reactions: comment.reactions\n // Parent: comment.parent_id\n };\n }),\n {\n rows: 20,\n width: tableFormattingWidths,\n format: tableFormattingRules,\n align: tableFormattingAlignments,\n sort: \"created_at\",\n reverse: true\n }\n )","pinned":false,"hidden":false,"mode":"ojs"},{"id":2334,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":2335,"value":"## Data exploration","pinned":false,"hidden":false,"mode":"md"},{"id":2350,"value":"Plot.plot({\n title: \"Components by month created\",\n marks: [\n Plot.auto(plotData, {x: \"created_at_month\"})\n ]\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":2342,"value":"plotData","pinned":true,"hidden":false,"mode":"ojs"},{"id":2353,"value":"plotData = components.map(c => {\n const d = new Date(c.created_at)\n return {\n ...c,\n created_at_month: d.getFullYear() + \"-\" + (d.getMonth() + 1)\n };\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":2096,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":733,"value":"## Source","pinned":false,"hidden":false,"mode":"md"},{"id":2107,"value":"visibleComponents = componentsFiltered.length < components.length\n ? componentsFiltered.slice(0, perPage)\n : components.slice(\n (componentPage - 1) * perPage,\n (componentPage - 1) * perPage + perPage\n )","pinned":false,"hidden":false,"mode":"ojs"},{"id":264,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":1302,"value":"renderDate = (dateString) => {\n return new Date(dateString).toLocaleDateString(\"en-US\", {\n year: \"numeric\",\n month: \"short\",\n day: \"numeric\",\n hour: \"2-digit\",\n minute: \"2-digit\"\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":571,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":648,"value":"tableFormattingWidths = ({\n Project: 200,\n \"File count\": 40,\n Thumbnail: 48,\n User: 160,\n ID: 200,\n\n Modified: 180,\n Created: 180,\n Resolved: 180,\n \"Oldest component date\": 180,\n\n Reactions: 60,\n Components: 120,\n \"Published files\": 120\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1145,"value":"tableFormattingAlignments = ({\n 'File count': 'left',\n 'Components': 'left',\n 'Component files': 'left'\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":570,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":241,"value":"### Data","pinned":false,"hidden":false,"mode":"md"},{"id":1999,"value":"API data from your Figma space.","pinned":false,"hidden":false,"mode":"md"},{"id":2537,"value":"getFile(selectedFileId)","pinned":false,"hidden":false,"mode":"ojs"},{"id":516,"value":"selectedFile = selectedFileId ? fullFileDataById[selectedFileId] : undefined","pinned":false,"hidden":false,"mode":"ojs"},{"id":693,"value":"selectedFileFlows = selectedFile ? getFileFlows(selectedFile) : []","pinned":false,"hidden":false,"mode":"ojs"},{"id":2501,"value":"function getFileFlows(file) {\n return file && file.document && file.document.children ? _.flatten(\n _.compact(\n file.document.children.map(({ flowStartingPoints }) =>\n flowStartingPoints && flowStartingPoints.length\n ? flowStartingPoints\n : null\n )\n )\n ) : [];\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":707,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":100,"value":"teamName = projectsResponse.name","pinned":false,"hidden":false,"mode":"ojs"},{"id":91,"value":"projects = {\n const list = projectsResponse.projects;\n\n // Include files in each project\n const filesByProject = _.mapValues(\n _.keyBy(filesByProjectResponse, \"id\"),\n \"files\"\n );\n\n return list.map((project) => {\n let files = filesByProject[project.id] || [];\n\n // Add project ID in each file object\n if (files.length) {\n files = files.map((file) => {\n return {\n project_id: project.id,\n ...file\n }\n })\n }\n\n return {\n ...project,\n files\n };\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":221,"value":"projectsById = _.keyBy(projects, 'id')","pinned":false,"hidden":false,"mode":"ojs"},{"id":226,"value":"filesByProjectId = _.mapValues(projectsById, 'files')","pinned":false,"hidden":false,"mode":"ojs"},{"id":160,"value":"files = _.flatten(_.map(projects, \"files\"))","pinned":false,"hidden":false,"mode":"ojs"},{"id":236,"value":"filesById = _.keyBy(files, 'key')","pinned":false,"hidden":false,"mode":"ojs"},{"id":423,"value":"recentFiles = _.slice(_.orderBy(files, 'last_modified', 'desc'), 0, 20)","pinned":false,"hidden":false,"mode":"ojs"},{"id":71,"value":"components = componentsResponse.meta.components","pinned":false,"hidden":false,"mode":"ojs"},{"id":1265,"value":"componentsByUser = _.groupBy(components, 'user.id')","pinned":false,"hidden":false,"mode":"ojs"},{"id":231,"value":"componentsByFileId = _.groupBy(components, 'file_key')","pinned":false,"hidden":false,"mode":"ojs"},{"id":1272,"value":"componentUsers = _.uniqBy(_.map(components, 'user'), 'id')","pinned":false,"hidden":false,"mode":"ojs"},{"id":1276,"value":"usersById = _.groupBy(componentUsers, 'id')","pinned":false,"hidden":false,"mode":"ojs"},{"id":41,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":201,"value":"### Requests","pinned":false,"hidden":false,"mode":"md"},{"id":397,"value":"waitingInput = !(accessToken && teamId)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1481,"value":"isFetching = fetchCount > 0","pinned":false,"hidden":false,"mode":"ojs"},{"id":1477,"value":"fetchCount = fileFetchCount +\n fileCommentsFetchCount +\n teamProjectsFetchCount +\n teamComponentsFetchCount +\n projectFilesFetchCount","pinned":false,"hidden":false,"mode":"ojs"},{"id":98,"value":"projectsResponse = waitingInput ? { projects: [] } : await getTeamProjects()","pinned":false,"hidden":false,"mode":"ojs"},{"id":126,"value":"filesByProjectResponse = {\n if (waitingInput) {\n return []\n }\n \n const promises = (projectsResponse.projects || []).map(async ({ id }) => {\n const files = (await getProjectFiles(id)).files\n \n return {\n id,\n files\n }\n })\n \n return Promise.all(promises)\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":119,"value":"componentsResponse = waitingInput ? { meta: { components: [] } } : await getTeamComponents()","pinned":false,"hidden":false,"mode":"ojs"},{"id":43,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":2002,"value":"### API methods","pinned":false,"hidden":false,"mode":"md"},{"id":60,"value":"[figma.com/developers/api](https://www.figma.com/developers/api)","pinned":false,"hidden":false,"mode":"md"},{"id":53,"value":"sendApiRequest = async (endpoint, params) => {\n const res = await fetch(\n `https://api.figma.com/v1/${endpoint}?${new URLSearchParams(params)}`,\n {\n method: \"GET\",\n headers: { \"x-figma-token\": accessToken }\n }\n )\n .then((response) => response.json())\n .catch((error) => error);\n\n return res;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":893,"value":"function getFileUrl(fileId, nodeId) {\n return `https://figma.com/file/${fileId}${\n filesById[fileId] ? \"/\" + filesById[fileId].name : \"\"\n }${nodeId ? \"?node-id=\" + nodeId : \"\"}`;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2471,"value":"function getPrototypeUrl(fileId, startingPointNodeId, optionsInput) {\n const options = {\n scaling: \"contain\",\n contentScaling: \"responsive\",\n showProtoSidebar: 1,\n hideUi: 1,\n ...(optionsInput || {})\n };\n\n return `https://figma.com/proto/${fileId}${\n filesById[fileId] ? \"/\" + filesById[fileId].name : \"\"\n }${\n startingPointNodeId ? \"?starting-point-node-id=\" + startingPointNodeId : \"\"\n }&${new URLSearchParams(\n _.mapKeys(options, (v, k) => _.kebabCase(k))\n ).toString()}`;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":899,"value":"function getProjectUrl (projectId) {\n return `https://figma.com/files/project/${projectId}`\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1558,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":1521,"value":"mutable fileFetchCount = 0","pinned":false,"hidden":false,"mode":"ojs"},{"id":1579,"value":"isFetchingFile = fileFetchCount > 0","pinned":false,"hidden":false,"mode":"ojs"},{"id":2512,"value":"mutable fullFileDataById = ({})","pinned":false,"hidden":false,"mode":"ojs"},{"id":50,"value":"getFile = async (fileId) => {\n mutable fileFetchCount++;\n\n const [file, comments] = await Promise.all([\n sendApiRequest(`files/${fileId}`),\n getFileComments(fileId)\n ]);\n\n mutable fileFetchCount--;\n\n const data = {\n ...file,\n comments\n };\n\n if (!data.err) {\n mutable fullFileDataById = {...(mutable fullFileDataById), [fileId]: data }\n }\n\n return data;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1583,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":1524,"value":"mutable fileCommentsFetchCount = 0","pinned":false,"hidden":false,"mode":"ojs"},{"id":541,"value":"selectedFileCover = selectedFile\n ? html` $\"${\n$ `\n : isFetchingFile\n ? html`

`\n : html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":1581,"value":"isFetchingFileComments = fileCommentsFetchCount > 0","pinned":false,"hidden":false,"mode":"ojs"},{"id":475,"value":"getFileComments = async (fileKey) => {\n mutable fileCommentsFetchCount++;\n\n const res = await sendApiRequest(`files/${fileKey}/comments`);\n\n mutable fileCommentsFetchCount--;\n\n return res.comments;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1585,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":1525,"value":"mutable teamProjectsFetchCount = 0","pinned":false,"hidden":false,"mode":"ojs"},{"id":1589,"value":"isFetchingTeamProjects = teamProjectsFetchCount > 0","pinned":false,"hidden":false,"mode":"ojs"},{"id":87,"value":"getTeamProjects = async () => {\n mutable teamProjectsFetchCount++;\n\n const res = await sendApiRequest(`teams/${teamId}/projects`);\n\n mutable teamProjectsFetchCount--;\n\n return res;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1587,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":1527,"value":"mutable teamComponentsFetchCount = 0","pinned":false,"hidden":false,"mode":"ojs"},{"id":1593,"value":"isFetchingTeamComponents = teamComponentsFetchCount > 0","pinned":false,"hidden":false,"mode":"ojs"},{"id":67,"value":"getTeamComponents = async () => {\n mutable teamComponentsFetchCount++;\n\n const res = await sendApiRequest(`teams/${teamId}/components`, {\n page_size: 99000\n });\n\n mutable teamComponentsFetchCount--;\n\n return res;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1591,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":1532,"value":"mutable projectFilesFetchCount = 0","pinned":false,"hidden":false,"mode":"ojs"},{"id":1595,"value":"isFetchingProjectFiles = projectFilesFetchCount > 0","pinned":false,"hidden":false,"mode":"ojs"},{"id":113,"value":"getProjectFiles = async (projectId) => {\n mutable projectFilesFetchCount++;\n\n const res = await sendApiRequest(`projects/${projectId}/files`);\n\n mutable projectFilesFetchCount--;\n\n return res;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1339,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":747,"value":"import { urlParams, urlNumbers, makeUrl, urlStrings } from \"@jerryjappinen/url-params\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":752,"value":"liveParams = ({\n accessToken,\n teamId,\n fileId: selectedFileId\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":748,"value":"liveUrl = makeUrl(liveParams)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1977,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":1965,"value":"import { icon } from \"@jerryjappinen/icons\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":1694,"value":"import { baseStyles, formatNumber } from \"@jerryjappinen/ui\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":2414,"value":"import { loader } from \"@jerryjappinen/snippets\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":2017,"value":"import { figma } from \"@jerryjappinen/embed\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":2006,"value":"baseStyles","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W34","stdlib":"1","titling":"auto"}