@mozaic-ds/chart 0.1.0-beta.0

package/src/services/patterns/patternSquares.ts

@@ -0,0 +1,76 @@
+export default function PatternSquares(hover: boolean): CanvasPattern {
+
+    const patternCanvas: HTMLCanvasElement = document.createElement('canvas');
+    const ctx: CanvasRenderingContext2D | null = patternCanvas.getContext('2d');
+    if (!ctx) {
+      return new CanvasPattern;
+    }
+
+    const patternSize = 50;
+    const squareSize = patternSize * 0.15;
+
+    patternCanvas.width = patternSize;
+    patternCanvas.height = patternSize;
+    
+      // #rect1258
+    ctx.beginPath();
+    ctx.fillStyle = 'rgb(231, 231, 240)';
+    ctx.lineWidth = 0.005 * patternSize;
+    ctx.rect(0.000000, 0.000000, patternSize, patternSize);
+    ctx.fill();
+    
+  // #rect4
+    ctx.beginPath();
+    ctx.globalAlpha = 0.7;
+    ctx.fillStyle = 'rgb(57, 56, 121)';
+    ctx.lineWidth = 0.006 * patternSize;
+    ctx.rect(0.5 * patternSize, 0.000000, squareSize, squareSize);
+    ctx.fill();
+    
+  // #rect54
+    ctx.beginPath();
+    ctx.globalAlpha = 0.7;
+    ctx.fillStyle = 'rgb(57, 56, 121)';
+    ctx.lineWidth = 0.006 * patternSize;
+    ctx.rect(0.75 * patternSize, patternSize / 2, squareSize, squareSize);
+    ctx.fill();
+    
+  // #rect104
+    ctx.beginPath();
+    ctx.globalAlpha = 0.3;
+    ctx.fillStyle = 'rgb(57, 56, 121)';
+    ctx.lineWidth = 0.006 * patternSize;
+    ctx.rect(0.000000, 0.000000, squareSize, squareSize);
+    ctx.fill();
+    
+  // #rect154
+    ctx.beginPath();
+    ctx.globalAlpha = 0.3;
+    ctx.fillStyle = 'rgb(57, 56, 121)';
+    ctx.lineWidth = 0.006 * patternSize;
+    ctx.rect(0.25 * patternSize, patternSize / 2, squareSize, squareSize);
+    ctx.fill();
+
+    // 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;
+  }

package/src/services/patterns/patternVerticalLines.ts

@@ -0,0 +1,61 @@
+export default function PatternVerticalLines(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 lineSize = patternSize * 0.15;
+
+    canvasPattern.width = patternSize;
+    canvasPattern.height = patternSize;
+
+   // #rect1258
+    ctx.beginPath();
+    ctx.fillStyle = 'rgb(218, 239, 247)';
+    ctx.lineWidth = 0.005 * patternSize;
+    ctx.rect(0.000000, 0.000000, patternSize, patternSize);
+    ctx.fill();
+    
+  // #rect4
+    ctx.beginPath();
+    ctx.globalAlpha = 0.3;
+    ctx.fillStyle = 'rgb(0, 92, 145)';
+    ctx.lineWidth = 0.005 * patternSize;
+    ctx.rect(0.000000, 0.000000, lineSize, patternSize);
+    ctx.fill();
+    
+  // #rect6
+    ctx.beginPath();
+    ctx.globalAlpha = 0.7;
+    ctx.fillStyle = 'rgb(0, 92, 145)';
+    ctx.lineWidth = 0.005 * patternSize;
+    ctx.rect(patternSize / 2, 0.000000, lineSize, patternSize);
+    ctx.fill();
+
+    // 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');
+    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, patternSize, patternSize);
+  
+    return pattern;
+  }

package/src/services/patterns/patternZigzag.ts

@@ -0,0 +1,88 @@
+export default function PatternZigzag(hover: boolean): CanvasPattern {
+  const canvasPattern: HTMLCanvasElement = document.createElement('canvas');
+  const ctx: CanvasRenderingContext2D | null = canvasPattern.getContext('2d');
+  if (!ctx) {
+    return new CanvasPattern;
+  }
+  
+  const patternSize = 50;
+  
+  canvasPattern.width = patternSize;
+  canvasPattern.height = patternSize;
+
+  // #rect1258
+	ctx.beginPath();
+	ctx.fillStyle = 'rgb(234, 237, 239)';
+	ctx.lineWidth = 0.005 * patternSize;
+	ctx.rect(0.000000, 0.000000, patternSize, patternSize);
+	ctx.fill();
+	
+// #path4
+	ctx.beginPath();
+	ctx.globalAlpha = 0.7;
+	ctx.strokeStyle = 'rgb(64, 93, 104)';
+	ctx.lineWidth = 0.08 * patternSize;
+	ctx.moveTo(- patternSize / 2, patternSize / 2);
+	ctx.lineTo(0.000000, 0.000000);
+	ctx.lineTo(patternSize / 2, patternSize / 2);
+	ctx.lineTo(patternSize, 0.000000);
+	ctx.stroke();
+	
+// #path6
+	ctx.beginPath();
+	ctx.globalAlpha = 0.3;
+	ctx.strokeStyle = 'rgb(64, 93, 104)';
+	ctx.lineWidth = 0.08 * patternSize;
+	ctx.moveTo(- patternSize / 2, patternSize);
+	ctx.lineTo(0.000000, patternSize / 2);
+	ctx.lineTo(patternSize / 2, patternSize);
+	ctx.lineTo(patternSize, patternSize / 2);
+	ctx.lineTo(patternSize + (patternSize / 2), patternSize);
+	ctx.stroke();
+	
+// #path6-6
+	ctx.beginPath();
+	ctx.globalAlpha = 0.3;
+	ctx.strokeStyle = 'rgb(64, 93, 104)';
+	ctx.lineWidth = 0.08 * patternSize;
+	ctx.moveTo(- patternSize / 2, 0.000111);
+	ctx.lineTo(0.000004 * patternSize, - patternSize / 2);
+	ctx.lineTo(patternSize / 2, 0.000111);
+	ctx.lineTo(patternSize, - patternSize / 2);
+	ctx.lineTo(patternSize + (patternSize / 2), 0.000111);
+	ctx.stroke();
+	
+// #path6-5
+	ctx.beginPath();
+	ctx.globalAlpha = 0.7;
+	ctx.strokeStyle = 'rgb(64, 93, 104)';
+	ctx.lineWidth = 0.08 * patternSize;
+	ctx.moveTo(- patternSize / 2, patternSize + (patternSize / 2));
+	ctx.lineTo(0.000000, patternSize);
+	ctx.lineTo(patternSize / 2, patternSize + (patternSize / 2));
+	ctx.lineTo(patternSize, patternSize);
+	ctx.lineTo(patternSize + (patternSize / 2), patternSize + (patternSize / 2));
+	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');
+    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;
+		}
+
+    return pattern;
+}

package/src/types/BarData.ts

@@ -0,0 +1,11 @@
+export interface DataBarData {
+  amount: number;
+  amountUnit: string;
+  rate: number;
+}
+
+export interface BarData {
+  label: string;
+  backgroundColor?: string;
+  data: DataBarData[];
+}

package/src/types/ButtonName.ts

@@ -0,0 +1,7 @@
+export enum ButtonName {
+  SALES = 'sales',
+  PURCHASES = 'purchases',
+  PROFITABILITY = 'profitability',
+  COMPETITORS = 'vsConcurrency',
+  PREVIOUS_YEAR = 'vsN-1'
+}

package/src/types/Chart.ts

@@ -0,0 +1,10 @@
+export interface ChartData {
+    data: any;
+    loading: boolean;
+    error: boolean;
+}
+
+export interface HTMLLegendPlugin {
+    id: string;
+    afterUpdate: (chart: any) => void;
+}

package/src/types/DoughnutData.ts

@@ -0,0 +1,6 @@
+export interface DoughnutData {
+  tooltipLabel?: number;
+  value: number;
+  unit: string;
+  rate: number;
+}

package/src/types/GenericData.ts

@@ -0,0 +1,11 @@
+export interface GenericData {
+    value: number;
+    position?: number;
+    unit?: string;
+    label?: string;
+    rate?: number;
+    color?: string;
+    trendValue?: number
+    trendMetricUnit?: string,
+    tooltips?: [],
+  }

package/src/types/LineChart.ts

@@ -0,0 +1,5 @@
+export interface LineData {
+    label: string;
+    data: number[];
+    unit?: string;   
+}

package/src/types/RadarData.ts

@@ -0,0 +1,36 @@
+export interface AreaData {
+    value: number;
+    position: number;
+    unit: string;
+    label: string | null;
+    rate: number | null;
+    color: string | null;
+    trendValue: number | null;
+    trendUnit: string | null;
+    tooltips: string | null;
+}
+
+export interface Area {
+    label: string;
+    areaData: AreaData[];
+}
+
+export interface RadarPropsData {
+    radarData: {
+      labels: string[],
+      areas: [{
+        label: string,
+        areaData: [{
+          value: number,
+          position: number,
+          unit: string,
+          label?: string,
+          rate?: null,
+          color: string,
+          trendValue?: number,
+          trendUnit?: string,
+          tooltips?: string[]
+        }],
+      }]
+    }
+  }

package/src/types/TooltipChartType.ts

@@ -0,0 +1,7 @@
+export enum TooltipChartType {
+    RADAR = 'RADAR',
+    BAR_CHART = 'BAR_CHART',
+    DETAILS_BAR_CHART = 'DETAILS_BAR_CHART',
+    LINE_CHART = 'LINE_CHART',
+    DOUGHNUT = 'DOUGHNUT'
+  }

package/src/vite-env.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="vite/client" />
+
+declare module '*.vue' {
+  import type { DefineComponent } from 'vue'
+  const component: DefineComponent<{}, {}, any>
+  export default component
+}