@mozaic-ds/chart 0.1.0-beta.2 → 0.1.0-beta.23

package/src/services/MixedBarLineFunctions.ts

@@ -0,0 +1,258 @@
+import { reactive, ref, type Ref } from 'vue';
+import PatternFunctions from './PatternFunctions';
+import { addAlpha } from './ColorFunctions';
+import type { HTMLLegendPlugin } from '../types/Chart';
+import {
+  getOrCreateLegendList,
+  createHtmlLegendListElement,
+  createLegendElementWithPatterns,
+  createLegendElementWithCheckbox,
+  createHtmlLegendItemText,
+  createLegendElementWithSquareArea,
+  type ChartItem,
+} from './ChartsCommonLegend';
+
+const { getPatternIndexWithShift } = PatternFunctions();
+
+export default function () {
+  const borderWidth = ref(2);
+  const onHoverIndex: { dataSetIndex: number; columnIndex: number } = reactive({
+    dataSetIndex: -1,
+    columnIndex: -1,
+  });
+
+  interface Dataset {
+    data: any;
+    label: string;
+    type: any;
+    fill?: boolean;
+  }
+
+  function getHtmlLegendPlugin(
+    legendContainer: Ref,
+    selectMode: Ref<boolean>,
+    onHoverIndex: any,
+    disableAccessibility: Ref<boolean>,
+    patternsColors: Ref<string[]>,
+    patternsList: Ref<
+      ((
+        hover: boolean,
+        color: string,
+        disableAccessibility: boolean
+      ) => CanvasPattern)[]
+    >
+  ): HTMLLegendPlugin[] {
+    return [
+      {
+        id: 'htmlLegend',
+        afterUpdate(chart: any) {
+          const ul: HTMLLIElement = getOrCreateLegendList(
+            legendContainer,
+            'column'
+          );
+          ul.style.display = 'flex';
+          ul.style.margin = '1.375rem 1.0625rem';
+          ul.style.flexDirection = 'row-reverse';
+          ul.style.justifyContent = 'flex-end';
+          while (ul.firstChild) {
+            ul.firstChild.remove();
+          }
+          const items: ChartItem[] =
+            chart.options.plugins.legend.labels.generateLabels(chart);
+          items.sort((a,b) => b.datasetIndex - a.datasetIndex).forEach((item: ChartItem): void => {
+            const li: HTMLElement = createHtmlLegendListElement(
+              chart,
+              selectMode,
+              item.datasetIndex
+            );
+            let liContent: HTMLElement;
+            if (!selectMode.value) {
+              if (item?.lineCap) {
+                liContent = createLegendElementWithSquareArea(item);
+              } else {
+                liContent = createLegendElementWithPatterns(
+                  item,
+                  chart,
+                  { datasetIndex: -1 },
+                  disableAccessibility.value,
+                  patternsColors.value,
+                  patternsList.value,
+                  false
+                );
+              }
+            } else {
+              liContent = createLegendElementWithCheckbox(
+                chart,
+                item,
+                selectMode,
+                { datasetIndex: -1 },
+                patternsColors.value,
+                false
+              );
+            }
+            liContent.style.boxSizing = 'border-box';
+            li.style.marginRight = '10px';
+            li.appendChild(liContent);
+            li.appendChild(createHtmlLegendItemText(item));
+            ul.appendChild(li);
+          });
+        },
+      },
+    ];
+  }
+
+  function privateGetHtmlLegendPlugin(
+    legendContainer: Ref,
+    selectMode: Ref<boolean>,
+    disableAccessibility: Ref<boolean>,
+    patternsColors: Ref<string[]>,
+    patternsList: Ref<
+      ((
+        hover: boolean,
+        color: string,
+        disableAccessibility: boolean
+      ) => CanvasPattern)[]
+    >
+  ) {
+    return getHtmlLegendPlugin(
+      legendContainer,
+      selectMode,
+      onHoverIndex,
+      disableAccessibility,
+      patternsColors,
+      patternsList
+    );
+  }
+
+  function getMixedDatasets(
+    datasets: Dataset[],
+    disableAccessibility: boolean,
+    patternsColors: string[],
+    patternsList: ((
+      hover: boolean,
+      color: string,
+      disableAccessibility: boolean
+    ) => CanvasPattern)[],
+    patternShifting?: number
+  ) {
+    // Hack to force refresh
+    const borderWithValue = borderWidth.value;
+    return datasets.map((dataset, index) => {
+      const isBarChart = dataset.type === 'bar';
+      return {
+        type: dataset.type,
+        fill: isBarChart ? null : false,
+        borderWidth: function () {
+          return disableAccessibility && isBarChart ? 1 : borderWithValue;
+        },
+        borderColor: function (context: any) {
+          return disableAccessibility && isBarChart
+            ? '#00000000'
+            : isBarChart
+            ? getBorderColor(
+                index,
+                context.index,
+                patternsColors,
+                patternShifting
+              )
+            : patternsColors[index];
+        },
+        backgroundColor: function (context: any) {
+          return getPattern(
+            index,
+            context.index,
+            disableAccessibility,
+            patternsColors,
+            patternsList,
+            patternShifting
+          );
+        },
+        yAxisID: isBarChart ? 'A' : 'B',
+        pointStyle: index % 2 === 0 ? 'rectRot' : 'circle',
+        data: dataset.data,
+        label: dataset.label,
+        pointBackgroundColor: '#FFFFFF',
+        pointRadius: 5,
+        order: dataset.type === 'line' ? 0 : 1,
+      };
+    });
+  }
+
+  function getBorderColor(
+    dataSetIndex: number,
+    contextIndex: number,
+    patternsColors: string[],
+    patternShifting?: number
+  ) {
+    const index = getPatternIndexWithShift(dataSetIndex, patternShifting);
+    if (displayFullOpacity(dataSetIndex, contextIndex)) {
+      return patternsColors[index];
+    } else {
+      return addAlpha(patternsColors[index], 0.2);
+    }
+  }
+
+  function getPattern(
+    dataSetIndex: number,
+    contextIndex: number,
+    disableAccessibility: boolean,
+    patternsColors: string[],
+    patternsList: ((
+      hover: boolean,
+      color: string,
+      disableAccessibility: boolean
+    ) => CanvasPattern)[],
+    patternShifting?: number
+  ) {
+    const index = getPatternIndexWithShift(dataSetIndex, patternShifting);
+    if (displayFullOpacity(dataSetIndex, contextIndex)) {
+      return patternsList[index](
+        false,
+        patternsColors[index],
+        disableAccessibility
+      );
+    } else {
+      return patternsList[index](
+        true,
+        patternsColors[index],
+        disableAccessibility
+      );
+    }
+  }
+
+  function displayFullOpacity(
+    dataSetIndex: number,
+    contextIndex: number
+  ): boolean {
+    return (
+      nothingHovered() ||
+      columnHovered(dataSetIndex, contextIndex) ||
+      legendHovered(dataSetIndex)
+    );
+  }
+
+  function nothingHovered(): boolean {
+    return onHoverIndex.dataSetIndex < 0;
+  }
+
+  function columnHovered(dataSetIndex: number, contextIndex: number): boolean {
+    return (
+      onHoverIndex.dataSetIndex === dataSetIndex &&
+      onHoverIndex.columnIndex === contextIndex
+    );
+  }
+
+  function legendHovered(dataSetIndex: number): boolean {
+    return (
+      onHoverIndex.dataSetIndex === dataSetIndex && onHoverIndex.columnIndex < 0
+    );
+  }
+
+  return {
+    privateGetHtmlLegendPlugin,
+    getMixedDatasets,
+    getBorderColor,
+    getPattern,
+    onHoverIndex,
+  };
+}

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;
-    ctx.font = '15px Arial';
+    const yPos = position.y + (yOffset * (label.length - 1)) / 2;
+    ctx.font = '12px 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';
@@ -68,3 +70,22 @@ const buildColorArray = (props: any): string[]=> {
     }
   });
 };
+
+export function splitLabelIfTooLong(axisLabel: string, buildValue: string) {
+  const radarLimitLabelLength = 7;
+  if (
+      axisLabel.length > radarLimitLabelLength &&
+      axisLabel.includes(' ', radarLimitLabelLength)
+  ) {
+    const indexOfFirstSpaceAfterLimit: number = axisLabel.indexOf(
+        ' ',
+        radarLimitLabelLength
+    );
+    return [
+      axisLabel.substring(0, indexOfFirstSpaceAfterLimit),
+      axisLabel.substring(indexOfFirstSpaceAfterLimit),
+      buildValue,
+    ];
+  }
+  return [axisLabel, buildValue];
+}

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,6 @@
+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/MixedBarLineData.ts

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

package/src/types/TooltipChartType.ts

@@ -1,6 +1,7 @@
 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'