@mozaic-ds/chart 0.1.0-beta.0 → 0.1.0-beta.10

package/src/components/line/LineChart.vue

@@ -1,180 +1,265 @@
 <template>
   <div class="container">
     <div class="main">
-        <Line
-            v-if="chartData"
-            ref="cockpitLineChartRef"
-            :data="chartData"
-            :options="options"
-            :plugins='htmlLegendPlugin'
-            :chart-id='chartId'
-            :cssClasses:='cssClasses'
-            :styles='styles'
-            :style='{ width, height, cursor:"pointer"}'
-        />
-      </div>
-      <div ref="legendContainer" />
+      <Line
+        v-if="chartData"
+        ref="lineChartRef"
+        :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 type { Ref } from 'vue';
-  import { computed, ref, PropType } from 'vue';
-  import { Line } from 'vue-chartjs';
-  import { LineData } from '../../types/LineChart';
-  import { GenericTooltipService } from '../../services/GenericTooltipService';
-  import type { Context } from '../../services/GenericTooltipService';
-  import { TooltipChartType } from '../../types/TooltipChartType';
-  import { formatTicks } from '../../services/FormatUtilities';
-  import type { ChartItem } from '../../services/ChartsCommonLegend';
-  
-  import {
-    createHtmlLegendItemText,
-    createHtmlLegendListElement,
-    createLegendElementWithSquareArea,
-    getOrCreateLegendList,
-    createLegendCheckbox,
-    switchItemVisibility
-  } from '../../services/ChartsCommonLegend';
-  
-  import {
-    CategoryScale,
-    Chart as ChartJS,
-    Legend,
-    LinearScale,
-    LineElement,
-    PointElement,
-    Title,
-    Tooltip,
-    Plugin
-  } from 'chart.js';
-  
-  ChartJS.register(
-    Title,
-    Tooltip,
-    Legend,
-    PointElement,
-    LineElement,
-    CategoryScale,
-    LinearScale
-  );
-  
-  const legendContainer = ref(null);
-  const selectMode = ref(false);
-  const lineDataProps = defineProps({
-    chartId: {
-        type: String,
-        default: 'radar-chart',
-    },
-    rawTitle: {
-      type: String,
-      default: 'sales',
-    },
-    width: {
-      type: String,
-      default: '200px',
-    },
-    height: {
-      type: String,
-      default: '400px',
-    },
-    lines: {
-        type: Array as PropType<LineData[]>,
-        default: () => {},
-    },
-    labels: {
-        type: Array as PropType<string[]>,
-        default: () => []
-    },
-    cssClasses: {
-        default: '',
-        type: String,
-    },
-    styles: {
-        type: Object as PropType<Partial<CSSStyleDeclaration>>,
-        default: () => {},
-    },
-    plugins: {
-        type: Array as PropType<Plugin<'line'>[]>,
-        default: () => [],
-    },
-})
-  
-  const getTooltipData = (context: Context) => {
-    const datasetIndex = context.tooltip.dataPoints[0].datasetIndex;
-    const dataIndex = context.tooltip.dataPoints[0].dataIndex;
-    if (!dataIndex || !datasetIndex) {
-        return '';
-    }
-    const formattedValue = lineDataProps.lines[datasetIndex].data[dataIndex].toFixed(2);
-    return lineDataProps.lines[datasetIndex].unit ? formattedValue +
-      ' ' + lineDataProps.lines[datasetIndex].unit
-      : formattedValue;
+</template>
+
+<script setup lang="ts">
+import type { Ref } from 'vue';
+import { computed, ref, PropType } from 'vue';
+import { Line } from 'vue-chartjs';
+import { LineData } from '../../types/LineChart';
+import { GenericTooltipService } from '../../services/GenericTooltipService';
+import type { Context } from '../../services/GenericTooltipService';
+import { TooltipChartType } from '../../types/TooltipChartType';
+import { formatWithThousandsSeprators } from '../../services/FormatUtilities';
+import type { ChartItem } from '../../services/ChartsCommonLegend';
+import ChartDesign from '../../services/patterns/ChartDesign';
+
+import {
+  createHtmlLegendItemText,
+  createHtmlLegendListElement,
+  createLegendElementWithSquareArea,
+  getOrCreateLegendList,
+  createLegendCheckbox,
+  switchItemVisibility,
+} from '../../services/ChartsCommonLegend';
+
+import {
+  CategoryScale,
+  Chart as ChartJS,
+  Legend,
+  LinearScale,
+  LineElement,
+  PointElement,
+  Title,
+  Tooltip,
+  Plugin,
+} from 'chart.js';
+
+ChartJS.register(
+  Title,
+  Tooltip,
+  Legend,
+  PointElement,
+  LineElement,
+  CategoryScale,
+  LinearScale
+);
+
+const { colourSets, patternsStandardList } = ChartDesign();
+
+const legendContainer = ref(null);
+const selectMode = ref(false);
+const lineDataProps = defineProps({
+  /**
+   * Value of the id attribute present on the <canvas> tag element the chart
+   */
+  chartId: {
+    type: String,
+    default: 'radar-chart',
+  },
+  /**
+   * 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',
+  },
+  /**
+   * Value of the `width` css property used to define the width of the <canvas> element
+   */
+  width: {
+    type: String,
+    default: '200px',
+  },
+  /**
+   * Value of the `height` css property used to define the height of the <canvas> element
+   */
+  height: {
+    type: String,
+    default: '400px',
+  },
+  /**
+   * Disable accessibility patterns
+   */
+  disableAccessibility: {
+    type: Boolean,
+    default: false,
+  },
+  /**
+   * 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],
+  },
+  /**
+   * Line data _(can contain `label`, `data` and `unit` keys)_
+   */
+  lines: {
+    type: Array as PropType<LineData[]>,
+    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: () => [],
+  },
+  /**
+   * 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<'line'>[]>,
+    default: () => [],
+  },
+});
+
+const patternsColors = computed(() =>
+  lineDataProps.newPatternsOrder.length !== 6
+    ? colourSets[lineDataProps.colourSet]
+    : lineDataProps.newPatternsOrder.map((id) => {
+        return colourSets[lineDataProps.colourSet][id];
+      })
+);
+
+const patternsOrderedList =
+  lineDataProps.newPatternsOrder.length !== 6
+    ? patternsStandardList
+    : lineDataProps.newPatternsOrder.map((id) => {
+        return patternsStandardList[id];
+      });
+
+const getTooltipData = (context: Context) => {
+  const datasetIndex = context.tooltip.dataPoints[0].datasetIndex as number;
+  const dataIndex = context.tooltip.dataPoints[0].dataIndex as number;
+  const formattedValue =
+    lineDataProps.lines[datasetIndex].data[dataIndex].toFixed(2);
+  return lineDataProps.lines[datasetIndex].unit
+    ? formattedValue + ' ' + lineDataProps.lines[datasetIndex].unit
+    : formattedValue;
+};
+
+const tooltipFirstLine = computed(() => {
+  return lineDataProps.tooltipFirstLineLabel;
+});
+const tooltipSecondLine = computed(() => {
+  return lineDataProps.tooltipSecondLineLabel;
+});
+
+const chartData = computed(() => {
+  return {
+    labels: lineDataProps.labels.map((label: string) => label),
+    datasets: [
+      {
+        type: 'line' as const,
+        borderColor: patternsColors.value[0],
+        pointStyle: 'rectRot',
+        pointBackgroundColor: '#FFFFFF',
+        pointRadius: 5,
+        label: lineDataProps.lines[0].label,
+        data: lineDataProps.lines[0].data,
+        borderWidth: 2,
+      },
+      {
+        type: 'line' as const,
+        borderColor: patternsColors.value[1],
+        pointStyle: 'circle',
+        pointBackgroundColor: '#FFFFFF',
+        pointRadius: 5,
+        label: lineDataProps.lines[1].label,
+        data: lineDataProps.lines[1].data,
+        borderWidth: 2,
+      },
+    ],
   };
-  
-  const tooltipFirstLine = 'months';
-  const tooltipValueAttribute = computed(() => {
-    return lineDataProps.rawTitle;
-  });
-  
-  const chartData = computed(() => {
-    return {
-      labels: lineDataProps.labels.map((label: string) => label),
-      datasets: [
-        {
-          type: 'line' as const,
-          borderColor: '#605F9D',
-          pointStyle: 'rectRot',
-          pointBackgroundColor: '#FFFFFF',
-          pointRadius: 5,
-          label: lineDataProps.lines[0].label,
-          data: lineDataProps.lines[0].data,
-          borderWidth: 2
-        },
-        {
-          type: 'line' as const,
-          borderColor: '#00919F',
-          pointStyle: 'circle',
-          pointBackgroundColor: '#FFFFFF',
-          pointRadius: 5,
-          label: lineDataProps.lines[1].label,
-          data: lineDataProps.lines[1].data,
-          borderWidth: 2
-        }
-      ]
-    };
-  });
-  
-  function getHtmlLegendPlugin(legendContainer: Ref, selectMode: Ref) {
-    return [{
+});
+
+function getHtmlLegendPlugin(legendContainer: Ref, selectMode: Ref) {
+  return [
+    {
       id: 'htmlLegend',
-      afterUpdate (chart: any) {
+      afterUpdate(chart: any) {
         const ul = getOrCreateLegendList(legendContainer, 'column');
         ul.style.display = 'flex';
         ul.style.flexDirection = 'row';
+        ul.style.margin = '1.375rem 1.0625rem';
         while (ul.firstChild) {
           ul.firstChild.remove();
         }
         const items = chart.options.plugins.legend.labels.generateLabels(chart);
         items.forEach((item: ChartItem) => {
-            const li = createHtmlLegendListElement(chart, selectMode, item.datasetIndex);
-            let liContent: HTMLElement;
-            if (!selectMode.value) {
-                liContent = createLegendElementWithSquareArea(item);
-              } else {
-                liContent = createLegendElementWithCheckbox(chart, item);
-              }
-            li.style.marginRight = '10px';
-            li.appendChild(liContent);
-            li.appendChild(createHtmlLegendItemText(item));
-            ul.appendChild(li);
+          const li = createHtmlLegendListElement(
+            chart,
+            selectMode,
+            item.datasetIndex
+          );
+          let liContent: HTMLElement;
+          if (!selectMode.value) {
+            liContent = createLegendElementWithSquareArea(item, null);
+          } else {
+            liContent = createLegendElementWithCheckbox(chart, item);
+          }
+          liContent.style.boxSizing = 'border-box';
+          li.style.marginRight = '10px';
+          li.appendChild(liContent);
+          li.appendChild(createHtmlLegendItemText(item));
+          ul.appendChild(li);
         });
-      }
-    }];
-  }
+      },
+    },
+  ];
+}
 
-  function createLegendElementWithCheckbox (chart: any, item: ChartItem) {
+function createLegendElementWithCheckbox(chart: any, item: ChartItem) {
   const liContent = createLegendCheckbox(chart, item);
   liContent.onclick = (e: Event) => {
     switchItemVisibility(chart, item.datasetIndex, selectMode);
@@ -182,64 +267,70 @@
   };
   return liContent;
 }
-  
-  const htmlLegendPlugin = getHtmlLegendPlugin(legendContainer, selectMode);
-  
-  const options = computed(() => ({
-    responsive: true,
-    maintainAspectRatio: true,
-    plugins: {
-      legend: {
-        display: false
+
+const htmlLegendPlugin = getHtmlLegendPlugin(legendContainer, selectMode);
+
+const options = computed(() => ({
+  responsive: true,
+  maintainAspectRatio: false,
+  plugins: {
+    legend: {
+      display: false,
+    },
+    tooltip: {
+      enabled: false,
+      external: function (context: Context) {
+        new GenericTooltipService().createTooltip(
+          context,
+          getTooltipData,
+          {
+            chartType: TooltipChartType.LINE_CHART,
+            firstLineLabel: tooltipFirstLine.value,
+            secondLineLabel: tooltipSecondLine.value,
+          },
+          patternsColors.value,
+          patternsOrderedList,
+          lineDataProps.disableAccessibility
+        );
       },
-      tooltip: {
-        enabled: false,
-        external: function (context: Context) {
-          new GenericTooltipService().createTooltip(
-            context,
-            getTooltipData,
-            {
-              chartType: TooltipChartType.LINE_CHART,
-              firstLineLabel: tooltipFirstLine,
-              secondLineLabel: tooltipValueAttribute.value
-            }
-          );
-        }
-      }
     },
-    scales: {
-      y: {
-        type: 'linear' as const,
-        display: true,
-        position: 'left' as const,
-        grid: {
-          drawOnChartArea: true
+  },
+  scales: {
+    x: {
+      offset: true,
+    },
+    y: {
+      type: 'linear' as const,
+      display: true,
+      position: 'left' as const,
+      grid: {
+        drawOnChartArea: true,
+      },
+      ticks: {
+        callback: function (val: number | string) {
+          const unit = lineDataProps.lines[0].unit;
+          return `${formatWithThousandsSeprators(val as number)} ${
+            unit ? unit : ''
+          }`;
         },
-        ticks: {
-          callback: function (val: number | string) {
-            const unit = lineDataProps.lines[0].unit;
-            return formatTicks(val as number, unit ? unit : null);
-          },
-          maxTicksLimit: 8,
-        }
-      }
-    }
-  }));
-  </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>
-  
+      },
+    },
+  },
+}));
+</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>

package/src/components/line/index.ts

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

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

@@ -0,0 +1,87 @@
+// 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,
+    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'],
+    unit: '%',
+  },
+} 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,
+    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: [5, 15, 20, 25],
+        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'],
+    unit: '%',
+  },
+} satisfies Story;