3f:null 40:["$","title",null,{"children":"Events on a Timeline | Ross Mills | Observable"}] 46:T1107,timelineView = function (timelineData, config) { config = { ...defaults, ...config }; const { timelineStart, timelineEnd, chartHeight, width, labelBoxHeight, labelBoxWidth, dateFormat, showEndTicks, showToday } = config; const margins = { top: Math.floor(chartHeight / 2), bottom: Math.floor(chartHeight / 2), left: 48, right: 48 }; const lineLength = 12; const w = width - margins.left - margins.right; const axisColor = "darkGrey"; const axisStrokeWidth = 6; const domain = [timelineStart, timelineEnd]; const range = [0, w]; const scale = d3.scaleTime(domain, range); const svg = html``; const svgSelection = d3.select(svg); const vis = svgSelection .append("g") .attr("transform", `translate(${margins.left}, ${margins.top})`); const offsetUnit = labelBoxHeight + 1; const maxOffset = margins.top - lineLength - labelBoxHeight; const timelineDataCopy = timelineData.slice(); if (showToday) { timelineDataCopy.push({ label: "TODAY", date: d3.timeDay(), type: "now" }); } timelineDataCopy.sort((a, b) => a.date - b.date); const yOffsets = timelineDataCopy.reduce((list, current) => { const leftEdge = scale(current.date) - labelBoxWidth / 2; const prevOffset = list.length ? list[list.length - 1] : null; let nextOffset = { leftEdge, offset: 0 }; if (prevOffset && prevOffset.leftEdge + labelBoxWidth > leftEdge) { let candidateNextOffset = prevOffset.offset + offsetUnit; if (candidateNextOffset > maxOffset) { nextOffset.offset = 0; } else { nextOffset.offset = candidateNextOffset; } } list.push(nextOffset); return list; }, []); // we render the events in reverse order to get the layering right, so need to reverse the offsets array yOffsets.reverse(); const axisFn = d3 .axisBottom(scale) .tickSize(axisStrokeWidth) .tickValues(showEndTicks ? domain : []) .tickFormat(dateFormat); // timeline axis const axis = vis.append("g").classed("timeline-axis", true); axis.call(axisFn); // Hide default axis line, using our own one axis.select(".domain").attr("display", "none"); axis .append("line") .attr("x0", 0) .attr("x1", (d) => scale.range()[1]) .attr("y0", 0) .attr("y1", 0) .attr("stroke-width", axisStrokeWidth) .attr("stroke", "darkGrey") .attr("marker-start", "url(#timelineCap)") .attr("marker-end", "url(#timelineCap)"); const eventDateOffset = 10; const events = vis .append("g") .selectAll("g") .data(timelineDataCopy.reverse()) .enter() .append("g") .attr("class", (d) => d.type) .attr("transform", (d) => `translate(${scale(d.date)}, 0)`); const lineLengthOffset = (d, i) => lineLength + yOffsets[i].offset; const lineLengthFixed = (d) => lineLength; const useLineLengthFixed = false; events .append("line") .classed("event-line", true) .attr("x1", 0) .attr("x2", 0) .attr("y1", useLineLengthFixed ? lineLengthFixed : lineLengthOffset) .attr("y2", (d, i) => -lineLength - yOffsets[i].offset) .attr("stroke-width", 1); events .append("text") .classed("event-date", true) .attr("x", 0) .attr("y", (d, i) => lineLength + yOffsets[i].offset + eventDateOffset) .attr("text-anchor", "middle") .text((d) => dateFormat(d.date)); events .append("foreignObject") .attr("x", 0) .attr("y", (d, i) => -lineLength - yOffsets[i].offset) .attr("width", labelBoxWidth) .attr("height", labelBoxHeight) .attr("transform", `translate(${-labelBoxWidth / 2}, ${-labelBoxHeight})`) .html( (d) => `

${d.label}

` ); return svg; }47:T419,timelineStyles = html``48:[] 44:{"id":"1efbc9a9bd82795d","slug":"timeline","title":"Events on a Timeline","thumbnail":"0a76dceee4c69431e35b9d1c70b72ee4fea94c79719bd21261a6036d8f2d4886","access_level":"public","create_time":"$D2023-03-01T11:13:36.527Z","update_time":"$D2024-08-28T09:56:40.491Z","view_time":null,"first_public_time":"$D2023-12-06T10:14:05.305Z","has_unpublished_edits":null,"fork":false,"stars":6,"starred":false,"owner":{"type":"team","id":"55e9268ccca383a5","login":"rossmills99","name":"Ross Mills","avatar_url":"https://avatars-next.observableusercontent.com/edf6d8f13cc81ae6ed5c2a7f7911f9b522006a0413d822217f3666daf05d1366","tier":"starter_2024","bio":"Software engineer and hands-on tech leader. Creating and collaborating on interesting software projects gets me out of bed in the morning.","following":false},"version":564,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"3d55deecec17df75","login":"rossmills99","name":"Ross Mills","avatar_url":"https://avatars-next.observableusercontent.com/edf6d8f13cc81ae6ed5c2a7f7911f9b522006a0413d822217f3666daf05d1366","tier":null,"bio":"Software engineer and hands-on tech leader.\n","following":false}],"members":[{"type":"individual","id":"3d55deecec17df75","login":"rossmills99","name":"Ross Mills","avatar_url":"https://avatars-next.observableusercontent.com/edf6d8f13cc81ae6ed5c2a7f7911f9b522006a0413d822217f3666daf05d1366","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":6,"collection":{"id":"a1e9d12acb8e1d55","slug":"ui-prototypes","title":"UI Prototypes","owner":{"id":"55e9268ccca383a5","login":"rossmills99","name":"Ross Mills"}},"type":"notebook","body":{"titling":"auto","title":"Events on a Timeline","cells":[{"id":0,"value":"# Events on a Timeline\n\nTo use:\n\n```javascript\nimport { timelineView, timelineStyles } from '@actify/timeline'\n```\n\nTimeline component features:\n\n- Event positions are scaled according to start and end dates\n- Overlapping events are stacked to try to preserve visibility\n- The event \"type\" is rendered as a CSS class allowing for custom styles via CSS\n- Chart height can be altered and chart will adjust accordingly\n- Label height and width can be altered and chart will adjust accordingly\n- Labels that are too long are truncated with ellipsis\n\nPossible future improvements:\n\n- Show summary of tasks that are not visible at the right or left edge of the chart\n- Adjust x-axis position of the task node when events overlap in cases where it would enhance visibility\n- Allow zoom and pan of the timeline\n\nTry adjusting the controls below the chart to see how the chart responds.\n\nYou can also adjust the data to add, remove or update events, defined as comma-separated values in the text area below the controls.\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":487,"value":"timelineView(timelineData)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":521,"value":"defaults = ({\n timelineStart,\n timelineEnd,\n chartHeight,\n width,\n labelBoxHeight,\n labelBoxWidth,\n dateFormat: d3.timeFormat(\"%d %b, %Y\"),\n showEndTicks: true,\n showToday: true\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"$46","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":41,"value":"viewof timelineStart = Inputs.date({\n label: \"Timeline Start\",\n value: d3.timeDay.offset(new Date(2023, 2, 1), -30)\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":44,"value":"viewof timelineEnd = Inputs.date({\n label: \"Timeline End\",\n value: d3.timeYear.offset(new Date(2023, 3, 1), 1)\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":459,"value":"viewof chartHeight = Inputs.range([50, 400], { step: 5, label: \"Chart height\" })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":451,"value":"viewof labelBoxHeight = Inputs.range([8, 32], {\n value: 16,\n step: 1,\n label: \"Label box height\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":446,"value":"viewof labelBoxWidth = Inputs.range([20, 200], {\n value: 64,\n step: 4,\n label: \"Label box width\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"viewof rawTimelineData = Inputs.textarea({\n label: \"Data (label,dd-mm-yy,soft|hard)\",\n rows: 12,\n value: `\nOKTT,01-04-23,hard\nGA,04-06-23,soft\nWTF,05-06-23,soft\nOTT,05-07-23,hard\nSOS,31-07-23,soft\nTLA,10-12-23,soft\nARR,20-12-23,soft\n`.slice(1, -1)\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":95,"value":"$47","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"timelineData = parseRawTimelineData(rawTimelineData);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":554,"value":"function parseRawTimelineData(data) {\n return data\n .split(\"\\n\")\n .map((row) => {\n let items = row.split(\",\");\n if (items.length != 3) return null;\n\n items = items.map((item) => item.trim());\n\n const [day, month, year] = items[1].split(\"-\");\n if (!(day && month && year)) return null;\n\n const datum = {\n label: items[0],\n date: new Date(\"20\" + year, month - 1, day),\n type: items[2]\n };\n\n if (isNaN(datum.date) || !datum.label) return null;\n\n return datum;\n })\n .filter((d) => !!d);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W48","stdlib":"1"}} 45:"$44:body"