@mozaic-ds/chart 0.1.0-beta.0

package/dist/style.css

@@ -0,0 +1 @@
+.container[data-v-3e53e20e]{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-weight:400;font-family:Roboto,sans-serif}.main[data-v-3e53e20e]{display:flex;flex-direction:column;justify-content:center;align-items:center;margin-bottom:20px}.container[data-v-6b16e20b]{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-weight:400;font-family:Roboto,sans-serif}.main[data-v-6b16e20b]{display:flex;flex-direction:column;justify-content:center;align-items:center}.container[data-v-2b308814]{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-weight:400;font-family:Roboto,sans-serif}.main[data-v-2b308814]{display:flex;flex-direction:column;justify-content:center;align-items:center;margin-bottom:20px}.container[data-v-9f1e4973]{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-weight:400;font-family:Roboto,sans-serif}.main[data-v-9f1e4973]{height:600px;display:flex;flex-direction:column;justify-content:center;align-items:center}

package/dist/vite.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>

package/package.json

@@ -0,0 +1,79 @@
+{
+  "name": "@mozaic-ds/chart",
+  "version": "0.1.0-beta.0",
+  "type": "module",
+  "scripts": {
+    "build": "vue-tsc && vite build",
+    "build-storybook": "storybook build",
+    "build:types": "vue-tsc --project tsconfig.types.json --declaration --emitDeclarationOnly --outDir dist/types ",
+    "check": "vue-tsc --project tsconfig.types.json --noEmit",
+    "chromatic": "npx chromatic --project-token=CHROMATIC_PROJECT_TOKEN",
+    "coverage": "vitest run --coverage",
+    "dev": "vite",
+    "npm:publish": "npm publish --access public",
+    "npm:publishBeta": "npm publish --tag beta --access public",
+    "prepublishOnly": "npm run build",
+    "preview": "vite preview",
+    "release": "dotenv release-it",
+    "release:beta": "dotenv release-it --preRelease=beta",
+    "storybook": "storybook dev -p 6006",
+    "test": "vitest"
+  },
+  "bugs": {
+    "url": "https://github.com/adeo/mozaic-chart/issues"
+  },
+  "homepage": "https://github.com/adeo/mozaic-chart#readme",
+  "files": [
+    "dist/*",
+    "src/*"
+  ],
+  "main": "./dist/mozaic-chart.umd.cjs",
+  "module": "./dist/mozaic-chart.js",
+  "exports": {
+    ".": {
+      "import": "./dist/mozaic-chart.js",
+      "require": "./dist/mozaic-chart.umd.cjs"
+    }
+  },
+  "dependencies": {
+    "@mozaic-ds/vue-3": "0.49.3",
+    "vue": "^3.2.41"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.22.6",
+    "@release-it/conventional-changelog": "^7.0.0",
+    "@storybook/addon-essentials": "^7.0.25",
+    "@storybook/addon-interactions": "^7.0.25",
+    "@storybook/addon-links": "^7.0.25",
+    "@storybook/blocks": "^7.0.25",
+    "@storybook/testing-library": "^0.2.0",
+    "@storybook/vue3": "^7.0.25",
+    "@storybook/vue3-vite": "^7.0.25",
+    "@vitejs/plugin-vue": "^4.2.3",
+    "@vitest/coverage-c8": "^0.32.4",
+    "@vue/test-utils": "^2.4.0",
+    "babel-loader": "^9.1.2",
+    "chart.js": "^4.3.0",
+    "chromatic": "^6.19.9",
+    "dotenv-cli": "^7.2.1",
+    "jsdom": "^22.1.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "release-it": "^16.1.3",
+    "storybook": "^7.0.25",
+    "typescript": "^5.1.6",
+    "vite": "^4.3.9",
+    "vitest": "^0.32.4",
+    "vue-chartjs": "5.2.0",
+    "vue-loader": "^17.2.2",
+    "vue-tsc": "^1.8.3"
+  },
+  "keywords": [
+    "Adeo",
+    "Mozaic Design System",
+    "Design System",
+    "Vue.js",
+    "Vue.js 3",
+    "Chart.js"
+  ]
+}

package/src/assets/base.css

@@ -0,0 +1,2 @@
+@import url('https://fonts.googleapis.com/css?family=Roboto+Condensed&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');

package/src/components/bar/BarChart.stories.ts

@@ -0,0 +1,298 @@
+// BarChart.stories.ts
+
+import type { Meta, StoryObj } from "@storybook/vue3";
+import BarChart from "./BarChart.vue";
+
+const meta = {
+  title: "Charts/Bar",
+  component: BarChart,
+} satisfies Meta<typeof BarChart>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default = {
+  args: {
+    width: "500px",
+    height: "400px",
+    rawTitle: "Bar title",
+    firstTooltip: "content",
+    secondTooltip: "content2",
+    labels: ["Data One", "Data Two", "Data Three"],
+    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: "%",
+  },
+} satisfies Story;
+
+export const MultipleData = {
+  args: {
+    width: "700px",
+    height: "400px",
+    rawTitle: "Test title",
+    firstTooltip: "content",
+    secondTooltip: "content2",
+    labels: [
+      "Data One",
+      "Data Two",
+      "Data Three",
+      "Data Four",
+      "Data Five",
+      "Data Six",
+      "Data Seven",
+      "Data Eight",
+      "Data Nine",
+      "Data Ten",
+      "Data Eleven",
+      "Data Twelve",
+    ],
+    datasets: [
+      {
+        label: "Data One",
+        data: [
+          {
+            amount: 163790.23,
+            rate: 1.719528,
+            amountUnit: "€",
+          },
+          {
+            amount: 217064,
+            rate: 2.278815,
+            amountUnit: "€",
+          },
+          {
+            amount: 9144447.23,
+            rate: 6.0016569,
+            amountUnit: "€",
+          },
+          {
+            amount: 9144447.23,
+            rate: 46.0016569,
+            amountUnit: "€",
+          },
+          {
+            amount: 9144447.23,
+            rate: 66.0016569,
+            amountUnit: "€",
+          },
+          {
+            amount: 9144447.23,
+            rate: 9.0016569,
+            amountUnit: "€",
+          },
+          {
+            amount: 9144447.23,
+            rate: 46.0016569,
+            amountUnit: "€",
+          },
+          {
+            amount: 9144447.23,
+            rate: 26.0016569,
+            amountUnit: "€",
+          },
+          {
+            amount: 9144447.23,
+            rate: 81.0016569,
+            amountUnit: "€",
+          },
+          {
+            amount: 9144447.23,
+            rate: 11.0016569,
+            amountUnit: "€",
+          },
+          {
+            amount: 9144447.23,
+            rate: 90.0016569,
+            amountUnit: "€",
+          },
+          {
+            amount: 9144447.23,
+            rate: 50.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: "€",
+          },
+          {
+            amount: 8781791.1,
+            rate: 45.6371107,
+            amountUnit: "€",
+          },
+          {
+            amount: 8781791.1,
+            rate: 40.6371107,
+            amountUnit: "€",
+          },
+          {
+            amount: 8781791.1,
+            rate: 6.6371107,
+            amountUnit: "€",
+          },
+          {
+            amount: 8781791.1,
+            rate: 7.6371107,
+            amountUnit: "€",
+          },
+          {
+            amount: 8781791.1,
+            rate: 39.6371107,
+            amountUnit: "€",
+          },
+          {
+            amount: 8781791.1,
+            rate: 30.6371107,
+            amountUnit: "€",
+          },
+          {
+            amount: 8781791.1,
+            rate: 50.6371107,
+            amountUnit: "€",
+          },
+          {
+            amount: 8781791.1,
+            rate: 59.6371107,
+            amountUnit: "€",
+          },
+          {
+            amount: 8781791.1,
+            rate: 4.6371107,
+            amountUnit: "€",
+          },
+        ],
+      },
+    ],
+    unit: "%",
+  },
+} satisfies Story;
+
+export const StackedBarChart = {
+  args: {
+    width: "700px",
+    height: "400px",
+    firstTooltip: "content",
+    secondTooltip: "content2",
+    rawTitle: "Stacked Bar Chart Title",
+    stacked: true,
+    labels: ["Category One", "Category Two", "Category Three"],
+    datasets: [
+      {
+        label: "Dataset One",
+        data: [
+          {
+            amount: 103144.22,
+            rate: 100.1232806,
+            amountUnit: "€",
+          },
+          {
+            amount: 297474.14,
+            rate: 3.2396087,
+            amountUnit: "€",
+          },
+          {
+            amount: 8781791.1,
+            rate: 95.6371107,
+            amountUnit: "€",
+          },
+        ],
+      },
+      {
+        label: "Dataset Two",
+        data: [
+          {
+            amount: 103144.22,
+            rate: 1.1232806,
+            amountUnit: "€",
+          },
+          {
+            amount: 297474.14,
+            rate: 3.2396087,
+            amountUnit: "€",
+          },
+          {
+            amount: 8781791.1,
+            rate: 95.6371107,
+            amountUnit: "€",
+          },
+        ],
+      },
+      {
+        label: "Dataset Three",
+        data: [
+          {
+            amount: 103144.22,
+            rate: 1.1232806,
+            amountUnit: "€",
+          },
+          {
+            amount: 297474.14,
+            rate: 3.2396087,
+            amountUnit: "€",
+          },
+          {
+            amount: 8781791.1,
+            rate: 95.6371107,
+            amountUnit: "€",
+          },
+        ],
+      },
+    ],
+    unit: "%",
+  },
+} satisfies Story;

package/src/components/bar/BarChart.vue

@@ -0,0 +1,247 @@
+<template>
+  <div class="container">
+    <div class="main">
+      <Bar 
+        v-if="chartData"
+        ref="barChartRef" 
+        :data="chartData" 
+        :options="options"
+        :plugins="htmlLegendPlugin"
+        :style="{ width, height }"
+        :chart-id="chartId"
+        :cssClasses:="cssClasses"
+        :styles="styles"
+      />
+    </div>
+    <div ref="legendContainer" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, ref, watch, PropType } from 'vue';
+import type { Ref } from 'vue';
+import { Bar } from 'vue-chartjs';
+import barChartFunctions from '../../services/BarChartFunctions';
+import type { Context } from '../../services/GenericTooltipService';
+import { GenericTooltipService } from '../../services/GenericTooltipService';
+import { TooltipChartType } from '../../types/TooltipChartType';
+import { formatTicks, formatWithThousandsSeprators } from '../../services/FormatUtilities';
+import { BarElement, CategoryScale, Chart as ChartJS, Legend, LinearScale, Title, Tooltip, Plugin } from 'chart.js';
+import { ButtonName } from '../../types/ButtonName';
+import { BarData } from "../../types/BarData";
+
+ChartJS.register(
+  Title,
+  Tooltip,
+  Legend,
+  BarElement,
+  CategoryScale,
+  LinearScale
+);
+
+const legendContainer = ref(null);
+const selectMode = ref(false);
+const barDataProps = defineProps({
+    chartId: {
+      type: String,
+      default: "radar-chart",
+    },
+    rawTitle: {
+      type: String,
+      default: 'sales',
+    },
+    unit: {
+      type: String,
+      default: '%',
+    },
+    labels: {
+      type: Array as PropType<string[]>,
+      default: () => []
+    },
+    datasets: {
+      type: Array as PropType<BarData[]>,
+      default: () => []
+    },
+    width: {
+      type: String,
+      default: '400px',
+    },
+    height: {
+      type: String,
+      default: '300px',
+    },
+    cssClasses: {
+      default: "",
+      type: String,
+    },
+    styles: {
+      type: Object as PropType<Partial<CSSStyleDeclaration>>,
+      default: () => {},
+    },
+    plugins: {
+      type: Array as PropType<Plugin<"bar">[]>,
+      default: () => [],
+    },
+    stacked: {
+      type: Boolean,
+      default: false,
+    },
+    firstTooltip: {
+      type: String,
+      default: 'content'
+    },
+    secondTooltip: {
+      type: String,
+      default: 'content2'
+    }
+})
+
+const {
+  onHoverIndex,
+  barChartRef,
+  reloadChart,
+  getOnHoverOptions,
+  getStackedDatasets,
+  privateGetHtmlLegendPlugin,
+} = barChartFunctions();
+
+const chartData = computed(() => {
+  const chartsLabels = getChartLabels(indexOfOthersLabelIfNull.value);
+  gettooltipContent();
+  return {
+    labels: chartsLabels,
+    datasets: getStackedDatasets(
+      barDataProps.datasets.map((dataset, index) => ({
+        data: getChartData(index, indexOfOthersLabelIfNull.value),
+        label: barDataProps.datasets[index].label
+        })
+      ),
+      barDataProps.stacked,
+      0
+    )
+  };
+});
+
+let xValue: string;
+let yValue: string;
+
+const gettooltipContent = (): void => {
+    xValue = barDataProps.firstTooltip;
+    yValue = barDataProps.secondTooltip;
+};
+
+const indexOfOthersLabelIfNull: Ref<number | null> = computed(() => {
+  const labels = barDataProps.labels;
+  if (labels.includes('other')) {
+    const index = labels.indexOf('other');
+    if (barDataProps.datasets[0].data[index].rate + '' === '0' &&
+      barDataProps.datasets[1].data[index].rate + '' === '0') {
+      return index;
+    }
+  }
+  return null;
+});
+
+const getChartData = (index: number, indexOfValueToHide: number | null, isStacked: boolean = false) => {
+  const data = Object.assign([], barDataProps.datasets[index].data);
+  if (indexOfValueToHide && indexOfOthersLabelIfNull.value) {
+    data.splice(indexOfOthersLabelIfNull.value, 1);
+  }
+  
+  return data.map((data: { rate: number }) => data.rate);
+};
+
+const getTooltipData = (context: Context) => {
+  const datasetIndex = context.tooltip.dataPoints[0].datasetIndex;
+  const dataIndex = context.tooltip.dataPoints[0].dataIndex;
+  const percent = parseFloat(context.tooltip.body[0].lines[0].split(':')[1].replace(',', '.')).toFixed(2) +
+  '% ';
+  if (!dataIndex || !datasetIndex) {
+    return '';
+  }
+  const rawdata =
+    barDataProps.datasets[datasetIndex].data[dataIndex];
+  const data = formatWithThousandsSeprators(rawdata.amount);
+  return percent + data + rawdata.amountUnit;
+};
+
+const getChartLabels = (indexOfValueToHide: number | null) => {
+  const labels = Object.assign([], barDataProps.labels);
+  if (indexOfValueToHide) {
+    labels.splice(indexOfValueToHide, 1);
+  }
+
+  return labels.map((label: string) => label);
+};
+
+const options = computed(() => ({
+  // eslint-disable-next-line
+  onHover: getOnHoverOptions(),
+  elements: {
+    bar: {
+      borderSkipped: false
+    }
+  },
+  plugins: {
+    responsive: true,
+    maintainAspectRatio: false,
+    legend: {
+      display: false,
+    },
+    title: {
+      display: false
+    },
+    tooltip: {
+      enabled: false,
+      position: 'nearest' as const,
+      external: function (context: Context) {
+        new GenericTooltipService().createTooltip(
+          context,
+          getTooltipData,
+          {
+            chartType: TooltipChartType.BAR_CHART,
+            firstLineLabel: xValue,
+            secondLineLabel: yValue
+          }
+        );
+      }
+    }
+  },
+  scales: {
+    x: {
+      stacked: true, 
+    },
+    y: {
+      stacked: true,
+      ticks: {
+        callback: function (val: string | number) {
+          return formatTicks(val as number, barDataProps.unit);
+        },
+        maxTicksLimit: 8,
+      }
+    }
+  }
+}));
+
+const htmlLegendPlugin = privateGetHtmlLegendPlugin(legendContainer, selectMode);
+
+watch(onHoverIndex, () => {
+  reloadChart();
+}, { deep: true });
+</script>
+
+<style scoped>
+.container {
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-font-smoothing: antialiased;
+  font-weight: 400;
+  font-family: 'Roboto', sans-serif;
+}
+.main {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  margin-bottom: 20px;
+}
+</style>