@mozaic-ds/chart 0.1.0-beta.0

package/src/services/GenericTooltipService.ts

@@ -0,0 +1,305 @@
+import type { TooltipChartType } from '../types/TooltipChartType';
+import { getPatternIndexWithShift } from './FormatUtilities';
+import PatternsFunctions from '../services/PatternFunctions';
+import ChartDesign from './patterns/ChartDesign';
+
+const { getPatternCanvas } = PatternsFunctions();
+const {
+  patternsStandardList
+} = ChartDesign();
+
+type BodyItem = {
+  after: string[];
+  before: string[];
+  lines: string[];
+};
+
+export type TooltipElements = {
+  chartType: TooltipChartType,
+  firstLineLabel?: string,
+  secondLineLabel?: string,
+  patternShifting?: number
+}
+
+type LabelColors = {
+  backgroundColor: unknown;
+  borderColor: unknown;
+}
+
+type PointStyle = {
+  pointStyle: unknown;
+  rotation: number;
+}
+
+// ../..ts-ignore
+export type Context = {
+  chart: {
+    canvas: HTMLElement;
+    tooltip?:{
+      x: number,
+      y: number
+    }
+  };
+  replay?: unknown;
+  tooltip: {
+    dataPoints: {
+      dataIndex?: number,
+      datasetIndex?: number
+    }[];
+    opacity : number;
+    body: {
+      after: string[];
+      before: string[];
+      lines: string[];
+    }[];
+    title: string[];
+    labelColors: Array<LabelColors>;
+    labelPointStyles: Array<PointStyle>;
+    caretX: number;
+    caretY: number;
+  };
+}
+
+export class GenericTooltipService {
+
+  chartType = '';
+  datasetIndex = 0;
+  dataIndex = 0;
+  titleLines = [''];
+  dataToDisplay = '';
+  xValue = '';
+  yValue = '';
+  patternShifting = 0;
+
+  createTooltip (
+    context: Context,
+    retrieveData : (context: Context) => string,
+    tooltipInputElements: TooltipElements) {
+    if (!context.tooltip.dataPoints) {
+      return;
+    }
+    this.datasetIndex = context.tooltip?.dataPoints[0].datasetIndex || 0;
+    this.dataIndex = context.tooltip.dataPoints[0].dataIndex || 0;
+    this.xValue = tooltipInputElements.firstLineLabel || '';
+    this.yValue = tooltipInputElements.secondLineLabel || '';
+    this.chartType = tooltipInputElements.chartType;
+    this.dataToDisplay = retrieveData(context);
+    this.patternShifting = tooltipInputElements.patternShifting || 0;
+    let tooltipEl = document.querySelector('#chartjs-tooltip') as HTMLElement | null;
+
+    if (!tooltipEl) {
+      tooltipEl = this.createNewTooltipElement();
+    }
+
+    const tooltipModel = context.tooltip;
+
+    if (tooltipModel.opacity === 0) {
+      tooltipEl.style.opacity = '0';
+      return;
+    }
+
+    if (tooltipModel.body) {
+      this.titleLines = tooltipModel.title || [];
+      const bodyLines = tooltipModel.body.map(this.getBody);
+      let style = 'background: white;';
+      style += 'border-bottom: 1px solid #CCCCCC;';
+      style += 'border-radius: 5px;';
+      style += 'padding: 10px 20px';
+
+      const innerHtml = `<div style="${style}" class="tooltipTitle">`;
+      const body = this.chartType === 'DOUGHNUT' ? [tooltipModel.title[0].split('(')[0].trim()]: bodyLines[0];
+      let legendIconStyle = '';
+      let legendInnerStyle = '';
+
+      if (this.chartType === 'RADAR' || this.chartType === 'LINE_CHART') {
+        legendIconStyle = this.createLegendStyle(context);
+        legendInnerStyle = this.createLegendInnerStyle(context);
+      } else if (this.chartType === 'BAR_CHART' ||
+                 this.chartType === 'DETAILS_BAR_CHART' ||
+                 this.chartType === 'DOUGHNUT') {
+        legendIconStyle = this.createPatternLegendStyle(context);
+      }
+
+      this.addLegendToDom(
+        innerHtml,
+        legendIconStyle,
+        legendInnerStyle,
+        body,
+        style,
+        tooltipEl
+      );
+    }
+
+    this.handleTooltipPosition(context, tooltipModel, tooltipEl);
+  }
+
+  private handleTooltipPosition 
+  (context: Context, tooltipModel: { caretX: number, caretY: number }, tooltipEl: HTMLElement) {
+    const position = context.chart.canvas.getBoundingClientRect();
+    const screenWidth = window.innerWidth;
+    const left = position.left + window.pageXOffset + tooltipModel.caretX;
+    const top = position.top + window.pageYOffset + tooltipModel.caretY;
+
+    tooltipEl.style.left = left + 'px';
+    tooltipEl.style.top = top + 'px';
+    tooltipEl.style.height = 'auto';
+    tooltipEl.style.minWidth = '17rem';
+    tooltipEl.style.opacity = '1';
+    tooltipEl.style.position = 'absolute';
+    tooltipEl.style.zIndex = '99';
+    tooltipEl.style.backgroundColor = 'white';
+    tooltipEl.style.pointerEvents = 'none';
+
+    if (tooltipEl.getBoundingClientRect().width + left > screenWidth) {
+      tooltipEl.style.left = left - tooltipEl.getBoundingClientRect().width + 'px';
+    }
+  }
+
+  private createNewTooltipElement () {
+    const tooltipEl = document.createElement('div');
+    tooltipEl.id = 'chartjs-tooltip';
+    tooltipEl.style.backgroundColor = 'white';
+    tooltipEl.style.borderRadius = '5px';
+    tooltipEl.style.transition = 'opacity .5s';
+    tooltipEl.style.boxShadow = '0px 1px 5px rgba(0, 0, 0, 0.2)';
+    tooltipEl.innerHTML = '<div class="tooltipCtn"></div>';
+    document.body.appendChild(tooltipEl);
+    return tooltipEl;
+  }
+
+  createPatternLegendStyle (context: Context) {
+    return this.createCommonLegendSquareStyle(context);
+  }
+
+  createLegendStyle (context: Context) {
+    let legendIconStyle = `background-color:${context.tooltip.labelColors[0].backgroundColor}`;
+    legendIconStyle += this.createCommonLegendSquareStyle(context);
+    return legendIconStyle;
+  }
+
+  private createCommonLegendSquareStyle (context: Context) {
+    let style = `;border: 2px solid ${context.tooltip.labelColors[0].borderColor}`;
+    style += ';min-height: 20px';
+    style += ';min-width: 20px';
+    style += ';border-radius: 5px';
+    style += ';margin-right: 10px';
+    style += ';display: flex';
+    style += ';align-items: center';
+    style += ';justify-content: center;';
+    return style;
+  }
+
+  createLegendInnerStyle (context: Context) {
+    let legendIconInnerStyle = 'height: 12px';
+    legendIconInnerStyle += ';width: 12px';
+    legendIconInnerStyle += ';background-color: #FFF';
+    legendIconInnerStyle += `;border: 2px solid ${context.tooltip.labelColors[0].borderColor};`;
+
+    if (context.tooltip.labelPointStyles[0].pointStyle === 'circle') {
+      legendIconInnerStyle += 'border-radius: 25px;';
+    } else if (context.tooltip.labelPointStyles[0].pointStyle === 'rectRot') {
+      legendIconInnerStyle += 'transform: rotate(45deg);';
+    }
+    return legendIconInnerStyle;
+  }
+
+  addLegendToDom
+  (innerHTMLtext: string,
+    legendIconStyle: string,
+    legendIconInnerStyle: string,
+    body: Array<string>,
+    style: string,
+    tooltipEl: HTMLElement) {
+    let innerHtml = innerHTMLtext;
+    let legendImage = `<div class="legendIcon" style="${legendIconStyle}">`;
+    const legendSubImage = `<div style="${legendIconInnerStyle}"></div>`;
+    legendImage += `${legendSubImage}</div>`;
+
+    const innerHtmlToAdd = this.setInnerHtmlToAdd(body, style, legendImage);
+    innerHtml += innerHtmlToAdd;
+    const tableRoot = tooltipEl?.querySelector('.tooltipCtn') as HTMLElement | null;
+
+    if (tableRoot?.innerHTML != null) {
+      this.setInnerHtmlAndPattern(tableRoot, innerHtml);
+    }
+  }
+
+  setInnerHtmlToAdd (body: Array<string>, style: string, legendImage: string) {
+    const legendText = body[0].split(':')[0];
+    const fontProperties = 'font-family: Arial; font-size: 16px';
+    const spanText = `<span style="${fontProperties}">${legendText}</span>`;
+    if (this.chartType === 'RADAR') {
+      return this.returnRadarHtml(style, legendImage, spanText);
+    } else if (this.chartType === 'DOUGHNUT') {
+      return this.returnDoughnutHtml(legendImage, spanText);
+    } else {
+      return this.returnDetailsBarchartHtml(style, legendImage, spanText);
+    }
+  }
+
+  returnDoughnutHtml (legendImage: string, spanText: string) {
+    const fontProperties = 'font-family: Arial; font-size: 16px';
+    const legendText = `<span style="${fontProperties}">${spanText.split('(')[0]}</span>`;
+    let doughnutHtml = `<div style="${fontProperties}; display: flex; align-items: center; justify-content: space-between">`;
+    doughnutHtml += `<div style="display:flex; align-items: center;" >${legendImage + legendText}</div>`;
+    doughnutHtml += `<div style="${fontProperties}; margin-left:3rem;">${this.dataToDisplay}</div>`;
+    doughnutHtml += '</div></div>';
+    return doughnutHtml;
+  }  
+
+  returnRadarHtml (style: string, legendImage: string, spanText: string) {
+    const fontProperties = 'font-family: Arial; font-size: 16px';
+    let radarHtml = `<div style="${fontProperties}; display: flex; align-items: center;">${legendImage + spanText}</div>`;
+    radarHtml += '</div>';
+    radarHtml += `<div style="${fontProperties}; ${style}; border: none; display:flex; justify-content: space-between;">`;
+    radarHtml += `<div>${this.titleLines[0]}</div>`;
+    radarHtml += `<div style="margin-left: 20px;">${this.dataToDisplay}</div>`;
+    radarHtml += '</div>';
+    radarHtml += '</div><div>';
+  
+    return radarHtml;
+  }
+  
+  returnDetailsBarchartHtml (style: string, legendImage: string, spanText: string) {
+    const fontProperties = 'font-family: Arial; font-size: 16px';
+    let barChartHtml = `<div style="${fontProperties}; display: flex; align-items: center;">${legendImage + spanText}</div>`;
+    barChartHtml += '</div>';
+    barChartHtml += `<div style="${fontProperties}; ${style}; display:flex; justify-content: space-between;">`;
+    barChartHtml += `<div>${this.xValue}</div>`;
+    barChartHtml += `<div style="margin-left: 20px;">${this.titleLines[0]}</div>`;
+    barChartHtml += '</div>';
+  
+    barChartHtml += `<div style="${fontProperties}; ${style}; border-: none; display:flex; justify-content: space-between;">`;
+    barChartHtml += `<div>${(this.yValue)}</div>`;
+    barChartHtml += `<div style="margin-left: 20px;">${this.dataToDisplay}</div>`;
+    barChartHtml += '</div>';
+  
+    return barChartHtml;
+  }
+  
+
+  setInnerHtmlAndPattern(tableRoot: HTMLElement, innerHtml: string) {
+    tableRoot.innerHTML = innerHtml;
+    const legendIconHtml = document.querySelector('.legendIcon') as HTMLElement;
+    const img: HTMLImageElement = new Image();
+  
+    let index: number;
+  
+    if (this.chartType === 'DOUGHNUT') {
+      index = this.dataIndex + 1;
+    } else {
+      index = this.datasetIndex + 1;
+    }
+    const patternIndex = getPatternIndexWithShift(index, this.patternShifting);
+    if (this.chartType !== 'LINE_CHART' && this.chartType !== 'RADAR') {
+      const pattern: CanvasPattern = patternsStandardList[patternIndex - 1](false);
+      const patternCanvas: HTMLCanvasElement = getPatternCanvas(pattern, 22, 22);
+      img.src = patternCanvas.toDataURL();
+      legendIconHtml.style.backgroundImage = `url(${img.src})`;
+    }
+  }
+
+  getBody (bodyItem :BodyItem) {
+    return bodyItem.lines;
+  }
+}

package/src/services/PatternFunctions.ts

@@ -0,0 +1,25 @@
+export default function () {
+  function getPatternCanvas(pattern: CanvasPattern, width = 50, height = 50): HTMLCanvasElement {
+      const canvas: HTMLCanvasElement = document.createElement('canvas');
+      const ctx: CanvasRenderingContext2D | null = canvas.getContext('2d');
+      if (!ctx) {
+        return canvas;
+      }
+      canvas.width = width;
+      canvas.height = height;
+      ctx.fillStyle = pattern;
+      ctx.fillRect(0, 0, width, height);
+      return canvas;
+    }
+
+  function getPatternIndexWithShift (dataSetIndex: number, patternShifting?: number) {
+      return patternShifting
+        ? (dataSetIndex + patternShifting) % 6
+        : dataSetIndex;
+    }
+
+  return {
+      getPatternCanvas,
+      getPatternIndexWithShift
+  };
+}

package/src/services/RadarChartFunctions.ts

@@ -0,0 +1,70 @@
+import type { Chart, RadialLinearScale } from 'chart.js';
+
+export function drawLabels (chart: Chart, props: any) {
+  const ctx = chart.ctx;
+  const scale = chart.scales.r as RadialLinearScale;
+  const labels = chart.data.labels as string[][];
+
+  if (!ctx || !scale || !labels) {
+    return;
+  }
+
+  ctx.save();
+  labels.forEach((label: string[], index: number) => {
+    const angle = (scale.getIndexAngle(index) - Math.PI / 2) % (2 * Math.PI);
+    const position = scale.getPointPositionForValue(index, scale.max);
+
+    ctx.textAlign = angle <= Math.PI / 2 || angle > 3 * Math.PI / 2 ? 'left' : 'right';
+    let xOffset = angle <= Math.PI / 2 || angle > 3 * Math.PI / 2 ? 15 : -15;
+
+    let yOffset;
+    //top or bottom labels
+    if ( angle < 0 || angle > Math.PI) {
+      yOffset = -15;
+    } else {
+      yOffset = 15;
+    }
+
+    //bottom labels
+    if ( angle > Math.PI / 4 && angle < 3 * Math.PI / 4) {
+      yOffset *= 3;
+    }
+
+    //top labels left and right
+    if ( angle < -Math.PI / 4 || angle > 5 * Math.PI / 4) {
+      yOffset *= 3;
+      xOffset = 0;
+    }
+
+    // full top label
+    if ( angle > 11 * Math.PI / 8 || angle < -3 * Math.PI / 8){
+      ctx.textAlign = 'center';
+    }
+    const yPos = position.y + yOffset * (label.length - 1) / 2;
+    ctx.font = '15px Arial';
+
+    label.forEach((text, i) => {
+      const color = i === label.length - 1 ? buildColorArray(props)[index] : '#000000';
+      ctx.fillStyle = color;
+
+      const x = position.x + xOffset;
+      const y = yPos + 15 * i;
+
+      ctx.fillText(text, x, y);
+    });
+  });
+  ctx.restore();
+}
+
+const buildColorArray = (props: any): string[]=> {
+  return props.areas[0].areaData.map((x: { color: string }) => {
+    switch (x.color) {
+      case 'red':
+        return '#C61112';
+      case 'green':
+        return '#46A610';
+      default:
+        return '#000000';
+    }
+  });
+};

package/src/services/patterns/ChartDesign.ts

@@ -0,0 +1,27 @@
+import PatternSquares from './patternSquares';
+import PatternDiagonals from './patternDiagonals';
+import PatternZigzag from './patternZigzag';
+import PatternVerticalLines from './patternVerticalLines';
+import PatternDashedDiagonals from './patternDashedDiagonals';
+import PatternCircles from './patternCircles';
+
+export default function() {
+    const patternsStandardList = [
+        PatternSquares,
+        PatternDiagonals,
+        PatternZigzag,
+        PatternVerticalLines,
+        PatternDashedDiagonals,
+        PatternCircles
+      ] as ((hover: boolean) => CanvasPattern)[];
+
+      const patternsColors: string[] = ['#393879b3', '#006974b3', '#405d68b3', '#005c91b3', '#8c3500b3', '#8c0003b3'];
+      const patternsColorsLowerOpacity: string[] = ['#3938794d', '#0069744d', '#405d684d', '#005c914d', '#8c35004d', '#8c00034d'];
+
+      return {
+        patternsStandardList,
+        patternsColors,
+        patternsColorsLowerOpacity,
+      };
+
+}

package/src/services/patterns/patternCircles.ts

@@ -0,0 +1,82 @@
+export default function PatternCircles(hover: boolean): CanvasPattern {
+  const canvasPattern: HTMLCanvasElement = document.createElement('canvas');
+  const ctx: CanvasRenderingContext2D | null = canvasPattern.getContext('2d');
+
+  if (!ctx) {
+    return new CanvasPattern;
+  }
+  
+  const patternSize = 50;
+  const lineWidthPattern = 0.04 * patternSize;
+
+  canvasPattern.width = patternSize;
+  canvasPattern.height = patternSize;
+
+  // #rect1258
+  ctx.beginPath();
+  ctx.fillStyle = 'rgb(253, 234, 234)';
+  ctx.lineWidth = 0.1005 * patternSize;
+  ctx.rect(0.000000, 0.000000, patternSize, patternSize);
+  ctx.fill();
+  
+  // #circle4
+  ctx.beginPath();
+  ctx.globalAlpha = 0.3;
+  ctx.strokeStyle = 'rgb(140, 0, 3)';
+  ctx.lineWidth = lineWidthPattern;
+  ctx.arc(lineWidthPattern + 0.06 * patternSize,
+    lineWidthPattern + 0.06 * patternSize, 0.06 * patternSize, 0, 2 * Math.PI);
+  ctx.stroke();
+  
+  // #circle6
+  ctx.beginPath();
+  ctx.globalAlpha = 0.7;
+  ctx.strokeStyle = 'rgb(140, 0, 3)';
+  ctx.lineWidth = lineWidthPattern;
+  ctx.arc(lineWidthPattern + 0.56 * patternSize,
+    lineWidthPattern + 0.06 * patternSize, 0.06 * patternSize, 0, 2 * Math.PI);
+  ctx.stroke();
+  
+  // #circle104
+  ctx.beginPath();
+  ctx.globalAlpha = 0.3;
+  ctx.strokeStyle = 'rgb(140, 0, 3)';
+  ctx.lineWidth = 0.04 * patternSize;
+  ctx.arc(-lineWidthPattern + 0.44 * patternSize,
+    lineWidthPattern + 0.56 * patternSize, 0.06 * patternSize, 0, 2 * Math.PI);
+  ctx.stroke();
+  
+  // #circle106
+  ctx.beginPath();
+  ctx.globalAlpha = 0.7;
+  ctx.strokeStyle = 'rgb(140, 0, 3)';
+  ctx.lineWidth = 0.04 * patternSize;
+  ctx.arc(-lineWidthPattern + 0.94 * patternSize,
+    lineWidthPattern + 0.56 * patternSize, 0.06 * patternSize, 0, 2 * Math.PI);
+  ctx.stroke();
+
+  // Hover Style
+  if (hover) {
+    ctx.beginPath();
+     0.5;
+    ctx.fillStyle = '#FFFFFF';
+    ctx.lineWidth = 0.006 * patternSize;
+    ctx.rect(0.000000, 0.000000, patternSize, patternSize);
+    ctx.fill();
+  }
+
+  const canvas: HTMLCanvasElement = document.createElement('canvas');
+  const context: CanvasRenderingContext2D | null = canvas.getContext('2d');
+  if (!context) {
+    return new CanvasPattern;
+  }
+  const pattern: CanvasPattern | null = context.createPattern(canvasPattern, 'repeat');
+  if (!pattern) {
+    return new CanvasPattern;
+  }
+    
+  context.fillStyle = pattern;
+  context.fillRect(0, 0, canvas.width, canvas.height);
+
+  return pattern;
+}

package/src/services/patterns/patternDashedDiagonals.ts

@@ -0,0 +1,66 @@
+export default function PatternDashedDiagonals(hover: boolean): CanvasPattern {
+    const canvasPattern: HTMLCanvasElement = document.createElement('canvas');
+    const ctx: CanvasRenderingContext2D | null = canvasPattern.getContext('2d');
+
+    if (!ctx) {
+      return new CanvasPattern;
+    }
+
+    const matrix = new DOMMatrix();
+
+    const patternSize = 21;
+    const lineWidth = 0.1 * patternSize;
+
+    canvasPattern.width = patternSize;
+    canvasPattern.height = patternSize;
+
+    // #rect1258
+    ctx.beginPath();
+    ctx.fillStyle = 'rgb(253, 241, 232)';
+    ctx.lineWidth = 0.005 * patternSize;
+    ctx.rect(0.000000, 0.000000, patternSize, patternSize);
+    ctx.fill();
+
+    // #path991
+	ctx.beginPath();
+	ctx.globalAlpha = 0.3;
+	ctx.strokeStyle = 'rgb(140, 53, 0)';
+	ctx.lineWidth = lineWidth;
+	ctx.moveTo(lineWidth, 0);
+  ctx.lineTo(lineWidth, 0.5 * patternSize);
+	ctx.stroke();
+
+    // #path991
+	ctx.beginPath();
+	ctx.globalAlpha = 0.7;
+	ctx.strokeStyle = 'rgb(140, 53, 0)';
+	ctx.lineWidth = lineWidth;
+	ctx.moveTo(patternSize / 2 + lineWidth, 0);
+  ctx.lineTo(patternSize / 2 + lineWidth, 0.5 * patternSize);
+	ctx.stroke();
+
+    // Hover Style
+    if (hover) {
+        ctx.beginPath();
+        ctx.fillStyle = '#FFFFFF';
+        ctx.lineWidth = 0.006 * patternSize;
+        ctx.rect(0.000000, 0.000000, patternSize, patternSize);
+        ctx.fill();
+      }
+
+    const canvas: HTMLCanvasElement = document.createElement('canvas');
+    const context: CanvasRenderingContext2D | null = canvas.getContext('2d');
+    if (!context) {
+      return new CanvasPattern;
+    }
+    const pattern: CanvasPattern | null = context.createPattern(canvasPattern, 'repeat');
+    if (!pattern) {
+      return new CanvasPattern;
+    }
+    
+    context.fillStyle = pattern;
+    context.fillRect(0, 0, canvas.width, canvas.height);
+    pattern.setTransform(matrix.rotate(45));
+  
+    return pattern;
+  }

package/src/services/patterns/patternDiagonals.ts

@@ -0,0 +1,101 @@
+export default function PatternDiagonals(hover: boolean): CanvasPattern {
+    const patternCanvas: HTMLCanvasElement = document.createElement('canvas');
+    const ctx: CanvasRenderingContext2D | null = patternCanvas.getContext('2d');
+    if (!ctx) {
+      return new CanvasPattern;
+    }
+
+    const patternSize = 50;
+
+    patternCanvas.width = patternSize;
+    patternCanvas.height = patternSize;
+
+    ctx.beginPath();
+    ctx.fillStyle = 'rgb(217, 240, 243)';
+    ctx.lineWidth = 0.005 * patternSize;
+    ctx.rect(0.000000, 0.000000, patternSize, patternSize);
+    ctx.fill();
+    
+  // #rect2744
+    ctx.save();
+    ctx.beginPath();
+    ctx.transform(0.708293, 0.705919, -0.666352, 0.745637, 0.000000, 0.000000);
+    ctx.globalAlpha = 0.7;
+    ctx.fillStyle = 'rgb(0, 105, 116)';
+    ctx.lineWidth = 0.075 * patternSize;
+    ctx.miterLimit = 4;
+    ctx.rect(- patternSize * 0.03, - 0.01 * patternSize, patternSize + patternSize / 2, 0.04 * patternSize);
+    ctx.fill();
+    ctx.restore();
+    
+  // #rect2744-5
+    ctx.save();
+    ctx.beginPath();
+    ctx.transform(0.708293, 0.705919, -0.666352, 0.745637, 0.000000, 0.000000);
+    ctx.globalAlpha = 0.3;
+    ctx.fillStyle = 'rgb(0, 105, 116)';
+    ctx.lineWidth = 0.075 * patternSize;
+    ctx.miterLimit = 4;
+    ctx.rect(0.29 * patternSize, 0.33 * patternSize, patternSize + patternSize / 2, 0.04 * patternSize);
+    ctx.fill();
+    ctx.restore();
+    
+  // #rect2744-5-3
+    ctx.save();
+    ctx.beginPath();
+    ctx.transform(0.708293, 0.705919, -0.666352, 0.745637, 0.000000, 0.000000);
+    ctx.globalAlpha = 0.7;
+    ctx.fillStyle = 'rgb(0, 105, 116)';
+    ctx.lineWidth = 0.075 * patternSize;
+    ctx.miterLimit = 4;
+    ctx.rect(0.63 * patternSize, 0.69 * patternSize, patternSize + patternSize / 2, 0.04 * patternSize);
+    ctx.fill();
+    ctx.restore();
+    
+  // #rect2744-6
+    ctx.save();
+    ctx.beginPath();
+    ctx.transform(0.708293, 0.705919, -0.666352, 0.745637, 0.000000, 0.000000);
+    ctx.globalAlpha = 0.3;
+    ctx.fillStyle = 'rgb(0, 105, 116)';
+    ctx.lineWidth = 0.075 * patternSize;
+    ctx.miterLimit = 4;
+    ctx.rect(0.33 * patternSize, -0.37 * patternSize, patternSize + patternSize / 2, 0.04 * patternSize);
+    ctx.fill();
+    ctx.restore();
+    
+  // #rect2744-6-7
+    ctx.save();
+    ctx.beginPath();
+    ctx.transform(0.708293, 0.705919, -0.666352, 0.745637, 0.000000, 0.000000);
+    ctx.globalAlpha = 0.7;
+    ctx.fillStyle = 'rgb(0, 105, 116)';
+    ctx.lineWidth = 0.075 * patternSize;
+    ctx.miterLimit = 4;
+    ctx.rect(0.71 * patternSize, - 0.72 * patternSize, patternSize + patternSize / 2, 0.04 * patternSize);
+    ctx.fill();
+    ctx.restore();
+
+    // Hover Style
+    if (hover) {
+      ctx.beginPath();
+      ctx.globalAlpha = 0.5;
+      ctx.fillStyle = '#FFFFFF';
+      ctx.lineWidth = 0.006 * patternSize;
+      ctx.rect(0.000000, 0.000000, patternSize, patternSize);
+      ctx.fill();
+    }
+
+    // Create our primary canvas and fill it with the pattern
+    const canvas: HTMLCanvasElement = document.createElement('canvas');
+    const context: CanvasRenderingContext2D | null = canvas.getContext('2d');
+    if (!context) {
+      return new CanvasPattern;
+    }
+    const pattern: CanvasPattern | null = context.createPattern(patternCanvas, 'repeat');
+    if (!pattern) {
+      return new CanvasPattern;
+    }
+  
+    return pattern;
+  }