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

package/src/components/line/LineChart.vue

@@ -34,7 +34,7 @@ import {
   createLegendElementWithSquareArea,
   getOrCreateLegendList,
   createLegendCheckbox,
-  switchItemVisibility,
+  switchItemVisibility
 } from '../../services/ChartsCommonLegend';
 
 import {
@@ -46,7 +46,7 @@ import {
   PointElement,
   Title,
   Tooltip,
-  Plugin,
+  Plugin
 } from 'chart.js';
 
 ChartJS.register(
@@ -69,42 +69,42 @@ const lineDataProps = defineProps({
    */
   chartId: {
     type: String,
-    default: 'radar-chart',
+    default: 'radar-chart'
   },
   /**
    * Label of the first line in the Tooltip
    */
   tooltipFirstLineLabel: {
     type: String,
-    default: 'content',
+    default: 'content'
   },
   /**
    * Label of the second line in the Tooltip
    */
   tooltipSecondLineLabel: {
     type: String,
-    default: 'content2',
+    default: 'content2'
   },
   /**
    * Value of the `width` css property used to define the width of the <canvas> element
    */
   width: {
     type: String,
-    default: '200px',
+    default: '200px'
   },
   /**
    * Value of the `height` css property used to define the height of the <canvas> element
    */
   height: {
     type: String,
-    default: '400px',
+    default: '400px'
   },
   /**
    * Disable accessibility patterns
    */
   disableAccessibility: {
     type: Boolean,
-    default: false,
+    default: false
   },
   /**
    * Used to choose the colour set of the charts as defined in the Figma prototypes.
@@ -115,7 +115,7 @@ const lineDataProps = defineProps({
    */
   colourSet: {
     type: Number,
-    default: 0,
+    default: 0
   },
   /**
    * 6 patterns exist and are not randomly given but follow the order defined in [patternsStandardList](/src/services/patterns/ChartDesign.ts)
@@ -124,71 +124,71 @@ const lineDataProps = defineProps({
    */
   newPatternsOrder: {
     type: Array as PropType<number[]>,
-    default: () => [0, 1, 2, 3, 4, 5],
+    default: () => [0, 1, 2, 3, 4, 5]
   },
   /**
    * Line data _(can contain `label`, `data` and `unit` keys)_
    */
   lines: {
     type: Array as PropType<LineData[]>,
-    default: () => {},
+    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: () => [],
+    default: () => []
   },
   /**
    * X axis title
    */
-   xAxisTitle: {
+  xAxisTitle: {
     type: String,
-    default: null,
+    default: null
   },
   /**
    * Y axis title
    */
-   yAxisTitle: {
+  yAxisTitle: {
     type: String,
-    default: null,
+    default: null
   },
   /**
    * Adjustment used when calculating the minimum data value.
    */
   suggestedMin: {
     type: Number,
-    default: undefined,
+    default: undefined
   },
   /**
    * Adjustment used when calculating the maximum data value.
    */
   suggestedMax: {
     type: Number,
-    default: undefined,
+    default: undefined
   },
   /**
    * Add custom CSS classes to the <canvas> element
    */
   cssClasses: {
     type: String,
-    default: undefined,
+    default: undefined
   },
   /**
    * Add custom CSS styles to the <canvas> element
    */
   styles: {
     type: Object as PropType<Partial<CSSStyleDeclaration>>,
-    default: () => {},
+    default: () => {}
   },
   /**
    * Value of the `plugins` key passed to the Chart config
    */
   plugins: {
     type: Array as PropType<Plugin<'line'>[]>,
-    default: () => [],
-  },
+    default: () => []
+  }
 });
 
 const patternsColors = computed(() =>
@@ -226,28 +226,27 @@ const tooltipSecondLine = computed(() => {
 const getLinePointStyle = (index: number) => {
   switch (index) {
     case 1:
-      return 'circle'
+      return 'circle';
     default:
-      return 'rectRot'
+      return 'rectRot';
   }
-}
+};
 
 const chartData = computed(() => {
   return {
     labels: lineDataProps.labels.map((label: string) => label),
-    datasets: lineDataProps.lines.map((line: any, index) => 
-      {
-        return {  type: 'line' as const,
-          borderColor: patternsColors.value[index],
-          pointStyle: getLinePointStyle(index),
-          pointBackgroundColor: '#FFFFFF',
-          pointRadius: 5,
-          label: line.label,
-          data: line.data,
-          borderWidth: 2,
-        }
-      }
-    ),
+    datasets: lineDataProps.lines.map((line: any, index) => {
+      return {
+        type: 'line' as const,
+        borderColor: patternsColors.value[index],
+        pointStyle: getLinePointStyle(index),
+        pointBackgroundColor: '#FFFFFF',
+        pointRadius: 5,
+        label: line.label,
+        data: line.data,
+        borderWidth: 2
+      };
+    })
   };
 });
 
@@ -282,13 +281,17 @@ function getHtmlLegendPlugin(legendContainer: Ref, selectMode: Ref) {
           li.appendChild(createHtmlLegendItemText(item));
           ul.appendChild(li);
         });
-      },
-    },
+      }
+    }
   ];
 }
 
 function createLegendElementWithCheckbox(chart: any, item: ChartItem) {
-  const liContent = createLegendCheckbox(chart, item, null as unknown as string[]);
+  const liContent = createLegendCheckbox(
+    chart,
+    item,
+    null as unknown as string[]
+  );
   liContent.onclick = (e: Event) => {
     switchItemVisibility(chart, item.datasetIndex, selectMode);
     e.stopPropagation();
@@ -303,7 +306,7 @@ const options = computed(() => ({
   maintainAspectRatio: false,
   plugins: {
     legend: {
-      display: false,
+      display: false
     },
     datalabels: {
       display: false
@@ -317,14 +320,14 @@ const options = computed(() => ({
           {
             chartType: TooltipChartType.LINE_CHART,
             firstLineLabel: tooltipFirstLine.value,
-            secondLineLabel: tooltipSecondLine.value,
+            secondLineLabel: tooltipSecondLine.value
           },
           patternsColors.value,
           patternsOrderedList,
           lineDataProps.disableAccessibility
         );
-      },
-    },
+      }
+    }
   },
   scales: {
     x: {
@@ -332,7 +335,7 @@ const options = computed(() => ({
       title: {
         display: lineDataProps.xAxisTitle !== null,
         text: lineDataProps.xAxisTitle
-      },
+      }
     },
     y: {
       type: 'linear' as const,
@@ -345,7 +348,7 @@ const options = computed(() => ({
       suggestedMax: lineDataProps.suggestedMax,
       position: 'left' as const,
       grid: {
-        drawOnChartArea: true,
+        drawOnChartArea: true
       },
       ticks: {
         callback: function (val: number | string) {
@@ -353,10 +356,10 @@ const options = computed(() => ({
           return `${formatWithThousandsSeprators(val as number)} ${
             unit ? unit : ''
           }`;
-        },
-      },
-    },
-  },
+        }
+      }
+    }
+  }
 }));
 </script>
 

package/src/components/line/index.ts

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

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

@@ -5,7 +5,7 @@ import MixedBarLineChart from './MixedBarLineChart.vue';
 
 const meta = {
   title: 'Charts/MixedBarLine',
-  component: MixedBarLineChart,
+  component: MixedBarLineChart
 } satisfies Meta<typeof MixedBarLineChart>;
 
 export default meta;
@@ -31,19 +31,19 @@ export const Default = {
         label: 'Bar Label 1',
         data: [10, 20, 30, 40],
         borderColor: 'rgb(255, 99, 132)',
-        backgroundColor: 'rgba(255, 99, 132, 0.2)',
-      },
+        backgroundColor: 'rgba(255, 99, 132, 0.2)'
+      }
     ],
     lineDatasets: [
       {
         type: 'line',
         label: 'Line Label 1',
         data: [5, 15, 20, 25],
-        borderColor: 'rgb(54, 162, 235)',
-      },
+        borderColor: 'rgb(54, 162, 235)'
+      }
     ],
-    labels: ['Label 1', 'Label 2', 'Label 3', 'Label 4'],
-  },
+    labels: ['Label 1', 'Label 2', 'Label 3', 'Label 4']
+  }
 } satisfies Story;
 
 export const Multiple_Data = {
@@ -62,30 +62,30 @@ export const Multiple_Data = {
         label: 'Bar Label 1',
         data: [10, 20, 30, 40],
         borderColor: 'rgb(255, 99, 132)',
-        backgroundColor: 'rgba(255, 99, 132, 0.2)',
+        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)',
-      },
+        backgroundColor: 'rgba(255, 99, 132, 0.2)'
+      }
     ],
     lineDatasets: [
       {
         type: 'line',
         label: 'Line Label 1',
         data: [50, 150, 20, 250],
-        borderColor: 'rgb(54, 162, 235)',
+        borderColor: 'rgb(54, 162, 235)'
       },
       {
         type: 'line',
         label: 'Line Label 2',
         data: [1, 8, 6, 24],
-        borderColor: 'rgb(54, 162, 235)',
-      },
+        borderColor: 'rgb(54, 162, 235)'
+      }
     ],
-    labels: ['Label 1', 'Label 2', 'Label 3', 'Label 4'],
-  },
+    labels: ['Label 1', 'Label 2', 'Label 3', 'Label 4']
+  }
 } satisfies Story;

package/src/components/mixed/MixedBarLineChart.vue

@@ -24,7 +24,7 @@ import { GenericTooltipService } from '../../services/GenericTooltipService';
 import { TooltipChartType } from '../../types/TooltipChartType';
 import {
   formatTicks,
-  formatWithThousandsSeprators,
+  formatWithThousandsSeprators
 } from '../../services/FormatUtilities';
 import {
   BarElement,
@@ -36,7 +36,7 @@ import {
   Tooltip,
   LineElement,
   PointElement,
-  Plugin,
+  Plugin
 } from 'chart.js';
 import { MixedBarLineData } from '../../types/MixedBarLineData';
 import ChartDesign from '../../services/patterns/ChartDesign';
@@ -66,21 +66,21 @@ const mixedBarLineDataProps = defineProps({
    */
   chartId: {
     type: String,
-    default: 'mixed-bar-line-chart',
+    default: 'mixed-bar-line-chart'
   },
   /**
    * Unit of values on canvas Y axis
    */
   unit: {
     type: String,
-    default: '',
+    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: () => [],
+    default: () => []
   },
   /**
    * Used to choose the colour set of the charts as defined in the Figma prototypes.
@@ -91,7 +91,7 @@ const mixedBarLineDataProps = defineProps({
    */
   colourSet: {
     type: Number,
-    default: 0,
+    default: 0
   },
   /**
    * 6 patterns exist and are not randomly given but follow the order defined in [patternsStandardList](/src/services/patterns/ChartDesign.ts)
@@ -100,120 +100,120 @@ const mixedBarLineDataProps = defineProps({
    */
   newPatternsOrder: {
     type: Array as PropType<number[]>,
-    default: () => [0, 1, 2, 3, 4, 5],
+    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: () => [],
+    default: () => []
   },
   /**
    * Unit of the  `bar datasets`
    */
   barUnit: {
     type: String,
-    default: '',
+    default: ''
   },
   /**
    * Value of the `line datasets` key present in the `data` object passed to the Chart config
    */
   lineDatasets: {
     type: Array as PropType<MixedBarLineData[]>,
-    default: () => [],
+    default: () => []
   },
   /**
    * Unit of the  `line datasets`
    */
   lineUnit: {
     type: String,
-    default: '',
+    default: ''
   },
   /**
    * Value of the `width` css property used to define the width of the <canvas> element
    */
   width: {
     type: String,
-    default: '400px',
+    default: '400px'
   },
   /**
    * Value of the `height` css property used to define the height of the <canvas> element
    */
   height: {
     type: String,
-    default: '300px',
+    default: '300px'
   },
   /**
    * Add custom CSS classes to the <canvas> element
    */
   cssClasses: {
     type: String,
-    default: undefined,
+    default: undefined
   },
   /**
    * Add custom CSS styles to the <canvas> element
    */
   styles: {
     type: Object as PropType<Partial<CSSStyleDeclaration>>,
-    default: () => {},
+    default: () => {}
   },
   /**
    * Value of the `plugins` key passed to the Chart config
    */
   plugins: {
     type: Array as PropType<Plugin<'bar'>[]>,
-    default: () => [],
+    default: () => []
   },
   /**
    * Activates "stacked" mode
    */
   stacked: {
     type: Boolean,
-    default: false,
+    default: false
   },
   /**
    * Disable accessibility patterns
    */
   disableAccessibility: {
     type: Boolean,
-    default: false,
+    default: false
   },
   /**
    * Label of the first line in the Tooltip
    */
   tooltipFirstLineLabel: {
     type: String,
-    default: 'content',
+    default: 'content'
   },
   /**
    * Label of the second line in the Tooltip
    */
   tooltipSecondLineLabel: {
     type: String,
-    default: 'content2',
+    default: 'content2'
   },
   /**
    * Title of the x axis
    */
   xAxisTitle: {
     type: String,
-    default: null,
+    default: null
   },
   /**
    * Title of the y left axis
    */
   yLeftAxisTitle: {
     type: String,
-    default: null,
+    default: null
   },
   /**
    * Title of the y right axis
    */
   yRightAxisTitle: {
     type: String,
-    default: null,
-  },
+    default: null
+  }
 });
 
 const chartDatasets = computed(() => {
@@ -261,7 +261,7 @@ const chartData = computed(() => {
       patternsColors.value,
       patternsOrderedList.value,
       0
-    ),
+    )
   };
 });
 
@@ -294,15 +294,15 @@ const options = computed(() => ({
   categoryPercentage: 0.6,
   elements: {
     bar: {
-      borderSkipped: false,
-    },
+      borderSkipped: false
+    }
   },
   plugins: {
     legend: {
-      display: false,
+      display: false
     },
     title: {
-      display: false,
+      display: false
     },
     datalabels: {
       display: false
@@ -316,33 +316,33 @@ const options = computed(() => ({
           {
             chartType: TooltipChartType.MIXED_BAR_LINE_CHART,
             firstLineLabel: mixedBarLineDataProps.tooltipFirstLineLabel,
-            secondLineLabel: mixedBarLineDataProps.tooltipSecondLineLabel,
+            secondLineLabel: mixedBarLineDataProps.tooltipSecondLineLabel
           },
           patternsColors.value,
           patternsOrderedList.value,
           mixedBarLineDataProps.disableAccessibility
         );
-      },
-    },
+      }
+    }
   },
   scales: {
     x: {
       offset: true,
       title: {
         display: mixedBarLineDataProps.xAxisTitle !== null,
-        text: mixedBarLineDataProps.xAxisTitle,
-      },
+        text: mixedBarLineDataProps.xAxisTitle
+      }
     },
     A: {
       type: 'linear' as const,
       display: true,
       position: 'left' as const,
       grid: {
-        drawOnChartArea: true,
+        drawOnChartArea: true
       },
       title: {
         display: mixedBarLineDataProps.yLeftAxisTitle !== null,
-        text: mixedBarLineDataProps.yLeftAxisTitle,
+        text: mixedBarLineDataProps.yLeftAxisTitle
       },
       ticks: {
         callback: function (val: string | number) {
@@ -351,19 +351,19 @@ const options = computed(() => ({
             : formatWithThousandsSeprators(val as number) +
                 ' ' +
                 mixedBarLineDataProps.barUnit;
-        },
-      },
+        }
+      }
     },
     B: {
       type: 'linear' as const,
       display: true,
       position: 'right' as const,
       grid: {
-        drawOnChartArea: false,
+        drawOnChartArea: false
       },
       title: {
         display: mixedBarLineDataProps.yRightAxisTitle !== null,
-        text: mixedBarLineDataProps.yRightAxisTitle,
+        text: mixedBarLineDataProps.yRightAxisTitle
       },
       ticks: {
         callback: function (val: string | number) {
@@ -374,10 +374,10 @@ const options = computed(() => ({
             ' ' +
             mixedBarLineDataProps.lineUnit
           );
-        },
-      },
-    },
-  },
+        }
+      }
+    }
+  }
 }));
 
 const htmlLegendPlugin = ref(

package/src/components/mixed/index.ts

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