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

package/src/services/patterns/patternZigzag.ts

@@ -1,101 +1,108 @@
-export default function PatternZigzag(hover: boolean, color: string = '#00A3B2', disableAccessibility: boolean = false): CanvasPattern {
+export default function PatternZigzag(
+  hover: boolean,
+  color: string = '#00A3B2',
+  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;
-  
+
   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.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();
-	
-// #path4
-	ctx.beginPath();
-	ctx.globalAlpha = 0.7;
-	ctx.strokeStyle = color;
-	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 = color;
-	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 = color;
-	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 = color;
-	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();
-}
+    // 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();
+
+    // #path4
+    ctx.beginPath();
+    ctx.globalAlpha = 0.7;
+    ctx.strokeStyle = color;
+    ctx.lineWidth = 0.08 * patternSize;
+    ctx.moveTo(-patternSize / 2, patternSize / 2);
+    ctx.lineTo(0.0, 0.0);
+    ctx.lineTo(patternSize / 2, patternSize / 2);
+    ctx.lineTo(patternSize, 0.0);
+    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();
-        }
+    // #path6
+    ctx.beginPath();
+    ctx.globalAlpha = 0.3;
+    ctx.strokeStyle = color;
+    ctx.lineWidth = 0.08 * patternSize;
+    ctx.moveTo(-patternSize / 2, patternSize);
+    ctx.lineTo(0.0, patternSize / 2);
+    ctx.lineTo(patternSize / 2, patternSize);
+    ctx.lineTo(patternSize, patternSize / 2);
+    ctx.lineTo(patternSize + patternSize / 2, patternSize);
+    ctx.stroke();
 
-    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;
-		}
+    // #path6-6
+    ctx.beginPath();
+    ctx.globalAlpha = 0.3;
+    ctx.strokeStyle = color;
+    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();
 
-    return pattern;
-}
+    // #path6-5
+    ctx.beginPath();
+    ctx.globalAlpha = 0.7;
+    ctx.strokeStyle = color;
+    ctx.lineWidth = 0.08 * patternSize;
+    ctx.moveTo(-patternSize / 2, patternSize + patternSize / 2);
+    ctx.lineTo(0.0, 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.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();
+  }
+
+  return pattern;
+}

package/src/stories/Changelog.mdx

@@ -1,5 +1,5 @@
-import { Meta, Markdown } from "@storybook/blocks";
-import Changelog from "../../CHANGELOG.md?raw";
+import { Meta, Markdown } from '@storybook/blocks';
+import Changelog from '../../CHANGELOG.md?raw';
 
 <Meta title="Changelog" />
 

package/src/stories/Contributing.mdx

@@ -1,5 +1,5 @@
-import { Meta } from "@storybook/blocks";
-import { Mermaid } from "mdx-mermaid/Mermaid";
+import { Meta } from '@storybook/blocks';
+import { Mermaid } from 'mdx-mermaid/Mermaid';
 
 <Meta title="Contributing" />
 

package/src/stories/GettingStarted.mdx

@@ -1,6 +1,6 @@
-import { Meta } from "@storybook/blocks";
-import { Badge, OutlineCTA, Link } from "@storybook/design-system";
-import pkg from "../../package.json";
+import { Meta } from '@storybook/blocks';
+import { Badge, OutlineCTA, Link } from '@storybook/design-system';
+import pkg from '../../package.json';
 
 <Meta title="Getting Started" />
 
@@ -61,8 +61,8 @@ In your entry point file, insert the following code:
 ```javascript
 // In the entry point file of your application - usually src/main.js
 
-import MozaicChart from "@mozaic-ds/chart";
-import "@mozaic-ds/chart/dist/style.css";
+import MozaicChart from '@mozaic-ds/chart';
+import '@mozaic-ds/chart/dist/style.css';
 
 Vue.use(MozaicChart);
 ```

package/src/stories/SupportAndOnboarding.mdx

@@ -1,14 +1,14 @@
-import { Meta } from "@storybook/blocks";
-import { Button } from "@storybook/design-system";
+import { Meta } from '@storybook/blocks';
+import { Button } from '@storybook/design-system';
 
 <Meta
   title="Support & Onboarding"
   parameters={{
-    layout: "fullscreen",
-    viewMode: "docs",
+    layout: 'fullscreen',
+    viewMode: 'docs',
     previewTabs: {
-      canvas: { hidden: true },
-    },
+      canvas: { hidden: true }
+    }
   }}
 />
 

package/src/types/AxisDefinition.ts

@@ -2,5 +2,3 @@ export interface AxisDefinition {
   title: string;
   unit: string;
 }
-
-

package/src/types/Chart.ts

@@ -1,10 +1,12 @@
+import { Plugin } from 'chart.js';
+
 export interface ChartData {
-    data: any;
-    loading: boolean;
-    error: boolean;
+  data: any;
+  loading: boolean;
+  error: boolean;
 }
 
-export interface HTMLLegendPlugin {
-    id: string;
-    afterUpdate: (chart: any) => void;
-}
+export type HTMLLegendPlugin = Plugin<
+  'bar' | 'doughnut' | 'line',
+  Record<string, any>
+>;

package/src/types/DoughnutData.ts

@@ -1,6 +1,14 @@
+import { ChartData, Plugin } from 'chart.js';
+
+type AnyObject = Record<string, any>;
+
 export interface DoughnutData {
   tooltipLabel?: number;
   value: number;
   unit: string;
   rate: number;
 }
+
+export type DoughnutPlugin = Plugin<'doughnut', AnyObject>;
+
+export type DoughnutChartData = ChartData<'doughnut', number[]>;

package/src/types/GenericData.ts

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

package/src/types/LineChart.ts

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

package/src/types/RadarData.ts

@@ -1,36 +1,40 @@
 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;
+  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[];
+  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[]
-        }],
-      }]
-    }
-  }
+  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

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

package/src/vite-env.d.ts

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