@mozaic-ds/chart 0.1.0-beta.29 → 0.1.0-beta.30

package/src/services/PatternFunctions.ts

@@ -1,25 +1,32 @@
 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);
+  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
-          : dataSetIndex) % 6;
-    }
+  function getPatternIndexWithShift(
+    dataSetIndex: number,
+    patternShifting?: number
+  ) {
+    return (
+      (patternShifting ? dataSetIndex + patternShifting : dataSetIndex) % 6
+    );
+  }
 
   return {
-      getPatternCanvas,
-      getPatternIndexWithShift
+    getPatternCanvas,
+    getPatternIndexWithShift
   };
-}
+}

package/src/services/RadarChartFunctions.ts

@@ -74,17 +74,17 @@ const buildColorArray = (props: any): string[] => {
 export function splitLabelIfTooLong(axisLabel: string, buildValue: string) {
   const radarLimitLabelLength = 7;
   if (
-      axisLabel.length > radarLimitLabelLength &&
-      axisLabel.includes(' ', radarLimitLabelLength)
+    axisLabel.length > radarLimitLabelLength &&
+    axisLabel.includes(' ', radarLimitLabelLength)
   ) {
     const indexOfFirstSpaceAfterLimit: number = axisLabel.indexOf(
-        ' ',
-        radarLimitLabelLength
+      ' ',
+      radarLimitLabelLength
     );
     return [
       axisLabel.substring(0, indexOfFirstSpaceAfterLimit),
       axisLabel.substring(indexOfFirstSpaceAfterLimit),
-      buildValue,
+      buildValue
     ];
   }
   return [axisLabel, buildValue];

package/src/services/patterns/ChartDesign.ts

@@ -5,29 +5,40 @@ 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, color: string, disableAccessibility: boolean) => CanvasPattern)[];
+export default function () {
+  const patternsStandardList = [
+    PatternSquares,
+    PatternDiagonals,
+    PatternZigzag,
+    PatternVerticalLines,
+    PatternDashedDiagonals,
+    PatternCircles
+  ] as ((
+    hover: boolean,
+    color: string,
+    disableAccessibility: boolean
+  ) => CanvasPattern)[];
 
-    const colourSets: [string[], string[], string[], string[], string[], string[], string[]] = [
-      ['#393879', '#006974', '#405D68', '#005C91', '#8C3500', '#8C0003'],
-      ['#A274FF', '#143666', '#00A3B2', '#8C1551', '#F255A3', '#095359'],
-      ['#00A3B2', '#143666', '#3D993D', '#8C1551', '#E56D17', '#4C3380'],
-      ['#8C1551', '#E56D17', '#4C3380', '#4588E5', '#095359', '#F255A3'],
-      ['#4588E5', '#4C3380', '#E56D17', '#143666', '#D94141', '#8C1551'],
-      ['#143666', '#F255A3', '#095359', '#4588E5', '#8C1551', '#E56D17'],
-      ['#A274FF', '#B0BBC0', '#B0BBC0', '#B0BBC0', '#B0BBC0', '#B0BBC0']
-    ];
-   
-    return {
-      patternsStandardList,
-      colourSets
-    };
+  const colourSets: [
+    string[],
+    string[],
+    string[],
+    string[],
+    string[],
+    string[],
+    string[]
+  ] = [
+    ['#393879', '#006974', '#405D68', '#005C91', '#8C3500', '#8C0003'],
+    ['#A274FF', '#143666', '#00A3B2', '#8C1551', '#F255A3', '#095359'],
+    ['#00A3B2', '#143666', '#3D993D', '#8C1551', '#E56D17', '#4C3380'],
+    ['#8C1551', '#E56D17', '#4C3380', '#4588E5', '#095359', '#F255A3'],
+    ['#4588E5', '#4C3380', '#E56D17', '#143666', '#D94141', '#8C1551'],
+    ['#143666', '#F255A3', '#095359', '#4588E5', '#8C1551', '#E56D17'],
+    ['#A274FF', '#B0BBC0', '#B0BBC0', '#B0BBC0', '#B0BBC0', '#B0BBC0']
+  ];
 
-}
+  return {
+    patternsStandardList,
+    colourSets
+  };
+}

package/src/services/patterns/patternCircles.ts

@@ -1,95 +1,122 @@
-export default function PatternCircles(hover: boolean, color: string = '#095359', disableAccessibility: boolean = false): CanvasPattern {
+export default function PatternCircles(
+  hover: boolean,
+  color: string = '#095359',
+  disableAccessibility: boolean = false
+): CanvasPattern {
   const canvasPattern: HTMLCanvasElement = document.createElement('canvas');
   const ctx: CanvasRenderingContext2D | null = canvasPattern.getContext('2d');
 
   if (!ctx) {
-    return new CanvasPattern;
+    return new CanvasPattern();
   }
-  
+
   const patternSize = 50;
   const lineWidthPattern = 0.04 * patternSize;
-  
+
   canvasPattern.width = patternSize;
   canvasPattern.height = patternSize;
-  
+
   if (disableAccessibility === true) {
     ctx.beginPath();
     ctx.fillStyle = color;
-    ctx.rect(0.000000, 0.000000, patternSize, patternSize);
+    ctx.rect(0.0, 0.0, patternSize, patternSize);
     ctx.fill();
   } else {
     // Background
     ctx.beginPath();
     ctx.fillStyle = '#FFFFFF';
     ctx.lineWidth = 0.1005 * patternSize;
-    ctx.rect(0.000000, 0.000000, patternSize, patternSize);
+    ctx.rect(0.0, 0.0, patternSize, patternSize);
     ctx.fill();
     ctx.beginPath();
     ctx.globalAlpha = 0.1;
     ctx.fillStyle = color;
     ctx.lineWidth = 0.1005 * patternSize;
-    ctx.rect(0.000000, 0.000000, patternSize, patternSize);
+    ctx.rect(0.0, 0.0, patternSize, patternSize);
     ctx.fill();
-    
+
     // #circle4
     ctx.beginPath();
     ctx.globalAlpha = 0.3;
     ctx.strokeStyle = color;
     ctx.lineWidth = lineWidthPattern;
-    ctx.arc(lineWidthPattern + 0.06 * patternSize,
-      lineWidthPattern + 0.06 * patternSize, 0.06 * patternSize, 0, 2 * Math.PI);
+    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 = color;
     ctx.lineWidth = lineWidthPattern;
-    ctx.arc(lineWidthPattern + 0.56 * patternSize,
-      lineWidthPattern + 0.06 * patternSize, 0.06 * patternSize, 0, 2 * Math.PI);
+    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 = color;
     ctx.lineWidth = 0.04 * patternSize;
-    ctx.arc(-lineWidthPattern + 0.44 * patternSize,
-      lineWidthPattern + 0.56 * patternSize, 0.06 * patternSize, 0, 2 * Math.PI);
+    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 = color;
     ctx.lineWidth = 0.04 * patternSize;
-    ctx.arc(-lineWidthPattern + 0.94 * patternSize,
-      lineWidthPattern + 0.56 * patternSize, 0.06 * patternSize, 0, 2 * Math.PI);
+    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();
-      ctx.globalAlpha = 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');
+  // Hover Style
+  if (hover) {
+    ctx.beginPath();
+    ctx.globalAlpha = 0.5;
+    ctx.fillStyle = '#FFFFFF';
+    ctx.lineWidth = 0.006 * patternSize;
+    ctx.rect(0.0, 0.0, patternSize, patternSize);
+    ctx.fill();
+  }
+
+  const canvas: HTMLCanvasElement = document.createElement('canvas');
   const context: CanvasRenderingContext2D | null = canvas.getContext('2d');
   if (!context) {
-    return new CanvasPattern;
+    return new CanvasPattern();
   }
-  const pattern: CanvasPattern | null = context.createPattern(canvasPattern, 'repeat');
+  const pattern: CanvasPattern | null = context.createPattern(
+    canvasPattern,
+    'repeat'
+  );
   if (!pattern) {
-    return new CanvasPattern;
+    return new CanvasPattern();
   }
-    
+
   context.fillStyle = pattern;
   context.fillRect(0, 0, canvas.width, canvas.height);
 
   return pattern;
-}
+}

package/src/services/patterns/patternDashedDiagonals.ts

@@ -1,39 +1,43 @@
-export default function PatternDashedDiagonals(hover: boolean, color: string = '#F255A3', disableAccessibility: boolean = false): CanvasPattern {
-    const canvasPattern: HTMLCanvasElement = document.createElement('canvas');
-    const ctx: CanvasRenderingContext2D | null = canvasPattern.getContext('2d');
+export default function PatternDashedDiagonals(
+  hover: boolean,
+  color: string = '#F255A3',
+  disableAccessibility: boolean = false
+): CanvasPattern {
+  const canvasPattern: HTMLCanvasElement = document.createElement('canvas');
+  const ctx: CanvasRenderingContext2D | null = canvasPattern.getContext('2d');
 
-    if (!ctx) {
-      return new CanvasPattern;
-    }
+  if (!ctx) {
+    return new CanvasPattern();
+  }
 
-    const matrix = new DOMMatrix();
+  const matrix = new DOMMatrix();
 
-    const patternSize = 21;
-    const lineWidth = 0.1 * patternSize;
+  const patternSize = 21;
+  const lineWidth = 0.1 * patternSize;
 
-    canvasPattern.width = patternSize;
-    canvasPattern.height = patternSize;
+  canvasPattern.width = patternSize;
+  canvasPattern.height = patternSize;
 
-    if (disableAccessibility === true) {
-      ctx.beginPath();
-      ctx.fillStyle = color;
-      ctx.rect(0.000000, 0.000000, patternSize, patternSize);
-      ctx.fill();
-    } else {
-      // Background
-      ctx.beginPath();
-      ctx.fillStyle = '#FFFFFF';
-      ctx.lineWidth = 0.005 * patternSize;
-      ctx.rect(0.000000, 0.000000, patternSize, patternSize);
-      ctx.fill();
-      ctx.beginPath();
-      ctx.globalAlpha = 0.1;
-      ctx.fillStyle = color;
-      ctx.lineWidth = 0.005 * patternSize;
-      ctx.rect(0.000000, 0.000000, patternSize, patternSize);
-      ctx.fill();
+  if (disableAccessibility === true) {
+    ctx.beginPath();
+    ctx.fillStyle = color;
+    ctx.rect(0.0, 0.0, patternSize, patternSize);
+    ctx.fill();
+  } else {
+    // Background
+    ctx.beginPath();
+    ctx.fillStyle = '#FFFFFF';
+    ctx.lineWidth = 0.005 * patternSize;
+    ctx.rect(0.0, 0.0, patternSize, patternSize);
+    ctx.fill();
+    ctx.beginPath();
+    ctx.globalAlpha = 0.1;
+    ctx.fillStyle = color;
+    ctx.lineWidth = 0.005 * patternSize;
+    ctx.rect(0.0, 0.0, patternSize, patternSize);
+    ctx.fill();
 
-      // #path991
+    // #path991
     ctx.beginPath();
     ctx.globalAlpha = 0.3;
     ctx.strokeStyle = color;
@@ -42,7 +46,7 @@ export default function PatternDashedDiagonals(hover: boolean, color: string = '
     ctx.lineTo(lineWidth, 0.5 * patternSize);
     ctx.stroke();
 
-      // #path991
+    // #path991
     ctx.beginPath();
     ctx.globalAlpha = 0.7;
     ctx.strokeStyle = color;
@@ -52,29 +56,32 @@ export default function PatternDashedDiagonals(hover: boolean, color: string = '
     ctx.stroke();
   }
 
-      // Hover Style
-      if (hover) {
-          ctx.beginPath();
-          ctx.fillStyle = '#FFFFFF';
-          ctx.globalAlpha = 0.5;
-          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;
-  }
+  // Hover Style
+  if (hover) {
+    ctx.beginPath();
+    ctx.fillStyle = '#FFFFFF';
+    ctx.globalAlpha = 0.5;
+    ctx.lineWidth = 0.006 * patternSize;
+    ctx.rect(0.0, 0.0, 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;
+}