Built with blockbuilder.org
Last active
May 7, 2019 15:17
-
-
Save karooolis/8fc6a46036f734c258f8ced4f1539a84 to your computer and use it in GitHub Desktop.
OCD patterns
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| license: mit |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <script src="https://d3js.org/d3.v4.min.js"></script> | |
| <style> | |
| </style> | |
| </head> | |
| <body> | |
| <script> | |
| const HEIGHT = 30; | |
| const WIDTH = 500; | |
| const SHIFT_BAR_HEIGHT = 24 | |
| const SHIFT_BAR_PADDING = 2 | |
| const CHART_X_AXIS_HEIGHT = 30 | |
| const SHIFT_LABEL_TEXT_X_OFFSET = -20 | |
| const SHIFT_BAR_TEXT_X_OFFSET = 4 | |
| const SHIFT_BAR_TEXT_Y_OFFSET = 15 | |
| const SHIFT_INTERVALS_VERTICAL_SPACE_PERCENT = 0.2 | |
| const MARGINS = { left: 50, top: 30, right: 50 } | |
| const MULTIPLE_USER_COLOR = '#919191' | |
| const NO_USER_COLOR = '#F2F2F4' | |
| const SHIFT_INTERVAL_RESOLVED_COLOR = '#629A41' | |
| const SHIFT_INTERVAL_RESOLVED_COLOR_LOW_URGENCY = '#b1cca2' | |
| const SHIFT_INTERVAL_TRIGGERED_COLOR = '#CA3B27' | |
| const SHIFT_INTERVAL_ACKNOWLEDGED_COLOR = '#ECAB20' | |
| const SHIFT_INTERVAL_HIGHLIGHTED_STROKE_COLOR = '#222231' | |
| const SHIFT_INTERVAL_HIGHLIGHTED_MARKED_STROKE_COLOR = '#222231' | |
| const SHIFT_INTERVAL_INCIDENT_MANAGER_TRIGGERED = '#07bdd9' | |
| const SHIFT_INTERVAL_INCIDENT_MANAGER_RESOLVED_COLOR = SHIFT_INTERVAL_INCIDENT_MANAGER_TRIGGERED | |
| const SHIFT_INTERVAL_INCIDENT_MANAGER_TRIGGERED_2 = '#800080' | |
| const SHIFT_INTERVAL_INCIDENT_MANAGER_RESOLVED_COLOR_2 = SHIFT_INTERVAL_INCIDENT_MANAGER_TRIGGERED | |
| const SHIFT_INTERVAL_TASK_TRIGGERED = '#246772' | |
| const SHIFT_INTERVAL_TASK_RESOLVED_COLOR = SHIFT_INTERVAL_TASK_TRIGGERED | |
| const SHIFT_INTERVAL_TASK_ACKNOWLEDGED_COLOR = '#b1eaeb' | |
| const LOW_URGENCY_FILL_OPACITY = 0.4 | |
| var svg = d3.select("body").append("svg") | |
| .attr("width", WIDTH + 500) | |
| .attr("height", 1300) | |
| function createRectPattern(element, id, fill, fillOpacity, angle = 45) { | |
| element.append('pattern') | |
| .attr('id', id) | |
| .attr('patternUnits', 'userSpaceOnUse') | |
| .attr('width', 5) | |
| .attr('height', 3) | |
| .attr('patternTransform', `rotate(${angle})`) | |
| .append('rect') | |
| .attr('width', 10) | |
| .attr('height', 2) | |
| .attr('fill', fill) | |
| .attr('fill-opacity', fillOpacity) | |
| } | |
| function createRectPattern2(element, id, fill, fillOpacity, angle = 45) { | |
| element.append('pattern') | |
| .attr('id', id) | |
| .attr('patternUnits', 'userSpaceOnUse') | |
| .attr('width', 5) | |
| .attr('height', 3) | |
| .attr('patternTransform', `rotate(${angle})`) | |
| .append('rect') | |
| .attr('width', 10) | |
| .attr('height', 2) | |
| .attr('fill', fill) | |
| .attr('fill-opacity', fillOpacity) | |
| } | |
| function createCirclePattern(element, id, fill, fillOpacity, angle = 45) { | |
| element.append('pattern') | |
| .attr('id', id) | |
| .attr('patternUnits', 'userSpaceOnUse') | |
| .attr('width', 5) | |
| .attr('height', 5) | |
| .append('circle') | |
| .attr('cx', 1.7) | |
| .attr('cy', 1.7) | |
| .attr('r', 1.7) | |
| .attr('fill', fill) | |
| .attr('fill-opacity', fillOpacity) | |
| } | |
| function createPathPattern(element, id, fill, fillOpacity = 1, strokeWidth = 3, dashArray = 0) { | |
| element.append('pattern') | |
| .attr('id', id) | |
| .attr('patternUnits', 'userSpaceOnUse') | |
| .attr('patternUnits', 'userSpaceOnUse') | |
| .attr('width', '100%') | |
| .attr('height', '100%') | |
| .append('line') | |
| .attr('x1', 0) | |
| .attr('y1', 15) | |
| .attr('x2', WIDTH) | |
| .attr('y2', 15) | |
| .attr('stroke', fill) | |
| .attr('fill-opacity', 1) | |
| .attr('stroke-width', strokeWidth) | |
| .attr('stroke-dasharray', dashArray) | |
| .attr('shape-rendering', 'sharpEdges') | |
| // element.append('pattern') | |
| // .attr('id', id) | |
| // .attr('patternUnits', 'userSpaceOnUse') | |
| // .attr('width', dashArray ? dashArray * 2 : 1) | |
| // .attr('height', 24) | |
| // .append('g') | |
| // .append('line') | |
| // .attr('x1', 0) | |
| // .attr('y1', 0) | |
| // .attr('x2', 10) | |
| // .attr('y2', 0) | |
| // .attr('stroke', fill) | |
| // .attr('fill-opacity', fillOpacity) | |
| // .attr('stroke-width', strokeWidth) | |
| // .attr('stroke-dasharray', dashArray) | |
| // .attr('shape-rendering', 'geometricPrecision') | |
| } | |
| createRectPattern( | |
| svg, 'resolved-pattern', SHIFT_INTERVAL_RESOLVED_COLOR, LOW_URGENCY_FILL_OPACITY, 0) | |
| createRectPattern( | |
| svg, 'acked-pattern', SHIFT_INTERVAL_ACKNOWLEDGED_COLOR, LOW_URGENCY_FILL_OPACITY) | |
| createRectPattern( | |
| svg, 'acked-pattern-vertical', SHIFT_INTERVAL_ACKNOWLEDGED_COLOR, LOW_URGENCY_FILL_OPACITY) | |
| createRectPattern( | |
| svg, 'triggered-pattern', SHIFT_INTERVAL_TRIGGERED_COLOR, LOW_URGENCY_FILL_OPACITY) | |
| createCirclePattern( | |
| svg, 'triggered-pattern-circle', SHIFT_INTERVAL_TRIGGERED_COLOR, LOW_URGENCY_FILL_OPACITY) | |
| createRectPattern( | |
| svg, 'im-triggered-pattern', SHIFT_INTERVAL_INCIDENT_MANAGER_TRIGGERED, 1, -45) | |
| createRectPattern( | |
| svg, 'task-triggered-pattern', SHIFT_INTERVAL_TASK_TRIGGERED, 1, -45) | |
| createRectPattern2( | |
| svg, 'task-triggered-pattern-2', SHIFT_INTERVAL_TASK_TRIGGERED, 1, -45) | |
| // SECOND | |
| createRectPattern( | |
| svg, 'resolved-pattern-high', SHIFT_INTERVAL_RESOLVED_COLOR, 1) | |
| createRectPattern( | |
| svg, 'acked-pattern-high', SHIFT_INTERVAL_ACKNOWLEDGED_COLOR, 1) | |
| createRectPattern( | |
| svg, 'acked-pattern-vertical-high', SHIFT_INTERVAL_ACKNOWLEDGED_COLOR, 1) | |
| createRectPattern( | |
| svg, 'triggered-pattern-high', SHIFT_INTERVAL_TRIGGERED_COLOR, 1) | |
| createCirclePattern( | |
| svg, 'triggered-pattern-circle-high', SHIFT_INTERVAL_TRIGGERED_COLOR, 1) | |
| createRectPattern( | |
| svg, 'im-triggered-pattern-high', SHIFT_INTERVAL_INCIDENT_MANAGER_TRIGGERED, 1, -45) | |
| createRectPattern( | |
| svg, 'task-triggered-pattern-high', SHIFT_INTERVAL_TASK_TRIGGERED, 1, -45) | |
| createPathPattern( | |
| svg, 'task-resolved-pattern', SHIFT_INTERVAL_TASK_TRIGGERED, 3, 6, 0) | |
| createPathPattern( | |
| svg, 'task-acked-pattern', SHIFT_INTERVAL_TASK_TRIGGERED, 3, 7, 3) | |
| createPathPattern( | |
| svg, 'task-triggered-pattern-3', SHIFT_INTERVAL_TASK_TRIGGERED, 3, 6, 6) | |
| function addElement(order, fill, text) { | |
| svg.append("text") | |
| .attr('x', WIDTH + 20) | |
| .attr('y', order * 40 + 30) | |
| .text(text) | |
| svg.append("rect") | |
| .attr('x', 10) | |
| .attr('y', order * 40 + 10) | |
| .attr('width', WIDTH) | |
| .attr('height', 30) | |
| .attr('fill', fill) | |
| } | |
| addElement(0, 'url(#resolved-pattern)', 'Shift interval resolved (low urgency)') | |
| addElement(1, 'url(#acked-pattern)', 'Shift interval acknowledged (low urgency)') | |
| addElement(2, 'url(#triggered-pattern)', 'Shift interval triggered (low urgency)') | |
| addElement(3, SHIFT_INTERVAL_RESOLVED_COLOR, 'Shift interval triggered (high urgency)') | |
| addElement(4, SHIFT_INTERVAL_TRIGGERED_COLOR, 'Shift interval triggered (high urgency)') | |
| addElement(5, SHIFT_INTERVAL_ACKNOWLEDGED_COLOR, 'Shift interval triggered (high urgency)') | |
| addElement(6, SHIFT_INTERVAL_TASK_RESOLVED_COLOR, 'Task resolved') | |
| addElement(7, SHIFT_INTERVAL_TASK_ACKNOWLEDGED_COLOR, 'Task acknowledged') | |
| addElement(8, 'url(#task-triggered-pattern)', 'Task triggered') | |
| addElement(9, SHIFT_INTERVAL_INCIDENT_MANAGER_RESOLVED_COLOR, 'Incident manager alert resolved') | |
| addElement(10, 'url(#im-triggered-pattern)', 'Incident manager alert triggered') | |
| addElement(11, '#fff', '') | |
| addElement(12, 'url(#resolved-pattern)', 'Shift interval resolved (low urgency)') | |
| addElement(13, 'url(#acked-pattern-vertical)', 'Shift interval acknowledged (low urgency)') | |
| addElement(14, 'url(#triggered-pattern-circle)', 'Shift interval triggered (low urgency)') | |
| addElement(15, SHIFT_INTERVAL_RESOLVED_COLOR, 'Shift interval triggered (high urgency)') | |
| addElement(16, 'url(#acked-pattern-vertical-high)', 'Shift interval triggered (high urgency)') | |
| addElement(17, 'url(#triggered-pattern-circle-high)', 'Shift interval triggered (high urgency)') | |
| addElement(18, 'url(#task-resolved-pattern)', 'Task resolved') | |
| addElement(19, 'url(#task-acked-pattern)', 'Task acknowledged') | |
| addElement(20, 'url(#task-triggered-pattern-3)', 'Task triggered') | |
| addElement(21, SHIFT_INTERVAL_INCIDENT_MANAGER_TRIGGERED, 'Incident manager alert resolved') | |
| addElement(22, 'url(#im-triggered-pattern-high)', 'Incident manager alert triggered') | |
| </script> | |
| </body> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment