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

package/src/components/mixed/MixedBarLineChart.stories.ts

@@ -0,0 +1,91 @@
+// MixedBarLineChart.stories.ts
+
+import type { Meta, StoryObj } from '@storybook/vue3';
+import MixedBarLineChart from './MixedBarLineChart.vue';
+
+const meta = {
+  title: 'Charts/MixedBarLine',
+  component: MixedBarLineChart
+} satisfies Meta<typeof MixedBarLineChart>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default = {
+  args: {
+    width: '500px',
+    height: '400px',
+    tooltipFirstLineLabel: 'content',
+    tooltipSecondLineLabel: 'content2',
+    disableAccessibility: false,
+    newPatternsOrder: [0, 1, 0, 1, 2, 3],
+    colourSet: 0,
+    barUnit: '',
+    lineUnit: '€',
+    xAxisTitle: 'X Axis',
+    yLeftAxisTitle: 'Y1 Axis',
+    yRightAxisTitle: 'Y2 Axis',
+    barDatasets: [
+      {
+        type: 'bar',
+        label: 'Bar Label 1',
+        data: [10, 20, 30, 40],
+        borderColor: 'rgb(255, 99, 132)',
+        backgroundColor: 'rgba(255, 99, 132, 0.2)'
+      }
+    ],
+    lineDatasets: [
+      {
+        type: 'line',
+        label: 'Line Label 1',
+        data: [5, 15, 20, 25],
+        borderColor: 'rgb(54, 162, 235)'
+      }
+    ],
+    labels: ['Label 1', 'Label 2', 'Label 3', 'Label 4']
+  }
+} satisfies Story;
+
+export const Multiple_Data = {
+  args: {
+    width: '500px',
+    height: '400px',
+    tooltipFirstLineLabel: 'content',
+    tooltipSecondLineLabel: 'content2',
+    disableAccessibility: false,
+    newPatternsOrder: [0, 1, 0, 1, 2, 3],
+    colourSet: 0,
+    lineUnit: '€',
+    barDatasets: [
+      {
+        type: 'bar',
+        label: 'Bar Label 1',
+        data: [10, 20, 30, 40],
+        borderColor: 'rgb(255, 99, 132)',
+        backgroundColor: 'rgba(255, 99, 132, 0.2)'
+      },
+      {
+        type: 'bar',
+        label: 'Bar Label 2',
+        data: [20, 20, 30, 40],
+        borderColor: 'rgb(255, 99, 132)',
+        backgroundColor: 'rgba(255, 99, 132, 0.2)'
+      }
+    ],
+    lineDatasets: [
+      {
+        type: 'line',
+        label: 'Line Label 1',
+        data: [50, 150, 20, 250],
+        borderColor: 'rgb(54, 162, 235)'
+      },
+      {
+        type: 'line',
+        label: 'Line Label 2',
+        data: [1, 8, 6, 24],
+        borderColor: 'rgb(54, 162, 235)'
+      }
+    ],
+    labels: ['Label 1', 'Label 2', 'Label 3', 'Label 4']
+  }
+} satisfies Story;

package/src/components/mixed/MixedBarLineChart.vue

@@ -0,0 +1,413 @@
+<template>
+  <div class="container">
+    <div class="main">
+      <Bar
+        v-if="chartData"
+        ref="mixedBarLineChartRef"
+        :id="chartId"
+        :data="chartData"
+        :options="options"
+        :plugins="htmlLegendPlugin"
+        :class="cssClasses"
+        :style="[{ width, height, cursor: 'pointer' }, styles]"
+      />
+    </div>
+    <div ref="legendContainer" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, ref, watch, PropType } from 'vue';
+import { Bar } from 'vue-chartjs';
+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,
+  LineElement,
+  PointElement,
+  Plugin
+} from 'chart.js';
+import { MixedBarLineData } from '../../types/MixedBarLineData';
+import ChartDesign from '../../services/patterns/ChartDesign';
+import mixedBarLineFunctions from '../../services/MixedBarLineFunctions';
+
+ChartJS.register(
+  Title,
+  Tooltip,
+  Legend,
+  BarElement,
+  CategoryScale,
+  LinearScale,
+  LineElement,
+  PointElement
+);
+
+const { privateGetHtmlLegendPlugin, getMixedDatasets } =
+  mixedBarLineFunctions();
+
+const { colourSets, patternsStandardList } = ChartDesign();
+
+const legendContainer = ref(null);
+const selectMode = ref(false);
+const mixedBarLineDataProps = defineProps({
+  /**
+   * Value of the id attribute present on the <canvas> tag element the chart
+   */
+  chartId: {
+    type: String,
+    default: 'mixed-bar-line-chart'
+  },
+  /**
+   * Unit of values on canvas Y axis
+   */
+  unit: {
+    type: String,
+    default: ''
+  },
+  /**
+   * Labels used to label the index axis (default x axes). See [Data structures documentation](https://www.chartjs.org/docs/latest/general/data-structures.html)
+   */
+  labels: {
+    type: Array as PropType<string[]>,
+    default: () => []
+  },
+  /**
+   * Used to choose the colour set of the charts as defined in the Figma prototypes.
+   * 7 colour sets are currently defined:
+   * - Default 0 corresponds to the current one
+   * - 1 to 6 corresponds to the "new" [colour sets](https://www.figma.com/file/Hn6PyvnR385Ta0XN3KqOI9/04.-Dataviz---Documentation-(read-only)?type=design&node-id=1-69316&mode=design&t=sDytQ5BipsryWkuA-0)
+   * Note: All the sets are defined in /src/services/patterns/ChartDesign.ts
+   */
+  colourSet: {
+    type: Number,
+    default: 0
+  },
+  /**
+   * 6 patterns exist and are not randomly given but follow the order defined in [patternsStandardList](/src/services/patterns/ChartDesign.ts)
+   * Additionally, a pattern has only one possible colour per colour set as defined in the Figma prototype.
+   * In some use cases, the chart may need to show a different orders of these patterns, this can be changed using the props newPatternsOrder
+   */
+  newPatternsOrder: {
+    type: Array as PropType<number[]>,
+    default: () => [0, 1, 2, 3, 4, 5]
+  },
+  /**
+   * Value of the `bar datasets` key present in the `data` object passed to the Chart config
+   */
+  barDatasets: {
+    type: Array as PropType<MixedBarLineData[]>,
+    default: () => []
+  },
+  /**
+   * Unit of the  `bar datasets`
+   */
+  barUnit: {
+    type: String,
+    default: ''
+  },
+  /**
+   * Value of the `line datasets` key present in the `data` object passed to the Chart config
+   */
+  lineDatasets: {
+    type: Array as PropType<MixedBarLineData[]>,
+    default: () => []
+  },
+  /**
+   * Unit of the  `line datasets`
+   */
+  lineUnit: {
+    type: String,
+    default: ''
+  },
+  /**
+   * Value of the `width` css property used to define the width of the <canvas> element
+   */
+  width: {
+    type: String,
+    default: '400px'
+  },
+  /**
+   * Value of the `height` css property used to define the height of the <canvas> element
+   */
+  height: {
+    type: String,
+    default: '300px'
+  },
+  /**
+   * Add custom CSS classes to the <canvas> element
+   */
+  cssClasses: {
+    type: String,
+    default: undefined
+  },
+  /**
+   * Add custom CSS styles to the <canvas> element
+   */
+  styles: {
+    type: Object as PropType<Partial<CSSStyleDeclaration>>,
+    default: () => {}
+  },
+  /**
+   * Value of the `plugins` key passed to the Chart config
+   */
+  plugins: {
+    type: Array as PropType<Plugin<'bar'>[]>,
+    default: () => []
+  },
+  /**
+   * Activates "stacked" mode
+   */
+  stacked: {
+    type: Boolean,
+    default: false
+  },
+  /**
+   * Disable accessibility patterns
+   */
+  disableAccessibility: {
+    type: Boolean,
+    default: false
+  },
+  /**
+   * Label of the first line in the Tooltip
+   */
+  tooltipFirstLineLabel: {
+    type: String,
+    default: 'content'
+  },
+  /**
+   * Label of the second line in the Tooltip
+   */
+  tooltipSecondLineLabel: {
+    type: String,
+    default: 'content2'
+  },
+  /**
+   * Title of the x axis
+   */
+  xAxisTitle: {
+    type: String,
+    default: null
+  },
+  /**
+   * Title of the y left axis
+   */
+  yLeftAxisTitle: {
+    type: String,
+    default: null
+  },
+  /**
+   * Title of the y right axis
+   */
+  yRightAxisTitle: {
+    type: String,
+    default: null
+  }
+});
+
+const chartDatasets = computed(() => {
+  let datasets: MixedBarLineData[] = [];
+  if (mixedBarLineDataProps.barDatasets) {
+    datasets = datasets.concat(mixedBarLineDataProps.barDatasets);
+  }
+  if (mixedBarLineDataProps.lineDatasets) {
+    datasets = datasets.concat(mixedBarLineDataProps.lineDatasets);
+  }
+  return datasets;
+});
+
+// computed to make the colors list reactive to the props
+const patternsColors = computed(() => {
+  return mixedBarLineDataProps.newPatternsOrder.length !==
+    patternsStandardList.length
+    ? colourSets[mixedBarLineDataProps.colourSet]
+    : mixedBarLineDataProps.newPatternsOrder.map((id) => {
+        return colourSets[mixedBarLineDataProps.colourSet][id];
+      });
+});
+
+// computed to make the patterns list reactive to the props
+const patternsOrderedList = computed(() => {
+  return mixedBarLineDataProps.newPatternsOrder.length !==
+    patternsStandardList.length
+    ? patternsStandardList
+    : mixedBarLineDataProps.newPatternsOrder.map((id) => {
+        return patternsStandardList[id];
+      });
+});
+
+const disablePattern = computed(() => {
+  return mixedBarLineDataProps.disableAccessibility;
+});
+
+const chartData = computed(() => {
+  const chartsLabels = getChartLabels();
+  return {
+    labels: chartsLabels,
+    datasets: getMixedDatasets(
+      chartDatasets.value,
+      disablePattern.value,
+      patternsColors.value,
+      patternsOrderedList.value,
+      0
+    )
+  };
+});
+
+const getTooltipData = (context: Context) => {
+  const datasetIndex = context.tooltip.dataPoints[0].datasetIndex as number;
+  const dataIndex = context.tooltip.dataPoints[0].dataIndex as number;
+  const rawdata: number = chartDatasets.value[datasetIndex].data[dataIndex];
+  const amountUnit =
+    chartDatasets.value[datasetIndex].type === 'bar'
+      ? mixedBarLineDataProps.barUnit
+      : mixedBarLineDataProps.lineUnit;
+  const data =
+    amountUnit === '%'
+      ? parseFloat(rawdata.toString().replace(',', '.')).toFixed(2)
+      : formatWithThousandsSeprators(rawdata);
+  return data + amountUnit;
+};
+
+const getChartLabels = () => {
+  const labels = Object.assign([], mixedBarLineDataProps.labels);
+
+  return labels.map((label: string) => label);
+};
+
+const options = computed(() => ({
+  type: 'bar',
+  responsive: true,
+  maintainAspectRatio: true,
+  maxBarThickness: 64,
+  categoryPercentage: 0.6,
+  elements: {
+    bar: {
+      borderSkipped: false
+    }
+  },
+  plugins: {
+    legend: {
+      display: false
+    },
+    title: {
+      display: false
+    },
+    datalabels: {
+      display: false
+    },
+    tooltip: {
+      enabled: false,
+      external: function (context: Context) {
+        new GenericTooltipService().createTooltip(
+          context,
+          getTooltipData,
+          {
+            chartType: TooltipChartType.MIXED_BAR_LINE_CHART,
+            firstLineLabel: mixedBarLineDataProps.tooltipFirstLineLabel,
+            secondLineLabel: mixedBarLineDataProps.tooltipSecondLineLabel
+          },
+          patternsColors.value,
+          patternsOrderedList.value,
+          mixedBarLineDataProps.disableAccessibility
+        );
+      }
+    }
+  },
+  scales: {
+    x: {
+      offset: true,
+      title: {
+        display: mixedBarLineDataProps.xAxisTitle !== null,
+        text: mixedBarLineDataProps.xAxisTitle
+      }
+    },
+    A: {
+      type: 'linear' as const,
+      display: true,
+      position: 'left' as const,
+      grid: {
+        drawOnChartArea: true
+      },
+      title: {
+        display: mixedBarLineDataProps.yLeftAxisTitle !== null,
+        text: mixedBarLineDataProps.yLeftAxisTitle
+      },
+      ticks: {
+        callback: function (val: string | number) {
+          return mixedBarLineDataProps.barUnit === '%'
+            ? formatTicks(val as number, mixedBarLineDataProps.unit)
+            : formatWithThousandsSeprators(val as number) +
+                ' ' +
+                mixedBarLineDataProps.barUnit;
+        }
+      }
+    },
+    B: {
+      type: 'linear' as const,
+      display: true,
+      position: 'right' as const,
+      grid: {
+        drawOnChartArea: false
+      },
+      title: {
+        display: mixedBarLineDataProps.yRightAxisTitle !== null,
+        text: mixedBarLineDataProps.yRightAxisTitle
+      },
+      ticks: {
+        callback: function (val: string | number) {
+          return (
+            (mixedBarLineDataProps.lineUnit === '%'
+              ? formatTicks(val as number, mixedBarLineDataProps.unit)
+              : formatWithThousandsSeprators(val as number)) +
+            ' ' +
+            mixedBarLineDataProps.lineUnit
+          );
+        }
+      }
+    }
+  }
+}));
+
+const htmlLegendPlugin = ref(
+  privateGetHtmlLegendPlugin(
+    legendContainer,
+    selectMode,
+    disablePattern,
+    patternsColors,
+    patternsOrderedList
+  )
+);
+</script>
+
+<style lang="scss">
+@import 'settings-tools/all-settings';
+@import 'components/c.checkbox';
+</style>
+
+<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>

package/src/components/mixed/index.ts

@@ -0,0 +1,8 @@
+import type { App } from 'vue';
+import MixedBarLineChart from './MixedBarLineChart.vue';
+
+MixedBarLineChart.install = (app: App) => {
+  app.component('MixedBarLineChart', MixedBarLineChart);
+};
+
+export { MixedBarLineChart };