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

package/src/services/patterns/patternVerticalLines.ts

@@ -1,74 +1,81 @@
-export default function PatternVerticalLines(hover: boolean, color: string = '#8C1551', disableAccessibility: boolean = false): CanvasPattern {
-    const canvasPattern: HTMLCanvasElement = document.createElement('canvas');
-    const ctx: CanvasRenderingContext2D | null = canvasPattern.getContext('2d');
-    if (!ctx) {
-      return new CanvasPattern;
-    }
+export default function PatternVerticalLines(
+  hover: boolean,
+  color: string = '#8C1551',
+  disableAccessibility: boolean = false
+): 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;
+  const patternSize = 50;
+  const lineSize = patternSize * 0.15;
+
+  canvasPattern.width = patternSize;
+  canvasPattern.height = patternSize;
+
+  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();
 
-    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();
-      
     // #rect4
-      ctx.beginPath();
-      ctx.globalAlpha = 0.3;
-      ctx.fillStyle = color;
-      ctx.lineWidth = 0.005 * patternSize;
-      ctx.rect(0.000000, 0.000000, lineSize, patternSize);
-      ctx.fill();
-      
+    ctx.beginPath();
+    ctx.globalAlpha = 0.3;
+    ctx.fillStyle = color;
+    ctx.lineWidth = 0.005 * patternSize;
+    ctx.rect(0.0, 0.0, lineSize, patternSize);
+    ctx.fill();
+
     // #rect6
-      ctx.beginPath();
-      ctx.globalAlpha = 0.7;
-      ctx.fillStyle = color;
-      ctx.lineWidth = 0.005 * patternSize;
-      ctx.rect(patternSize / 2, 0.000000, lineSize, patternSize);
-      ctx.fill();
-    }
+    ctx.beginPath();
+    ctx.globalAlpha = 0.7;
+    ctx.fillStyle = color;
+    ctx.lineWidth = 0.005 * patternSize;
+    ctx.rect(patternSize / 2, 0.0, 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.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, patternSize, patternSize);
 
-      // 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;
-  }
+  return pattern;
+}

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

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

package/src/stories/Contributing.mdx

@@ -0,0 +1,101 @@
+import { Meta } from '@storybook/blocks';
+import { Mermaid } from 'mdx-mermaid/Mermaid';
+
+<Meta title="Contributing" />
+
+# Be part of something bigger!
+
+**Mozaic-Chart** is made possible by an incredible community that finds issues and creates pull requests.<br/>
+It is our job to enable you to create amazing applications.
+
+Most of the time, you find something that can be made better. You could find a bug, or you have an idea for additional functionality.<br/>
+That's great! It's as easy as cloning the [mozaic-chart repository](https://github.com/adeo/mozaic-chart) to get started working in the development environment.
+
+Hopefully this document makes the process for contributing clear and answers some questions that you may have.<br/>
+If you have any questions, please reach out to us on our [slack channel](https://adeo-tech-community.slack.com/archives/CN4K3A99R).
+
+## Contribution model
+
+The contribution process can be summarized as follows:
+
+<Mermaid
+  chart={`flowchart TD;
+  A((I have a need <br/>fix or new feature));
+  A --> B{An issue already exists?};
+  B --> |YES| I;
+  I([The issue corresponds to my needs <br/>or I complete it]);
+  I --> D;
+  B --> |NO| C;
+  C([I create an issue <br/>]);
+  C --> D;
+  D{I can contribute?};
+  D --> |YES| E;
+  D --> |NO| J;
+  E([I clone the repo <br/>& create a PR associated to the issue]);
+  E --> F;
+  F([The PR is ready <br/>and I assign it to reviewers]);
+  F --> G;
+  G{The proofreading is OK <br/>and the PR is validated?};
+  G --> |YES| H;
+  G --> |NO| K;
+  H([The PR is merged and will be released soon]);
+  H;
+  J([In this case, I wait for the issue <br/>to be traited and delivered.]);
+  K([I make the requested changes]);
+  K --> F;
+  click B "https://github.com/adeo/mozaic-chart/issues" _blank;
+  click C "https://github.com/adeo/mozaic-chart/issues/new/choose" _blank;
+`}
+/>
+
+You can now discover the details of each of these steps below.
+
+## Reporting issues
+
+### Where to find known issues
+
+We are using [GitHub Issues](https://github.com/adeo/mozaic-chart/issues) for our bugs.<br/>
+We keep a close eye on this and try to make it clear when we have an internal fix in progress.<br/>
+
+**Before filing a new task, try to make sure your problem doesn't already exist.**
+
+### Reporting new issue
+
+The best way to get your bug fixed is to provide a reduced test case.
+
+Once you've gathered all information, please fill out an issue [here](https://github.com/adeo/mozaic-chart/issues/new/choose).
+
+## Proposing a change
+
+If you intend to add a new component, or make any non-trivial changes, we recommend filing an issue.
+
+This will lets us prepare an agreement on your proposal before you put significant effort into it.
+
+If you’re only fixing a bug, it should be fine to submit a pull request but we still recommend to submit an issue detailing what you’re looking to fix.
+
+## Setup Dev Environment
+
+### Project setup
+
+```bash
+// Clone mozaic-chart repo
+git clone git@github.com:adeo/mozaic-chart.git
+
+// Go to the cloned directory
+cd mozaic-chart
+
+// Checkout the branch you are working on
+git checkout <branch name>
+
+// Install dependencies
+npm install
+```
+
+## Submitting Changes/ Pull Requests
+
+Working on your first Pull Request?<br/>
+You can learn how from this video series:
+[How to contribute to an open source project on Github](https://egghead.io/courses/how-to-contribute-to-an-open-source-project-on-github).
+
+Mozaic's team is keeping an eye on pull requests.<br/>
+We will check your pull request, either merge it, request changes or close it with explanation.

package/src/stories/GettingStarted.mdx

@@ -0,0 +1,92 @@
+import { Meta } from '@storybook/blocks';
+import { Badge, OutlineCTA, Link } from '@storybook/design-system';
+import pkg from '../../package.json';
+
+<Meta title="Getting Started" />
+
+<style>
+  {`
+  .outlineCTA {
+    margin: 16px auto;
+    display: flex;
+    align-items: center;
+    gap: 4px;
+  }
+  .outlineCTA span {
+    font-size: 14px;
+  }
+  .outlineCTA p {
+    margin: 0;
+  }
+`}
+</style>
+
+# Getting Started
+
+**Mozaic-Chart** is the [Chart.js](https://vuejs.org/) implementation for [Vue.js](https://vuejs.org/) of [Mozaic Design System Dataviz](https://mozaic.adeo.cloud/)
+
+<OutlineCTA
+  className="outlineCTA"
+  badge={<Badge status="positive">Vue.js 3</Badge>}
+>
+  Note that this package is built to be used only with <strong>Vue.js 3</strong>
+</OutlineCTA>
+
+## Installation
+
+> **PREREQUISITES:**<br/>
+> To allow you to include and use our package, we assume that you are using a module bundlers like [Webpack](https://webpack.js.org/), [Parcel](https://parceljs.org/) or [rollup.js](https://rollupjs.org/guide/en/), or that your project has been initiated with [Vue CLI >= 5](https://cli.vuejs.org/) or [Vite](https://vitejs.dev/guide/). Otherwise, the package might not work.<br/>
+> Minimum Vue.js version required: **{pkg.dependencies.vue.slice(1)}**
+
+In order to use **Mozaic-Chart** in your **Vue.js** project, you must first install the [npm package](https://www.npmjs.com/package/@mozaic-ds/chart):
+
+```bash
+npm install @mozaic-ds/chart --save --save-exact
+```
+
+Or with **Yarn**:
+
+```bash
+yarn add @mozaic-ds/chart -E
+```
+
+## Set up
+
+After installing **Mozaic-Chart**, you need to set up the library.
+
+The easiest way to do this is to import all components and make them globally available in your application.
+
+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';
+
+Vue.use(MozaicChart);
+```
+
+<br />
+
+### Global/local component registration
+
+As indicated in [its documentation](https://vuejs.org/guide/components/registration.html), **Vue.js** proposes to register/import the components in a global or local way:
+
+- The global import allows you to make your components accessible throughout your application
+- The local import, on the other hand, makes a component accessible only in the part of the application that uses it
+
+> Learn more about the notion of global/local registration on [the associated Vue.js documentation](https://vuejs.org/guide/components/registration.html).
+
+{/* > Learn more about how to import globally or locally the components of **Mozaic-Chart** into your project, by visiting [the dedicated documentation](?path=/docs/importing-components--docs). */}
+
+## Usage
+
+That's it! You’re all set! ✅ <br/>
+You are now able to use the **Mozaic-Chart** components in your **Vue.js** project.
+
+Simply call the component as follows:
+
+```vue-html
+<BarChart :labels="labels" :datasets="datasets" />
+```

package/src/stories/SupportAndOnboarding.mdx

@@ -0,0 +1,44 @@
+import { Meta } from '@storybook/blocks';
+import { Button } from '@storybook/design-system';
+
+<Meta
+  title="Support & Onboarding"
+  parameters={{
+    layout: 'fullscreen',
+    viewMode: 'docs',
+    previewTabs: {
+      canvas: { hidden: true }
+    }
+  }}
+/>
+
+# Need help?
+
+## Support
+
+Any feedback, ideas or questions?
+
+The **Mozaic Design System team** would welcome any feedback, ideas, or requirements that you have.<br/>
+Our goal is to make your lives easier.
+
+If you want to get more detailed information on the components or any other topic related to **Mozaic-Vue**, you can contact us through the channels below:
+
+- Join the [#ads-charts](https://app.slack.com/client/T4R6RCZFA/C04DE3DN8LD) channel on **Slack**
+- Join the [#mozaic-support](https://app.slack.com/client/T4R6RCZFA/CKQJZL7C4/) channel on **Slack**
+
+## Onboarding Sessions
+
+Are you new to using a design system, and in particular Mozaic?<br/>
+Do you want to know more about how **Mozaic** works, and more specifically how to use **Mozaic-Vue**?<br/>
+You need a personalized support to install or configure your project?
+
+The **Mozaic Design System team** is at your disposal for that.
+
+Do not hesitate to book a slot for **an onboarding session**, by going to this url:
+
+<Button
+  appearance="secondary"
+  isLink
+  href="https://calendar.app.google/Tk9JkMdKTzM2DeX36"
+  target="_blank"
+>{`I book an Onboarding Session`}</Button>

package/src/types/AxisDefinition.ts

@@ -0,0 +1,4 @@
+export interface AxisDefinition {
+  title: string;
+  unit: string;
+}

package/src/types/BarData.ts

@@ -8,4 +8,5 @@ export interface BarData {
   label: string;
   backgroundColor?: string;
   data: DataBarData[];
+  stack?: number;
 }

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/MixedBarLineData.ts

@@ -0,0 +1,7 @@
+export interface MixedBarLineData {
+  type: any;
+  label: string;
+  data: number[];
+  borderColor: string;
+  backgroundColor?: string;
+}