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

package/src/services/DoughnutChartFunctions.ts

@@ -1,85 +1,126 @@
-import { ref } from 'vue';
-import type { Ref } from 'vue';
-import {
-  getHtmlLegendPlugin
-} from '../services/ChartsCommonLegend';
-import { formatWithThousandsSeprators } from '../services/FormatUtilities';
+import { ref } from "vue";
+import type { Ref } from "vue";
+import { getHtmlLegendPlugin } from "../services/ChartsCommonLegend";
+import { formatWithThousandsSeprators } from "../services/FormatUtilities";
 
-import ChartDesign from './patterns/ChartDesign';
-import {addAlpha} from './ColorFunctions';
+import ChartDesign from "./patterns/ChartDesign";
+import { addAlpha } from "./ColorFunctions";
 
 export default function () {
   const doughnutRef: Ref = ref(null);
   const onHoverIndex: Ref<number | null> = ref(null);
   const backgroundColor: Ref<CanvasPattern[] | null> = ref(null);
 
-  function privateGetHtmlLegendPlugin(legendContainer: Ref, selectMode: Ref<boolean>, disableAccessibility: Ref<boolean>, patternsColors: Ref<string[]>, patternsList: Ref<((hover: boolean, color: string, disableAccessibility: boolean) => CanvasPattern)[]>, maxValueToDisplay: number, doughnutData: any) {
-    return getHtmlLegendPlugin(legendContainer, selectMode, onHoverIndex, disableAccessibility, patternsColors, patternsList, maxValueToDisplay, doughnutData);
+  function privateGetHtmlLegendPlugin(
+    legendContainer: Ref,
+    selectMode: Ref<boolean>,
+    disableAccessibility: Ref<boolean>,
+    patternsColors: Ref<string[]>,
+    patternsList: Ref<
+      ((
+        hover: boolean,
+        color: string,
+        disableAccessibility: boolean
+      ) => CanvasPattern)[]
+    >,
+    maxValueToDisplay: number,
+    doughnutData: any
+  ) {
+    return getHtmlLegendPlugin(
+      legendContainer,
+      selectMode,
+      onHoverIndex,
+      disableAccessibility,
+      patternsColors,
+      patternsList,
+      maxValueToDisplay,
+      doughnutData
+    );
   }
 
-
-  function getBackgroundColor(patternsColors: string[], patternsList: ((hover: boolean, color: string, disableAccessibility: boolean) => CanvasPattern)[], disableAccessibility: boolean) {
+  function getBackgroundColor(
+    patternsColors: string[],
+    patternsList: ((
+      hover: boolean,
+      color: string,
+      disableAccessibility: boolean
+    ) => CanvasPattern)[],
+    disableAccessibility: boolean
+  ) {
     if (onHoverIndex.value !== null) {
-      return patternsList
-          .map((pattern, index) => onHoverIndex.value === index ? pattern(false, patternsColors[index], disableAccessibility) : pattern(true, patternsColors[index], disableAccessibility));
+      return patternsList.map((pattern, index) =>
+        onHoverIndex.value === index
+          ? pattern(false, patternsColors[index], disableAccessibility)
+          : pattern(true, patternsColors[index], disableAccessibility)
+      );
     } else {
-      return patternsList
-          .map((pattern, index) => pattern(false, patternsColors[index], disableAccessibility),);
+      return patternsList.map((pattern, index) =>
+        pattern(false, patternsColors[index], disableAccessibility)
+      );
     }
   }
 
   function getBorderColor(patternsColors: string[]): string[] {
     if (onHoverIndex.value !== null) {
-      return patternsColors.map((color, index) => onHoverIndex.value === index ? color : addAlpha(color, 0.2));
+      return patternsColors.map((color, index) =>
+        onHoverIndex.value === index ? color : addAlpha(color, 0.2)
+      );
     } else {
       return patternsColors;
     }
   }
 
+  function getOnHoverOptions() {
+    return (_ignore: unknown, activeElements: Array<any>): void => {
+      if (activeElements[0] !== undefined) {
+        onHoverIndex.value = activeElements[0].element.$context.index;
+      } else {
+        onHoverIndex.value = null;
+      }
+    };
+  }
 
-  function getOnHoverOptions () {
-  return (_ignore: unknown, activeElements: Array<any>): void => {
-    if (activeElements[0] !== undefined) {
-      onHoverIndex.value = activeElements[0].element.$context.index;
-    } else {
-      onHoverIndex.value = null;
-    }
+  const getFormatedText = (str: string) => {
+    return str.charAt(0).toUpperCase() + str.slice(1).toLowerCase();
   };
- }
-
-const getFormatedText = (str: string) => {
-  return str.charAt(0).toUpperCase() + str.slice(1).toLowerCase();
-};
 
-function getDoughnutLabels(labels: string[], data: any[], maxValues: number) {
-  let truncatedLabels = labels.slice(0);
-  let truncatedData = data.slice(0);
-  if (labels.length > maxValues){
-    truncatedData = groupDataAfterNthValue(data, maxValues);
-    truncatedLabels = truncatedLabels.slice(0, maxValues - 1);
-    truncatedLabels.push('others');
+  function getDoughnutLabels(labels: string[], data: any[], maxValues: number) {
+    let truncatedLabels = labels.slice(0);
+    let truncatedData = data.slice(0);
+    if (labels.length > maxValues) {
+      truncatedData = groupDataAfterNthValue(data, maxValues);
+      truncatedLabels = truncatedLabels.slice(0, maxValues - 1);
+      truncatedLabels.push("others");
+    }
+    return truncatedLabels.map(
+      (label: string, index: number) =>
+        `${getFormatedText(label)} (${formatWithThousandsSeprators(
+          truncatedData[index].rate as number
+        )} %)`
+    );
   }
-  return truncatedLabels.map((label: string, index: number) => `${getFormatedText(label)} (${formatWithThousandsSeprators(truncatedData[index].rate as number)} %)`);
-}
 
-function groupDataAfterNthValue (data: any, maxValues: number): any[] {
-  if (maxValues < 1) {
-    return data;
-  }
-  let truncatedData = data.slice(0);
-  if (data.length > maxValues) {
-    truncatedData = truncatedData.slice(0, maxValues);
-    truncatedData[maxValues - 1] = data.slice(maxValues).reduce((result: any, current: any) => {
-      result.rate += current.rate;
-      result.value += current.value;
-      return result;
-    }, {
-      rate: data[maxValues - 1].rate,
-      value: data[maxValues - 1].value
-    });
+  function groupDataAfterNthValue(data: any, maxValues: number): any[] {
+    if (maxValues < 1) {
+      return data;
+    }
+    let truncatedData = data.slice(0);
+    if (data.length > maxValues) {
+      truncatedData = truncatedData.slice(0, maxValues);
+      truncatedData[maxValues - 1] = data.slice(maxValues).reduce(
+        (result: any, current: any) => {
+          result.rate += current.rate;
+          result.value += current.value;
+          return result;
+        },
+        {
+          rate: data[maxValues - 1].rate,
+          value: data[maxValues - 1].value,
+        }
+      );
+    }
+    return truncatedData;
   }
-  return truncatedData;
-}
 
   return {
     onHoverIndex,
@@ -91,6 +132,6 @@ function groupDataAfterNthValue (data: any, maxValues: number): any[] {
     getFormatedText,
     getBorderColor,
     backgroundColor,
-    doughnutRef
+    doughnutRef,
   };
 }

package/src/services/RadarChartFunctions.ts

@@ -1,6 +1,6 @@
 import type { Chart, RadialLinearScale } from 'chart.js';
 
-export function drawLabels (chart: Chart, props: any) {
+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[][];
@@ -14,37 +14,39 @@ export function drawLabels (chart: Chart, props: any) {
     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;
+    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) {
+    if (angle < 0 || angle > Math.PI) {
       yOffset = -15;
     } else {
       yOffset = 15;
     }
 
     //bottom labels
-    if ( angle > Math.PI / 4 && angle < 3 * Math.PI / 4) {
+    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) {
+    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){
+    if (angle > (11 * Math.PI) / 8 || angle < (-3 * Math.PI) / 8) {
       ctx.textAlign = 'center';
     }
-    const yPos = position.y + yOffset * (label.length - 1) / 2;
+    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';
+      const color =
+        i === label.length - 1 ? buildColorArray(props)[index] : '#000000';
       ctx.fillStyle = color;
 
       const x = position.x + xOffset;
@@ -56,8 +58,8 @@ export function drawLabels (chart: Chart, props: any) {
   ctx.restore();
 }
 
-const buildColorArray = (props: any): string[]=> {
-  return props.areas[0].areaData.map((x: { color: string }) => {
+const buildColorArray = (props: any): string[] => {
+  return props.datasets[0].areaData.map((x: { color: string }) => {
     switch (x.color) {
       case 'red':
         return '#C61112';

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/App.vue

@@ -1,80 +0,0 @@
-<template>
-  <div>
-    <h1>Ouais Ouais Ouais !</h1>
-    <BarChart v-bind="barProps" />
-  </div>
-</template>
-
-<script setup lang="ts">
-import { reactive } from "vue";
-// import { BarChart } from "./components";
-
-const barProps = reactive({
-  width: "500px",
-  height: "400px",
-  rawTitle: "Bar title",
-  firstTooltip: "content",
-  secondTooltip: "content2",
-  disableAccessibility: false,
-  newPatternsOrder: [0, 4, 1, 2, 3, 5],
-  labels: ["Data One", "Data Two", "Data Three"],
-  colourSet: 0,
-  datasets: [
-    {
-      label: "Data One",
-      data: [
-        {
-          amount: 163790.23,
-          rate: 1.719528,
-          amountUnit: "€",
-        },
-        {
-          amount: 217064,
-          rate: 2.278815,
-          amountUnit: "€",
-        },
-        {
-          amount: 9144447.23,
-          rate: 96.0016569,
-          amountUnit: "€",
-        },
-      ],
-    },
-    {
-      label: "Data Two",
-      data: [
-        {
-          amount: 103144.22,
-          rate: 1.1232806,
-          amountUnit: "€",
-        },
-        {
-          amount: 297474.14,
-          rate: 3.2396087,
-          amountUnit: "€",
-        },
-        {
-          amount: 8781791.1,
-          rate: 95.6371107,
-          amountUnit: "€",
-        },
-      ],
-    },
-  ],
-  unit: "%",
-});
-</script>
-
-<style scoped>
-.logo {
-  height: 6em;
-  padding: 1.5em;
-  will-change: filter;
-}
-.logo:hover {
-  filter: drop-shadow(0 0 2em #646cffaa);
-}
-.logo.vue:hover {
-  filter: drop-shadow(0 0 2em #42b883aa);
-}
-</style>